import { FC } from "react"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; import { MoveRight, MoveDiagonal, Link2, Trash2, RotateCcw } from "lucide-react"; // ui import { ArchiveIcon, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Tooltip, TOAST_TYPE, setToast, } from "@plane/ui"; // components import { IssueSubscription, IssueUpdateStatus } from "components/issues"; import { STATE_GROUPS } from "constants/state"; // helpers import { cn } from "helpers/common.helper"; import { copyUrlToClipboard } from "helpers/string.helper"; // store hooks import { useIssueDetail, useProjectState, useUser } from "hooks/store"; // helpers // components // helpers export type TPeekModes = "side-peek" | "modal" | "full-screen"; const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [ { key: "side-peek", icon: SidePanelIcon, title: "Side Peek", }, { key: "modal", icon: CenterPanelIcon, title: "Modal", }, { key: "full-screen", icon: FullScreenPanelIcon, title: "Full Screen", }, ]; export type PeekOverviewHeaderProps = { peekMode: TPeekModes; setPeekMode: (value: TPeekModes) => void; removeRoutePeekId: () => void; workspaceSlug: string; projectId: string; issueId: string; isArchived: boolean; disabled: boolean; toggleDeleteIssueModal: (value: boolean) => void; toggleArchiveIssueModal: (value: boolean) => void; handleRestoreIssue: () => void; isSubmitting: "submitting" | "submitted" | "saved"; }; export const IssuePeekOverviewHeader: FC = observer((props) => { const { peekMode, setPeekMode, workspaceSlug, projectId, issueId, isArchived, disabled, removeRoutePeekId, toggleDeleteIssueModal, toggleArchiveIssueModal, handleRestoreIssue, isSubmitting, } = props; // router const router = useRouter(); // store hooks const { currentUser } = useUser(); const { issue: { getIssueById }, } = useIssueDetail(); const { getStateById } = useProjectState(); // derived values const issueDetails = getIssueById(issueId); const stateDetails = issueDetails ? getStateById(issueDetails?.state_id) : undefined; const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode); const issueLink = `${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`; const handleCopyText = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); copyUrlToClipboard(issueLink).then(() => { setToast({ type: TOAST_TYPE.SUCCESS, title: "Link Copied!", message: "Issue link copied to clipboard.", }); }); }; const redirectToIssueDetail = () => { router.push({ pathname: `/${issueLink}` }); removeRoutePeekId(); }; // auth const isArchivingAllowed = !isArchived && !disabled; const isInArchivableGroup = !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group); const isRestoringAllowed = isArchived && !disabled; return (
{currentMode && (
setPeekMode(val)} customButton={ } > {PEEK_OPTIONS.map((mode) => (
{mode.title}
))}
)}
{currentUser && !isArchived && ( )} {isArchivingAllowed && ( )} {isRestoringAllowed && ( )} {!disabled && ( )}
); });