import React from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; import { CircleDot, CopyPlus, Pencil, X, XCircle } from "lucide-react"; // hooks import { RelatedIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui"; import { ExistingIssuesListModal } from "components/core"; import { cn } from "helpers/common.helper"; import { useIssueDetail, useIssues, useProject } from "hooks/store"; import { usePlatformOS } from "hooks/use-platform-os"; // components // ui // helpers // types import { TIssueRelationTypes, ISearchIssueResponse } from "@plane/types"; export type TRelationObject = { className: string; icon: (size: number) => React.ReactElement; placeholder: string }; export const issueRelationObject: Record = { relates_to: { className: "bg-custom-background-80 text-custom-text-200", icon: (size) => , placeholder: "Add related issues", }, blocking: { className: "bg-yellow-500/20 text-yellow-700", icon: (size) => , placeholder: "None", }, blocked_by: { className: "bg-red-500/20 text-red-700", icon: (size) => , placeholder: "None", }, duplicate: { className: "bg-custom-background-80 text-custom-text-200", icon: (size) => , placeholder: "None", }, }; type TIssueRelationSelect = { className?: string; workspaceSlug: string; projectId: string; issueId: string; relationKey: TIssueRelationTypes; disabled?: boolean; }; export const IssueRelationSelect: React.FC = observer((props) => { const { className = "", workspaceSlug, projectId, issueId, relationKey, disabled = false } = props; // hooks const { getProjectById } = useProject(); const { createRelation, removeRelation, relation: { getRelationByIssueIdRelationType }, isRelationModalOpen, toggleRelationModal, } = useIssueDetail(); const { issueMap } = useIssues(); const { isMobile } = usePlatformOS(); const relationIssueIds = getRelationByIssueIdRelationType(issueId, relationKey); const onSubmit = async (data: ISearchIssueResponse[]) => { if (data.length === 0) { setToast({ type: TOAST_TYPE.ERROR, title: "Error!", message: "Please select at least one issue.", }); return; } await createRelation( workspaceSlug, projectId, issueId, relationKey, data.map((i) => i.id) ); toggleRelationModal(null); }; if (!relationIssueIds) return null; return ( <> toggleRelationModal(null)} searchParams={{ issue_relation: true, issue_id: issueId }} handleOnSubmit={onSubmit} workspaceLevelToggle /> ); });