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

2026-04-20 21:12:42 +03:00 · 2026-04-20 21:12:42 +03:00 · c880c0a319
parent ab2a5ffb9a
commit c880c0a319
3 changed files with 218 additions and 99 deletions
--- a/plane-src/apps/web/ce/components/projects/external-contours/actions-menu.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/actions-menu.tsx
@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { MoreHorizontal, Bell, BellOff } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
+import { CheckCircleFilledIcon, CloseCircleFilledIcon, CopyLinkIcon, NewTabIcon } from "@plane/propel/icons";
+import { CustomMenu } from "@plane/ui";
+
+type Props = {
+  canOpenTargetWorkItem: boolean;
+  canReviewClosedRequest: boolean;
+  includeDecisionActions?: boolean;
+  isSubscribed?: boolean;
+  isSubscriptionLoading?: boolean;
+  onAccept?: () => void;
+  onCopy: () => void;
+  onDecline?: () => void;
+  onOpenTarget?: () => void;
+  onToggleSubscription?: () => void;
+};
+
+export const ExternalContourActionsMenu = (props: Props) => {
+  const {
+    canOpenTargetWorkItem,
+    canReviewClosedRequest,
+    includeDecisionActions = false,
+    isSubscribed,
+    isSubscriptionLoading = false,
+    onAccept,
+    onCopy,
+    onDecline,
+    onOpenTarget,
+    onToggleSubscription,
+  } = props;
+  const { t } = useTranslation();
+
+  return (
+    <CustomMenu
+      customButton={<MoreHorizontal className="size-4" />}
+      customButtonClassName={getIconButtonStyling("secondary", "lg")}
+      placement="bottom-start"
+    >
+      {includeDecisionActions && canReviewClosedRequest && onAccept && (
+        <CustomMenu.MenuItem onClick={onAccept}>
+          <div className="flex items-center gap-2 text-success-secondary">
+            <CheckCircleFilledIcon width={14} height={14} />
+            {t("external_contours_page.actions.accept")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+
+      {includeDecisionActions && canReviewClosedRequest && onDecline && (
+        <CustomMenu.MenuItem onClick={onDecline}>
+          <div className="flex items-center gap-2 text-danger-secondary">
+            <CloseCircleFilledIcon width={14} height={14} />
+            {t("external_contours_page.actions.decline")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+
+      <CustomMenu.MenuItem onClick={onCopy}>
+        <div className="flex items-center gap-2">
+          <CopyLinkIcon width={14} height={14} />
+          {t("external_contours_page.actions.copy")}
+        </div>
+      </CustomMenu.MenuItem>
+
+      {canOpenTargetWorkItem && onOpenTarget && (
+        <CustomMenu.MenuItem onClick={onOpenTarget}>
+          <div className="flex items-center gap-2">
+            <NewTabIcon width={14} height={14} />
+            {t("external_contours_page.actions.open")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+
+      {canOpenTargetWorkItem && onToggleSubscription && (
+        <CustomMenu.MenuItem onClick={onToggleSubscription} disabled={isSubscriptionLoading || isSubscribed === undefined}>
+          <div className="flex items-center gap-2">
+            {isSubscribed ? <BellOff width={14} height={14} /> : <Bell width={14} height={14} />}
+            {isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+    </CustomMenu>
+  );
+};
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
@ -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>
--- a/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx
@ -16,16 +16,17 @@ import { IssueService } from "@/services/issue/issue.service";

 const issueService = new IssueService();

-type Props = {
+type TSubscriptionIdentity = {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
+};
+
+type Props = TSubscriptionIdentity & {
  buttonClassName?: string;
 };

-export const ExternalContourSubscription = observer(function ExternalContourSubscription(props: Props) {
-  const { workspaceSlug, projectId, issueId, buttonClassName } = props;
-  const { t } = useTranslation();
+export const useExternalContourSubscription = ({ workspaceSlug, projectId, issueId }: TSubscriptionIdentity) => {
  const [isSubscribed, setIsSubscribed] = useState<boolean | undefined>(undefined);
  const [loading, setLoading] = useState(false);

@ -50,7 +51,7 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
    };
  }, [workspaceSlug, projectId, issueId]);

-  const handleSubscription = async () => {
+  const toggleSubscription = async () => {
    if (!workspaceSlug || !projectId || !issueId) return;

    const nextValue = !isSubscribed;
@ -63,24 +64,34 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
      } else {
        await issueService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);
      }
-
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: t("toast.success"),
-        message: nextValue ? t("issue.subscription.actions.subscribed") : t("issue.subscription.actions.unsubscribed"),
-      });
    } catch {
      setIsSubscribed(!nextValue);
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: t("toast.error"),
-        message: t("common.error.message"),
-      });
+      throw new Error("subscription-toggle-failed");
    } finally {
      setLoading(false);
    }
  };

+  return {
+    isSubscribed,
+    loading,
+    toggleSubscription,
+  };
+};
+
+type TExternalContourSubscriptionButtonProps = {
+  isSubscribed: boolean | undefined;
+  loading: boolean;
+  onToggle: () => Promise<void>;
+  buttonClassName?: string;
+};
+
+export const ExternalContourSubscriptionButton = observer(function ExternalContourSubscriptionButton(
+  props: TExternalContourSubscriptionButtonProps
+) {
+  const { isSubscribed, loading, onToggle, buttonClassName } = props;
+  const { t } = useTranslation();
+
  if (isSubscribed === undefined) {
    return (
      <Loader>
@ -94,7 +105,7 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
      prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
      variant="secondary"
      className={cn("hover:!bg-accent-primary/20", buttonClassName)}
-      onClick={handleSubscription}
+      onClick={() => void onToggle()}
      disabled={loading}
      size="lg"
    >
@ -108,3 +119,40 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
    </Button>
  );
 });
+
+export const ExternalContourSubscription = observer(function ExternalContourSubscription(props: Props) {
+  const { workspaceSlug, projectId, issueId, buttonClassName } = props;
+  const { t } = useTranslation();
+  const { isSubscribed, loading, toggleSubscription } = useExternalContourSubscription({
+    workspaceSlug,
+    projectId,
+    issueId,
+  });
+
+  const handleToggle = 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"),
+      });
+    }
+  };
+
+  return (
+    <ExternalContourSubscriptionButton
+      isSubscribed={isSubscribed}
+      loading={loading}
+      onToggle={handleToggle}
+      buttonClassName={buttonClassName}
+    />
+  );
+});