mirror of
https://github.com/makeplane/plane.git
synced 2025-12-23 15:19:37 +01:00
9cfde896b3
* [WEB-5134] refactor: update `web` ESLint configuration and refactor imports to use type imports - Enhanced ESLint configuration by adding new rules for import consistency and type imports. - Refactored multiple files to replace regular imports with type imports for better clarity and performance. - Ensured consistent use of type imports across the application to align with TypeScript best practices. * refactor: standardize type imports across components - Updated multiple files to replace regular imports with type imports for improved clarity and consistency. - Ensured adherence to TypeScript best practices in the rich filters and issue layouts components.
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { observer } from "mobx-react";
|
|
import { ProjectIcon } from "@plane/propel/icons";
|
|
// plane imports
|
|
import type { ICustomSearchSelectOption } from "@plane/types";
|
|
import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
|
|
// components
|
|
import { Logo } from "@/components/common/logo";
|
|
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";
|
|
|
|
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 { 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 place-items-center flex-shrink-0 h-4 w-4">
|
|
<Logo logo={projectDetails.logo_props} size={14} />
|
|
</span>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<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/`);
|
|
}}
|
|
shouldTruncate
|
|
/>
|
|
}
|
|
showSeparator={false}
|
|
/>
|
|
</>
|
|
);
|
|
});
|