From 8919b724c5bdf5eb33792b60e4eeaa018d1cac15 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Fri, 3 Nov 2023 18:01:49 +0530 Subject: [PATCH] chore: breadcrumbs ui revamp and refactor (#2634) --- packages/ui/src/breadcrumbs/breadcrumbs.tsx | 112 +++++++++++------- web/components/headers/cycle-issues.tsx | 79 +++++++----- web/components/headers/cycles.tsx | 35 ++++-- web/components/headers/global-issues.tsx | 21 +++- web/components/headers/module-issues.tsx | 78 +++++++----- web/components/headers/modules-list.tsx | 35 ++++-- web/components/headers/page-details.tsx | 92 ++++++++++++++ web/components/headers/pages.tsx | 44 ++++--- .../headers/profile-preferences.tsx | 29 ++--- .../project-archived-issue-details.tsx | 50 +++++--- .../headers/project-archived-issues.tsx | 41 ++++--- .../headers/project-draft-issues.tsx | 42 ++++--- web/components/headers/project-inbox.tsx | 42 ++++--- .../headers/project-issue-details.tsx | 48 +++++--- web/components/headers/project-issues.tsx | 50 +++++--- web/components/headers/project-settings.tsx | 30 +++-- .../headers/project-view-issues.tsx | 87 ++++++++------ web/components/headers/project-views.tsx | 44 ++++--- web/components/headers/projects.tsx | 18 ++- web/components/headers/user-profile.tsx | 23 +++- .../headers/workspace-analytics.tsx | 12 +- web/components/headers/workspace-settings.tsx | 35 ++---- .../profile/[userId]/assigned.tsx | 2 +- .../profile/[userId]/created.tsx | 2 +- .../profile/[userId]/index.tsx | 2 +- .../profile/[userId]/subscribed.tsx | 2 +- .../projects/[projectId]/pages/[pageId].tsx | 4 +- 27 files changed, 672 insertions(+), 387 deletions(-) create mode 100644 web/components/headers/page-details.tsx diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx index 41fe147395..94f3178255 100644 --- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx +++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx @@ -1,59 +1,81 @@ import * as React from "react"; // icons -import { MoveLeft } from "lucide-react"; +import { ChevronRight } from "lucide-react"; +// components +import { Tooltip } from "../tooltip"; type BreadcrumbsProps = { - onBack: () => void; children: any; }; -const Breadcrumbs = ({ onBack, children }: BreadcrumbsProps) => ( - <> -
- - {children} -
- -); - -type BreadcrumbItemProps = { - title?: string; - link?: JSX.Element; - icon?: any; - unshrinkTitle?: boolean; -}; - -const BreadcrumbItem: React.FC = ({ - title, - link, - icon, - unshrinkTitle = false, -}) => ( - <> - {link ? ( - link - ) : ( -
-

- {icon} - {title} -

+const Breadcrumbs = ({ children }: BreadcrumbsProps) => ( +
+ {React.Children.map(children, (child, index) => ( +
+ {child} + {index !== React.Children.count(children) - 1 && ( +
- )} - + ))} +
); +type Props = { + type?: "text" | "component"; + component?: React.ReactNode; + label?: string; + icon?: React.ReactNode; + link?: string; +}; +const BreadcrumbItem: React.FC = (props) => { + const { type = "text", component, label, icon, link } = props; + return ( + <> + {type != "text" ? ( +
{component}
+ ) : ( + +
  • +
    + {link ? ( + + {icon && ( +
    + {icon} +
    + )} +
    + {label} +
    +     + ) : ( +
    + {icon && ( +
    + {icon} +
    + )} +
    + {label} +
    +
    + )} +
    +
    • +     + )} + + ); +}; + Breadcrumbs.BreadcrumbItem = BreadcrumbItem; export { Breadcrumbs, BreadcrumbItem }; diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx index cfadc80aa8..4106f443b2 100644 --- a/web/components/headers/cycle-issues.tsx +++ b/web/components/headers/cycle-issues.tsx @@ -1,6 +1,5 @@ import { useCallback, useState } from "react"; import { useRouter } from "next/router"; -import Link from "next/link"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; @@ -10,11 +9,12 @@ import useLocalStorage from "hooks/use-local-storage"; import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; import { ProjectAnalyticsModal } from "components/analytics"; // ui -import { Breadcrumbs, Button, CustomMenu } from "@plane/ui"; +import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui"; // icons -import { ArrowRight, ContrastIcon, Plus } from "lucide-react"; +import { ArrowRight, Plus } from "lucide-react"; // helpers import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants @@ -32,6 +32,8 @@ export const CycleIssuesHeader: React.FC = observer(() => { cycleIssueFilter: cycleIssueFilterStore, project: projectStore, } = useMobxStore(); + const { currentProjectDetails } = projectStore; + const activeLayout = issueFilterStore.userDisplayFilters.layout; const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false"); @@ -110,36 +112,55 @@ export const CycleIssuesHeader: React.FC = observer(() => { />
    - router.back()}> + - -

    {`${truncateText(cycleDetails?.project_detail.name ?? "", 32)} Cycles`}

    -     - + type="text" + icon={ + currentProjectDetails?.emoji ? ( + renderEmoji(currentProjectDetails.emoji) + ) : currentProjectDetails?.icon_prop ? ( + renderEmoji(currentProjectDetails.icon_prop) + ) : ( + + {currentProjectDetails?.name.charAt(0)} + + ) + } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Cycles" + link={`/${workspaceSlug}/projects/${projectId}/cycles`} + /> + + + {cycleDetails?.name && truncateText(cycleDetails.name, 40)} + + } + className="ml-1.5 flex-shrink-0" + width="auto" + > + {cyclesList?.map((cycle) => ( + router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)} + > + {truncateText(cycle.name, 40)} + + ))} + } />     - - - {cycleDetails?.name && truncateText(cycleDetails.name, 40)} - - } - className="ml-1.5 flex-shrink-0" - width="auto" - > - {cyclesList?.map((cycle) => ( - router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)} - > - {truncateText(cycle.name, 40)} - - ))} -
    = (props) => { @@ -25,17 +25,28 @@ export const CyclesHeader: FC = (props) => { >
    - router.back()}> - - -

    Projects

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Cycles" /> -
    diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx index 43d615d84c..7c41ba327d 100644 --- a/web/components/headers/global-issues.tsx +++ b/web/components/headers/global-issues.tsx @@ -10,9 +10,9 @@ import { useMobxStore } from "lib/mobx/store-provider"; import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues"; import { CreateUpdateWorkspaceViewModal } from "components/workspace"; // ui -import { Button, Tooltip } from "@plane/ui"; +import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui"; // icons -import { CheckCircle, List, PlusIcon, Sheet } from "lucide-react"; +import { List, PlusIcon, Sheet } from "lucide-react"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types"; // constants @@ -99,9 +99,20 @@ export const GlobalIssuesHeader: React.FC = observer((props) => { <> setCreateViewModal(false)} />
    -
    - {activeLayout === "spreadsheet" && } - Workspace {activeLayout === "spreadsheet" ? "Issues" : "Views"} +
    + + + ) : ( + + ) + } + label={`Workspace ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`} + /> +
    diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx index 0fd143e617..42c01d5319 100644 --- a/web/components/headers/module-issues.tsx +++ b/web/components/headers/module-issues.tsx @@ -1,6 +1,5 @@ import { useCallback, useState } from "react"; import { useRouter } from "next/router"; -import Link from "next/link"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; @@ -10,11 +9,12 @@ import useLocalStorage from "hooks/use-local-storage"; import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; import { ProjectAnalyticsModal } from "components/analytics"; // ui -import { Breadcrumbs, Button, CustomMenu } from "@plane/ui"; +import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui"; // icons import { ArrowRight, ContrastIcon, Plus } from "lucide-react"; // helpers import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants @@ -33,6 +33,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => { project: projectStore, } = useMobxStore(); const activeLayout = issueFilterStore.userDisplayFilters.layout; + const { currentProjectDetails } = projectStore; const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false"); @@ -110,39 +111,54 @@ export const ModuleIssuesHeader: React.FC = observer(() => { />
    - router.back()}> + - -

    {`${truncateText( - moduleDetails?.project_detail.name ?? "", - 32 - )} Modules`}

    -     - + type="text" + icon={ + currentProjectDetails?.emoji ? ( + renderEmoji(currentProjectDetails.emoji) + ) : currentProjectDetails?.icon_prop ? ( + renderEmoji(currentProjectDetails.icon_prop) + ) : ( + + {currentProjectDetails?.name.charAt(0)} + + ) + } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Modules" + link={`/${workspaceSlug}/projects/${projectId}/modules`} + /> + + + {moduleDetails?.name && truncateText(moduleDetails.name, 40)} + + } + className="ml-1.5 flex-shrink-0" + width="auto" + > + {modulesList?.map((module) => ( + router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)} + > + {truncateText(module.name, 40)} + + ))} + } />     - - - {moduleDetails?.name && truncateText(moduleDetails.name, 40)} - - } - className="ml-1.5 flex-shrink-0" - width="auto" - > - {modulesList?.map((module) => ( - router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)} - > - {truncateText(module.name, 40)} - - ))} -
    { >
    - router.back()}> - - -

    Projects

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Modules" /> -
    diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx new file mode 100644 index 0000000000..8b9fa433d8 --- /dev/null +++ b/web/components/headers/page-details.tsx @@ -0,0 +1,92 @@ +import { FC } from "react"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +import { FileText, Plus } from "lucide-react"; +// services +import { PageService } from "services/page.service"; + +// constants +import { PAGE_DETAILS } from "constants/fetch-keys"; + +// hooks +import { useMobxStore } from "lib/mobx/store-provider"; +// ui +import { Breadcrumbs, Button } from "@plane/ui"; +// helper +import { renderEmoji } from "helpers/emoji.helper"; + +import useSWR from "swr"; + +export interface IPagesHeaderProps { + showButton?: boolean; +} +const pageService = new PageService(); + +export const PageDetailsHeader: FC = observer((props) => { + const { showButton = false } = props; + const router = useRouter(); + const { workspaceSlug, pageId } = router.query; + + const { project: projectStore } = useMobxStore(); + const { currentProjectDetails } = projectStore; + + const { data: pageDetails } = useSWR( + workspaceSlug && currentProjectDetails?.id && pageId ? PAGE_DETAILS(pageId as string) : null, + workspaceSlug && currentProjectDetails?.id + ? () => pageService.getPageDetails(workspaceSlug as string, currentProjectDetails.id, pageId as string) + : null + ); + + return ( +
    +
    +
    + + + {currentProjectDetails?.name.charAt(0)} + + ) + } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Pages" + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`} + /> + } + label={pageDetails?.name ?? "Page"} + /> + +
    +
    + {showButton && ( +
    + +
    + )} +
    + ); +}); diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx index f30c03fbbd..634dd0c385 100644 --- a/web/components/headers/pages.tsx +++ b/web/components/headers/pages.tsx @@ -1,14 +1,13 @@ import { FC } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { Plus } from "lucide-react"; +import { FileText, Plus } from "lucide-react"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui -import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; +import { Breadcrumbs, Button } from "@plane/ui"; // helper -import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; export interface IPagesHeaderProps { showButton?: boolean; @@ -17,30 +16,37 @@ export interface IPagesHeaderProps { export const PagesHeader: FC = observer((props) => { const { showButton = false } = props; const router = useRouter(); - const { workspaceSlug, projectId } = router.query; + const { workspaceSlug } = router.query; const { project: projectStore } = useMobxStore(); - - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { currentProjectDetails } = projectStore; return (
    - router.back()}> - - -

    Projects

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Pages" /> -
    diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx index ae5ad88115..cde226fd7f 100644 --- a/web/components/headers/profile-preferences.tsx +++ b/web/components/headers/profile-preferences.tsx @@ -1,21 +1,16 @@ -import { useRouter } from "next/router"; // components -import { BreadcrumbItem, Breadcrumbs } from "@plane/ui"; +import { Breadcrumbs } from "@plane/ui"; -export const ProfilePreferencesHeader = () => { - const router = useRouter(); - - return ( -
    -
    -
    - router.back()}> - - -
    +export const ProfilePreferencesHeader = () => ( +
    +
    +
    + + +
    - ); -}; +
    +); diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx index 8c659431e8..be8b5cebe5 100644 --- a/web/components/headers/project-archived-issue-details.tsx +++ b/web/components/headers/project-archived-issue-details.tsx @@ -1,20 +1,19 @@ import { FC } from "react"; import useSWR from "swr"; -import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui -import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; -// helper -import { truncateText } from "helpers/string.helper"; +import { Breadcrumbs, LayersIcon } from "@plane/ui"; // types import { IIssue } from "types"; // constants import { ISSUE_DETAILS } from "constants/fetch-keys"; // services import { IssueArchiveService } from "services/issue"; +// helpers +import { renderEmoji } from "helpers/emoji.helper"; const issueArchiveService = new IssueArchiveService(); @@ -24,10 +23,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => { const { project: projectStore } = useMobxStore(); - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { currentProjectDetails } = projectStore; const { data: issueDetails } = useSWR( workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null, @@ -45,17 +41,35 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
    - router.back()}> - - -

    {`${truncateText( - issueDetails?.project_detail.name ?? "Project", - 32 - )} Issues`}

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) + } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects`} + /> - + } + label="Archived Issues" + link={`/${workspaceSlug}/projects/${projectId}/archived-issues`} + /> + +
    diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx index a40ab9e600..82dffa2c31 100644 --- a/web/components/headers/project-archived-issues.tsx +++ b/web/components/headers/project-archived-issues.tsx @@ -1,37 +1,48 @@ import { FC } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui -import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; +import { Breadcrumbs, LayersIcon } from "@plane/ui"; // helper -import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; export const ProjectArchivedIssuesHeader: FC = observer(() => { const router = useRouter(); - const { workspaceSlug, projectId } = router.query; + const { workspaceSlug } = router.query; const { project: projectStore } = useMobxStore(); - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { currentProjectDetails } = projectStore; return (
    - router.back()}> - - -

    Projects

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) + } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects`} + /> - + } + label="Archived Issues" + />
    diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx index 125dccadd4..0ab1603be7 100644 --- a/web/components/headers/project-draft-issues.tsx +++ b/web/components/headers/project-draft-issues.tsx @@ -1,41 +1,47 @@ import { FC } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui -import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; +import { Breadcrumbs, LayersIcon } from "@plane/ui"; // helper -import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; export const ProjectDraftIssueHeader: FC = observer(() => { const router = useRouter(); - const { workspaceSlug, projectId } = router.query; + const { workspaceSlug } = router.query; const { project: projectStore } = useMobxStore(); - - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { currentProjectDetails } = projectStore; return (
    - router.back()}> - - -

    Projects

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects`} /> - + } + label="Draft Issues" + />
    diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx index 20eb672119..5098c69b9f 100644 --- a/web/components/headers/project-inbox.tsx +++ b/web/components/headers/project-inbox.tsx @@ -1,44 +1,52 @@ import { FC, useState } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Plus } from "lucide-react"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui -import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; +import { Breadcrumbs, Button, LayersIcon } from "@plane/ui"; // components import { CreateInboxIssueModal } from "components/inbox"; // helper -import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; export const ProjectInboxHeader: FC = observer(() => { const router = useRouter(); - const { workspaceSlug, projectId } = router.query; + const { workspaceSlug } = router.query; const [createIssueModal, setCreateIssueModal] = useState(false); const { project: projectStore } = useMobxStore(); - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { currentProjectDetails } = projectStore; return (
    - router.back()}> - - -

    Projects

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects`} + /> + + } + label="Inbox Issues" /> -
    diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx index 2728919b28..9fce635757 100644 --- a/web/components/headers/project-issue-details.tsx +++ b/web/components/headers/project-issue-details.tsx @@ -1,17 +1,17 @@ import { FC } from "react"; import useSWR from "swr"; -import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // ui -import { Breadcrumbs } from "@plane/ui"; +import { Breadcrumbs, LayersIcon } from "@plane/ui"; // helper -import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; // services import { IssueService } from "services/issue"; // constants import { ISSUE_DETAILS } from "constants/fetch-keys"; +import { useMobxStore } from "lib/mobx/store-provider"; // services const issueService = new IssueService(); @@ -20,6 +20,10 @@ export const ProjectIssueDetailsHeader: FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; + const { project: projectStore } = useMobxStore(); + + const { currentProjectDetails } = projectStore; + const { data: issueDetails } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, workspaceSlug && projectId && issueId @@ -31,24 +35,34 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
    - router.back()}> + - -

    {`${truncateText( - issueDetails?.project_detail.name ?? "Project", - 32 - )} Issues`}

    -     - + type="text" + icon={ + currentProjectDetails?.emoji ? ( + renderEmoji(currentProjectDetails.emoji) + ) : currentProjectDetails?.icon_prop ? ( + renderEmoji(currentProjectDetails.icon_prop) + ) : ( + + {currentProjectDetails?.name.charAt(0)} + + ) } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects`} /> + } + label="Issues" + link={`/${workspaceSlug}/projects/${projectId}/issues`} + /> + +
    diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx index 55e44173a1..f9bf6ec589 100644 --- a/web/components/headers/project-issues.tsx +++ b/web/components/headers/project-issues.tsx @@ -9,13 +9,13 @@ import { useMobxStore } from "lib/mobx/store-provider"; import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; import { ProjectAnalyticsModal } from "components/analytics"; // ui -import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; +import { Breadcrumbs, Button, LayersIcon } from "@plane/ui"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; // helper -import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; export const ProjectIssuesHeader: React.FC = observer(() => { const [analyticsModal, setAnalyticsModal] = useState(false); @@ -85,11 +85,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => { }, [issueFilterStore, projectId, workspaceSlug] ); - - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { currentProjectDetails } = projectStore; const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined; @@ -100,7 +96,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => { setAnalyticsModal(false)} - projectDetails={projectDetails ?? undefined} + projectDetails={currentProjectDetails ?? undefined} />
    @@ -114,22 +110,38 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
    - router.back()}> - - -

    Projects

    -     - + + + {renderEmoji(currentProjectDetails.emoji)} + + ) : currentProjectDetails?.icon_prop ? ( +
    + {renderEmoji(currentProjectDetails.icon_prop)} +
    + ) : ( + + {currentProjectDetails?.name.charAt(0)} + + ) } + label={currentProjectDetails?.name ?? "Project"} + link={`/${workspaceSlug}/projects`} + /> + + } + label="Issues" /> -
    - {projectDetails?.is_deployed && deployUrl && ( + {currentProjectDetails?.is_deployed && deployUrl && ( = observer((props) >
    - router.back()}> - - -

    {`${truncateText(currentProjectDetails?.name ?? "Project", 32)}`}

    -     - + + + {currentProjectDetails?.name.charAt(0)} + + ) } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} /> - +
    diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx index 862b3b869e..50d97505c9 100644 --- a/web/components/headers/project-view-issues.tsx +++ b/web/components/headers/project-view-issues.tsx @@ -1,5 +1,4 @@ import { useCallback } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store @@ -7,9 +6,10 @@ import { useMobxStore } from "lib/mobx/store-provider"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; // ui -import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui"; +import { Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui"; // helpers import { truncateText } from "helpers/string.helper"; +import { renderEmoji } from "helpers/emoji.helper"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants @@ -26,6 +26,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => { projectViews: projectViewsStore, } = useMobxStore(); + const { currentProjectDetails } = projectStore; + const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined; const activeLayout = issueFilterStore.userDisplayFilters.layout; @@ -87,47 +89,64 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => { [issueFilterStore, projectId, workspaceSlug] ); - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; - const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined; const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined; return (
    - router.back()}> - - -

    {`${projectDetails?.name ?? "Project"} Views`}

    -     - + + + {renderEmoji(currentProjectDetails.emoji)} + + ) : currentProjectDetails?.icon_prop ? ( +
    + {renderEmoji(currentProjectDetails.icon_prop)} +
    + ) : ( + + {currentProjectDetails?.name.charAt(0)} + + ) + } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Views" + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`} + /> + + + {viewDetails?.name && truncateText(viewDetails.name, 40)} + + } + className="ml-1.5" + placement="bottom-start" + > + {viewsList?.map((view) => ( + router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)} + > + {truncateText(view.name, 40)} + + ))} + } />     - - - {viewDetails?.name && truncateText(viewDetails.name, 40)} - - } - className="ml-1.5" - placement="bottom-start" - > - {viewsList?.map((view) => ( - router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)} - > - {truncateText(view.name, 40)} - - ))} -
    { // router @@ -20,11 +19,7 @@ export const ProjectViewsHeader: React.FC = observer(() => { const [createViewModal, setCreateViewModal] = useState(false); const { project: projectStore } = useMobxStore(); - - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { currentProjectDetails } = projectStore; return ( <> @@ -41,17 +36,32 @@ export const ProjectViewsHeader: React.FC = observer(() => { >
    - router.back()}> - - -

    Projects

    -     - + + + {renderEmoji(currentProjectDetails.emoji)} + + ) : currentProjectDetails?.icon_prop ? ( +
    + {renderEmoji(currentProjectDetails.icon_prop)} +
    + ) : ( + + {currentProjectDetails?.name.charAt(0)} + + ) } + link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} + /> + } + label="Views" /> -
    diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx index 453eb38c85..3c56f239ea 100644 --- a/web/components/headers/projects.tsx +++ b/web/components/headers/projects.tsx @@ -1,9 +1,7 @@ import { useRouter } from "next/router"; -import { Search, Plus } from "lucide-react"; +import { Search, Plus, Briefcase } from "lucide-react"; // ui -import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui"; -// helper -import { truncateText } from "helpers/string.helper"; +import { Breadcrumbs, Button } from "@plane/ui"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; import { observer } from "mobx-react-lite"; @@ -13,8 +11,7 @@ export const ProjectsHeader = observer(() => { const { workspaceSlug } = router.query; // store - const { project: projectStore, workspace: workspaceStore } = useMobxStore(); - const currentWorkspace = workspaceStore.currentWorkspace; + const { project: projectStore } = useMobxStore(); const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : []; @@ -24,10 +21,11 @@ export const ProjectsHeader = observer(() => { >
    - router.back()}> - + } + label="Projects" />
    diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx index 870aa1b54b..70a3f40f5e 100644 --- a/web/components/headers/user-profile.tsx +++ b/web/components/headers/user-profile.tsx @@ -1,22 +1,35 @@ import { FC } from "react"; - import { useRouter } from "next/router"; // ui -import { BreadcrumbItem, Breadcrumbs } from "@plane/ui"; +import { Breadcrumbs } from "@plane/ui"; +import { UserCircle2 } from "lucide-react"; // hooks import { observer } from "mobx-react-lite"; -export const UserProfileHeader: FC = observer(() => { +export interface IUserProfileHeader { + title: string; +} + +export const UserProfileHeader: FC = observer((props) => { + const { title } = props; const router = useRouter(); + const { workspaceSlug } = router.query; + return (
    - router.back()}> - + + } + link={`/${workspaceSlug}/me/profile`} + /> +
    diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx index 5a9cf5d9af..ea1cde066a 100644 --- a/web/components/headers/workspace-analytics.tsx +++ b/web/components/headers/workspace-analytics.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; -import { ArrowLeft } from "lucide-react"; +import { ArrowLeft, BarChart2 } from "lucide-react"; // ui -import { BreadcrumbItem, Breadcrumbs } from "@plane/ui"; +import { Breadcrumbs } from "@plane/ui"; export const WorkspaceAnalyticsHeader = () => { const router = useRouter(); @@ -22,8 +22,12 @@ export const WorkspaceAnalyticsHeader = () => {
    - router.back()}> - + + } + label="Analytics" + />
    diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx index 87d06e2527..5dc1565529 100644 --- a/web/components/headers/workspace-settings.tsx +++ b/web/components/headers/workspace-settings.tsx @@ -1,21 +1,13 @@ import { FC } from "react"; -import useSWR from "swr"; import { useRouter } from "next/router"; -import Link from "next/link"; // ui -import { BreadcrumbItem, Breadcrumbs } from "@plane/ui"; +import { Breadcrumbs } from "@plane/ui"; +import { Settings } from "lucide-react"; + // hooks import { observer } from "mobx-react-lite"; -// services -import { WorkspaceService } from "services/workspace.service"; -// helpers -import { truncateText } from "helpers/string.helper"; -// constant -import { WORKSPACE_DETAILS } from "constants/fetch-keys"; - -const workspaceService = new WorkspaceService(); export interface IWorkspaceSettingHeader { title: string; @@ -27,27 +19,20 @@ export const WorkspaceSettingHeader: FC = observer((pro const { workspaceSlug } = router.query; - const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () => - workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null - ); - return (
    - router.back()}> - - -

    {`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}

    -     - - } + + } + link={`/${workspaceSlug}/settings`} /> - +
    diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx index 738aaecf0d..6d0c6e0d64 100644 --- a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx +++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx @@ -65,7 +65,7 @@ const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => { ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) { return ( - }> + }> {page} ); diff --git a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx index c8418043e7..7bf21edd99 100644 --- a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx +++ b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx @@ -61,7 +61,7 @@ const ProfileCreatedIssuesPage: NextPageWithLayout = () => { ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) { return ( - }> + }> {page} ); diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx index 9f55f1cd90..e5b70b1db8 100644 --- a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx +++ b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx @@ -56,7 +56,7 @@ const ProfileOverviewPage: NextPageWithLayout = () => { ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) { return ( - }> + }> {page} ); diff --git a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx index 6862b00b4c..8900fb3fd6 100644 --- a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx +++ b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx @@ -61,7 +61,7 @@ const ProfileSubscribedIssuesPage: NextPageWithLayout = () => { ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) { return ( - }> + }> {page} ); diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx index d8bd192757..e267e7d050 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx @@ -19,7 +19,7 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages"; import { CreateLabelModal } from "components/labels"; import { CreateBlock } from "components/pages/create-block"; -import { PagesHeader } from "components/headers"; +import { PageDetailsHeader } from "components/headers/page-details"; // ui import { EmptyState } from "components/common"; import { CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui"; @@ -626,7 +626,7 @@ const PageDetailsPage: NextPageWithLayout = () => { PageDetailsPage.getLayout = function getLayout(page: ReactElement) { return ( - } withProjectWrapper> + } withProjectWrapper> {page} );