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,34 +34,31 @@ 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 />
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ProjectAppliedFiltersRoot />
 
-        {loader === "init-loader" ? (
-          <div className="w-full h-full flex justify-center items-center">
-            <Spinner />
+      {loader === "init-loader" ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          {/* {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 && <ProjectEmptyState />} */}
+          <div className="w-full h-full relative overflow-auto">
+            {activeLayout === "list" ? (
+              <ListLayout />
+            ) : activeLayout === "kanban" ? (
+              <KanBanLayout />
+            ) : activeLayout === "calendar" ? (
+              <CalendarLayout />
+            ) : activeLayout === "gantt_chart" ? (
+              <GanttLayout />
+            ) : activeLayout === "spreadsheet" ? (
+              <ProjectSpreadsheetLayout />
+            ) : null}
           </div>
-        ) : (
-          <>
-            {/* {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 && <ProjectEmptyState />} */}
-            <div className="w-full h-full relative overflow-auto">
-              {activeLayout === "list" ? (
-                <ListLayout />
-              ) : activeLayout === "kanban" ? (
-                <KanBanLayout />
-              ) : activeLayout === "calendar" ? (
-                <CalendarLayout />
-              ) : activeLayout === "gantt_chart" ? (
-                <GanttLayout />
-              ) : activeLayout === "spreadsheet" ? (
-                <ProjectSpreadsheetLayout />
-              ) : null}
-            </div>
-          </>
-        )}
-      </div>
-    </>
+        </>
+      )}
+    </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 = () => {
-    if (changesMade) {
+  const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
+    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,14 +160,23 @@ 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">
-                <DraftIssueLayout
-                  changesMade={changesMade}
-                  data={data}
-                  onChange={(formData) => setChangesMade(formData)}
-                  onClose={handleClose}
-                  onSubmit={handleFormSubmit}
-                  projectId={selectedProjectId}
-                />
+                {withDraftIssueWrapper ? (
+                  <DraftIssueLayout
+                    changesMade={changesMade}
+                    data={data}
+                    onChange={(formData) => setChangesMade(formData)}
+                    onClose={handleClose}
+                    onSubmit={handleFormSubmit}
+                    projectId={selectedProjectId}
+                  />
+                ) : (
+                  <IssueFormRoot
+                    data={data}
+                    onClose={() => handleClose(false)}
+                    onSubmit={handleFormSubmit}
+                    projectId={selectedProjectId}
+                  />
+                )}
               </Dialog.Panel>
             </Transition.Child>
           </div>