77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { observer } from "mobx-react";
|
|
import { Logo } from "@plane/propel/emoji-icon-picker";
|
|
import { ProjectIcon } from "@plane/propel/icons";
|
|
// plane imports
|
|
import type { ICustomSearchSelectOption } from "@plane/types";
|
|
import { SwitcherLabel } from "@/components/common/switcher-label";
|
|
// hooks
|
|
import { useProject } from "@/hooks/store/use-project";
|
|
import { useAppRouter } from "@/hooks/use-app-router";
|
|
import type { TProject } from "@/plane-web/types";
|
|
import { BreadcrumbNavigationSearchDropdown } from "@plane/ui";
|
|
|
|
type TProjectBreadcrumbProps = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
shouldTruncate?: boolean;
|
|
};
|
|
|
|
export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TProjectBreadcrumbProps) {
|
|
const { workspaceSlug, projectId, shouldTruncate = true } = props;
|
|
// router
|
|
const router = useAppRouter();
|
|
// store hooks
|
|
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={ProjectIcon}
|
|
type="material"
|
|
/>
|
|
),
|
|
};
|
|
})
|
|
.filter((option) => option !== undefined) as ICustomSearchSelectOption[];
|
|
|
|
// helpers
|
|
const renderIcon = (projectDetails: TProject) => (
|
|
<span className="grid size-4 flex-shrink-0 place-items-center">
|
|
<Logo logo={projectDetails.logo_props} size={14} />
|
|
</span>
|
|
);
|
|
|
|
return (
|
|
<BreadcrumbNavigationSearchDropdown
|
|
selectedItem={currentProjectDetails.id}
|
|
navigationItems={switcherOptions}
|
|
onChange={(value: string) => {
|
|
router.push(`/${workspaceSlug}/projects/${value}/issues`);
|
|
}}
|
|
title={currentProjectDetails?.name}
|
|
icon={renderIcon(currentProjectDetails)}
|
|
openOnLabelClick
|
|
shouldTruncate={shouldTruncate}
|
|
/>
|
|
);
|
|
});
|