From 571d35cd8b9ddd58534536c526e9bf30e93e8606 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 24 May 2024 14:20:56 +0530
Subject: [PATCH] chore: fix breadcrumbs inconsistency. (#4574)

---
 web/components/headers/project-inbox.tsx      |  2 +-
 web/components/headers/project-settings.tsx   | 22 ++++++------
 web/components/headers/workspace-settings.tsx | 22 +++++-------
 .../[projectId]/settings/automations.tsx      |  2 +-
 .../[projectId]/settings/estimates.tsx        |  2 +-
 .../[projectId]/settings/features.tsx         |  2 +-
 .../projects/[projectId]/settings/index.tsx   |  2 +-
 .../projects/[projectId]/settings/labels.tsx  |  2 +-
 .../projects/[projectId]/settings/members.tsx |  2 +-
 .../projects/[projectId]/settings/states.tsx  |  2 +-
 .../[workspaceSlug]/settings/api-tokens.tsx   |  2 +-
 .../[workspaceSlug]/settings/billing.tsx      |  2 +-
 .../[workspaceSlug]/settings/exports.tsx      |  2 +-
 .../[workspaceSlug]/settings/imports.tsx      | 24 ++++++-------
 web/pages/[workspaceSlug]/settings/index.tsx  |  2 +-
 .../[workspaceSlug]/settings/integrations.tsx | 34 +++++++++----------
 .../[workspaceSlug]/settings/members.tsx      |  2 +-
 .../settings/webhooks/[webhookId].tsx         |  2 +-
 .../settings/webhooks/index.tsx               |  2 +-
 19 files changed, 62 insertions(+), 70 deletions(-)

diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index d61e2492d..082720358 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -46,7 +46,7 @@ export const ProjectInboxHeader: FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink label="Inbox" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
               }
             />
           </Breadcrumbs>
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index f25bfe804..36b9cd247 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -2,22 +2,17 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // ui
+import { Settings } from "lucide-react";
 import { Breadcrumbs, CustomMenu } from "@plane/ui";
-// helper
+// components
 import { BreadcrumbLink } from "@/components/common";
 import { ProjectLogo } from "@/components/project";
+// constants
 import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
 // hooks
 import { useProject, useUser } from "@/hooks/store";
-// constants
-// components
 
-export interface IProjectSettingHeader {
-  title: string;
-}
-
-export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props) => {
-  const { title } = props;
+export const ProjectSettingHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -52,7 +47,12 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
                 }
               />
               <div className="hidden sm:hidden md:block lg:block">
-                <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
+                <Breadcrumbs.BreadcrumbItem
+                  type="text"
+                  link={
+                    <BreadcrumbLink label="Settings" icon={<Settings className="h-4 w-4 text-custom-text-300" />} />
+                  }
+                />
               </div>
             </Breadcrumbs>
           </div>
@@ -62,7 +62,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
           maxHeight="lg"
           customButton={
             <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
-              {title}
+              Settings
             </span>
           }
           placement="bottom-start"
diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
index c73d06547..2d3e9649e 100644
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@@ -1,21 +1,15 @@
 import { FC } from "react";
-import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { observer } from "mobx-react";;
 import { Settings } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
+// hooks
+import { useWorkspace } from "@/hooks/store";
 
