makeplane · sriramveeraghanta · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+
+// icons
+import { MoveLeft } from "lucide-react";
+
+type BreadcrumbsProps = {
+  onBack: () => void;
+  children: any;
+};
+
+const Breadcrumbs = ({ onBack, children }: BreadcrumbsProps) => (
+  <>
+    <div className="flex w-full flex-grow items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
+      <button
+        type="button"
+        className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
+        onClick={onBack}
+      >
+        <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
+      </button>
+      {children}
+    </div>
+  </>
+);
+
+type BreadcrumbItemProps = {
+  title?: string;
+  link?: JSX.Element;
+  icon?: any;
+  unshrinkTitle?: boolean;
+};
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  title,
+  link,
+  icon,
+  unshrinkTitle = false,
+}) => (
+  <>
+    {link ? (
+      link
+    ) : (
+      <div
+        className={`truncate px-3 text-sm ${
+          unshrinkTitle ? "flex-shrink-0" : ""
+        }`}
+      >
+        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
+          {icon}
+          <span className="break-words">{title}</span>
+        </p>
+      </div>
+    )}
+  </>
+);
+
+Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
+
+export { Breadcrumbs, BreadcrumbItem };
diff --git a/packages/ui/src/breadcrumbs/index.tsx b/packages/ui/src/breadcrumbs/index.tsx
@@ -0,0 +1 @@
+export * from "./breadcrumbs";
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -5,3 +5,4 @@ export * from "./spinners";
 export * from "./loader";
 export * from "./tooltip";
 export * from "./icons";
+export * from "./breadcrumbs";
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
@@ -1,28 +1,28 @@
-import { FC } from "react";
+import * as React from "react";
+
 import { useRouter } from "next/router";
+import Link from "next/link";
 import { ArrowLeft, Plus } from "lucide-react";
-// components
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // ui
-import { Button } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 
 export interface ICyclesHeader {
   name: string | undefined;
 }
 
