ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: отправка во внешний контур и source-side список

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

@@ -10,51 +10,49 @@ import { PanelLeft } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { IconButton } from "@plane/propel/icon-button";
-import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
+import { ChevronDownIcon, ChevronUpIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { TNameDescriptionLoader } from "@plane/types";
-import { EInboxIssueCurrentTab } from "@plane/types";
+import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
 import { ControlLink, Header, Row } from "@plane/ui";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
 import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
 import { useProject } from "@/hooks/store/use-project";
-import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
-import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
-import { InboxIssueStatus } from "@/components/inbox/inbox-issue-status";
+import { ExternalContourStatePill } from "./state-pill";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
-  inboxIssue: IInboxIssueStore | undefined;
+  sourceProjectId: string;
+  contourRequest: TExternalContourRequest;
   isSubmitting: TNameDescriptionLoader;
   isMobileSidebar: boolean;
   setIsMobileSidebar: (value: boolean) => void;
 };
 
 export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
-  const { workspaceSlug, projectId, inboxIssue, isSubmitting, isMobileSidebar, setIsMobileSidebar } = props;
+  const { workspaceSlug, sourceProjectId, contourRequest, isSubmitting, isMobileSidebar, setIsMobileSidebar } = props;
   const { t } = useTranslation();
   const router = useAppRouter();
-  const { currentTab, filteredInboxIssueIds } = useProjectInbox();
+  const { currentTab, filteredRequestIds } = useProjectExternalContours();
   const { getProjectById } = useProject();
 
-  const issue = inboxIssue?.issue;
-  const currentInboxIssueId = issue?.id;
+  const issue = contourRequest.issue;
+  const currentRequestId = contourRequest.id;
 
   const redirectToRelativeIssue = useCallback(
     (direction: "next" | "prev") => {
-      if (!filteredInboxIssueIds || !currentInboxIssueId) return;
-      const currentIssueIndex = filteredInboxIssueIds.findIndex((issueId) => issueId === currentInboxIssueId);
+      if (!filteredRequestIds || !currentRequestId) return;
+      const currentIssueIndex = filteredRequestIds.findIndex((requestId) => requestId === currentRequestId);
       const nextIssueIndex =
         direction === "next"
-          ? (currentIssueIndex + 1) % filteredInboxIssueIds.length
-          : (currentIssueIndex - 1 + filteredInboxIssueIds.length) % filteredInboxIssueIds.length;
-      const nextIssueId = filteredInboxIssueIds[nextIssueIndex];
+          ? (currentIssueIndex + 1) % filteredRequestIds.length
+          : (currentIssueIndex - 1 + filteredRequestIds.length) % filteredRequestIds.length;
+      const nextIssueId = filteredRequestIds[nextIssueIndex];
       if (!nextIssueId) return;
-      router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
+      router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
     },
-    [currentInboxIssueId, currentTab, filteredInboxIssueIds, projectId, router, workspaceSlug]
+    [currentRequestId, currentTab, filteredRequestIds, router, sourceProjectId, workspaceSlug]
   );
 
   useEffect(() => {
@@ -67,23 +65,15 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [redirectToRelativeIssue]);
 
-  if (!issue || !inboxIssue) return null;
-
+  const targetProjectIdentifier = issue.project_detail?.identifier || getProjectById(issue.project_id || "")?.identifier;
   const workItemLink = generateWorkItemLink({
     workspaceSlug: workspaceSlug?.toString(),
     projectId: issue.project_id,
-    issueId: currentInboxIssueId,
-    projectIdentifier: getProjectById(issue.project_id)?.identifier,
+    issueId: issue.id,
+    projectIdentifier: targetProjectIdentifier,
     sequenceId: issue.sequence_id,
   });
 
-  const showWorkflowToast = (actionLabel: string) =>
-    setToast({
-      type: TOAST_TYPE.INFO,
-      title: t("external_contours_page.actions.unsupported_title"),
-      message: t("external_contours_page.actions.unsupported_message", { action: actionLabel.toLowerCase() }),
-    });
-
   const handleCopyLink = () =>
     copyUrlToClipboard(workItemLink).then(() =>
       setToast({
@@ -93,18 +83,16 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
       })
     );
 
-  const isOpenTab = currentTab === EInboxIssueCurrentTab.OPEN;
-
   return (
     <>
       <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 lg:flex">
         <div className="flex items-center gap-4">
           {issue?.project_id && issue.sequence_id && (
             <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
-              {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
+              {targetProjectIdentifier}-{issue.sequence_id}
             </h3>
           )}
-          <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
+          <ExternalContourStatePill request={contourRequest} />
           <div className="flex w-full items-center justify-end">
             <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
@@ -117,30 +105,6 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
           </div>
 
           <div className="flex flex-wrap items-center gap-2">
-            {isOpenTab ? (
-              <>
-                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.send"))}>
-                  <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
-                  {t("external_contours_page.actions.send")}
-                </Button>
-                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.decline"))}>
-                  <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
-                  {t("external_contours_page.actions.decline")}
-                </Button>
-              </>
-            ) : (
-              <>
-                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.accept"))}>
-                  <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
-                  {t("external_contours_page.actions.accept")}
-                </Button>
-                <Button variant="secondary" size="lg" onClick={() => showWorkflowToast(t("external_contours_page.actions.decline"))}>
-                  <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
-                  {t("external_contours_page.actions.decline")}
-                </Button>
-              </>
-            )}
-
             <Button variant="secondary" size="lg" prependIcon={<LinkIcon className="h-2.5 w-2.5" />} onClick={handleCopyLink}>
               {t("external_contours_page.actions.copy")}
             </Button>
@@ -159,14 +123,13 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
           className={`my-auto mr-2 h-4 w-4 flex-shrink-0 ${isMobileSidebar ? "text-accent-primary" : "text-secondary"}`}
         />
         <div className="flex w-full items-center gap-2">
-          <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
+          <ExternalContourStatePill request={contourRequest} />
           <div className="ml-auto flex items-center gap-2">
-            <Button variant="secondary" size="sm" onClick={() => showWorkflowToast(isOpenTab ? t("external_contours_page.actions.send") : t("external_contours_page.actions.accept"))}>
-              {isOpenTab ? t("external_contours_page.actions.send") : t("external_contours_page.actions.accept")}
-            </Button>
-            <Button variant="secondary" size="sm" onClick={() => showWorkflowToast(t("external_contours_page.actions.decline"))}>
-              {t("external_contours_page.actions.decline")}
-            </Button>
+            <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
+              <Button variant="secondary" size="sm">
+                {t("external_contours_page.actions.open")}
+              </Button>
+            </ControlLink>
           </div>
         </div>
       </Header>