import { useState, FC } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import { IssueLabelService } from "services/issue"; // component import { CreateLabelModal } from "components/labels"; // ui import { CustomSearchSelect, Tooltip } from "@plane/ui"; // icons import { Plus, Tag } from "lucide-react"; // types import { IUser, IIssue, IIssueLabels } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; type Props = { issue: IIssue; partialUpdateIssue: (formData: Partial, issue: IIssue) => void; position?: "left" | "right"; selfPositioned?: boolean; tooltipPosition?: "top" | "bottom"; customButton?: boolean; user: IUser | undefined; isNotAllowed: boolean; }; const issueLabelStore = new IssueLabelService(); export const ViewLabelSelect: FC = ({ issue, partialUpdateIssue, // position = "left", // selfPositioned = false, tooltipPosition = "top", user, isNotAllowed, customButton = false, }) => { const [labelModal, setLabelModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { data: issueLabels } = useSWR( projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null, workspaceSlug && projectId ? () => issueLabelStore.getProjectIssueLabels(workspaceSlug as string, projectId as string) : null ); const options = issueLabels?.map((label) => ({ value: label.id, query: label.name, content: (
{label.name}
), })); const labelsLabel = ( 0 ? issue.labels .map((labelId) => { const label = issueLabels?.find((l) => l.id === labelId); return label?.name ?? ""; }) .join(", ") : "No label" } >
{issue.labels.length > 0 ? ( <> {issue.labels.slice(0, 4).map((labelId, index) => { const label = issueLabels?.find((l) => l.id === labelId); return (
); })} {issue.labels.length > 4 ? +{issue.labels.length - 4} : null} ) : ( <> )}
); const footerOption = ( ); return ( <> {projectId && ( setLabelModal(false)} projectId={projectId.toString()} user={user} /> )} { partialUpdateIssue({ labels_list: data }, issue); }} options={options} {...(customButton ? { customButton: labelsLabel } : { label: labelsLabel })} multiple noChevron disabled={isNotAllowed} footerOption={footerOption} width="w-full min-w-[12rem]" /> ); };