import React, { useState } from "react"; import { useRouter } from "next/router"; // react-hook-form import { UseFormWatch } from "react-hook-form"; // hooks import useToast from "hooks/use-toast"; import useUser from "hooks/use-user"; // components import { ExistingIssuesListModal } from "components/core"; // services import issuesService from "services/issues.service"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; import { BlockerIcon } from "components/icons"; // types import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types"; type Props = { issueId?: string; submitChanges: (formData: Partial) => void; watch: UseFormWatch; disabled?: boolean; }; export const SidebarBlockerSelect: React.FC = ({ issueId, submitChanges, watch, disabled = false, }) => { const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false); const { user } = useUser(); const { setToastAlert } = useToast(); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const handleClose = () => { setIsBlockerModalOpen(false); }; const blockerIssue = watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || []; const onSubmit = async (data: ISearchIssueResponse[]) => { if (data.length === 0) { setToastAlert({ type: "error", title: "Error!", message: "Please select at least one issue.", }); return; } const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({ blocker_issue_detail: { id: i.id, name: i.name, sequence_id: i.sequence_id, project_detail: { id: i.project_id, identifier: i.project__identifier, name: i.project__name, }, }, })); if (!user) return; issuesService .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, { related_list: [ ...selectedIssues.map((issue) => ({ issue: issue.blocker_issue_detail.id, relation_type: "blocked_by" as const, related_issue: issueId as string, related_issue_detail: issue.blocker_issue_detail, })), ], relation: "blocking", }) .then((response) => { submitChanges({ issue_relations: [ ...blockerIssue, ...(response ?? []).map((i: any) => ({ id: i.id, relation_type: i.relation_type, issue_detail: i.issue_detail, issue: i.related_issue, })), ], }); }); handleClose(); }; return ( <> setIsBlockerModalOpen(false)} searchParams={{ issue_relation: true, issue_id: issueId }} handleOnSubmit={onSubmit} workspaceLevelToggle />

Blocking

{blockerIssue && blockerIssue.length > 0 ? blockerIssue.map((relation) => (
{`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
)) : null}
); };