import React, { useCallback, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { mutate } from "swr"; import { Controller, UseFormWatch } from "react-hook-form"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; import useUserIssueNotificationSubscription from "hooks/use-issue-notification-subscription"; import useEstimateOption from "hooks/use-estimate-option"; // services import { IssueService } from "services/issue"; import { ModuleService } from "services/module.service"; // components import { LinkModal, LinksList } from "components/core"; import { DeleteIssueModal, SidebarAssigneeSelect, SidebarBlockedSelect, SidebarBlockerSelect, SidebarCycleSelect, SidebarModuleSelect, SidebarParentSelect, SidebarPrioritySelect, SidebarStateSelect, SidebarEstimateSelect, SidebarLabelSelect, SidebarDuplicateSelect, SidebarRelatesSelect, } from "components/issues"; // ui import { CustomDatePicker } from "components/ui"; // icons import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, LayoutPanelTop } from "lucide-react"; import { Button, ContrastIcon, DiceIcon, DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import type { IIssue, IIssueLink, ILinkDetails } from "types"; // fetch-keys import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; import { EUserWorkspaceRoles } from "constants/workspace"; type Props = { control: any; submitChanges: (formData: any) => void; issueDetail: IIssue | undefined; watch: UseFormWatch; fieldsToShow?: ( | "state" | "assignee" | "priority" | "estimate" | "parent" | "blocker" | "blocked" | "startDate" | "dueDate" | "cycle" | "module" | "label" | "link" | "delete" | "all" | "subscribe" | "duplicate" | "relates_to" )[]; uneditable?: boolean; }; const issueService = new IssueService(); const moduleService = new ModuleService(); export const IssueDetailsSidebar: React.FC = observer((props) => { const { control, submitChanges, issueDetail, watch: watchIssue, fieldsToShow = ["all"], uneditable = false } = props; const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [linkModal, setLinkModal] = useState(false); const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState(null); const { user: { currentUser, currentProjectRole }, projectState: { states }, projectIssues: { removeIssue }, } = useMobxStore(); const router = useRouter(); const { workspaceSlug, projectId, issueId, inboxIssueId } = router.query; const { isEstimateActive } = useEstimateOption(); const { loading, handleSubscribe, handleUnsubscribe, subscribed } = useUserIssueNotificationSubscription( workspaceSlug, projectId, issueId ); const { setToastAlert } = useToast(); const handleCycleChange = useCallback( (cycleId: string) => { if (!workspaceSlug || !projectId || !issueDetail || !currentUser) return; issueService .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId, { issues: [issueDetail.id], }) .then(() => { mutate(ISSUE_DETAILS(issueId as string)); }); }, [workspaceSlug, projectId, issueId, issueDetail, currentUser] ); const handleModuleChange = useCallback( (moduleId: string) => { if (!workspaceSlug || !projectId || !issueDetail || !currentUser) return; moduleService .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId, { issues: [issueDetail.id], }) .then(() => { mutate(ISSUE_DETAILS(issueId as string)); }); }, [workspaceSlug, projectId, issueId, issueDetail, currentUser] ); const handleCreateLink = async (formData: IIssueLink) => { if (!workspaceSlug || !projectId || !issueDetail) return; const payload = { metadata: {}, ...formData }; await issueService .createIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, payload) .then(() => mutate(ISSUE_DETAILS(issueDetail.id))) .catch((err) => { if (err.status === 400) setToastAlert({ type: "error", title: "Error!", message: "This URL already exists for this issue.", }); else setToastAlert({ type: "error", title: "Error!", message: "Something went wrong. Please try again.", }); }); }; const handleUpdateLink = async (formData: IIssueLink, linkId: string) => { if (!workspaceSlug || !projectId || !issueDetail) return; const payload = { metadata: {}, ...formData }; const updatedLinks = issueDetail.issue_link.map((l) => l.id === linkId ? { ...l, title: formData.title, url: formData.url, } : l ); mutate( ISSUE_DETAILS(issueDetail.id), (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }), false ); await issueService .updateIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId, payload) .then(() => { mutate(ISSUE_DETAILS(issueDetail.id)); }) .catch((err) => { console.log(err); }); }; const handleDeleteLink = async (linkId: string) => { if (!workspaceSlug || !projectId || !issueDetail) return; const updatedLinks = issueDetail.issue_link.filter((l) => l.id !== linkId); mutate( ISSUE_DETAILS(issueDetail.id), (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }), false ); await issueService .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId) .then(() => { mutate(ISSUE_DETAILS(issueDetail.id)); }) .catch((err) => { console.log(err); }); }; const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issueDetail?.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Issue link copied to clipboard.", }); }); }; const showFirstSection = fieldsToShow.includes("all") || fieldsToShow.includes("state") || fieldsToShow.includes("assignee") || fieldsToShow.includes("priority") || fieldsToShow.includes("estimate"); const showSecondSection = fieldsToShow.includes("all") || fieldsToShow.includes("parent") || fieldsToShow.includes("blocker") || fieldsToShow.includes("blocked") || fieldsToShow.includes("dueDate"); const showThirdSection = fieldsToShow.includes("all") || fieldsToShow.includes("cycle") || fieldsToShow.includes("module"); const startDate = watchIssue("start_date"); const targetDate = watchIssue("target_date"); const minDate = startDate ? new Date(startDate) : null; minDate?.setDate(minDate.getDate()); const maxDate = targetDate ? new Date(targetDate) : null; maxDate?.setDate(maxDate.getDate()); const handleEditLink = (link: ILinkDetails) => { setSelectedLinkToUpdate(link); setLinkModal(true); }; const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; const currentIssueState = projectId ? states[projectId.toString()]?.find((s) => s.id === issueDetail?.state) : undefined; return ( <> { setLinkModal(false); setSelectedLinkToUpdate(null); }} data={selectedLinkToUpdate} status={selectedLinkToUpdate ? true : false} createIssueLink={handleCreateLink} updateIssueLink={handleUpdateLink} /> {workspaceSlug && projectId && issueDetail && ( setDeleteIssueModal(false)} isOpen={deleteIssueModal} data={issueDetail} onSubmit={async () => { await removeIssue(workspaceSlug.toString(), projectId.toString(), issueDetail.id); router.push(`/${workspaceSlug}/projects/${projectId}/issues`); }} /> )}
{currentIssueState ? ( ) : inboxIssueId ? ( ) : null}

{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}

{issueDetail?.created_by !== currentUser?.id && !issueDetail?.assignees.includes(currentUser?.id ?? "") && !router.pathname.includes("[archivedIssueId]") && (fieldsToShow.includes("all") || fieldsToShow.includes("subscribe")) && ( )} {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && ( )} {isAllowed && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && ( )}
{showFirstSection && (
{(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (

State

( submitChanges({ state: val })} disabled={!isAllowed || uneditable} /> )} />
)} {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (

Assignees

( submitChanges({ assignees: val })} disabled={!isAllowed || uneditable} /> )} />
)} {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (

Priority

( submitChanges({ priority: val })} disabled={!isAllowed || uneditable} /> )} />
)} {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && isEstimateActive && (

Estimate

( submitChanges({ estimate_point: val })} disabled={!isAllowed || uneditable} /> )} />
)}
)} {showSecondSection && (
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (

Parent

( { submitChanges({ parent: val }); onChange(val); }} issueDetails={issueDetail} disabled={!isAllowed || uneditable} /> )} />
)} {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && ( { mutate( ISSUE_DETAILS(issueId as string), (prevData) => { if (!prevData) return prevData; return { ...prevData, ...data, }; }, false ); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); }} watch={watchIssue} disabled={!isAllowed || uneditable} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && ( { mutate( ISSUE_DETAILS(issueId as string), (prevData) => { if (!prevData) return prevData; return { ...prevData, ...data, }; }, false ); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); }} watch={watchIssue} disabled={!isAllowed || uneditable} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && ( { if (!data) return mutate(ISSUE_DETAILS(issueId as string)); mutate(ISSUE_DETAILS(issueId as string), (prevData) => { if (!prevData) return prevData; return { ...prevData, ...data, }; }); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); }} watch={watchIssue} disabled={!isAllowed || uneditable} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && ( { if (!data) return mutate(ISSUE_DETAILS(issueId as string)); mutate(ISSUE_DETAILS(issueId as string), (prevData) => { if (!prevData) return prevData; return { ...prevData, ...data, }; }); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); }} watch={watchIssue} disabled={!isAllowed || uneditable} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (

Start date

( submitChanges({ start_date: val, }) } className="bg-custom-background-80 border-none" maxDate={maxDate ?? undefined} disabled={!isAllowed || uneditable} /> )} />
)} {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (

Due date

( submitChanges({ target_date: val, }) } className="bg-custom-background-80 border-none" minDate={minDate ?? undefined} disabled={!isAllowed || uneditable} /> )} />
)}
)} {showThirdSection && (
{(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (

Cycle

)} {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (

Module

)}
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (

Label

)} {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (

Links

{isAllowed && ( )}
{issueDetail?.issue_link && issueDetail.issue_link.length > 0 && (
{ }
)}
)}
); });