UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: унификация shell карточки внешнего контура с внутренним peek
This commit is contained in:
DCCONSTRUCTIONS
parent
8bf6f2a510
commit
ab2a5ffb9a
|
|
@ -9,21 +9,28 @@ import { observer } from "mobx-react";
|
|||
import useSWR from "swr";
|
||||
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
|
||||
import type { TNameDescriptionLoader } from "@plane/types";
|
||||
import { ContentWrapper } from "@plane/ui";
|
||||
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
|
||||
import { useUser, useUserPermissions } from "@/hooks/store/user";
|
||||
import { useAppRouter } from "@/hooks/use-app-router";
|
||||
import { ExternalContoursIssueActionsHeader } from "./issue-header";
|
||||
import { ExternalContoursPeekShell } from "./peek-shell";
|
||||
import { ExternalContoursIssueMainContent } from "./issue-root";
|
||||
|
||||
type Props = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
inboxIssueId: string;
|
||||
embedIssue?: boolean;
|
||||
embedRemoveCurrentNotification?: () => void;
|
||||
};
|
||||
|
||||
export const ExternalContoursContentRoot = observer(function ExternalContoursContentRoot(props: Props) {
|
||||
const { workspaceSlug, projectId, inboxIssueId } = props;
|
||||
const {
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
inboxIssueId,
|
||||
embedIssue = false,
|
||||
embedRemoveCurrentNotification,
|
||||
} = props;
|
||||
const router = useAppRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
|
||||
const [isDetailResolved, setIsDetailResolved] = useState(false);
|
||||
|
|
@ -81,28 +88,26 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
|
|||
if (!contourRequest || !issue) return <></>;
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden pt-6">
|
||||
<div className="z-[11] min-h-[52px] flex-shrink-0">
|
||||
<ExternalContoursIssueActionsHeader
|
||||
workspaceSlug={workspaceSlug}
|
||||
sourceProjectId={projectId}
|
||||
contourRequest={contourRequest}
|
||||
isSubmitting={isSubmitting}
|
||||
hasDirectTargetAccess={hasDirectTargetAccess}
|
||||
/>
|
||||
</div>
|
||||
<ContentWrapper className="space-y-4 px-4 pb-4 pt-4">
|
||||
<ExternalContoursIssueMainContent
|
||||
workspaceSlug={workspaceSlug}
|
||||
sourceProjectId={projectId}
|
||||
contourRequest={contourRequest}
|
||||
hasDirectTargetAccess={hasDirectTargetAccess}
|
||||
isEditable={!!isEditable && !readOnly}
|
||||
isSourceEditable={isSourceEditable}
|
||||
isSubmitting={isSubmitting}
|
||||
setIsSubmitting={setIsSubmitting}
|
||||
/>
|
||||
</ContentWrapper>
|
||||
</div>
|
||||
<ExternalContoursPeekShell
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
contourRequest={contourRequest}
|
||||
hasDirectTargetAccess={hasDirectTargetAccess}
|
||||
isSubmitting={isSubmitting}
|
||||
embedIssue={embedIssue}
|
||||
embedRemoveCurrentNotification={embedRemoveCurrentNotification}
|
||||
onClose={() => router.replace(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}`)}
|
||||
>
|
||||
<ExternalContoursIssueMainContent
|
||||
workspaceSlug={workspaceSlug}
|
||||
sourceProjectId={projectId}
|
||||
contourRequest={contourRequest}
|
||||
hasDirectTargetAccess={hasDirectTargetAccess}
|
||||
isEditable={!!isEditable && !readOnly}
|
||||
isSourceEditable={isSourceEditable}
|
||||
isSubmitting={isSubmitting}
|
||||
setIsSubmitting={setIsSubmitting}
|
||||
/>
|
||||
</ExternalContoursPeekShell>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,22 +4,57 @@
|
|||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { MoreHorizontal, MoveDiagonal, MoveRight } from "lucide-react";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
|
||||
import {
|
||||
CenterPanelIcon,
|
||||
CheckCircleFilledIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
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, Header, Row } from "@plane/ui";
|
||||
import { ControlLink, CustomMenu, 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 { ExternalContourStatePill } from "./state-pill";
|
||||
import { ExternalContourDeclineModal } from "./decline-modal";
|
||||
import { ExternalContourSubscription } from "./subscription";
|
||||
|
||||
export type TExternalContourPeekMode = "side-peek" | "modal" | "full-screen";
|
||||
|
||||
const PEEK_OPTIONS: { key: TExternalContourPeekMode; icon: any; i18n_title: string }[] = [
|
||||
{
|
||||
key: "side-peek",
|
||||
icon: SidePanelIcon,
|
||||
i18n_title: "common.side_peek",
|
||||
},
|
||||
{
|
||||
key: "modal",
|
||||
icon: CenterPanelIcon,
|
||||
i18n_title: "common.modal",
|
||||
},
|
||||
{
|
||||
key: "full-screen",
|
||||
icon: FullScreenPanelIcon,
|
||||
i18n_title: "common.full_screen",
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
workspaceSlug: string;
|
||||
|
|
@ -27,6 +62,11 @@ type Props = {
|
|||
contourRequest: TExternalContourRequest;
|
||||
hasDirectTargetAccess: boolean;
|
||||
isSubmitting: TNameDescriptionLoader;
|
||||
removeRoutePeekId: () => void;
|
||||
peekMode: TExternalContourPeekMode;
|
||||
setPeekMode: (value: TExternalContourPeekMode) => void;
|
||||
currentTab: TInboxIssueCurrentTab;
|
||||
embedIssue?: boolean;
|
||||
};
|
||||
|
||||
export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
|
||||
|
|
@ -36,16 +76,27 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
contourRequest,
|
||||
hasDirectTargetAccess,
|
||||
isSubmitting,
|
||||
removeRoutePeekId,
|
||||
peekMode,
|
||||
setPeekMode,
|
||||
currentTab,
|
||||
embedIssue = false,
|
||||
} = props;
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const { t } = useTranslation();
|
||||
const router = useAppRouter();
|
||||
const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
|
||||
const { currentTab, decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
|
||||
const { decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
|
||||
const { currentTab: boardCurrentTab, columnIdsMap } = useProjectExternalContoursBoard();
|
||||
const { getProjectById } = useProject();
|
||||
|
||||
const issue = contourRequest.issue;
|
||||
const currentRequestId = contourRequest.id;
|
||||
const hasRelativeNavigation = !!currentRequestId && filteredRequestIds.includes(currentRequestId);
|
||||
const boardRequestIds =
|
||||
boardCurrentTab === currentTab ? [...(columnIdsMap.outgoing ?? []), ...(columnIdsMap.incoming ?? [])] : [];
|
||||
const relativeRequestIds = boardRequestIds.includes(currentRequestId) ? boardRequestIds : filteredRequestIds;
|
||||
const currentMode = PEEK_OPTIONS.find((mode) => mode.key === peekMode);
|
||||
const hasRelativeNavigation = !!currentRequestId && relativeRequestIds.includes(currentRequestId);
|
||||
const canReviewClosedRequest =
|
||||
contourRequest.capabilities?.can_source_decide ??
|
||||
(contourRequest.status === "closed" && contourRequest.source_decision !== "accepted");
|
||||
|
|
@ -53,18 +104,18 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
|
||||
const redirectToRelativeIssue = useCallback(
|
||||
(direction: "next" | "prev") => {
|
||||
if (!filteredRequestIds || !currentRequestId || !hasRelativeNavigation || filteredRequestIds.length <= 1) return;
|
||||
const currentIssueIndex = filteredRequestIds.findIndex((requestId) => requestId === currentRequestId);
|
||||
if (!relativeRequestIds || !currentRequestId || !hasRelativeNavigation || relativeRequestIds.length <= 1) return;
|
||||
const currentIssueIndex = relativeRequestIds.findIndex((requestId) => requestId === currentRequestId);
|
||||
if (currentIssueIndex === -1) return;
|
||||
const nextIssueIndex =
|
||||
direction === "next"
|
||||
? (currentIssueIndex + 1) % filteredRequestIds.length
|
||||
: (currentIssueIndex - 1 + filteredRequestIds.length) % filteredRequestIds.length;
|
||||
const nextIssueId = filteredRequestIds[nextIssueIndex];
|
||||
? (currentIssueIndex + 1) % relativeRequestIds.length
|
||||
: (currentIssueIndex - 1 + relativeRequestIds.length) % relativeRequestIds.length;
|
||||
const nextIssueId = relativeRequestIds[nextIssueIndex];
|
||||
if (!nextIssueId) return;
|
||||
router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
|
||||
},
|
||||
[currentRequestId, currentTab, filteredRequestIds, hasRelativeNavigation, router, sourceProjectId, workspaceSlug]
|
||||
[currentRequestId, currentTab, hasRelativeNavigation, relativeRequestIds, router, sourceProjectId, workspaceSlug]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -78,6 +129,8 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
}, [redirectToRelativeIssue]);
|
||||
|
||||
const targetProjectIdentifier = issue.project_detail?.identifier || getProjectById(issue.project_id || "")?.identifier;
|
||||
const requestTab = contourRequest.status === "closed" ? EInboxIssueCurrentTab.CLOSED : EInboxIssueCurrentTab.OPEN;
|
||||
const requestLink = `/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${requestTab}&inboxIssueId=${contourRequest.id}`;
|
||||
const workItemLink = generateWorkItemLink({
|
||||
workspaceSlug: workspaceSlug?.toString(),
|
||||
projectId: issue.project_id,
|
||||
|
|
@ -87,7 +140,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
});
|
||||
|
||||
const handleCopyLink = () =>
|
||||
copyUrlToClipboard(workItemLink).then(() =>
|
||||
copyUrlToClipboard(requestLink).then(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: t("common.link_copied"),
|
||||
|
|
@ -132,26 +185,72 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
onSubmit={(comment) => handleDecision("decline", comment)}
|
||||
/>
|
||||
|
||||
<Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 px-4 lg:flex">
|
||||
<div className="flex items-center gap-4">
|
||||
<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" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
<Tooltip tooltipContent={t("common.close_peek_view")}>
|
||||
<button onClick={removeRoutePeekId}>
|
||||
<MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
{hasDirectTargetAccess && (
|
||||
<Tooltip tooltipContent={t("issue.open_in_full_screen")}>
|
||||
<Link href={workItemLink} onClick={() => removeRoutePeekId()}>
|
||||
<MoveDiagonal className="h-4 w-4 text-tertiary hover:text-secondary" />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{currentMode && !embedIssue && (
|
||||
<CustomSelect
|
||||
value={currentMode}
|
||||
onChange={(value: TExternalContourPeekMode) => setPeekMode(value)}
|
||||
customButton={
|
||||
<Tooltip tooltipContent={t("common.toggle_peek_view_layout")}>
|
||||
<button type="button">
|
||||
<currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{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>
|
||||
)}
|
||||
|
||||
{issue?.project_id && issue.sequence_id && (
|
||||
<h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
|
||||
{targetProjectIdentifier}-{issue.sequence_id}
|
||||
</h3>
|
||||
)}
|
||||
<ExternalContourStatePill request={contourRequest} />
|
||||
<div className="flex w-full items-center justify-end">
|
||||
<div className="flex min-w-0 flex-1 items-center justify-end">
|
||||
<NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nodedc-external-detail-toolbar">
|
||||
<div className="nodedc-external-detail-toolbar min-w-0">
|
||||
<div className="nodedc-external-toolbar-cluster">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Previous request"
|
||||
onClick={() => redirectToRelativeIssue("prev")}
|
||||
disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
|
||||
disabled={!hasRelativeNavigation || relativeRequestIds.length <= 1}
|
||||
className="nodedc-external-icon-button"
|
||||
>
|
||||
<ChevronUpIcon className="size-3.5" />
|
||||
|
|
@ -160,7 +259,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
type="button"
|
||||
aria-label="Next request"
|
||||
onClick={() => redirectToRelativeIssue("next")}
|
||||
disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
|
||||
disabled={!hasRelativeNavigation || relativeRequestIds.length <= 1}
|
||||
className="nodedc-external-icon-button"
|
||||
>
|
||||
<ChevronDownIcon className="size-3.5" />
|
||||
|
|
@ -187,28 +286,79 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
|
||||
onClick={handleCopyLink}
|
||||
className="nodedc-external-action-button"
|
||||
>
|
||||
{t("external_contours_page.actions.copy")}
|
||||
</Button>
|
||||
{hasDirectTargetAccess && (
|
||||
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
|
||||
<Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />} className="nodedc-external-action-button">
|
||||
{t("external_contours_page.actions.open")}
|
||||
</Button>
|
||||
</ControlLink>
|
||||
<ExternalContourSubscription
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={issue.project_id || sourceProjectId}
|
||||
issueId={issue.id}
|
||||
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"
|
||||
/>
|
||||
)}
|
||||
|
||||
<Tooltip tooltipContent={t("common.actions.copy_link")}>
|
||||
<IconButton
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
onClick={handleCopyLink}
|
||||
icon={CopyLinkIcon}
|
||||
className="size-10 rounded-[18px] border-transparent bg-layer-2/80 shadow-none backdrop-blur-xl hover:bg-layer-2-active focus-visible:outline-none"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
|
||||
<Header className="justify-start lg:hidden">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<button onClick={removeRoutePeekId}>
|
||||
<MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
|
||||
</button>
|
||||
{hasDirectTargetAccess && (
|
||||
<ControlLink href={workItemLink} onClick={() => removeRoutePeekId()} target="_self">
|
||||
<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 && (
|
||||
|
|
@ -226,13 +376,26 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
|
|||
{t("external_contours_page.traceability.source_decision_accepted")}
|
||||
</div>
|
||||
)}
|
||||
{hasDirectTargetAccess && (
|
||||
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
|
||||
<Button variant="secondary" size="sm" className="nodedc-external-action-button">
|
||||
{t("external_contours_page.actions.open")}
|
||||
</Button>
|
||||
</ControlLink>
|
||||
)}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</Header>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import { createPortal } from "react-dom";
|
||||
import { useCallback, useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { cn } from "@plane/utils";
|
||||
import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
|
||||
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
|
||||
import useKeypress from "@/hooks/use-keypress";
|
||||
import usePeekOverviewOutsideClickDetector from "@/hooks/use-peek-overview-outside-click";
|
||||
import { ExternalContoursIssueActionsHeader, type TExternalContourPeekMode } from "./issue-header";
|
||||
|
||||
const SIDE_PEEK_WIDTH_STORAGE_KEY = "nodedc:external-contour-peek-width";
|
||||
|
||||
type Props = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
contourRequest: TExternalContourRequest;
|
||||
hasDirectTargetAccess: boolean;
|
||||
isSubmitting: TNameDescriptionLoader;
|
||||
embedIssue?: boolean;
|
||||
embedRemoveCurrentNotification?: () => void;
|
||||
children: ReactNode;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const ExternalContoursPeekShell = observer(function ExternalContoursPeekShell(props: Props) {
|
||||
const {
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
contourRequest,
|
||||
hasDirectTargetAccess,
|
||||
isSubmitting,
|
||||
embedIssue = false,
|
||||
embedRemoveCurrentNotification,
|
||||
children,
|
||||
onClose,
|
||||
} = props;
|
||||
const [peekMode, setPeekMode] = useState<TExternalContourPeekMode>("side-peek");
|
||||
const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => {
|
||||
if (typeof window === "undefined") return 720;
|
||||
|
||||
const fallbackWidth = Math.max(640, Math.floor(window.innerWidth * 0.5));
|
||||
const storedWidth = window.localStorage.getItem(SIDE_PEEK_WIDTH_STORAGE_KEY);
|
||||
const parsedWidth = storedWidth ? parseInt(storedWidth, 10) : NaN;
|
||||
|
||||
return Number.isFinite(parsedWidth) ? parsedWidth : fallbackWidth;
|
||||
});
|
||||
const [isResizingPeek, setIsResizingPeek] = useState(false);
|
||||
|
||||
const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
|
||||
const initialPeekWidthRef = useRef<number>(0);
|
||||
const initialMouseXRef = useRef<number>(0);
|
||||
const { currentTab } = useProjectExternalContours();
|
||||
|
||||
const removeRoutePeekId = useCallback(() => {
|
||||
if (embedIssue) {
|
||||
embedRemoveCurrentNotification?.();
|
||||
return;
|
||||
}
|
||||
|
||||
onClose();
|
||||
}, [embedIssue, embedRemoveCurrentNotification, onClose]);
|
||||
|
||||
const stopPeekResizing = useCallback(() => {
|
||||
setIsResizingPeek(false);
|
||||
}, []);
|
||||
|
||||
const handlePeekResize = useCallback(
|
||||
(event: MouseEvent) => {
|
||||
if (!isResizingPeek) return;
|
||||
|
||||
const maxWidth = Math.max(720, window.innerWidth - 48);
|
||||
const minWidth = 640;
|
||||
const deltaX = event.clientX - initialMouseXRef.current;
|
||||
const nextWidth = Math.min(Math.max(initialPeekWidthRef.current - deltaX, minWidth), maxWidth);
|
||||
setSidePeekWidth(nextWidth);
|
||||
},
|
||||
[isResizingPeek]
|
||||
);
|
||||
|
||||
const startPeekResizing = useCallback(
|
||||
(event: ReactMouseEvent) => {
|
||||
if (peekMode !== "side-peek") return;
|
||||
event.preventDefault();
|
||||
setIsResizingPeek(true);
|
||||
initialPeekWidthRef.current = sidePeekWidth;
|
||||
initialMouseXRef.current = event.clientX;
|
||||
},
|
||||
[peekMode, sidePeekWidth]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleWindowResize = () => {
|
||||
const maxWidth = Math.max(720, window.innerWidth - 48);
|
||||
setSidePeekWidth((currentWidth) => Math.min(currentWidth, maxWidth));
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
return () => window.removeEventListener("resize", handleWindowResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const maxWidth = Math.max(720, window.innerWidth - 48);
|
||||
const clampedWidth = Math.min(Math.max(sidePeekWidth, 640), maxWidth);
|
||||
|
||||
window.localStorage.setItem(SIDE_PEEK_WIDTH_STORAGE_KEY, String(clampedWidth));
|
||||
|
||||
if (clampedWidth !== sidePeekWidth) {
|
||||
setSidePeekWidth(clampedWidth);
|
||||
}
|
||||
}, [sidePeekWidth]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isResizingPeek) return;
|
||||
|
||||
document.addEventListener("mousemove", handlePeekResize);
|
||||
document.addEventListener("mouseup", stopPeekResizing);
|
||||
document.addEventListener("mouseleave", stopPeekResizing);
|
||||
window.addEventListener("blur", stopPeekResizing);
|
||||
document.body.style.cursor = "col-resize";
|
||||
document.body.style.userSelect = "none";
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousemove", handlePeekResize);
|
||||
document.removeEventListener("mouseup", stopPeekResizing);
|
||||
document.removeEventListener("mouseleave", stopPeekResizing);
|
||||
window.removeEventListener("blur", stopPeekResizing);
|
||||
document.body.style.cursor = "";
|
||||
document.body.style.userSelect = "";
|
||||
};
|
||||
}, [handlePeekResize, isResizingPeek, stopPeekResizing]);
|
||||
|
||||
usePeekOverviewOutsideClickDetector(
|
||||
issuePeekOverviewRef,
|
||||
() => {
|
||||
if (!embedIssue) removeRoutePeekId();
|
||||
},
|
||||
contourRequest.id,
|
||||
["main-sidebar"]
|
||||
);
|
||||
|
||||
useKeypress("Escape", () => !embedIssue && removeRoutePeekId());
|
||||
|
||||
const peekOverviewClassName = cn(
|
||||
!embedIssue
|
||||
? "absolute z-[25] flex flex-col overflow-hidden border border-subtle/70 bg-surface-1/80 backdrop-blur-2xl transition-all duration-300"
|
||||
: "h-full w-full",
|
||||
!embedIssue && {
|
||||
"top-3 right-3 bottom-3 w-[calc(100%-1.5rem)] rounded-[28px] border md:min-w-[640px] md:max-w-[calc(100vw-1.5rem)]":
|
||||
peekMode === "side-peek",
|
||||
"top-[8.33%] left-[8.33%] size-5/6 rounded-[28px]": peekMode === "modal",
|
||||
"absolute inset-0 m-4 rounded-[28px]": peekMode === "full-screen",
|
||||
}
|
||||
);
|
||||
|
||||
const portalContainer = typeof document !== "undefined" ? document.getElementById("full-screen-portal") : null;
|
||||
|
||||
const content = (
|
||||
<div className="w-full text-body-sm-regular">
|
||||
<div
|
||||
ref={issuePeekOverviewRef}
|
||||
className={peekOverviewClassName}
|
||||
style={{
|
||||
width: !embedIssue && peekMode === "side-peek" ? `${sidePeekWidth}px` : undefined,
|
||||
boxShadow:
|
||||
"0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)",
|
||||
}}
|
||||
>
|
||||
{!embedIssue && peekMode === "side-peek" && (
|
||||
<div
|
||||
className="absolute top-0 left-0 z-[26] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
|
||||
onMouseDown={startPeekResizing}
|
||||
role="separator"
|
||||
aria-label="Resize external contour panel"
|
||||
/>
|
||||
)}
|
||||
<ExternalContoursIssueActionsHeader
|
||||
workspaceSlug={workspaceSlug}
|
||||
sourceProjectId={projectId}
|
||||
contourRequest={contourRequest}
|
||||
hasDirectTargetAccess={hasDirectTargetAccess}
|
||||
isSubmitting={isSubmitting}
|
||||
removeRoutePeekId={removeRoutePeekId}
|
||||
peekMode={peekMode}
|
||||
setPeekMode={setPeekMode}
|
||||
currentTab={currentTab}
|
||||
embedIssue={embedIssue}
|
||||
/>
|
||||
<div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
|
||||
{["side-peek", "modal"].includes(peekMode) ? (
|
||||
<div className="relative flex flex-col gap-4 px-8 py-6">{children}</div>
|
||||
) : (
|
||||
<div className="relative h-full w-full overflow-auto px-6 py-5">{children}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return <>{!embedIssue && portalContainer ? createPortal(content, portalContainer) : content}</>;
|
||||
});
|
||||
|
|
@ -95,18 +95,15 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full w-full overflow-hidden bg-surface-1 pt-2">
|
||||
{inboxIssueId ? (
|
||||
<ExternalContoursContentRoot
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
projectId={projectId.toString()}
|
||||
inboxIssueId={inboxIssueId.toString()}
|
||||
/>
|
||||
) : (
|
||||
<ExternalContoursBoardRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
<div className="flex h-full w-full overflow-hidden bg-surface-1 pt-2">
|
||||
<ExternalContoursBoardRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
||||
{inboxIssueId && (
|
||||
<ExternalContoursContentRoot
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
projectId={projectId.toString()}
|
||||
inboxIssueId={inboxIssueId.toString()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Bell, BellOff } from "lucide-react";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import { Loader } from "@plane/ui";
|
||||
import { cn } from "@plane/utils";
|
||||
import { IssueService } from "@/services/issue/issue.service";
|
||||
|
||||
const issueService = new IssueService();
|
||||
|
||||
type Props = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
buttonClassName?: string;
|
||||
};
|
||||
|
||||
export const ExternalContourSubscription = observer(function ExternalContourSubscription(props: Props) {
|
||||
const { workspaceSlug, projectId, issueId, buttonClassName } = props;
|
||||
const { t } = useTranslation();
|
||||
const [isSubscribed, setIsSubscribed] = useState<boolean | undefined>(undefined);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const fetchSubscription = async () => {
|
||||
try {
|
||||
const response = await issueService.getIssueNotificationSubscriptionStatus(workspaceSlug, projectId, issueId);
|
||||
if (isMounted) setIsSubscribed(response?.subscribed ?? false);
|
||||
} catch {
|
||||
if (isMounted) setIsSubscribed(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (workspaceSlug && projectId && issueId) {
|
||||
void fetchSubscription();
|
||||
}
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [workspaceSlug, projectId, issueId]);
|
||||
|
||||
const handleSubscription = async () => {
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
|
||||
const nextValue = !isSubscribed;
|
||||
setLoading(true);
|
||||
setIsSubscribed(nextValue);
|
||||
|
||||
try {
|
||||
if (nextValue) {
|
||||
await issueService.subscribeToIssueNotifications(workspaceSlug, projectId, issueId);
|
||||
} 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"),
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isSubscribed === undefined) {
|
||||
return (
|
||||
<Loader>
|
||||
<Loader.Item width="106px" height="40px" />
|
||||
</Loader>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
|
||||
variant="secondary"
|
||||
className={cn("hover:!bg-accent-primary/20", buttonClassName)}
|
||||
onClick={handleSubscription}
|
||||
disabled={loading}
|
||||
size="lg"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="hidden sm:block">{t("common.loading")}</span>
|
||||
) : isSubscribed ? (
|
||||
<span className="hidden sm:block">{t("common.actions.unsubscribe")}</span>
|
||||
) : (
|
||||
<span className="hidden sm:block">{t("common.actions.subscribe")}</span>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
|
|
@ -105,6 +105,8 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
|
|||
workspaceSlug={workspace_slug}
|
||||
projectId={project_id}
|
||||
inboxIssueId={issue_id}
|
||||
embedIssue
|
||||
embedRemoveCurrentNotification={embedRemoveCurrentNotification}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue