chore: breadcrumbs ui component (#2458)

* chore: swap breadcrumbs component with plane/ui component

* chore: breadcrumb refactor
This commit is contained in:
Anmol Singh Bhatia 2023-10-17 17:25:02 +05:30 committed by GitHub
parent 123634f5e8
commit b0c1af2b25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 403 additions and 183 deletions

View file

@ -1,6 +1,7 @@
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr";
@ -16,8 +17,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
@ -145,11 +145,18 @@ const ArchivedIssueDetailsPage: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<Breadcrumbs.BreadcrumbItem
title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(
issueDetails?.project_detail.name ?? "Project",
32
)} Issues`}</p>
</a>
</Link>
}
/>
<Breadcrumbs.BreadcrumbItem
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${

View file

@ -1,4 +1,5 @@
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
@ -13,10 +14,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
@ -38,8 +38,16 @@ const ProjectArchivedIssues: NextPage = () => {
<IssueViewContextProvider>
<ProjectAuthorizationWrapper
breadcrumbs={
<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)} Archived Issues`} />
</Breadcrumbs>
}

View file

@ -1,8 +1,8 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
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 +19,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
@ -97,11 +97,18 @@ const SingleCycle: React.FC = () => {
/>
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem
title={`${truncateText(cycleDetails?.project_detail.name ?? "Project", 32)} Cycles`}
link={`/${workspaceSlug}/projects/${projectId}/cycles`}
linkTruncate
<Breadcrumbs onBack={() => router.back()}>
<Breadcrumbs.BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(
cycleDetails?.project_detail.name ?? "Project",
32
)} Cycles`}</p>
</a>
</Link>
}
/>
</Breadcrumbs>
}

View file

@ -1,4 +1,5 @@
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
@ -13,7 +14,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
@ -37,8 +38,16 @@ const ProjectDraftIssues: NextPage = () => {
<IssueViewContextProvider>
<ProjectAuthorizationWrapper
breadcrumbs={
<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)} Draft Issues`} />
</Breadcrumbs>
}

View file

@ -1,4 +1,6 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { NextPage } from "next";
import useSWR from "swr";
// hooks
@ -11,7 +13,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();
@ -37,8 +39,16 @@ const ProjectInbox: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<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 ?? "", 32)} Inbox`} />
</Breadcrumbs>
}

View file

@ -1,6 +1,7 @@
import React, { useCallback, useEffect } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr";
@ -16,8 +17,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
@ -120,11 +120,18 @@ const IssueDetailsPage: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<Breadcrumbs.BreadcrumbItem
title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(
issueDetails?.project_detail.name ?? "Project",
32
)} Issues`}</p>
</a>
</Link>
}
/>
<Breadcrumbs.BreadcrumbItem
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${

View file

@ -1,8 +1,7 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
// icons
import { DiceIcon } from "@plane/ui";
// services
import { ModuleService } from "services/module.service";
// hooks
@ -16,9 +15,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
@ -93,11 +92,18 @@ const SingleModule: React.FC = () => {
/>
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(moduleDetails?.project_detail.name ?? "Project", 32)} Modules`}
link={`/${workspaceSlug}/projects/${projectId}/modules`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectId}/modules`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(
moduleDetails?.project_detail.name ?? "Project",
32
)} Modules`}</p>
</a>
</Link>
}
/>
</Breadcrumbs>
}

View file

@ -1,4 +1,5 @@
import React, { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
@ -27,10 +28,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
@ -306,8 +306,16 @@ const SinglePage: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<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)} Pages`} />
</Breadcrumbs>
}

View file

@ -1,4 +1,5 @@
import { useState, Fragment } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import dynamic from "next/dynamic";
@ -19,8 +20,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";
@ -94,8 +94,16 @@ const ProjectPages: NextPage = () => {
/>
<ProjectAuthorizationWrapper
breadcrumbs={
<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)} Pages`} />
</Breadcrumbs>
}

View file

@ -1,6 +1,7 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr";
@ -16,7 +17,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";
@ -76,11 +77,15 @@ const AutomationsSettings: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Automations Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -1,5 +1,6 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr";
// services
import { ProjectService, ProjectEstimateService } from "services/project";
@ -14,9 +15,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
@ -112,11 +112,15 @@ const EstimatesSettings: NextPage = () => {
/>
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Estimates Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -1,5 +1,7 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr";
// services
import { ProjectService } from "services/project";
@ -12,8 +14,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
@ -140,11 +141,15 @@ const FeaturesSettings: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Features Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -1,5 +1,7 @@
import { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
import { Disclosure, Transition } from "@headlessui/react";
// layouts
@ -8,8 +10,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";
@ -58,11 +59,15 @@ const GeneralSettings: NextPage = observer(() => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="General Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -1,6 +1,7 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
@ -13,8 +14,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
@ -55,11 +55,15 @@ const ProjectIntegrations: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectId}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Integrations Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -1,6 +1,7 @@
import React, { useState, useRef } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
@ -21,9 +22,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
@ -104,11 +104,15 @@ const LabelsSettings: NextPage = () => {
/>
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Labels Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -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
@ -201,11 +200,15 @@ const MembersSettings: NextPage = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Members Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -1,6 +1,7 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
@ -15,8 +16,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
@ -61,11 +61,15 @@ const StatesSettings: NextPage = () => {
/>
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
linkTruncate
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="States Settings" unshrinkTitle />
</Breadcrumbs>

View file

@ -1,4 +1,5 @@
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
@ -10,11 +11,10 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
// components
import { ProjectViewLayoutRoot } from "components/issues";
// ui
import { BreadcrumbItem, Breadcrumbs, PhotoFilterIcon } from "@plane/ui";
import { CustomMenu } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { EmptyState } from "components/common";
// icons
import { PhotoFilterIcon } from "@plane/ui";
// images
import emptyView from "public/empty-state/view.svg";
// helpers
@ -51,10 +51,15 @@ const SingleView: React.FC = () => {
return (
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${activeProject?.name ?? "Project"} Views`}
link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
link={
<Link href={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${activeProject?.name ?? "Project"} Views`}</p>
</a>
</Link>
}
/>
</Breadcrumbs>
}