UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: унификация крошек, предложений и quick-actions dropdown

plane-src/apps/web/ce/components/breadcrumbs/project-feature.tsx

@@ -4,23 +4,25 @@
  * See the LICENSE file for details.
  */
 
-import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import type { EProjectFeatureKey } from "@plane/constants";
-import { Breadcrumbs } from "@plane/ui";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { BreadcrumbNavigationSearchDropdown } from "@plane/ui";
 // components
-import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useUserPermissions } from "@/hooks/store/user";
 // local imports
 import { getProjectFeatureNavigation } from "../projects/navigation/helper";
 
 type TProjectFeatureBreadcrumbProps = {
   workspaceSlug: string;
   projectId: string;
-  featureKey: EProjectFeatureKey;
+  featureKey: TNavigationItem["key"];
   isLast?: boolean;
   additionalNavigationItems?: TNavigationItem[];
 };
@@ -29,8 +31,11 @@ export const ProjectFeatureBreadcrumb = observer(function ProjectFeatureBreadcru
   props: TProjectFeatureBreadcrumbProps
 ) {
   const { workspaceSlug, projectId, featureKey, isLast = false, additionalNavigationItems } = props;
+  const { t } = useTranslation();
+  const router = useAppRouter();
   // store hooks
   const { getPartialProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const project = getPartialProjectById(projectId);
 
@@ -41,26 +46,44 @@ export const ProjectFeatureBreadcrumb = observer(function ProjectFeatureBreadcru
   // if additional navigation items are provided, add them to the navigation items
   const allNavigationItems = [...(additionalNavigationItems || []), ...navigationItems];
 
-  const currentNavigationItem = allNavigationItems.find((item) => item.key === featureKey);
-  const icon = currentNavigationItem?.icon as ReactNode;
-  const name = currentNavigationItem?.name;
-  const href = currentNavigationItem?.href;
+  const availableNavigationItems = allNavigationItems.filter(
+    (item) =>
+      item.shouldRender &&
+      allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug.toString(), projectId.toString())
+  );
+
+  const currentNavigationItem = availableNavigationItems.find((item) => item.key === featureKey);
+  const Icon = currentNavigationItem?.icon;
+  const name = currentNavigationItem ? t(currentNavigationItem.i18n_key) : undefined;
+
+  const switcherOptions = availableNavigationItems.map(
+    (item): ICustomSearchSelectOption => ({
+      value: item.key,
+      query: t(item.i18n_key),
+      content: (
+        <div className="flex items-center gap-2">
+          <item.icon className="h-3.5 w-3.5 text-tertiary" />
+          <span>{t(item.i18n_key)}</span>
+        </div>
+      ),
+    })
+  );
 
   return (
-    <>
-      <Breadcrumbs.Item
-        component={
-          <BreadcrumbLink
-            key={featureKey}
-            label={name}
-            isLast={isLast}
-            href={href}
-            icon={<Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
-          />
+    <BreadcrumbNavigationSearchDropdown
+      selectedItem={featureKey}
+      navigationItems={switcherOptions}
+      onChange={(value: string) => {
+        const nextNavigationItem = availableNavigationItems.find((item) => item.key === value);
+        if (nextNavigationItem?.href) {
+          router.push(nextNavigationItem.href);
         }
-        showSeparator={false}
-        isLast={isLast}
-      />
-    </>
+      }}
+      title={name}
+      icon={Icon ? <Icon className="h-3.5 w-3.5 text-tertiary" /> : undefined}
+      isLast={isLast}
+      openOnLabelClick
+      showLastChevron={false}
+    />
   );
 });