245 lines
10 KiB
TypeScript
245 lines
10 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 { PanelLeft } from "lucide-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { Button } from "@plane/propel/button";
|
|
import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } 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 { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
|
|
import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
|
|
import { useProject } from "@/hooks/store/use-project";
|
|
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";
|
|
|
|
type Props = {
|
|
workspaceSlug: string;
|
|
sourceProjectId: string;
|
|
contourRequest: TExternalContourRequest;
|
|
hasDirectTargetAccess: boolean;
|
|
isSubmitting: TNameDescriptionLoader;
|
|
isMobileSidebar: boolean;
|
|
setIsMobileSidebar: (value: boolean) => void;
|
|
};
|
|
|
|
export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
|
|
const {
|
|
workspaceSlug,
|
|
sourceProjectId,
|
|
contourRequest,
|
|
hasDirectTargetAccess,
|
|
isSubmitting,
|
|
isMobileSidebar,
|
|
setIsMobileSidebar,
|
|
} = props;
|
|
const { t } = useTranslation();
|
|
const router = useAppRouter();
|
|
const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
|
|
const { currentTab, decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
|
|
const { getProjectById } = useProject();
|
|
|
|
const issue = contourRequest.issue;
|
|
const currentRequestId = contourRequest.id;
|
|
const canReviewClosedRequest = contourRequest.status === "closed" && contourRequest.source_decision !== "accepted";
|
|
const isSourceAccepted = contourRequest.source_decision === "accepted";
|
|
|
|
const redirectToRelativeIssue = useCallback(
|
|
(direction: "next" | "prev") => {
|
|
if (!filteredRequestIds || !currentRequestId) return;
|
|
const currentIssueIndex = filteredRequestIds.findIndex((requestId) => requestId === currentRequestId);
|
|
const nextIssueIndex =
|
|
direction === "next"
|
|
? (currentIssueIndex + 1) % filteredRequestIds.length
|
|
: (currentIssueIndex - 1 + filteredRequestIds.length) % filteredRequestIds.length;
|
|
const nextIssueId = filteredRequestIds[nextIssueIndex];
|
|
if (!nextIssueId) return;
|
|
router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
|
|
},
|
|
[currentRequestId, currentTab, filteredRequestIds, 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 workItemLink = generateWorkItemLink({
|
|
workspaceSlug: workspaceSlug?.toString(),
|
|
projectId: issue.project_id,
|
|
issueId: issue.id,
|
|
projectIdentifier: targetProjectIdentifier,
|
|
sequenceId: issue.sequence_id,
|
|
});
|
|
|
|
const handleCopyLink = () =>
|
|
copyUrlToClipboard(workItemLink).then(() =>
|
|
setToast({
|
|
type: TOAST_TYPE.SUCCESS,
|
|
title: t("common.link_copied"),
|
|
message: t("common.copied_to_clipboard"),
|
|
})
|
|
);
|
|
|
|
const handleDecision = async (action: "accept" | "decline", comment?: string) => {
|
|
try {
|
|
await decideRequest(workspaceSlug, sourceProjectId, contourRequest.id, action, comment);
|
|
if (action === "decline") {
|
|
setIsDeclineModalOpen(false);
|
|
await handleCurrentTab(workspaceSlug, sourceProjectId, EInboxIssueCurrentTab.OPEN);
|
|
router.push(
|
|
`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${EInboxIssueCurrentTab.OPEN}&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 h-full w-full items-center justify-between gap-2 px-4 lg:flex">
|
|
<div className="flex items-center gap-4">
|
|
{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">
|
|
<NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="nodedc-external-detail-toolbar">
|
|
<div className="nodedc-external-toolbar-cluster">
|
|
<button
|
|
type="button"
|
|
aria-label="Previous request"
|
|
onClick={() => redirectToRelativeIssue("prev")}
|
|
className="nodedc-external-icon-button"
|
|
>
|
|
<ChevronUpIcon className="size-3.5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="Next request"
|
|
onClick={() => redirectToRelativeIssue("next")}
|
|
className="nodedc-external-icon-button"
|
|
>
|
|
<ChevronDownIcon className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{canReviewClosedRequest && (
|
|
<>
|
|
<Button variant="primary" size="lg" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
|
|
<CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
|
|
{t("external_contours_page.actions.accept")}
|
|
</Button>
|
|
<Button variant="secondary" size="lg" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
|
|
<CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
|
|
{t("external_contours_page.actions.decline")}
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{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>
|
|
)}
|
|
|
|
<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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Row>
|
|
|
|
<Header className="justify-start lg:hidden">
|
|
<PanelLeft
|
|
onClick={() => setIsMobileSidebar(!isMobileSidebar)}
|
|
className={`my-auto mr-2 h-4 w-4 flex-shrink-0 ${isMobileSidebar ? "text-accent-primary" : "text-secondary"}`}
|
|
/>
|
|
<div className="flex w-full items-center gap-2">
|
|
<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>
|
|
)}
|
|
{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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Header>
|
|
</>
|
|
);
|
|
});
|