import React, { useCallback, useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // react-hook-form import { useForm, Controller, UseFormWatch, Control } from "react-hook-form"; // react-color import { TwitterPicker } from "react-color"; // headless ui import { Popover, Listbox, Transition } from "@headlessui/react"; // hooks import useToast from "hooks/use-toast"; // services import issuesService from "services/issues.service"; import modulesService from "services/modules.service"; // components import { LinkModal, LinksList } from "components/core"; import { DeleteIssueModal, SidebarAssigneeSelect, SidebarBlockedSelect, SidebarBlockerSelect, SidebarCycleSelect, SidebarModuleSelect, SidebarParentSelect, SidebarPrioritySelect, SidebarStateSelect, SidebarEstimateSelect, } from "components/issues"; // ui import { Input, Spinner, CustomDatePicker } from "components/ui"; // icons import { TagIcon, ChevronDownIcon, LinkIcon, CalendarDaysIcon, TrashIcon, PlusIcon, XMarkIcon, RectangleGroupIcon, } from "@heroicons/react/24/outline"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import type { ICycle, IIssue, IIssueLabels, IIssueLink, IModule, UserAuth } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys"; type Props = { control: Control; submitChanges: (formData: Partial) => void; issueDetail: IIssue | undefined; watch: UseFormWatch; userAuth: UserAuth; }; const defaultValues: Partial = { name: "", color: "#ff0000", }; export const IssueDetailsSidebar: React.FC = ({ control, submitChanges, issueDetail, watch: watchIssue, userAuth, }) => { const [createLabelForm, setCreateLabelForm] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [linkModal, setLinkModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { setToastAlert } = useToast(); const { data: issues } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null, workspaceSlug && projectId ? () => issuesService.getIssues(workspaceSlug as string, projectId as string) : null ); const { data: issueLabels, mutate: issueLabelMutate } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null, workspaceSlug && projectId ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string) : null ); const { register, handleSubmit, formState: { isSubmitting }, reset, watch, control: controlLabel, } = useForm({ defaultValues, }); const handleNewLabel = (formData: any) => { if (!workspaceSlug || !projectId || isSubmitting) return; issuesService .createIssueLabel(workspaceSlug as string, projectId as string, formData) .then((res) => { reset(defaultValues); issueLabelMutate((prevData) => [...(prevData ?? []), res], false); submitChanges({ labels_list: [...(issueDetail?.labels ?? []), res.id] }); setCreateLabelForm(false); }); }; const handleCycleChange = useCallback( (cycleDetail: ICycle) => { if (!workspaceSlug || !projectId || !issueDetail) return; issuesService .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, { issues: [issueDetail.id], }) .then((res) => { mutate(ISSUE_DETAILS(issueId as string)); }); }, [workspaceSlug, projectId, issueId, issueDetail] ); const handleModuleChange = useCallback( (moduleDetail: IModule) => { if (!workspaceSlug || !projectId || !issueDetail) return; modulesService .addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, { issues: [issueDetail.id], }) .then((res) => { mutate(ISSUE_DETAILS(issueId as string)); }); }, [workspaceSlug, projectId, issueId, issueDetail] ); const handleCreateLink = async (formData: IIssueLink) => { if (!workspaceSlug || !projectId || !issueDetail) return; const payload = { metadata: {}, ...formData }; await issuesService .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 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 issuesService .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId) .then((res) => { 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.", }); }); }; useEffect(() => { if (!createLabelForm) return; reset(); }, [createLabelForm, reset]); const isNotAllowed = userAuth.isGuest || userAuth.isViewer; return ( <> setLinkModal(false)} onFormSubmit={handleCreateLink} /> setDeleteIssueModal(false)} isOpen={deleteIssueModal} data={issueDetail ?? null} />

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

{!isNotAllowed && ( )}
( submitChanges({ state: val })} userAuth={userAuth} /> )} /> ( submitChanges({ assignees_list: val })} userAuth={userAuth} /> )} /> ( submitChanges({ priority: val })} userAuth={userAuth} /> )} /> ( submitChanges({ estimate_point: val })} userAuth={userAuth} /> )} />
i.id !== issueDetail?.id && i.id !== issueDetail?.parent && i.parent !== issueDetail?.id ) ?? [] } customDisplay={ issueDetail?.parent_detail ? ( ) : (
No parent selected
) } watch={watchIssue} userAuth={userAuth} /> i.id !== issueDetail?.id) ?? []} watch={watchIssue} userAuth={userAuth} /> i.id !== issueDetail?.id) ?? []} watch={watchIssue} userAuth={userAuth} />

Due date

( submitChanges({ target_date: val, }) } disabled={isNotAllowed} /> )} />

Label

{watchIssue("labels_list")?.map((labelId) => { const label = issueLabels?.find((l) => l.id === labelId); if (label) return ( { const updatedLabels = watchIssue("labels_list")?.filter( (l) => l !== labelId ); submitChanges({ labels_list: updatedLabels, }); }} > {label.name} ); })} ( submitChanges({ labels_list: val })} className="flex-shrink-0" multiple disabled={isNotAllowed} > {({ open }) => (
Select Label
{issueLabels ? ( issueLabels.length > 0 ? ( issueLabels.map((label: IIssueLabels) => { const children = issueLabels?.filter( (l) => l.parent === label.id ); if (children.length === 0) { if (!label.parent) return ( `${active || selected ? "bg-indigo-50" : ""} ${ selected ? "font-medium" : "" } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` } value={label.id} > {label.name} ); } else return (
{" "} {label.name}
{children.map((child) => ( `${active || selected ? "bg-indigo-50" : ""} ${ selected ? "font-medium" : "" } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` } value={child.id} > {child.name} ))}
); }) ) : (
No labels found
) ) : ( )}
)}
)} /> {!isNotAllowed && ( )}
{createLabelForm && (
{({ open }) => ( <> {watch("color") && watch("color") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}
)}

Links

{!isNotAllowed && ( )}
{issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? ( ) : null}
); };