From 9a32da945febb2e30e5649adb50a7afbd7963321 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 6 Jan 2025 20:45:40 +0530
Subject: [PATCH] [WEB-3040] chore: project breadcrumb link component added to
 CE and EE (#2113)

* chore: project breadcrumb link component added to CE and EE

* chore: project breadcrumb redirection improvement
---
 .../[projectId]/epics/(detail)/header.tsx     | 20 ++-----
 .../[projectId]/epics/(list)/header.tsx       | 29 ++--------
 web/ee/components/breadcrumbs/index.ts        |  2 +-
 web/ee/components/breadcrumbs/project.tsx     | 53 +++++++++++++++++++
 web/ee/components/issues/advanced-header.tsx  | 28 ++--------
 .../settings/intake/header/header.tsx         | 24 +++------
 6 files changed, 72 insertions(+), 84 deletions(-)
 create mode 100644 web/ee/components/breadcrumbs/project.tsx

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(detail)/header.tsx
index 6722f414da..16ceb4e8d6 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(detail)/header.tsx
@@ -11,7 +11,7 @@ import { TIssue } from "@plane/types";
 import { Breadcrumbs, Header, EpicIcon } from "@plane/ui";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@/ce/constants";
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -19,6 +19,7 @@ import { useAppTheme, useIssueDetail, useProject, useUserPermissions } from "@/h
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 // plane-web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { ProjectEpicQuickActions } from "@/plane-web/components/epics";
 
 export const ProjectEpicDetailsHeader = observer(() => {
@@ -64,22 +65,7 @@ export const ProjectEpicDetailsHeader = observer(() => {
       <Header.LeftItem>
         <div>
           <Breadcrumbs onBack={router.back} isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
+            <ProjectBreadcrumb />
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(list)/header.tsx
index 75eb029479..4c04622d53 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/epics/(list)/header.tsx
@@ -3,21 +3,20 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// icons
-import { Briefcase } from "lucide-react";
 // plane constants
 import { EIssuesStoreType } from "@plane/constants";
 // ui
 import { Breadcrumbs, Button, Tooltip, Header, EpicIcon } from "@plane/ui";
 // components
-import { BreadcrumbLink, CountChip, Logo } from "@/components/common";
+import { BreadcrumbLink, CountChip } from "@/components/common";
 import HeaderFilters from "@/components/issues/filters";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web constants
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { CreateUpdateEpicModal } from "@/plane-web/components/epics/epic-modal";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { useIssueTypes } from "@/plane-web/hooks/store";
@@ -58,27 +57,7 @@ export const EpicsHeader = observer(() => {
         <Header.LeftItem>
           <div className="flex items-center gap-2.5">
             <Breadcrumbs onBack={() => router.back()} isLoading={loader}>
-              <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>
-                      )
-                    }
-                  />
-                }
-              />
+              <ProjectBreadcrumb />
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={<BreadcrumbLink label="Epics" icon={<EpicIcon className="h-4 w-4 text-custom-text-300" />} />}
diff --git a/web/ee/components/breadcrumbs/index.ts b/web/ee/components/breadcrumbs/index.ts
index ae95faf6bd..9ff8c7dff4 100644
--- a/web/ee/components/breadcrumbs/index.ts
+++ b/web/ee/components/breadcrumbs/index.ts
@@ -1 +1 @@
-export * from "ce/components/breadcrumbs";
\ No newline at end of file
+export * from "./project";
diff --git a/web/ee/components/breadcrumbs/project.tsx b/web/ee/components/breadcrumbs/project.tsx
new file mode 100644
index 0000000000..5aee1aa82b
--- /dev/null
+++ b/web/ee/components/breadcrumbs/project.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Briefcase } from "lucide-react";
+// ui
+import { Breadcrumbs, Logo } from "@plane/ui";
+// components
+import { ProjectBreadcrumb as CEProjectBreadcrumb } from "@/ce/components/breadcrumbs";
+import { BreadcrumbLink } from "@/components/common";
+// hooks
+import { useProject } from "@/hooks/store";
+// local components
+import { WithFeatureFlagHOC } from "../feature-flags";
+
+export const ProjectBreadcrumb = observer(() => {
+  // router
+  const { workspaceSlug } = useParams() as { workspaceSlug: string };
+
+  // store hooks
+  const { currentProjectDetails } = useProject();
+
+  return (
+    <WithFeatureFlagHOC
+      workspaceSlug={workspaceSlug?.toString()}
+      flag="PROJECT_OVERVIEW"
+      fallback={<CEProjectBreadcrumb />}
+    >
+      <Breadcrumbs.BreadcrumbItem
+        type="text"
+        link={
+          <BreadcrumbLink
+            href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/overview`}
+            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>
+              )
+            }
+          />
+        }
+      />
+    </WithFeatureFlagHOC>
+  );
+});
diff --git a/web/ee/components/issues/advanced-header.tsx b/web/ee/components/issues/advanced-header.tsx
index e96c8ec92c..74f4c11e8f 100644
--- a/web/ee/components/issues/advanced-header.tsx
+++ b/web/ee/components/issues/advanced-header.tsx
@@ -4,13 +4,13 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 // icons
-import { Briefcase, Circle, ExternalLink } from "lucide-react";
+import { Circle, ExternalLink } from "lucide-react";
 // plane constants
 import { EIssuesStoreType } from "@plane/constants";
 // ui
 import { Breadcrumbs, Button, LayersIcon, Tooltip, Header, OverviewIcon } from "@plane/ui";
 // components
-import { BreadcrumbLink, CountChip, Logo } from "@/components/common";
+import { BreadcrumbLink, CountChip } from "@/components/common";
 // constants
 import HeaderFilters from "@/components/issues/filters";
 // helpers
@@ -20,6 +20,8 @@ import { useEventTracker, useProject, useCommandPalette, useUserPermissions } fr
 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 { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const AdvancedIssuesHeader = observer(() => {
@@ -52,27 +54,7 @@ export const AdvancedIssuesHeader = observer(() => {
       <Header.LeftItem>
         <div className="flex items-center gap-2.5">
           <Breadcrumbs onBack={() => router.back()} isLoading={loader}>
-            <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>
-                    )
-                  }
-                />
-              }
-            />
+            <ProjectBreadcrumb />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
diff --git a/web/ee/components/projects/settings/intake/header/header.tsx b/web/ee/components/projects/settings/intake/header/header.tsx
index 96d1fd20bf..85f51d1fa2 100644
--- a/web/ee/components/projects/settings/intake/header/header.tsx
+++ b/web/ee/components/projects/settings/intake/header/header.tsx
@@ -8,11 +8,14 @@ import { Info, RefreshCcw } from "lucide-react";
 // ui
 import { Breadcrumbs, Button, Intake, Header, Popover, Loader } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
-// hooks
+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 { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// local components
 import IntakeTooltip from "../intake-tooltip";
 
 export const IntakeHeader: FC = observer(() => {
@@ -48,22 +51,7 @@ export const IntakeHeader: FC = observer(() => {
       <Header.LeftItem>
         <div className="flex items-center gap-1">
           <Breadcrumbs isLoading={currentProjectDetailsLoader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
+            <ProjectBreadcrumb />
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={<BreadcrumbLink label="Intake" icon={<Intake className="h-4 w-4 text-custom-text-300" />} />}