-export interface IWorkspaceSettingHeader {
-  title: string;
-}
-
-export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((props) => {
-  const { title } = props;
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
+export const WorkspaceSettingHeader: FC = observer(() => {
+  const { currentWorkspace } = useWorkspace();
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -26,13 +20,13 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
               type="text"
               link={
                 <BreadcrumbLink
-                  href={`/${workspaceSlug}/settings`}
-                  label="Settings"
+                  href={`/${currentWorkspace?.slug}/settings`}
+                  label={currentWorkspace?.name ?? "Workspace"}
                   icon={<Settings className="h-4 w-4 text-custom-text-300" />}
                 />
               }
             />
-            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
+            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
           </Breadcrumbs>
         </div>
       </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 0dfc55d02..060520faf 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -63,7 +63,7 @@ const AutomationSettingsPage: NextPageWithLayout = observer(() => {
 
 AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Automations Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 5872ed322..83bd4fd25 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -35,7 +35,7 @@ const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
 
 EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index a9bffc2e2..a55b58beb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -54,7 +54,7 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
 
 FeaturesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Features Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 9a9db7f51..b07be48a5 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -93,7 +93,7 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
 
 GeneralSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="General Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index cf13b6d25..5c2644305 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -45,7 +45,7 @@ const LabelsSettingsPage: NextPageWithLayout = observer(() => {
 
 LabelsSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Labels Settings" />}>
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader />}>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index dcc46ed2d..6d60c0e76 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -31,7 +31,7 @@ const MembersSettingsPage: NextPageWithLayout = observer(() => {
 
 MembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectSettingHeader title="Members Settings" />} withProjectWrapper>
+    <AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 19d1c0355..3a696cf8e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -32,7 +32,7 @@ const StatesSettingsPage: NextPageWithLayout = observer(() => {
 
 StatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="States Settings" />}>
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader />}>
       <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/api-tokens.tsx b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
index 87ef16219..464c5e373 100644
--- a/web/pages/[workspaceSlug]/settings/api-tokens.tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
@@ -99,7 +99,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
 
 ApiTokensPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="API Tokens" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index 4bfe4ac41..583a78b17 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -59,7 +59,7 @@ const BillingSettingsPage: NextPageWithLayout = observer(() => {
 
 BillingSettingsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index 9f462e665..730f34e49 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -50,7 +50,7 @@ const ExportsPage: NextPageWithLayout = observer(() => {
 
 ExportsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index d1f6573b4..2eda7cce2 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -1,17 +1,17 @@
 import { observer } from "mobx-react";
-// hooks
-import { PageHead } from "components/core";
-import { WorkspaceSettingHeader } from "components/headers";
-import IntegrationGuide from "components/integration/guide";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { useUser, useWorkspace } from "hooks/store";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
-// types
-import { NextPageWithLayout } from "lib/types";
+import { PageHead } from "@/components/core";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import IntegrationGuide from "@/components/integration/guide";
 // constants
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useUser, useWorkspace } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
 
 const ImportsPage: NextPageWithLayout = observer(() => {
   // store hooks
@@ -49,7 +49,7 @@ const ImportsPage: NextPageWithLayout = observer(() => {
 
 ImportsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index dcd8a710b..cbe92de61 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -28,7 +28,7 @@ const WorkspaceSettingsPage: NextPageWithLayout = observer(() => {
 
 WorkspaceSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="General Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index 9f06b92ee..702ca5884 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -2,25 +2,23 @@ import { ReactElement } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-// hooks
-// services
-// layouts
 // components
-import { PageHead } from "components/core";
-import { WorkspaceSettingHeader } from "components/headers";
-import { SingleIntegrationCard } from "components/integration";
-// ui
-import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "components/ui";
-// types
-// fetch-keys
-import { APP_INTEGRATIONS } from "constants/fetch-keys";
+import { PageHead } from "@/components/core";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { SingleIntegrationCard } from "@/components/integration";
+import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "@/components/ui";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { useUser, useWorkspace } from "hooks/store";
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-import { NextPageWithLayout } from "lib/types";
-import { IntegrationService } from "services/integrations";
+import { APP_INTEGRATIONS } from "@/constants/fetch-keys";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useUser, useWorkspace } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
+// services
+import { IntegrationService } from "@/services/integrations";
 
 const integrationService = new IntegrationService();
 
@@ -73,7 +71,7 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
 
 WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Integrations Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index e64a3e66f..e01528ddc 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -122,7 +122,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
 
 WorkspaceMembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
index c326588ac..71a16ea8b 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
@@ -107,7 +107,7 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
 
 WebhookDetailsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
index 05ac3a2b5..6046df7e1 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
@@ -102,7 +102,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
 
 WebhooksListPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
+    <AppLayout header={<WorkspaceSettingHeader />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );