import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; // react-hook-form import { UseFormWatch } from "react-hook-form"; // hooks import useToast from "hooks/use-toast"; import useProjectDetails from "hooks/use-project-details"; // components import { ExistingIssuesListModal } from "components/core"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; import { BlockedIcon } from "components/icons"; // types import { BlockeIssue, IIssue, ISearchIssueResponse, UserAuth } from "types"; type Props = { issueId?: string; submitChanges: (formData: Partial) => void; watch: UseFormWatch; userAuth: UserAuth; disabled?: boolean; }; export const SidebarBlockedSelect: React.FC = ({ issueId, submitChanges, watch, userAuth, disabled = false, }) => { const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false); const { setToastAlert } = useToast(); const { projectDetails } = useProjectDetails(); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const handleClose = () => { setIsBlockedModalOpen(false); }; const onSubmit = async (data: ISearchIssueResponse[]) => { if (data.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select at least one issue", }); return; } const selectedIssues: BlockeIssue[] = data.map((i) => ({ blocked_issue_detail: { id: i.id, name: i.name, sequence_id: i.sequence_id, }, })); const newBlocked = [...watch("blocked_issues"), ...selectedIssues]; submitChanges({ blocked_issues: newBlocked, blocks_list: newBlocked.map((i) => i.blocked_issue_detail?.id ?? ""), }); handleClose(); }; const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled; return ( <> setIsBlockedModalOpen(false)} searchParams={{ blocker_blocked_by: true, issue_id: issueId }} handleOnSubmit={onSubmit} />

Blocked by

{watch("blocked_issues") && watch("blocked_issues").length > 0 ? watch("blocked_issues").map((issue) => (
{`${projectDetails?.identifier}-${issue.blocked_issue_detail?.sequence_id}`}
)) : null}
); };