fix: handled the empty issue propety, create more in edit modal, and moving drafts from issue functionality (#4030)

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

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import type { TIssue } from "@plane/types";
@@ -6,12 +7,10 @@ import type { TIssue } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 import { ConfirmIssueDiscard } from "@/components/issues";
 import { IssueFormRoot } from "@/components/issues/issue-modal/form";
+import { isEmptyHtmlString } from "@/helpers/string.helper";
 import { useEventTracker } from "@/hooks/store";
 // services
 import { IssueDraftService } from "@/services/issue";
-// ui
-// components
-// types
 
 export interface DraftIssueProps {
   changesMade: Partial<TIssue> | null;
@@ -50,8 +49,24 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   const { captureIssueEvent } = useEventTracker();
 
   const handleClose = () => {
-    if (changesMade) setIssueDiscardModal(true);
+    if (changesMade) {
-    else onClose(false);
+      Object.entries(changesMade).forEach(([key, value]) => {
+        const issueKey = key as keyof TIssue;
+        if (value === null || value === undefined || value === "") delete changesMade[issueKey];
+        if (typeof value === "object" && !value) delete changesMade[issueKey];
+        if (Array.isArray(value) && value.length === 0) delete changesMade[issueKey];
+        if (issueKey === "project_id") delete changesMade.project_id;
+        if (issueKey === "priority" && value && value === "none") delete changesMade.priority;
+        if (
+          issueKey === "description_html" &&
+          changesMade.description_html &&
+          isEmptyHtmlString(changesMade.description_html)
+        )
+          delete changesMade.description_html;
+      });
+      if (isEmpty(changesMade)) onClose(false);
+      else setIssueDiscardModal(true);
+    }
   };
 
   const handleCreateDraftIssue = async () => {

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

@@ -178,6 +178,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
           id: data.id,
           description_html: formData.description_html ?? "<p></p>",
         };
+
+    // this condition helps to move the issues from draft to project issues
+    if (formData.hasOwnProperty("is_draft")) submitData.is_draft = formData.is_draft;
+
     await onSubmit(submitData, is_draft_issue);
 
     setGptAssistantModal(false);
@@ -716,19 +720,24 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
           </div>
         </div>
         <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
-          <div
+          <div>
-            className="flex cursor-default items-center gap-1.5"
+            {!data?.id && (
-            onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
+              <div
-            onKeyDown={(e) => {
+                className="inline-flex cursor-default items-center gap-1.5"
-              if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
+                onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
-            }}
+                onKeyDown={(e) => {
-            tabIndex={getTabIndex("create_more")}
+                  if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
-          >
+                }}
-            <div className="flex cursor-pointer items-center justify-center">
+                tabIndex={getTabIndex("create_more")}
-              <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
+              >
-            </div>
+                <div className="flex cursor-pointer items-center justify-center">
-            <span className="text-xs">Create more</span>
+                  <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
+                </div>
+                <span className="text-xs">Create more</span>
+              </div>
+            )}
           </div>
+
           <div className="flex items-center gap-2">
             <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={getTabIndex("discard_button")}>
               Discard