UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: каркас вкладки внешние контуры

plane-src/apps/web/ce/components/projects/external-contours/header.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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 { useParams } from "next/navigation";
+import { useTranslation } from "@plane/i18n";
+import { TransferIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+
+export const ProjectExternalContoursHeader = observer(function ProjectExternalContoursHeader() {
+  const { workspaceSlug, projectId } = useParams();
+  const { t } = useTranslation();
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs>
+          <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={t("external_contours_page.title")}
+                href={`/${workspaceSlug}/projects/${projectId}/external-contours/`}
+                icon={<TransferIcon className="h-4 w-4 text-tertiary" />}
+                isLast
+              />
+            }
+            isLast
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+    </Header>
+  );
+});

plane-src/apps/web/ce/components/projects/navigation/helper.tsx

@@ -6,7 +6,7 @@
 
 // plane imports
 import { EUserPermissions, EProjectFeatureKey } from "@plane/constants";
-import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, TransferIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
 // components
 import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation";
 
@@ -31,6 +31,16 @@ export const getProjectFeatureNavigation = (
     shouldRender: true,
     sortOrder: 1,
   },
+  {
+    i18n_key: "sidebar.external_contours",
+    key: "external_contours",
+    name: "External contours",
+    href: `/${workspaceSlug}/projects/${projectId}/external-contours`,
+    icon: TransferIcon,
+    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    shouldRender: true,
+    sortOrder: 2,
+  },
   {
     i18n_key: "sidebar.cycles",
     key: EProjectFeatureKey.CYCLES,
@@ -39,7 +49,7 @@ export const getProjectFeatureNavigation = (
     icon: CycleIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     shouldRender: project.cycle_view,
-    sortOrder: 2,
+    sortOrder: 3,
   },
   {
     i18n_key: "sidebar.modules",
@@ -49,7 +59,7 @@ export const getProjectFeatureNavigation = (
     icon: ModuleIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     shouldRender: project.module_view,
-    sortOrder: 3,
+    sortOrder: 4,
   },
   {
     i18n_key: "sidebar.views",
@@ -59,7 +69,7 @@ export const getProjectFeatureNavigation = (
     icon: ViewsIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     shouldRender: project.issue_views_view,
-    sortOrder: 4,
+    sortOrder: 5,
   },
   {
     i18n_key: "sidebar.pages",
@@ -69,7 +79,7 @@ export const getProjectFeatureNavigation = (
     icon: PageIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     shouldRender: project.page_view,
-    sortOrder: 5,
+    sortOrder: 6,
   },
   {
     i18n_key: "sidebar.intake",
@@ -79,6 +89,6 @@ export const getProjectFeatureNavigation = (
     icon: IntakeIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     shouldRender: project.inbox_view,
-    sortOrder: 6,
+    sortOrder: 7,
   },
 ];