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

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>
+  );
+};

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
+              <ExternalContourSubscriptionButton
-                workspaceSlug={workspaceSlug}
+                isSubscribed={isSubscribed}
-                projectId={issue.project_id || sourceProjectId}
+                loading={isSubscriptionLoading}
-                issueId={issue.id}
+                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
+            <ExternalContourActionsMenu
-              customButton={<MoreHorizontal className="size-4" />}
+              canOpenTargetWorkItem={hasDirectTargetAccess}
-              customButtonClassName={getIconButtonStyling("secondary", "lg")}
+              canReviewClosedRequest={canReviewClosedRequest}
-              placement="bottom-start"
+              isSubscribed={isSubscribed}
-            >
+              isSubscriptionLoading={isSubscriptionLoading}
-              <CustomMenu.MenuItem onClick={handleCopyLink}>
+              onCopy={handleCopyLink}
-                <div className="flex items-center gap-2">
+              onOpenTarget={handleOpenTarget}
-                  <CopyLinkIcon width={14} height={14} />
+              onToggleSubscription={handleToggleSubscription}
-                  {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>
           </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
+            <ExternalContourActionsMenu
-              customButton={<MoreHorizontal className="size-4" />}
+              canOpenTargetWorkItem={hasDirectTargetAccess}
-              customButtonClassName={getIconButtonStyling("secondary", "lg")}
+              canReviewClosedRequest={canReviewClosedRequest}
-              placement="bottom-start"
+              includeDecisionActions
-            >
+              isSubscribed={isSubscribed}
-              <CustomMenu.MenuItem onClick={handleCopyLink}>
+              isSubscriptionLoading={isSubscriptionLoading}
-                <div className="flex items-center gap-2">
+              onAccept={() => handleDecision("accept")}
-                  <CopyLinkIcon width={14} height={14} />
+              onCopy={handleCopyLink}
-                  {t("external_contours_page.actions.copy")}
+              onDecline={() => setIsDeclineModalOpen(true)}
-                </div>
+              onOpenTarget={handleOpenTarget}
-              </CustomMenu.MenuItem>
+              onToggleSubscription={handleToggleSubscription}
-              {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>
           </div>
         </div>
       </Header>

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) {
+export const useExternalContourSubscription = ({ workspaceSlug, projectId, issueId }: TSubscriptionIdentity) => {
-  const { workspaceSlug, projectId, issueId, buttonClassName } = props;
-  const { t } = useTranslation();
   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({
+      throw new Error("subscription-toggle-failed");
-        type: TOAST_TYPE.ERROR,
-        title: t("toast.error"),
-        message: t("common.error.message"),
-      });
     } 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}
+    />
+  );
+});