-export const CyclesHeader: FC<ICyclesHeader> = (props) => {
+export const CyclesHeader: React.FC<ICyclesHeader> = (props) => {
   const { name } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
     >
-      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="block md:hidden">
           <button
             type="button"
@@ -33,8 +33,16 @@ export const CyclesHeader: FC<ICyclesHeader> = (props) => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <Breadcrumbs onBack={() => router.back()}>
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
             <BreadcrumbItem title={`${truncateText(name ?? "Project", 32)} Cycles`} />
           </Breadcrumbs>
         </div>

diff --git a/web/components/headers/modules.tsx b/web/components/headers/modules.tsx
@@ -1,10 +1,10 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
 import { ArrowLeft, Plus } from "lucide-react";
 // components
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // ui
-import { Button, Tooltip } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
 import { Icon } from "components/ui";
 // helper
 import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
@@ -34,9 +34,9 @@ export const ModulesHeader: FC<IModulesHeader> = (props) => {
 
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
     >
-      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="block md:hidden">
           <button
             type="button"
@@ -47,9 +47,17 @@ export const ModulesHeader: FC<IModulesHeader> = (props) => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem title={`${truncateText(name ?? "Project", 32)} Cycles`} />
+          <Breadcrumbs onBack={() => router.back()}>
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
+            <BreadcrumbItem title={`${truncateText(name ?? "Project", 32)} Modules`} />
           </Breadcrumbs>
         </div>
       </div>
@@ -62,7 +70,7 @@ export const ModulesHeader: FC<IModulesHeader> = (props) => {
           >
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
                 modulesView === option.type ? "bg-custom-sidebar-background-80" : "text-custom-sidebar-text-200"
               }`}
               onClick={() => setModulesView(option.type)}

diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { ArrowLeft } from "lucide-react";
 // components
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 
 export const ProfilePreferencesHeader = () => {
   const router = useRouter();
@@ -21,7 +21,7 @@ export const ProfilePreferencesHeader = () => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem title="My Profile Preferences" />
           </Breadcrumbs>
         </div>

diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
@@ -9,8 +9,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 // ui
-import { Button } from "@plane/ui";
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
@@ -115,8 +114,16 @@ export const ProjectIssuesHeader: FC = observer(() => {
             </button>
           </div>
           <div>
-            <Breadcrumbs>
-              <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <Breadcrumbs onBack={() => router.back()}>
+              <BreadcrumbItem
+                link={
+                  <Link href={`/${workspaceSlug}/projects`}>
+                    <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                      <p>Projects</p>
+                    </a>
+                  </Link>
+                }
+              />
               <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`} />
             </Breadcrumbs>
           </div>

diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
@@ -1,11 +1,11 @@
 import { FC, useState } from "react";
 import { useRouter } from "next/router";
 // icons
-import { ArrowLeft, Plus } from "lucide-react";
+import { ArrowLeft, Link, Plus } from "lucide-react";
 // components
 import { CreateUpdateProjectViewModal } from "components/views";
 // components
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
 // ui
 import { PrimaryButton } from "components/ui";
 // helpers
@@ -40,8 +40,16 @@ export const ProjectViewsHeader: FC<IProjectViewsHeader> = (props) => {
             </button>
           </div>
           <div>
-            <Breadcrumbs>
-              <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <Breadcrumbs onBack={() => router.back()}>
+              <BreadcrumbItem
+                link={
+                  <Link href={`/${workspaceSlug}/projects`}>
+                    <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                      <p>Projects</p>
+                    </a>
+                  </Link>
+                }
+              />
               <BreadcrumbItem title={`${truncateText(title ?? "Project", 32)} Cycles`} />
             </Breadcrumbs>
           </div>

diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
@@ -1,8 +1,7 @@
 import { useRouter } from "next/router";
 import { ArrowLeft, Search, Plus } from "lucide-react";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { Button } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // hooks
@@ -30,7 +29,7 @@ export const ProjectsHeader = observer(() => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem
               title={`${truncateText(currentWorkspace?.name ?? "Workspace", 32)} Projects`}
               unshrinkTitle={false}

diff --git 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";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 
 export const WorkspaceAnalyticsHeader = () => {
   const router = useRouter();
@@ -22,7 +22,7 @@ export const WorkspaceAnalyticsHeader = () => {
             </button>
           </div>
           <div>
-            <Breadcrumbs>
+            <Breadcrumbs onBack={() => router.back()}>
               <BreadcrumbItem title="Workspace Analytics" />
             </Breadcrumbs>
           </div>

diff --git a/web/layouts/profile-layout.tsx b/web/layouts/profile-layout.tsx
@@ -1,28 +1,32 @@
+import { useRouter } from "next/router";
 // hooks
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { ProfileNavbar, ProfileSidebar } from "components/profile";
 // ui
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
 
 type Props = {
   children: React.ReactNode;
   className?: string;
 };
 
-export const ProfileAuthWrapper = (props: Props) => (
-  <WorkspaceAuthorizationLayout
-    breadcrumbs={
-      <Breadcrumbs>
-        <BreadcrumbItem title="User Profile" />
-      </Breadcrumbs>
-    }
-  >
-    <ProfileLayout {...props} />
-  </WorkspaceAuthorizationLayout>
-);
+export const ProfileAuthWrapper = (props: Props) => {
+  const router = useRouter();
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs onBack={() => router.back()}>
+          <BreadcrumbItem title="User Profile" />
+        </Breadcrumbs>
+      }
+    >
+      <ProfileLayout {...props} />
+    </WorkspaceAuthorizationLayout>
+  );
+};
 
 const ProfileLayout: React.FC<Props> = ({ children, className }) => {
   const { memberRole } = useWorkspaceMyMembership();

diff --git a/web/pages/[workspaceSlug]/me/my-issues.tsx b/web/pages/[workspaceSlug]/me/my-issues.tsx
@@ -11,8 +11,7 @@ import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 // components
 import { MyIssuesView, MyIssuesViewOptions } from "components/issues";
 // ui
-import { Button } from "@plane/ui";
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 import useUser from "hooks/use-user";
@@ -78,7 +77,7 @@ const MyIssuesPage: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem title="My Issues" />
         </Breadcrumbs>
       }

diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -11,8 +11,7 @@ import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // icons
 import { History, MessageSquare } from "lucide-react";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { ExternalLinkIcon, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, ExternalLinkIcon, Loader } from "@plane/ui";
 // fetch-keys
 import { USER_ACTIVITY } from "constants/fetch-keys";
 // helper
@@ -33,7 +32,7 @@ const ProfileActivity = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem title="My Profile Activity" />
         </Breadcrumbs>
       }

diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -14,9 +14,8 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button, Input, Spinner } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "@plane/ui";
 import { CustomSearchSelect, CustomSelect } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { User2, UserCircle2 } from "lucide-react";
 // types
@@ -147,7 +146,7 @@ const Profile: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem title="My Profile" />
         </Breadcrumbs>
       }