Skip to content

Commit bc27bc9

Browse files
anmolsinghbhatiaanmolsinghbhatia
authored
[WEB-3040] chore: project breadcrumb improvement (#6322)
* chore: project breadcrumb link component added to CE and EE * chore: project breadcrumb redirection improvement
1 parent 1acaae9 commit bc27bc9

File tree

18 files changed

+103
-243
lines changed

18 files changed

+103
-243
lines changed

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ import { EIssuesStoreType } from "@plane/constants";
77
// ui
88
import { ArchiveIcon, Breadcrumbs, Tooltip, Header } from "@plane/ui";
99
// components
10-
import { BreadcrumbLink, Logo } from "@/components/common";
10+
import { BreadcrumbLink } from "@/components/common";
1111
// constants
1212
import { PROJECT_ARCHIVES_BREADCRUMB_LIST } from "@/constants/archives";
1313
// hooks
1414
import { useIssues, useProject } from "@/hooks/store";
1515
import { useAppRouter } from "@/hooks/use-app-router";
1616
import { usePlatformOS } from "@/hooks/use-platform-os";
17+
// plane web
18+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
1719

1820
type TProps = {
1921
activeTab: "issues" | "cycles" | "modules";
@@ -28,7 +30,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
2830
const {
2931
issues: { getGroupIssueCount },
3032
} = useIssues(EIssuesStoreType.ARCHIVED);
31-
const { currentProjectDetails, loader } = useProject();
33+
const { loader } = useProject();
3234
// hooks
3335
const { isMobile } = usePlatformOS();
3436

@@ -42,21 +44,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
4244
<Header.LeftItem>
4345
<div className="flex items-center gap-2.5">
4446
<Breadcrumbs onBack={router.back} isLoading={loader}>
45-
<Breadcrumbs.BreadcrumbItem
46-
type="text"
47-
link={
48-
<BreadcrumbLink
49-
label={currentProjectDetails?.name ?? "Project"}
50-
icon={
51-
currentProjectDetails && (
52-
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
53-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
54-
</span>
55-
)
56-
}
57-
/>
58-
}
59-
/>
47+
<ProjectBreadcrumb />
6048
<Breadcrumbs.BreadcrumbItem
6149
type="text"
6250
link={

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import useSWR from "swr";
66
// ui
77
import { ArchiveIcon, Breadcrumbs, LayersIcon, Header } from "@plane/ui";
88
// components
9-
import { BreadcrumbLink, Logo } from "@/components/common";
9+
import { BreadcrumbLink } from "@/components/common";
1010
import { IssueDetailQuickActions } from "@/components/issues";
1111
// constants
1212
import { ISSUE_DETAILS } from "@/constants/fetch-keys";
1313
// hooks
1414
import { useProject } from "@/hooks/store";
15+
// plane web
16+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
1517
// services
1618
import { IssueService } from "@/services/issue";
1719

@@ -34,21 +36,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
3436
<Header>
3537
<Header.LeftItem>
3638
<Breadcrumbs isLoading={loader}>
37-
<Breadcrumbs.BreadcrumbItem
38-
type="text"
39-
link={
40-
<BreadcrumbLink
41-
label={currentProjectDetails?.name ?? "Project"}
42-
icon={
43-
currentProjectDetails && (
44-
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
45-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
46-
</span>
47-
)
48-
}
49-
/>
50-
}
51-
/>
39+
<ProjectBreadcrumb />
5240
<Breadcrumbs.BreadcrumbItem
5341
type="text"
5442
link={

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
1414
import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, Header } from "@plane/ui";
1515
// components
1616
import { ProjectAnalyticsModal } from "@/components/analytics";
17-
import { BreadcrumbLink, Logo } from "@/components/common";
17+
import { BreadcrumbLink } from "@/components/common";
1818
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
1919
// constants
2020
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
@@ -37,6 +37,8 @@ import {
3737
import { useAppRouter } from "@/hooks/use-app-router";
3838
import useLocalStorage from "@/hooks/use-local-storage";
3939
import { usePlatformOS } from "@/hooks/use-platform-os";
40+
// plane web
41+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
4042
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
4143

4244
const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
@@ -167,16 +169,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
167169
link={
168170
<span>
169171
<span className="hidden md:block">
170-
<BreadcrumbLink
171-
label={currentProjectDetails?.name ?? "Project"}
172-
icon={
173-
currentProjectDetails && (
174-
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
175-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
176-
</span>
177-
)
178-
}
179-
/>
172+
<ProjectBreadcrumb />
180173
</span>
181174
<Link
182175
href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@
22

33
import { FC } from "react";
44
import { observer } from "mobx-react";
5-
import { useParams } from "next/navigation";
65
// ui
76
import { Breadcrumbs, Button, ContrastIcon, Header } from "@plane/ui";
87
// components
9-
import { BreadcrumbLink, Logo } from "@/components/common";
8+
import { BreadcrumbLink } from "@/components/common";
109
import { CyclesViewHeader } from "@/components/cycles";
1110
// hooks
1211
import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
1312
import { useAppRouter } from "@/hooks/use-app-router";
13+
// plane web
14+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
1415
// constants
1516
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
1617

1718
export const CyclesListHeader: FC = observer(() => {
1819
// router
1920
const router = useAppRouter();
20-
const { workspaceSlug } = useParams();
2121
// store hooks
2222
const { toggleCreateCycleModal } = useCommandPalette();
2323
const { setTrackElement } = useEventTracker();
@@ -33,21 +33,7 @@ export const CyclesListHeader: FC = observer(() => {
3333
<Header>
3434
<Header.LeftItem>
3535
<Breadcrumbs onBack={router.back} isLoading={loader}>
36-
<Breadcrumbs.BreadcrumbItem
37-
type="text"
38-
link={
39-
<BreadcrumbLink
40-
label={currentProjectDetails?.name ?? "Project"}
41-
icon={
42-
currentProjectDetails && (
43-
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
44-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
45-
</span>
46-
)
47-
}
48-
/>
49-
}
50-
/>
36+
<ProjectBreadcrumb />
5137
<Breadcrumbs.BreadcrumbItem
5238
type="text"
5339
link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
1010
// ui
1111
import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
1212
// components
13-
import { BreadcrumbLink, Logo } from "@/components/common";
13+
import { BreadcrumbLink } from "@/components/common";
1414
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
1515
// constants
1616
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
@@ -19,6 +19,8 @@ import { isIssueFilterActive } from "@/helpers/filter.helper";
1919
// hooks
2020
import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
2121
import { usePlatformOS } from "@/hooks/use-platform-os";
22+
// plane web
23+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
2224

2325
export const ProjectDraftIssueHeader: FC = observer(() => {
2426
// router
@@ -92,21 +94,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
9294
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
9395
<div className="flex items-center gap-2.5">
9496
<Breadcrumbs isLoading={loader}>
95-
<Breadcrumbs.BreadcrumbItem
96-
type="text"
97-
link={
98-
<BreadcrumbLink
99-
label={currentProjectDetails?.name ?? "Project"}
100-
icon={
101-
currentProjectDetails && (
102-
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
103-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
104-
</span>
105-
)
106-
}
107-
/>
108-
}
109-
/>
97+
<ProjectBreadcrumb />
11098

11199
<Breadcrumbs.BreadcrumbItem
112100
type="text"

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import { useParams } from "next/navigation";
55
// ui
66
import { Breadcrumbs, LayersIcon, Header } from "@plane/ui";
77
// components
8-
import { BreadcrumbLink, Logo } from "@/components/common";
8+
import { BreadcrumbLink } from "@/components/common";
99
import { IssueDetailQuickActions } from "@/components/issues";
1010
// hooks
1111
import { useIssueDetail, useProject } from "@/hooks/store";
1212
import { useAppRouter } from "@/hooks/use-app-router";
13+
// plane web
14+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
1315

1416
export const ProjectIssueDetailsHeader = observer(() => {
1517
// router
@@ -28,21 +30,7 @@ export const ProjectIssueDetailsHeader = observer(() => {
2830
<Header.LeftItem>
2931
<div>
3032
<Breadcrumbs onBack={router.back} isLoading={loader}>
31-
<Breadcrumbs.BreadcrumbItem
32-
type="text"
33-
link={
34-
<BreadcrumbLink
35-
label={currentProjectDetails?.name ?? "Project"}
36-
icon={
37-
currentProjectDetails && (
38-
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
39-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
40-
</span>
41-
)
42-
}
43-
/>
44-
}
45-
/>
33+
<ProjectBreadcrumb />
4634

4735
<Breadcrumbs.BreadcrumbItem
4836
type="text"

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
1414
import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, Header } from "@plane/ui";
1515
// components
1616
import { ProjectAnalyticsModal } from "@/components/analytics";
17-
import { BreadcrumbLink, Logo } from "@/components/common";
17+
import { BreadcrumbLink } from "@/components/common";
1818
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
1919
// constants
2020
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
@@ -38,6 +38,8 @@ import { useAppRouter } from "@/hooks/use-app-router";
3838
import { useIssuesActions } from "@/hooks/use-issues-actions";
3939
import useLocalStorage from "@/hooks/use-local-storage";
4040
import { usePlatformOS } from "@/hooks/use-platform-os";
41+
// plane web
42+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
4143
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
4244

4345
const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
@@ -166,16 +168,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
166168
link={
167169
<span>
168170
<span className="hidden md:block">
169-
<BreadcrumbLink
170-
label={currentProjectDetails?.name ?? "Project"}
171-
icon={
172-
currentProjectDetails && (
173-
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
174-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
175-
</span>
176-
)
177-
}
178-
/>
171+
<ProjectBreadcrumb />
179172
</span>
180173
<Link
181174
href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
"use client";
22

33
import { observer } from "mobx-react";
4-
import { useParams } from "next/navigation";
54
// ui
65
import { Breadcrumbs, Button, DiceIcon, Header } from "@plane/ui";
76
// components
8-
import { BreadcrumbLink, Logo } from "@/components/common";
7+
import { BreadcrumbLink } from "@/components/common";
98
import { ModuleViewHeader } from "@/components/modules";
109
// hooks
1110
import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
1211
import { useAppRouter } from "@/hooks/use-app-router";
12+
// plane web
13+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
1314
// constants
1415
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
1516

1617
export const ModulesListHeader: React.FC = observer(() => {
1718
// router
1819
const router = useAppRouter();
19-
const { workspaceSlug } = useParams();
2020
// store hooks
2121
const { toggleCreateModuleModal } = useCommandPalette();
2222
const { setTrackElement } = useEventTracker();
2323
const { allowPermissions } = useUserPermissions();
2424

25-
const { currentProjectDetails, loader } = useProject();
25+
const { loader } = useProject();
2626

2727
// auth
2828
const canUserCreateModule = allowPermissions(
@@ -35,21 +35,7 @@ export const ModulesListHeader: React.FC = observer(() => {
3535
<Header.LeftItem>
3636
<div>
3737
<Breadcrumbs onBack={router.back} isLoading={loader}>
38-
<Breadcrumbs.BreadcrumbItem
39-
type="text"
40-
link={
41-
<BreadcrumbLink
42-
label={currentProjectDetails?.name ?? "Project"}
43-
icon={
44-
currentProjectDetails && (
45-
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
46-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
47-
</span>
48-
)
49-
}
50-
/>
51-
}
52-
/>
38+
<ProjectBreadcrumb />
5339
<Breadcrumbs.BreadcrumbItem
5440
type="text"
5541
link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}

‎web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { getPageName } from "@/helpers/page.helper";
1818
import { useProjectPage, useProject } from "@/hooks/store";
1919
import { usePlatformOS } from "@/hooks/use-platform-os";
2020
// plane web components
21+
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
2122
import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
2223

2324
export interface IPagesHeaderProps {
@@ -68,16 +69,7 @@ export const PageDetailsHeader = observer(() => {
6869
link={
6970
<span>
7071
<span className="hidden md:block">
71-
<BreadcrumbLink
72-
label={currentProjectDetails?.name ?? "Project"}
73-
icon={
74-
currentProjectDetails && (
75-
<span className="grid h-4 w-4 flex-shrink-0 place-items-center">
76-
<Logo logo={currentProjectDetails?.logo_props} size={16} />
77-
</span>
78-
)
79-
}
80-
/>
72+
<ProjectBreadcrumb />
8173
</span>
8274
<span className="md:hidden">
8375
<BreadcrumbLink

0 commit comments

Comments
 (0)