fix: reset data to form logic

web/components/issues/draft-issue-form.tsx

@@ -61,9 +61,8 @@ interface IssueFormProps {
     formData: Partial<IIssue>,
     action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
   ) => Promise<void>;
-  data?: Partial<IIssue> | null;
+  initialData?: Partial<IIssue> | null;
   isOpen: boolean;
-  prePopulatedData?: Partial<IIssue> | null;
   projectId: string;
   setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
   createMore: boolean;
@@ -91,9 +90,8 @@ interface IssueFormProps {
 export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const {
     handleFormSubmit,
-    data,
+    initialData,
     isOpen,
-    prePopulatedData,
     projectId,
     setActiveProject,
     createMore,
@@ -124,7 +122,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const editorSuggestions = useEditorSuggestions(workspaceSlug as string | undefined, projectId);
 
   const {
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isDirty },
     handleSubmit,
     reset,
     watch,
@@ -132,30 +130,30 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
     getValues,
     setValue,
   } = useForm<IIssue>({
-    defaultValues: prePopulatedData ?? defaultValues,
+    defaultValues: initialData ?? defaultValues,
     reValidateMode: "onChange",
   });
 
   const issueName = watch("name");
 
   const payload: Partial<IIssue> = {
-    name: watch("name"),
+    name: getValues("name"),
-    description: watch("description"),
+    description: getValues("description"),
-    description_html: watch("description_html"),
+    description_html: getValues("description_html"),
-    state: watch("state"),
+    state: getValues("state"),
-    priority: watch("priority"),
+    priority: getValues("priority"),
-    assignees: watch("assignees"),
+    assignees: getValues("assignees"),
-    labels: watch("labels"),
+    labels: getValues("labels"),
-    start_date: watch("start_date"),
+    start_date: getValues("start_date"),
-    target_date: watch("target_date"),
+    target_date: getValues("target_date"),
-    project: watch("project"),
+    project: getValues("project"),
-    parent: watch("parent"),
+    parent: getValues("parent"),
-    cycle: watch("cycle"),
+    cycle: getValues("cycle"),
-    module: watch("module"),
+    module: getValues("module"),
   };
 
   useEffect(() => {
-    if (!isOpen || data) return;
+    if (!isOpen) return;
 
     setLocalStorageValue(
       JSON.stringify({
@@ -163,7 +161,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
       })
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(payload), isOpen, data]);
+  }, [JSON.stringify(payload), isOpen]);
 
   const handleCreateUpdateIssue = async (
     formData: Partial<IIssue>,
@@ -171,7 +169,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   ) => {
     await handleFormSubmit(
       {
-        ...(data ?? {}),
+        ...(initialData ?? {}),
         ...formData,
       },
       action
@@ -248,12 +246,14 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   };
 
   useEffect(() => {
+    // if form is dirty, don't reset
+    if (isDirty) return;
+
     reset({
       ...defaultValues,
-      ...(prePopulatedData ?? {}),
+      ...(initialData ?? {}),
-      ...(data ?? {}),
     });
-  }, [prePopulatedData, reset, data]);
+  }, [reset, initialData, isDirty]);
 
   // update projectId in form when projectId changes
   useEffect(() => {
@@ -287,7 +287,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
       )}
       <form
         onSubmit={handleSubmit((formData) =>
-          handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft")
+          handleCreateUpdateIssue(formData, initialData?.id ? "convertToNewIssue" : "createDraft")
         )}
       >
         <div className="space-y-5">
@@ -583,7 +583,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
               variant="neutral-primary"
               loading={isSubmitting}
               onClick={handleSubmit((formData) =>
-                handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
+                handleCreateUpdateIssue(formData, initialData?.id ? "updateDraft" : "createDraft")
               )}
             >
               {isSubmitting ? "Saving..." : "Save Draft"}
@@ -592,7 +592,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
               loading={isSubmitting}
               variant="primary"
               onClick={handleSubmit((formData) =>
-                handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createNewIssue")
+                handleCreateUpdateIssue(formData, initialData?.id ? "convertToNewIssue" : "createNewIssue")
               )}
             >
               {isSubmitting ? "Saving..." : "Add Issue"}

web/components/issues/draft-issue-modal.tsx

