UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выделение action-set и упрощение mobile header внешнего контура

2026-04-20 21:12:42 +03:00
parent ab2a5ffb9a
commit c880c0a319
3 changed files with 218 additions and 99 deletions
@@ -4,12 +4,12 @@
 * See the LICENSE file for details.
 */

-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { MoreHorizontal, MoveDiagonal, MoveRight } from "lucide-react";
+import { MoveDiagonal, MoveRight } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
+import { IconButton } from "@plane/propel/icon-button";
 import { Button } from "@plane/propel/button";
 import {
  CenterPanelIcon,
@@ -19,22 +19,25 @@ import {
  CloseCircleFilledIcon,
  CopyLinkIcon,
  FullScreenPanelIcon,
-  NewTabIcon,
  SidePanelIcon,
 } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
-import { ControlLink, CustomMenu, CustomSelect, Header, Row, Tooltip } from "@plane/ui";
+import { ControlLink, CustomSelect, Header, Row, Tooltip } 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 { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
+import { ExternalContourActionsMenu } from "./actions-menu";
 import { ExternalContourStatePill } from "./state-pill";
 import { ExternalContourDeclineModal } from "./decline-modal";
-import { ExternalContourSubscription } from "./subscription";
+import {
+  ExternalContourSubscriptionButton,
+  useExternalContourSubscription,
+} from "./subscription";

 export type TExternalContourPeekMode = "side-peek" | "modal" | "full-screen";

@@ -82,7 +85,6 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
    currentTab,
    embedIssue = false,
  } = props;
-  const parentRef = useRef<HTMLDivElement>(null);
  const { t } = useTranslation();
  const router = useAppRouter();
  const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
@@ -138,6 +140,12 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
    projectIdentifier: targetProjectIdentifier,
    sequenceId: issue.sequence_id,
  });
+  const subscriptionProjectId = issue.project_id || sourceProjectId;
+  const { isSubscribed, loading: isSubscriptionLoading, toggleSubscription } = useExternalContourSubscription({
+    workspaceSlug,
+    projectId: subscriptionProjectId,
+    issueId: issue.id,
+  });

  const handleCopyLink = () =>
    copyUrlToClipboard(requestLink).then(() =>
@@ -148,6 +156,28 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
      })
    );

+  const handleToggleSubscription = async () => {
+    try {
+      const nextValue = !isSubscribed;
+      await toggleSubscription();
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("toast.success"),
+        message: nextValue ? t("issue.subscription.actions.subscribed") : t("issue.subscription.actions.unsubscribed"),
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: t("common.error.message"),
+      });
+    }
+  };
+
+  const handleOpenTarget = () => {
+    router.push(workItemLink);
+  };
+
  const handleDecision = async (action: "accept" | "decline", comment?: string) => {
    try {
      await decideRequest(workspaceSlug, sourceProjectId, contourRequest.id, action, comment);
@@ -186,7 +216,6 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
      />

      <Row
-        ref={parentRef}
        className={`relative z-15 hidden h-full w-full items-center justify-between gap-4 px-6 py-5 lg:flex ${
          currentMode?.key === "full-screen" ? "border-b border-subtle/70" : ""
        }`}
@@ -287,10 +316,10 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
            )}

            {hasDirectTargetAccess && (
-              <ExternalContourSubscription
-                workspaceSlug={workspaceSlug}
-                projectId={issue.project_id || sourceProjectId}
-                issueId={issue.id}
+              <ExternalContourSubscriptionButton
+                isSubscribed={isSubscribed}
+                loading={isSubscriptionLoading}
+                onToggle={handleToggleSubscription}
                buttonClassName="!h-10 rounded-[18px] border-transparent bg-layer-2/80 px-4 shadow-none backdrop-blur-xl hover:!bg-layer-2-active focus-visible:outline-none"
              />
            )}
@@ -305,26 +334,15 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
              />
            </Tooltip>

