392 lines
15 KiB
TypeScript
392 lines
15 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { observer } from "mobx-react";
|
|
import Link from "next/link";
|
|
import { Check, MoveDiagonal, MoveRight, X } from "lucide-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { IconButton } from "@plane/propel/icon-button";
|
|
import {
|
|
CenterPanelIcon,
|
|
ChevronDownIcon,
|
|
ChevronUpIcon,
|
|
CopyLinkIcon,
|
|
FullScreenPanelIcon,
|
|
SidePanelIcon,
|
|
} from "@plane/propel/icons";
|
|
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
|
import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
|
|
import { ControlLink, Header, Row, Tooltip } from "@plane/ui";
|
|
import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
|
|
import { SelectionDropdown } from "@/components/common/selection-dropdown";
|
|
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 {
|
|
ExternalContourSubscriptionButton,
|
|
useExternalContourSubscription,
|
|
} 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;
|
|
sourceProjectId: string;
|
|
contourRequest: TExternalContourRequest;
|
|
hasDirectTargetAccess: boolean;
|
|
isSubmitting: TNameDescriptionLoader;
|
|
removeRoutePeekId: () => void;
|
|
peekMode: TExternalContourPeekMode;
|
|
setPeekMode: (value: TExternalContourPeekMode) => void;
|
|
embedIssue?: boolean;
|
|
};
|
|
|
|
export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
|
|
const {
|
|
workspaceSlug,
|
|
sourceProjectId,
|
|
contourRequest,
|
|
hasDirectTargetAccess,
|
|
isSubmitting,
|
|
removeRoutePeekId,
|
|
peekMode,
|
|
setPeekMode,
|
|
embedIssue = false,
|
|
} = props;
|
|
const { t } = useTranslation();
|
|
const router = useAppRouter();
|
|
const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
|
|
const { decideRequest, filteredRequestIds, loader } = useProjectExternalContours();
|
|
const { columnIdsMap } = useProjectExternalContoursBoard();
|
|
const { getProjectById } = useProject();
|
|
|
|
const issue = contourRequest.issue;
|
|
const currentRequestId = contourRequest.id;
|
|
const boardRequestIds = [...(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");
|
|
const isSourceAccepted = contourRequest.source_decision === "accepted";
|
|
const isDecisionSubmitting = loader === "mutation-loading";
|
|
|
|
const redirectToRelativeIssue = useCallback(
|
|
(direction: "next" | "prev") => {
|
|
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) % relativeRequestIds.length
|
|
: (currentIssueIndex - 1 + relativeRequestIds.length) % relativeRequestIds.length;
|
|
const nextIssueId = relativeRequestIds[nextIssueIndex];
|
|
if (!nextIssueId) return;
|
|
router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?inboxIssueId=${nextIssueId}`);
|
|
},
|
|
[currentRequestId, hasRelativeNavigation, relativeRequestIds, router, sourceProjectId, workspaceSlug]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const onKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "ArrowUp") redirectToRelativeIssue("prev");
|
|
if (event.key === "ArrowDown") redirectToRelativeIssue("next");
|
|
};
|
|
|
|
document.addEventListener("keydown", onKeyDown);
|
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
}, [redirectToRelativeIssue]);
|
|
|
|
const targetProjectIdentifier = issue.project_detail?.identifier || getProjectById(issue.project_id || "")?.identifier;
|
|
const requestLink = `/${workspaceSlug}/projects/${sourceProjectId}/external-contours?inboxIssueId=${contourRequest.id}`;
|
|
const workItemLink = generateWorkItemLink({
|
|
workspaceSlug: workspaceSlug?.toString(),
|
|
projectId: issue.project_id,
|
|
issueId: issue.id,
|
|
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(() =>
|
|
setToast({
|
|
type: TOAST_TYPE.SUCCESS,
|
|
title: t("common.link_copied"),
|
|
message: t("common.copied_to_clipboard"),
|
|
})
|
|
);
|
|
|
|
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);
|
|
if (action === "decline") {
|
|
setIsDeclineModalOpen(false);
|
|
router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?inboxIssueId=${contourRequest.id}`);
|
|
}
|
|
setToast({
|
|
type: TOAST_TYPE.SUCCESS,
|
|
title: t("success"),
|
|
message: t(
|
|
action === "accept"
|
|
? "external_contours_page.actions.accept_success"
|
|
: "external_contours_page.actions.decline_success"
|
|
),
|
|
});
|
|
} catch (error: any) {
|
|
setToast({
|
|
type: TOAST_TYPE.ERROR,
|
|
title: t("error"),
|
|
message: error?.error || t("external_contours_page.actions.decision_error"),
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ExternalContourDeclineModal
|
|
isOpen={isDeclineModalOpen}
|
|
isSubmitting={loader === "mutation-loading"}
|
|
onClose={() => setIsDeclineModalOpen(false)}
|
|
onSubmit={(comment) => handleDecision("decline", comment)}
|
|
/>
|
|
|
|
<Row
|
|
className={`relative z-15 hidden w-full items-center justify-between gap-3 px-5 py-3.5 lg:flex ${
|
|
currentMode?.key === "full-screen" ? "border-b border-subtle/70" : ""
|
|
}`}
|
|
>
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<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 && (
|
|
<SelectionDropdown
|
|
menuButton={
|
|
<Tooltip tooltipContent={t("common.toggle_peek_view_layout")}>
|
|
<span>
|
|
<currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />
|
|
</span>
|
|
</Tooltip>
|
|
}
|
|
menuButtonWrapperClassName="flex items-center"
|
|
options={PEEK_OPTIONS.map((mode) => ({
|
|
key: mode.key,
|
|
isChecked: currentMode.key === mode.key,
|
|
onClick: () => setPeekMode(mode.key),
|
|
title: (
|
|
<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>
|
|
),
|
|
}))}
|
|
/>
|
|
)}
|
|
|
|
{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 min-w-0 flex-1 items-center justify-end">
|
|
<NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
|
|
</div>
|
|
</div>
|
|
|
|
<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 || relativeRequestIds.length <= 1}
|
|
className="nodedc-external-icon-button"
|
|
>
|
|
<ChevronUpIcon className="size-3.5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="Next request"
|
|
onClick={() => redirectToRelativeIssue("next")}
|
|
disabled={!hasRelativeNavigation || relativeRequestIds.length <= 1}
|
|
className="nodedc-external-icon-button"
|
|
>
|
|
<ChevronDownIcon className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{canReviewClosedRequest && (
|
|
<div className="nodedc-external-decision-cluster">
|
|
<Tooltip tooltipContent={t("external_contours_page.actions.accept")}>
|
|
<button
|
|
type="button"
|
|
aria-label={t("external_contours_page.actions.accept")}
|
|
onClick={() => handleDecision("accept")}
|
|
disabled={isDecisionSubmitting}
|
|
className="nodedc-external-decision-button nodedc-external-decision-button-accept"
|
|
>
|
|
<Check className="size-4" strokeWidth={2.6} />
|
|
</button>
|
|
</Tooltip>
|
|
<Tooltip tooltipContent={t("external_contours_page.actions.decline")}>
|
|
<button
|
|
type="button"
|
|
aria-label={t("external_contours_page.actions.decline")}
|
|
onClick={() => setIsDeclineModalOpen(true)}
|
|
disabled={isDecisionSubmitting}
|
|
className="nodedc-external-decision-button nodedc-external-decision-button-decline"
|
|
>
|
|
<X className="size-4" strokeWidth={2.5} />
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
)}
|
|
|
|
{isSourceAccepted && (
|
|
<div className="nodedc-external-readonly-value min-h-[2.75rem] w-auto px-4 text-13 font-medium">
|
|
{t("external_contours_page.traceability.source_decision_accepted")}
|
|
</div>
|
|
)}
|
|
|
|
{hasDirectTargetAccess && (
|
|
<ExternalContourSubscriptionButton
|
|
isSubscribed={isSubscribed}
|
|
loading={isSubscriptionLoading}
|
|
onToggle={handleToggleSubscription}
|
|
iconOnly
|
|
buttonClassName="size-10 rounded-[18px] border-transparent bg-layer-2/80 px-0 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>
|
|
|
|
<ExternalContourActionsMenu
|
|
canOpenTargetWorkItem={hasDirectTargetAccess}
|
|
canReviewClosedRequest={canReviewClosedRequest}
|
|
isSubscribed={isSubscribed}
|
|
isSubscriptionLoading={isSubscriptionLoading}
|
|
onCopy={handleCopyLink}
|
|
onOpenTarget={handleOpenTarget}
|
|
onToggleSubscription={handleToggleSubscription}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Row>
|
|
|
|
<Header className="justify-start px-4 py-3 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>
|
|
)}
|
|
<ExternalContourStatePill request={contourRequest} />
|
|
<div className="ml-auto flex items-center gap-2">
|
|
{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>
|
|
)}
|
|
<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>
|
|
</>
|
|
);
|
|
});
|