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,82 @@
+import * as React from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// icons
+import { MoveLeft } from "lucide-react";
+
+type BreadcrumbsProps = {
+  children: any;
+};
+
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
+  const router = useRouter();
+
+  return (
+    <>
+      <div className="flex items-center flex-grow w-full whitespace-nowrap overflow-hidden overflow-ellipsis">
+        <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={() => router.back()}
+        >
+          <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?: string;
+  icon?: any;
+  linkTruncate?: boolean;
+  unshrinkTitle?: boolean;
+};
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  title,
+  link,
+  icon,
+  linkTruncate = false,
+  unshrinkTitle = false,
+}) => (
+  <>
+    {link ? (
+      <Link href={link}>
+        <a
+          className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${
+            linkTruncate ? "truncate" : ""
+          }`}
+        >
+          <p
+            className={`${linkTruncate ? "truncate" : ""}${
+              icon ? "flex items-center gap-2" : ""
+            }`}
+          >
+            {icon ?? null}
+            {title}
+          </p>
+        </a>
+      </Link>
+    ) : (
+      <div
+        className={`px-3 text-sm truncate ${
+          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,10 +1,8 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 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";
 

diff --git a/web/components/headers/modules.tsx b/web/components/headers/modules.tsx
@@ -2,9 +2,8 @@ import { Dispatch, FC, SetStateAction } from "react";
 import { useRouter } from "next/router";
 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";

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

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

diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
@@ -5,7 +5,7 @@ import { ArrowLeft, 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

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

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

diff --git a/web/layouts/profile-layout.tsx b/web/layouts/profile-layout.tsx
@@ -5,7 +5,7 @@ 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;

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

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

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

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -16,8 +16,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { Breadcrumbs } from "components/breadcrumbs";
-import { ArchiveIcon, Loader } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, Loader } from "@plane/ui";
 // icons
 import { History } from "lucide-react";
 // types

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -13,10 +13,9 @@ import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { ArchiveIcon, BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
-import { ArchiveIcon } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // icons
-import { ContrastIcon } from "@plane/ui";
 import { ArrowLeft } from "lucide-react";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
@@ -19,9 +18,9 @@ import { CycleService } from "services/cycle.service";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
+import { BreadcrumbItem, Breadcrumbs, ContrastIcon } from "@plane/ui";
 import { CustomMenu } from "components/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
 // helpers

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -13,7 +13,7 @@ import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // icons
 import { X, PenSquare } from "lucide-react";
 // types

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -11,7 +11,7 @@ import { ProjectInboxHeader } from "components/headers";
 // helper
 import { truncateText } from "helpers/string.helper";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 
 const ProjectInbox: NextPage = () => {
   const router = useRouter();

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -16,8 +16,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
 import { EmptyState } from "components/common";
-import { Breadcrumbs } from "components/breadcrumbs";
-import { Loader } from "@plane/ui";
+import { Breadcrumbs, Loader } from "@plane/ui";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // types

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-// icons
-import { DiceIcon } from "@plane/ui";
 // services
 import { ModuleService } from "services/module.service";
 // hooks
@@ -16,9 +14,9 @@ import { ModuleDetailsSidebar } from "components/modules";
 import { ModuleLayoutRoot } from "components/issues";
 import { ModuleIssuesHeader } from "components/headers";
 // ui
+import { BreadcrumbItem, Breadcrumbs, DiceIcon } from "@plane/ui";
 import { CustomMenu } from "components/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyModule from "public/empty-state/module.svg";
 // helpers

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -27,10 +27,9 @@ import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { CustomSearchSelect } from "components/ui";
 import { EmptyState } from "components/common";
-import { TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -19,8 +19,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
 // ui
-import { Button } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
 // types
 import { TPageViewProps } from "types";
 import type { NextPage } from "next";

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -16,7 +16,7 @@ import useToast from "hooks/use-toast";
 import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
 import { SettingsSidebar } from "components/project";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 import { IProject } from "types";

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -14,9 +14,8 @@ import { SettingsSidebar } from "components/project";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { Plus } from "lucide-react";
 // images

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -12,8 +12,7 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
 // icons
 import { FileText, Inbox, Layers } from "lucide-react";
 // types

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -8,8 +8,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { ProjectService } from "services/project";
 // components
 import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project";
-import { Button, Loader } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { ChevronDown, ChevronUp } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -13,8 +13,7 @@ import { ProjectService } from "services/project";
 import { SettingsSidebar, SingleIntegration } from "components/project";
 // ui
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui";
 // images
 import emptyIntegration from "public/empty-state/integration.svg";
 // types

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -21,9 +21,8 @@ import {
 } from "components/labels";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyLabel from "public/empty-state/label.svg";
 // types

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -18,9 +18,8 @@ import ConfirmProjectMemberRemove from "components/project/confirm-project-membe
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 import { MemberSelect, SettingsSidebar } from "components/project";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { CustomMenu, CustomSelect } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ChevronDown, X } from "lucide-react";
 // types

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -15,8 +15,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Loader } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui";
 // icons
 import { Plus } from "lucide-react";
 // helpers