-            <CustomMenu
-              customButton={<MoreHorizontal className="size-4" />}
-              customButtonClassName={getIconButtonStyling("secondary", "lg")}
-              placement="bottom-start"
-            >
-              <CustomMenu.MenuItem onClick={handleCopyLink}>
-                <div className="flex items-center gap-2">
-                  <CopyLinkIcon width={14} height={14} />
-                  {t("external_contours_page.actions.copy")}
-                </div>
-              </CustomMenu.MenuItem>
-              {hasDirectTargetAccess && (
-                <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
-                  <div className="flex items-center gap-2">
-                    <NewTabIcon width={14} height={14} />
-                    {t("external_contours_page.actions.open")}
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-            </CustomMenu>
+            <ExternalContourActionsMenu
+              canOpenTargetWorkItem={hasDirectTargetAccess}
+              canReviewClosedRequest={canReviewClosedRequest}
+              isSubscribed={isSubscribed}
+              isSubscriptionLoading={isSubscriptionLoading}
+              onCopy={handleCopyLink}
+              onOpenTarget={handleOpenTarget}
+              onToggleSubscription={handleToggleSubscription}
+            />
          </div>
        </div>
      </Row>
@@ -339,63 +357,25 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
              <MoveDiagonal className="h-4 w-4 text-tertiary hover:text-secondary" />
            </ControlLink>
          )}
-          {currentMode && !embedIssue && (
-            <CustomSelect
-              value={currentMode}
-              onChange={(value: TExternalContourPeekMode) => setPeekMode(value)}
-              customButton={<currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />}
-            >
-              {PEEK_OPTIONS.map((mode) => (
-                <CustomSelect.Option key={mode.key} value={mode.key}>
-                  <div
-                    className={`flex items-center gap-1.5 ${
-                      currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
-                    }`}
-                  >
-                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
-                    {t(mode.i18n_title)}
-                  </div>
-                </CustomSelect.Option>
-              ))}
-            </CustomSelect>
-          )}
          <ExternalContourStatePill request={contourRequest} />
          <div className="ml-auto flex items-center gap-2">
-            {canReviewClosedRequest && (
-              <>
-                <Button variant="primary" size="sm" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
-                  {t("external_contours_page.actions.accept")}
-                </Button>
-                <Button variant="secondary" size="sm" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
-                  {t("external_contours_page.actions.decline")}
-                </Button>
-              </>
-            )}
            {isSourceAccepted && (
              <div className="nodedc-external-readonly-value min-h-10 w-auto px-4 text-13 font-medium">
                {t("external_contours_page.traceability.source_decision_accepted")}
              </div>
            )}
-            <CustomMenu
-              customButton={<MoreHorizontal className="size-4" />}
-              customButtonClassName={getIconButtonStyling("secondary", "lg")}
-              placement="bottom-start"
-            >
-              <CustomMenu.MenuItem onClick={handleCopyLink}>
-                <div className="flex items-center gap-2">
-                  <CopyLinkIcon width={14} height={14} />
-                  {t("external_contours_page.actions.copy")}
-                </div>
-              </CustomMenu.MenuItem>
-              {hasDirectTargetAccess && (
-                <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
-                  <div className="flex items-center gap-2">
-                    <NewTabIcon width={14} height={14} />
-                    {t("external_contours_page.actions.open")}
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-            </CustomMenu>
+            <ExternalContourActionsMenu
+              canOpenTargetWorkItem={hasDirectTargetAccess}
+              canReviewClosedRequest={canReviewClosedRequest}
+              includeDecisionActions
+              isSubscribed={isSubscribed}
+              isSubscriptionLoading={isSubscriptionLoading}
+              onAccept={() => handleDecision("accept")}
+              onCopy={handleCopyLink}
+              onDecline={() => setIsDeclineModalOpen(true)}
+              onOpenTarget={handleOpenTarget}
+              onToggleSubscription={handleToggleSubscription}
+            />
          </div>
        </div>
      </Header>