binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4050] feat: breadcrumbs revamp (#7188)

Browse source 
* chore: project feature enum added

* feat: revamp breadcrumb and add navigation dropdown component

* chore: custom search select component refactoring

* chore: breadcrumb stories added

* chore: switch label and breadcrumb link component refactor

* chore: project navigation helper function added

* chore: common breadcrumb component added

* chore: breadcrumb refactoring

* chore: code refactor

* chore: code refactor

* fix: build error

* fix: nprogress and button tooltip

* chore: code refactor

* chore: workspace view breadcrumb improvements

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

---------

Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2025-06-19 17:17:14 +05:30 • committed by GitHub
parent 64fd0b2830
commit 2b7a17b484
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
44 changed files with 1251 additions and 581 deletions
Download patch file Download diff file Expand all files Collapse all files

87
web/ce/components/breadcrumbs/project.tsx
View file

@ -2,38 +2,73 @@
import { observer } from "mobx-react";
import { Briefcase } from "lucide-react";
// ui
import { Breadcrumbs, Logo } from "@plane/ui";
// plane imports
import { ICustomSearchSelectOption } from "@plane/types";
import { BreadcrumbNavigationSearchDropdown, Breadcrumbs, Logo } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { SwitcherLabel } from "@/components/common";
// hooks
import { useProject } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
import { TProject } from "@/plane-web/types";
export const ProjectBreadcrumb = observer(() => {
type TProjectBreadcrumbProps = {
workspaceSlug: string;
projectId: string;
handleOnClick?: () => void;
};
export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
const { workspaceSlug, projectId, handleOnClick } = props;
// router
const router = useAppRouter();
// store hooks
const { currentProjectDetails } = useProject();
const { joinedProjectIds, getPartialProjectById } = useProject();
const currentProjectDetails = getPartialProjectById(projectId);
// store hooks
if (!currentProjectDetails) return null;
// derived values
const switcherOptions = joinedProjectIds
.map((projectId) => {
const project = getPartialProjectById(projectId);
return {
value: projectId,
query: project?.name,
content: <SwitcherLabel name={project?.name} logo_props={project?.logo_props} LabelIcon={Briefcase} />,
};
})
.filter((option) => option !== undefined) as ICustomSearchSelectOption[];
// helpers
const renderIcon = (projectDetails: TProject) => (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<Logo logo={projectDetails.logo_props} size={14} />
</span>
);
return (
<Breadcrumbs.BreadcrumbItem
type="text"
link={
<BreadcrumbLink
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails ? (
currentProjectDetails && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">
<Logo logo={currentProjectDetails?.logo_props} size={16} />
</span>
)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
<Briefcase className="h-4 w-4" />
</span>
)
}
/>
}
/>
<>
<Breadcrumbs.Item
component={
<BreadcrumbNavigationSearchDropdown
selectedItem={currentProjectDetails.id}
navigationItems={switcherOptions}
onChange={(value: string) => {
router.push(`/${workspaceSlug}/projects/${value}/issues`);
}}
title={currentProjectDetails?.name}
icon={renderIcon(currentProjectDetails)}
handleOnClick={() => {
if (handleOnClick) handleOnClick();
else router.push(`/${workspaceSlug}/projects/${currentProjectDetails.id}/issues/`);
}}
/>
}
showSeparator={false}
/>
</>
);
});