chore: update draft issue logic

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -14,11 +14,8 @@ import {
   ProjectSpreadsheetLayout,
 } from "components/issues";
 import { Spinner } from "@plane/ui";
-import { ProjectIssueModal } from "components/issues/issue-modal/modal";
 
 export const ProjectLayoutRoot: React.FC = observer(() => {
-  const [isModalOpen, setIsModalOpen] = useState(true);
-
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 
@@ -37,8 +34,6 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
   const activeLayout = issueFilters?.displayFilters?.layout;
 
   return (
-    <>
-      {projectId && <ProjectIssueModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />}
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <ProjectAppliedFiltersRoot />
 
@@ -65,6 +60,5 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
         </>
       )}
     </div>
-    </>
   );
 });

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

@@ -17,7 +17,7 @@ export interface DraftIssueProps {
   changesMade: Partial<IIssue> | null;
   data?: IIssue;
   onChange: (formData: Partial<IIssue> | null) => void;
-  onClose: () => void;
+  onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
   onSubmit: (formData: Partial<IIssue>) => Promise<void>;
   projectId: string;
 }
@@ -39,7 +39,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
 
   const handleClose = () => {
     if (changesMade) setIssueDiscardModal(true);
-    else onClose();
+    else onClose(false);
   };
 
   const handleCreateDraftIssue = async () => {
@@ -58,7 +58,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
 
         onChange(null);
         setIssueDiscardModal(false);
-        handleClose();
+        onClose(false);
       })
       .catch(() =>
         setToastAlert({
@@ -84,7 +84,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         onDiscard={() => {
           onChange(null);
           setIssueDiscardModal(false);
-          onClose();
+          onClose(false);
         }}
       />
       <IssueFormRoot

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

@@ -9,6 +9,7 @@ import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { DraftIssueLayout } from "./draft-issue-layout";
+import { IssueFormRoot } from "./form";
 // types
 import type { IIssue } from "types";
 
@@ -16,10 +17,11 @@ export interface IssuesModalProps {
   data?: IIssue;
   isOpen: boolean;
   onClose: () => void;
+  withDraftIssueWrapper?: boolean;
 }
 
 export const ProjectIssueModal: React.FC<IssuesModalProps> = observer((props) => {
-  const { data, isOpen, onClose } = props;
+  const { data, isOpen, onClose, withDraftIssueWrapper } = props;
 
   const [changesMade, setChangesMade] = useState<Partial<IIssue> | null>(null);
 
@@ -38,8 +40,8 @@ export const ProjectIssueModal: React.FC<IssuesModalProps> = observer((props) =>
 
   const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
 
-  const handleClose = () => {
+  const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
-    if (changesMade) {
+    if (changesMade && saveDraftIssueInLocalStorage) {
       const draftIssue = JSON.stringify(changesMade);
 
       setLocalStorageDraftIssue(draftIssue);
@@ -133,7 +135,7 @@ export const ProjectIssueModal: React.FC<IssuesModalProps> = observer((props) =>
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-20" onClose={() => handleClose(true)}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -158,6 +160,7 @@ export const ProjectIssueModal: React.FC<IssuesModalProps> = observer((props) =>
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-4xl">
+                {withDraftIssueWrapper ? (
                   <DraftIssueLayout
                     changesMade={changesMade}
                     data={data}
@@ -166,6 +169,14 @@ export const ProjectIssueModal: React.FC<IssuesModalProps> = observer((props) =>
                     onSubmit={handleFormSubmit}
                     projectId={selectedProjectId}
                   />
+                ) : (
+                  <IssueFormRoot
+                    data={data}
+                    onClose={() => handleClose(false)}
+                    onSubmit={handleFormSubmit}
+                    projectId={selectedProjectId}
+                  />
+                )}
               </Dialog.Panel>
             </Transition.Child>
           </div>