import React, { useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; import { Combobox, Dialog, Transition } from "@headlessui/react"; import { Search } from "lucide-react"; // hooks import { useLabel } from "hooks/store"; // icons import { LayerStackIcon } from "@plane/ui"; // types import { IIssueLabel } from "@plane/types"; type Props = { isOpen: boolean; handleClose: () => void; parent: IIssueLabel | undefined; }; export const LabelsListModal: React.FC = observer((props) => { const { isOpen, handleClose, parent } = props; // states const [query, setQuery] = useState(""); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { project: { projectLabels, fetchProjectLabels, updateLabel }, } = useLabel(); // api call to fetch project details useSWR( workspaceSlug && projectId ? "PROJECT_LABELS" : null, workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null ); // derived values const filteredLabels: IIssueLabel[] = query === "" ? projectLabels ?? [] : projectLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? []; const handleModalClose = () => { handleClose(); setQuery(""); }; const addChildLabel = async (label: IIssueLabel) => { if (!workspaceSlug || !projectId) return; await updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, { parent: parent?.id!, }); }; return ( setQuery("")} appear>
{filteredLabels.length > 0 && (
  • {query === "" && (

    Labels

    )}
      {filteredLabels.map((label) => { const children = projectLabels?.filter((l) => l.parent === label.id); if ( (label.parent === "" || label.parent === null) && // issue does not have any other parent label.id !== parent?.id && // issue is not itself children?.length === 0 // issue doesn't have any other children ) return ( `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${ active ? "bg-custom-background-80 text-custom-text-100" : "" }` } onClick={() => { addChildLabel(label); }} > {label.name} ); })}
  • )}
    {query !== "" && filteredLabels.length === 0 && (
    )}
    ); });