[WEB-4050] feat: breadcrumbs revamp (#7188)

* chore: project feature enum added * feat: revamp breadcrumb and add navigation dropdown component * chore: custom search select component refactoring * chore: breadcrumb stories added * chore: switch label and breadcrumb link component refactor * chore: project navigation helper function added * chore: common breadcrumb component added * chore: breadcrumb refactoring * chore: code refactor * chore: code refactor * fix: build error * fix: nprogress and button tooltip * chore: code refactor * chore: workspace view breadcrumb improvements * chore: code refactor * chore: code refactor * chore: code refactor * chore: code refactor --------- Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>
2025-06-19 17:17:14 +05:30 · 2025-06-19 17:17:14 +05:30 · 2b7a17b484
commit 2b7a17b484
parent 64fd0b2830
44 changed files with 1251 additions and 581 deletions
--- a/web/ce/components/breadcrumbs/common.tsx
+++ b/web/ce/components/breadcrumbs/common.tsx
@ -0,0 +1,32 @@
+"use client";
+
+import { FC } from "react";
+// plane imports
+import { EProjectFeatureKey } from "@plane/constants";
+// local components
+import { ProjectFeatureBreadcrumb } from "./project-feature";
+import { ProjectBreadcrumb } from "./project";
+
+type TCommonProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  featureKey?: EProjectFeatureKey;
+  isLast?: boolean;
+};
+
+export const CommonProjectBreadcrumbs: FC<TCommonProjectBreadcrumbProps> = (props) => {
+  const { workspaceSlug, projectId, featureKey, isLast = false } = props;
+  return (
+    <>
+      <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />
+      {featureKey && (
+        <ProjectFeatureBreadcrumb
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          featureKey={featureKey}
+          isLast={isLast}
+        />
+      )}
+    </>
+  );
+};
--- a/web/ce/components/breadcrumbs/index.ts
+++ b/web/ce/components/breadcrumbs/index.ts
@ -1 +1,3 @@
+export * from "./common";
+export * from "./project-feature";
 export * from "./project";
--- a/web/ce/components/breadcrumbs/project-feature.tsx
+++ b/web/ce/components/breadcrumbs/project-feature.tsx
@ -0,0 +1,69 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+// ui
+import { EProjectFeatureKey } from "@plane/constants";
+import { BreadcrumbNavigationDropdown, Breadcrumbs, ISvgIcons } from "@plane/ui";
+// components
+import { SwitcherLabel } from "@/components/common";
+import { TNavigationItem } from "@/components/workspace";
+// hooks
+import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local components
+import { getProjectFeatureNavigation } from "../projects/navigation";
+
+type TProjectFeatureBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  featureKey: EProjectFeatureKey;
+  isLast?: boolean;
+  additionalNavigationItems?: TNavigationItem[];
+};
+
+export const ProjectFeatureBreadcrumb = observer((props: TProjectFeatureBreadcrumbProps) => {
+  const { workspaceSlug, projectId, featureKey, isLast = false, additionalNavigationItems } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { getPartialProjectById } = useProject();
+  // derived values
+  const project = getPartialProjectById(projectId);
+
+  if (!project) return null;
+
+  const navigationItems = getProjectFeatureNavigation(workspaceSlug, projectId, project);
+
+  // if additional navigation items are provided, add them to the navigation items
+  const allNavigationItems = [...(additionalNavigationItems || []), ...navigationItems];
+
+  return (
+    <>
+      <Breadcrumbs.Item
+        component={
+          <BreadcrumbNavigationDropdown
+            selectedItemKey={featureKey}
+            navigationItems={allNavigationItems
+              .filter((item) => item.shouldRender)
+              .map((item) => ({
+                key: item.key,
+                title: item.name,
+                customContent: <SwitcherLabel name={item.name} LabelIcon={item.icon as FC<ISvgIcons>} />,
+                action: () => router.push(item.href),
+                icon: item.icon as FC<ISvgIcons>,
+              }))}
+            handleOnClick={() => {
+              router.push(
+                `/${workspaceSlug}/projects/${projectId}/${featureKey === EProjectFeatureKey.WORK_ITEMS ? "issues" : featureKey}/`
+              );
+            }}
+            isLast={isLast}
+          />
+        }
+        showSeparator={false}
+        isLast={isLast}
+      />
+    </>
+  );
+});
--- a/web/ce/components/breadcrumbs/project.tsx
+++ b/web/ce/components/breadcrumbs/project.tsx
@ -2,38 +2,73 @@

 import { observer } from "mobx-react";
 import { Briefcase } from "lucide-react";
