import React, { FC, useState, useEffect, useRef } from "react"; import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { observer } from "mobx-react-lite"; import { Sparkle, X } from "lucide-react"; // hooks import { useApplication, useEstimate, useMention, useProject, useWorkspace } from "hooks/store"; import useToast from "hooks/use-toast"; import useLocalStorage from "hooks/use-local-storage"; // services import { AIService } from "services/ai.service"; import { FileService } from "services/file.service"; // components import { GptAssistantPopover } from "components/core"; import { ParentIssuesListModal } from "components/issues"; import { IssueLabelSelect } from "components/issues/select"; import { CreateStateModal } from "components/states"; import { CreateLabelModal } from "components/labels"; import { RichTextEditorWithRef } from "@plane/rich-text-editor"; import { CycleDropdown, DateDropdown, EstimateDropdown, ModuleDropdown, PriorityDropdown, ProjectDropdown, ProjectMemberDropdown, StateDropdown, } from "components/dropdowns"; // ui import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui"; // helpers import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types import type { IUser, TIssue, ISearchIssueResponse } from "@plane/types"; const aiService = new AIService(); const fileService = new FileService(); const defaultValues: Partial = { project_id: "", name: "", description_html: "

", estimate_point: null, state_id: "", parent_id: null, priority: "none", assignee_ids: [], label_ids: [], start_date: undefined, target_date: undefined, }; interface IssueFormProps { handleFormSubmit: ( formData: Partial, action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" ) => Promise; data?: Partial | null; isOpen: boolean; prePopulatedData?: Partial | null; projectId: string; setActiveProject: React.Dispatch>; createMore: boolean; setCreateMore: React.Dispatch>; handleClose: () => void; handleDiscard: () => void; status: boolean; user: IUser | undefined; fieldsToShow: ( | "project" | "name" | "description" | "state" | "priority" | "assignee" | "label" | "startDate" | "dueDate" | "estimate" | "parent" | "all" )[]; } export const DraftIssueForm: FC = observer((props) => { const { handleFormSubmit, data, isOpen, prePopulatedData, projectId, setActiveProject, createMore, setCreateMore, status, fieldsToShow, handleDiscard, } = props; // states const [stateModal, setStateModal] = useState(false); const [labelModal, setLabelModal] = useState(false); const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false); const [selectedParentIssue, setSelectedParentIssue] = useState(null); const [gptAssistantModal, setGptAssistantModal] = useState(false); const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false); // store hooks const { areEstimatesEnabledForProject } = useEstimate(); const { mentionHighlights, mentionSuggestions } = useMention(); // hooks const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {}); const { setToastAlert } = useToast(); // refs const editorRef = useRef(null); // router const router = useRouter(); const { workspaceSlug } = router.query; const workspaceStore = useWorkspace(); const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string; // store const { config: { envConfig }, } = useApplication(); const { getProjectById } = useProject(); // form info const { formState: { errors, isSubmitting }, handleSubmit, reset, watch, control, getValues, setValue, setFocus, } = useForm({ defaultValues: prePopulatedData ?? defaultValues, reValidateMode: "onChange", }); const issueName = watch("name"); const payload: Partial = { name: watch("name"), description_html: watch("description_html"), state_id: watch("state_id"), priority: watch("priority"), assignee_ids: watch("assignee_ids"), label_ids: watch("label_ids"), start_date: watch("start_date"), target_date: watch("target_date"), project_id: watch("project_id"), parent_id: watch("parent_id"), cycle_id: watch("cycle_id"), module_ids: watch("module_ids"), }; useEffect(() => { if (!isOpen || data) return; setLocalStorageValue( JSON.stringify({ ...payload, }) ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [JSON.stringify(payload), isOpen, data]); // const onClose = () => { // handleClose(); // }; useEffect(() => { if (!isOpen || data) return; setLocalStorageValue( JSON.stringify({ ...payload, }) ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [JSON.stringify(payload), isOpen, data]); // const onClose = () => { // handleClose(); // }; const handleCreateUpdateIssue = async ( formData: Partial, action: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" = "createDraft" ) => { await handleFormSubmit( { ...(data ?? {}), ...formData, // is_draft: action === "createDraft" || action === "updateDraft", }, action ); // TODO: check_with_backend setGptAssistantModal(false); reset({ ...defaultValues, project_id: projectId, description_html: "

", }); editorRef?.current?.clearEditor(); }; const handleAiAssistance = async (response: string) => { if (!workspaceSlug || !projectId) return; // setValue("description", {}); setValue("description_html", `${watch("description_html")}

${response}

`); editorRef.current?.setEditorValue(`${watch("description_html")}`); }; const handleAutoGenerateDescription = async () => { if (!workspaceSlug || !projectId) return; setIAmFeelingLucky(true); aiService .createGptTask(workspaceSlug as string, projectId as string, { prompt: issueName, task: "Generate a proper description for this issue.", }) .then((res) => { if (res.response === "") setToastAlert({ type: "error", title: "Error!", message: "Issue title isn't informative enough to generate the description. Please try with a different title.", }); else handleAiAssistance(res.response_html); }) .catch((err) => { const error = err?.data?.error; if (err.status === 429) setToastAlert({ type: "error", title: "Error!", message: error || "You have reached the maximum number of requests of 50 requests per month per user.", }); else setToastAlert({ type: "error", title: "Error!", message: error || "Some error occurred. Please try again.", }); }) .finally(() => setIAmFeelingLucky(false)); }; useEffect(() => { reset({ ...defaultValues, ...(prePopulatedData ?? {}), ...(data ?? {}), }); }, [prePopulatedData, reset, data]); useEffect(() => { setFocus("name"); }, [setFocus]); // update projectId in form when projectId changes useEffect(() => { reset({ ...getValues(), project_id: projectId, }); }, [getValues, projectId, reset]); const startDate = watch("start_date"); const targetDate = watch("target_date"); const minDate = startDate ? new Date(startDate) : null; minDate?.setDate(minDate.getDate()); const maxDate = targetDate ? new Date(targetDate) : null; maxDate?.setDate(maxDate.getDate()); const projectDetails = getProjectById(projectId); return ( <> {projectId && ( <> setStateModal(false)} projectId={projectId} /> setLabelModal(false)} projectId={projectId} onSuccess={(response) => setValue("label_ids", [...watch("label_ids"), response.id])} /> )}
handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft") )} >
{(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && ( (
{ onChange(val); setActiveProject(val); }} buttonVariant="border-with-text" />
)} /> )}

{status ? "Update" : "Create"} issue

{watch("parent_id") && (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && selectedParentIssue && (
{selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id} {selectedParentIssue.name.substring(0, 50)} { setValue("parent_id", null); setSelectedParentIssue(null); }} />
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
( )} />
)} {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
{issueName && issueName !== "" && ( )} {envConfig?.has_openai_configured && ( { setGptAssistantModal((prevData) => !prevData); // this is done so that the title do not reset after gpt popover closed reset(getValues()); }} onResponse={(response) => { handleAiAssistance(response); }} button={ } className=" !min-w-[38rem]" placement="top-end" /> )}
( { onChange(description_html); }} mentionHighlights={mentionHighlights} mentionSuggestions={mentionSuggestions} /> )} />
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && ( (
)} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && ( (
)} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && ( (
0 ? "transparent-without-text" : "border-with-text"} buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""} placeholder="Assignees" multiple />
)} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && ( (
)} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && ( (
onChange(date ? renderFormattedPayloadDate(date) : null)} buttonVariant="border-with-text" placeholder="Start date" maxDate={maxDate ?? undefined} />
)} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && ( (
onChange(date ? renderFormattedPayloadDate(date) : null)} buttonVariant="border-with-text" placeholder="Due date" minDate={minDate ?? undefined} />
)} /> )} {projectDetails?.cycle_view && ( (
onChange(cycleId)} value={value} buttonVariant="border-with-text" />
)} /> )} {projectDetails?.module_view && workspaceSlug && ( (
)} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && areEstimatesEnabledForProject(projectId) && ( (
)} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( ( setParentIssueListModalOpen(false)} onChange={(issue) => { onChange(issue.id); setSelectedParentIssue(issue); }} projectId={projectId} /> )} /> )} {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( {watch("parent_id") ? ( <> setParentIssueListModalOpen(true)}> Change parent issue setValue("parent_id", null)}> Remove parent issue ) : ( setParentIssueListModalOpen(true)}> Select Parent Issue )} )}
setCreateMore((prevData) => !prevData)} > Create more {}} size="md" />
); });