@@ -21,11 +21,10 @@ import type { IIssue } from "types";
 import { SUB_ISSUES } from "constants/fetch-keys";
 
 interface IssuesModalProps {
-  data?: IIssue | null;
   handleClose: () => void;
   isOpen: boolean;
   isUpdatingSingleIssue?: boolean;
-  prePopulateData?: Partial<IIssue>;
+  initialData?: Partial<IIssue>;
   fieldsToShow?: (
     | "project"
     | "name"
@@ -48,7 +47,7 @@ const issueService = new IssueService();
 const moduleService = new ModuleService();
 
 export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer((props) => {
-  const { data, handleClose, isOpen, prePopulateData: prePopulateDataProps, fieldsToShow = ["all"], onSubmit } = props;
+  const { handleClose, isOpen, initialData, fieldsToShow = ["all"], onSubmit } = props;
 
   // states
   const [createMore, setCreateMore] = useState(false);
@@ -85,33 +84,30 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
   };
 
   useEffect(() => {
-    setPreloadedData(prePopulateDataProps ?? {});
+    setPreloadedData(initialData ?? {});
 
-    if (cycleId && !prePopulateDataProps?.cycle) {
+    if (cycleId && !initialData?.cycle) {
       setPreloadedData((prevData) => ({
         ...(prevData ?? {}),
-        ...prePopulateDataProps,
+        ...initialData,
         cycle: cycleId.toString(),
       }));
     }
-    if (moduleId && !prePopulateDataProps?.module) {
+    if (moduleId && !initialData?.module) {
       setPreloadedData((prevData) => ({
         ...(prevData ?? {}),
-        ...prePopulateDataProps,
+        ...initialData,
         module: moduleId.toString(),
       }));
     }
-    if (
+    if ((router.asPath.includes("my-issues") || router.asPath.includes("assigned")) && !initialData?.assignees) {
-      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
-      !prePopulateDataProps?.assignees
-    ) {
       setPreloadedData((prevData) => ({
         ...(prevData ?? {}),
-        ...prePopulateDataProps,
+        ...initialData,
-        assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
+        assignees: initialData?.assignees ?? [user?.id ?? ""],
       }));
     }
-  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
+  }, [initialData, cycleId, moduleId, router.asPath, user?.id]);
 
   useEffect(() => {
     // if modal is closed, reset active project to null
@@ -123,7 +119,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
 
     // if data is present, set active project to the project of the
     // issue. This has more priority than the project in the url.
-    if (data && data.project) return setActiveProject(data.project);
+    if (initialData && initialData.project) return setActiveProject(initialData.project);
 
     if (prePopulateData && prePopulateData.project && !activeProject) return setActiveProject(prePopulateData.project);
 
@@ -133,7 +129,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
     // in the url. This has the least priority.
     if (projects && projects.length > 0 && !activeProject)
       setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
-  }, [activeProject, data, projectId, projects, isOpen, prePopulateData]);
+  }, [activeProject, initialData, projectId, projects, isOpen, prePopulateData]);
 
   const createDraftIssue = async (payload: Partial<IIssue>) => {
     if (!workspaceSlug || !activeProject || !user) return;
@@ -328,15 +324,14 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
                   <DraftIssueForm
                     isOpen={isOpen}
                     handleFormSubmit={handleFormSubmit}
-                    prePopulatedData={prePopulateData}
+                    initialData={initialData}
-                    data={data}
                     createMore={createMore}
                     setCreateMore={setCreateMore}
                     handleClose={onClose}
                     handleDiscard={onDiscard}
                     projectId={activeProject ?? ""}
                     setActiveProject={setActiveProject}
-                    status={data ? true : false}
+                    status={initialData?.id ? true : false}
                     user={user ?? undefined}
                     fieldsToShow={fieldsToShow}
                   />

web/components/issues/issue-layouts/list/roots/project-draft-issue-root.tsx

@@ -33,18 +33,13 @@ export const DraftIssueListLayout: FC = observer(() => {
     (group_by: string | null, issue: IIssue, action: "update" | "delete" | "convertToIssue") => {
       if (!workspaceSlug || !projectId) return;
 
-      const grouping = {
-        group_id: group_by,
-        sub_group_id: null,
-      };
-
       if (action === "update") {
-        draftIssuesStore.updateDraftIssue(workspaceSlug.toString(), projectId.toString(), grouping, issue);
+        draftIssuesStore.updateDraftIssue(workspaceSlug.toString(), projectId.toString(), issue);
         draftIssuesStore.updateIssueStructure(group_by, null, issue);
       } else if (action === "delete") {
         draftIssuesStore.deleteDraftIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
       } else if (action === "convertToIssue") {
-        draftIssuesStore.convertDraftIssueToIssue(workspaceSlug.toString(), projectId.toString(), grouping, issue.id);
+        draftIssuesStore.convertDraftIssueToIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
       }
     },
     [workspaceSlug, projectId, draftIssuesStore]

web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -28,9 +28,7 @@ export const DraftIssueQuickActions: React.FC<Props> = (props) => {
           setCreateUpdateIssueModal(false);
           setIssueToEdit(null);
         }}
-        // pre-populate date only if not editing
+        initialData={issueToEdit ? { ...issueToEdit } : { ...issue, name: issue?.name, description: issue.description }}
-        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue } : {}}
-        data={issueToEdit}
       />
       <CustomMenu ellipsis>
         <CustomMenu.MenuItem

web/components/workspace/sidebar-quick-action.tsx

@@ -21,7 +21,7 @@ export const WorkspaceSidebarQuickAction = () => {
       <CreateUpdateDraftIssueModal
         isOpen={isDraftIssueModalOpen}
         handleClose={() => setIsDraftIssueModalOpen(false)}
-        prePopulateData={storedValue ? JSON.parse(storedValue) : {}}
+        initialData={storedValue ? JSON.parse(storedValue) : {}}
         onSubmit={() => {
           localStorage.removeItem("draftedIssue");
           clearValue();