chore: fix breadcrumbs inconsistency. (#4574)

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>

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 {
+export const ProjectSettingHeader: FC = observer(() => {
-  title: string;
-}
-
-export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props) => {
-  const { title } = props;
   // 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"

web/components/headers/workspace-settings.tsx

@@ -1,21 +1,15 @@
 import { FC } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react";;
-import { useRouter } from "next/router";
 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 {
+export const WorkspaceSettingHeader: FC = observer(() => {
-  title: string;
+  const { currentWorkspace } = useWorkspace();
-}
-
-export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((props) => {
-  const { title } = props;
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
 
   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`}
+                  href={`/${currentWorkspace?.slug}/settings`}
-                  label="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>

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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 { PageHead } from "@/components/core";
-import { NextPageWithLayout } from "lib/types";
+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>
   );

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>
   );

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 { PageHead } from "@/components/core";
-import { WorkspaceSettingHeader } from "components/headers";
+import { WorkspaceSettingHeader } from "@/components/headers";
-import { SingleIntegrationCard } from "components/integration";
+import { SingleIntegrationCard } from "@/components/integration";
-// ui
+import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "@/components/ui";
-import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "components/ui";
-// types
-// fetch-keys
-import { APP_INTEGRATIONS } from "constants/fetch-keys";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { APP_INTEGRATIONS } from "@/constants/fetch-keys";
-import { useUser, useWorkspace } from "hooks/store";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
-import { AppLayout } from "layouts/app-layout";
+// hooks
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { useUser, useWorkspace } from "@/hooks/store";
-import { NextPageWithLayout } from "lib/types";
+// layouts
-import { IntegrationService } from "services/integrations";
+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>
   );

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>
   );

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>
   );

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>
   );