-// ui
-import { Breadcrumbs, Logo } from "@plane/ui";
+// plane imports
+import { ICustomSearchSelectOption } from "@plane/types";
+import { BreadcrumbNavigationSearchDropdown, Breadcrumbs, Logo } from "@plane/ui";
 // components
-import { BreadcrumbLink } from "@/components/common";
+import { SwitcherLabel } from "@/components/common";
 // hooks
 import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { TProject } from "@/plane-web/types";

-export const ProjectBreadcrumb = observer(() => {
+type TProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  handleOnClick?: () => void;
+};
+
+export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
+  const { workspaceSlug, projectId, handleOnClick } = props;
+  // router
+  const router = useAppRouter();
  // store hooks
-  const { currentProjectDetails } = useProject();
+  const { joinedProjectIds, getPartialProjectById } = useProject();
+  const currentProjectDetails = getPartialProjectById(projectId);
+
+  // store hooks
+
+  if (!currentProjectDetails) return null;
+
+  // derived values
+  const switcherOptions = joinedProjectIds
+    .map((projectId) => {
+      const project = getPartialProjectById(projectId);
+      return {
+        value: projectId,
+        query: project?.name,
+        content: <SwitcherLabel name={project?.name} logo_props={project?.logo_props} LabelIcon={Briefcase} />,
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  // helpers
+  const renderIcon = (projectDetails: TProject) => (
+    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+      <Logo logo={projectDetails.logo_props} size={14} />
+    </span>
+  );

  return (
-    <Breadcrumbs.BreadcrumbItem
-      type="text"
-      link={
-        <BreadcrumbLink
-          label={currentProjectDetails?.name ?? "Project"}
-          icon={
-            currentProjectDetails ? (
-              currentProjectDetails && (
-                <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                  <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                </span>
-              )
-            ) : (
-              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                <Briefcase className="h-4 w-4" />
-              </span>
-            )
-          }
-        />
-      }
-    />
+    <>
+      <Breadcrumbs.Item
+        component={
+          <BreadcrumbNavigationSearchDropdown
+            selectedItem={currentProjectDetails.id}
+            navigationItems={switcherOptions}
+            onChange={(value: string) => {
+              router.push(`/${workspaceSlug}/projects/${value}/issues`);
+            }}
+            title={currentProjectDetails?.name}
+            icon={renderIcon(currentProjectDetails)}
+            handleOnClick={() => {
+              if (handleOnClick) handleOnClick();
+              else router.push(`/${workspaceSlug}/projects/${currentProjectDetails.id}/issues/`);
+            }}
+          />
+        }
+        showSeparator={false}
+      />
+    </>
  );
 });
--- a/web/ce/components/issues/header.tsx
+++ b/web/ce/components/issues/header.tsx
@ -4,13 +4,20 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { Circle, ExternalLink } from "lucide-react";
-import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel, SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
+import {
+  EIssuesStoreType,
+  EProjectFeatureKey,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  SPACE_BASE_PATH,
+  SPACE_BASE_URL,
+} from "@plane/constants";
 // plane constants
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui";
+import { Breadcrumbs, Button, Tooltip, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink, CountChip } from "@/components/common";
+import { CountChip } from "@/components/common";
 // constants
 import HeaderFilters from "@/components/issues/filters";
 // helpers
@ -20,7 +27,7 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web
-import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
+import { CommonProjectBreadcrumbs } from "../breadcrumbs/common";

 export const IssuesHeader = observer(() => {
  // router
@ -52,18 +59,13 @@ export const IssuesHeader = observer(() => {
  return (
    <Header>
      <Header.LeftItem>
-        <div className="flex items-center gap-2.5">
-          <Breadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"}>
-            <ProjectBreadcrumb />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={t("issue.label", { count: 2 })} // count is for pluralization
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+        <div className="flex items-center gap-2.5 flex-grow">
+          <Breadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"} className="flex-grow-0">
+            <CommonProjectBreadcrumbs
+              workspaceSlug={workspaceSlug?.toString()}
+              projectId={projectId?.toString()}
+              featureKey={EProjectFeatureKey.WORK_ITEMS}
+              isLast
            />
          </Breadcrumbs>
          {issuesCount && issuesCount > 0 ? (
--- a/web/ce/components/projects/navigation/helper.tsx
+++ b/web/ce/components/projects/navigation/helper.tsx
@ -0,0 +1,77 @@
+import { FileText, Layers } from "lucide-react";
+import { EUserPermissions, EProjectFeatureKey } from "@plane/constants";
+import { ContrastIcon, DiceIcon, Intake, LayersIcon } from "@plane/ui";
+import { TNavigationItem } from "@/components/workspace";
+
+export const getProjectFeatureNavigation = (
+  workspaceSlug: string,
+  projectId: string,
+  project: {
+    cycle_view: boolean;
+    module_view: boolean;
+    issue_views_view: boolean;
+    page_view: boolean;
+    inbox_view: boolean;
+  }
+): TNavigationItem[] => [
+  {
+    i18n_key: "sidebar.work_items",
+    key: EProjectFeatureKey.WORK_ITEMS,
+    name: "Work items",
+    href: `/${workspaceSlug}/projects/${projectId}/issues`,
+    icon: LayersIcon,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    shouldRender: true,
+    sortOrder: 1,
+  },
+  {
+    i18n_key: "sidebar.cycles",
+    key: EProjectFeatureKey.CYCLES,
+    name: "Cycles",
+    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+    icon: ContrastIcon,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    shouldRender: project.cycle_view,
+    sortOrder: 2,
+  },
+  {
+    i18n_key: "sidebar.modules",
+    key: EProjectFeatureKey.MODULES,
+    name: "Modules",
+    href: `/${workspaceSlug}/projects/${projectId}/modules`,
+    icon: DiceIcon,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    shouldRender: project.module_view,
+    sortOrder: 3,
+  },
+  {
+    i18n_key: "sidebar.views",
+    key: EProjectFeatureKey.VIEWS,
+    name: "Views",
+    href: `/${workspaceSlug}/projects/${projectId}/views`,
+    icon: Layers,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    shouldRender: project.issue_views_view,
+    sortOrder: 4,
+  },
+  {
+    i18n_key: "sidebar.pages",
+    key: EProjectFeatureKey.PAGES,
+    name: "Pages",
+    href: `/${workspaceSlug}/projects/${projectId}/pages`,
+    icon: FileText,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    shouldRender: project.page_view,
+    sortOrder: 5,
+  },
+  {
+    i18n_key: "sidebar.intake",
+    key: EProjectFeatureKey.INTAKE,
+    name: "Intake",
+    href: `/${workspaceSlug}/projects/${projectId}/intake`,
+    icon: Intake,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    shouldRender: project.inbox_view,
+    sortOrder: 6,
+  },
+];
--- a/web/ce/components/projects/navigation/index.ts
+++ b/web/ce/components/projects/navigation/index.ts
@ -0,0 +1 @@
+export * from "./helper";
--- a/web/ce/components/projects/settings/intake/header.tsx
+++ b/web/ce/components/projects/settings/intake/header.tsx
@ -5,16 +5,15 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 // ui
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs, Button, Intake, Header } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink } from "@/components/common";
 import { InboxIssueCreateModalRoot } from "@/components/inbox";
 // hooks
 import { useProject, useProjectInbox, useUserPermissions } from "@/hooks/store";
 // plane web
-import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs";

 export const ProjectInboxHeader: FC = observer(() => {
  // states
@ -37,13 +36,13 @@ export const ProjectInboxHeader: FC = observer(() => {
  return (
    <Header>
      <Header.LeftItem>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-grow border">
          <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
-            <ProjectBreadcrumb />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label={t("intake")} icon={<Intake className="h-4 w-4 text-custom-text-300" />} />}
+            <CommonProjectBreadcrumbs
+              workspaceSlug={workspaceSlug?.toString() ?? ""}
+              projectId={projectId?.toString() ?? ""}
+              featureKey={EProjectFeatureKey.INTAKE}
+              isLast
            />
          </Breadcrumbs>