chore workspace draft issue improvements (#5808)

apiserver/plane/app/views/workspace/draft.py

@@ -147,6 +147,8 @@ class WorkspaceDraftIssueViewSet(BaseViewSet):
                     "updated_at",
                     "created_by",
                     "updated_by",
+                    "type_id",
+                    "description_html",
                 )
                 .first()
             )

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

@@ -30,6 +30,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
     storeType: issueStoreFromProps,
     isDraft = false,
     fetchIssueDetails = true,
+    moveToIssue = false,
   } = props;
   const issueStoreType = useIssueStoreType();
 
@@ -308,6 +309,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
           isCreateMoreToggleEnabled={createMore}
           onCreateMoreToggleChange={handleCreateMoreToggleChange}
           isDraft={isDraft}
+          moveToIssue={moveToIssue}
         />
       ) : (
         <IssueFormRoot
@@ -324,6 +326,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
           onSubmit={(payload) => handleFormSubmit(payload, isDraft)}
           projectId={activeProjectId}
           isDraft={isDraft}
+          moveToIssue={moveToIssue}
         />
       )}
     </ModalCore>

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

@@ -29,6 +29,7 @@ export interface DraftIssueProps {
   onSubmit: (formData: Partial<TIssue>, is_draft_issue?: boolean) => Promise<void>;
   projectId: string;
   isDraft: boolean;
+  moveToIssue?: boolean;
 }
 
 export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
@@ -43,6 +44,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
     isCreateMoreToggleEnabled,
     onCreateMoreToggleChange,
     isDraft,
+    moveToIssue = false,
   } = props;
   // states
   const [issueDiscardModal, setIssueDiscardModal] = useState(false);
@@ -156,6 +158,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         onSubmit={onSubmit}
         projectId={projectId}
         isDraft={isDraft}
+        moveToIssue={moveToIssue}
       />
     </>
   );

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

@@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
 // editor
 import { EditorRefApi } from "@plane/editor";
 // types
-import type { TIssue, ISearchIssueResponse } from "@plane/types";
+import type { TIssue, ISearchIssueResponse, TWorkspaceDraftIssue } from "@plane/types";
 // hooks
 import { Button, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // components
@@ -26,7 +26,7 @@ import { getChangedIssuefields } from "@/helpers/issue.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
-import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import { useIssueDetail, useProject, useProjectState, useWorkspaceDraftIssues } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
 // plane web components
@@ -59,6 +59,7 @@ export interface IssueFormProps {
   onSubmit: (values: Partial<TIssue>, is_draft_issue?: boolean) => Promise<void>;
   projectId: string;
   isDraft: boolean;
+  moveToIssue?: boolean;
 }
 
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
@@ -72,6 +73,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
     isCreateMoreToggleEnabled,
     onCreateMoreToggleChange,
     isDraft,
+    moveToIssue,
   } = props;
 
   // states
@@ -91,6 +93,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const { getIssueTypeIdOnProjectChange, getActiveAdditionalPropertiesLength, handlePropertyValuesValidation } =
     useIssueModal();
   const { isMobile } = usePlatformOS();
+  const { moveIssue } = useWorkspaceDraftIssues();
 
   const {
     issue: { getIssueById },
@@ -400,7 +403,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                 Discard
               </Button>
               <Button
-                variant="primary"
+                variant={moveToIssue ? "neutral-primary" : "primary"}
                 type="submit"
                 size="sm"
                 ref={submitBtnRef}
@@ -417,6 +420,19 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       ? "Create draft issue"
                       : "Create"}
               </Button>
+              {moveToIssue && (
+                <Button
+                  variant="primary"
+                  type="button"
+                  size="sm"
+                  loading={isSubmitting}
+                  onClick={() =>
+                    data?.id && data && moveIssue(workspaceSlug.toString(), data?.id, data as TWorkspaceDraftIssue)
+                  }
+                >
+                  Add to project
+                </Button>
+              )}
             </div>
           </div>
         </div>

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

@@ -20,6 +20,7 @@ export interface IssuesModalProps {
   storeType?: EIssuesStoreType;
   isDraft?: boolean;
   fetchIssueDetails?: boolean;
+  moveToIssue?: boolean;
 }
 
 export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(

web/core/components/issues/workspace-draft/quick-action.tsx

@@ -42,6 +42,7 @@ export const WorkspaceDraftIssueQuickActions: React.FC<IQuickActionProps> = obse
     parentRef,
   } = props;
   // states
+  const [moveToIssue, setMoveToIssue] = useState(false);
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TWorkspaceDraftIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@@ -77,7 +78,13 @@ export const WorkspaceDraftIssueQuickActions: React.FC<IQuickActionProps> = obse
       key: "move-to-issues",
       title: "Move to issues",
       icon: SquareStackIcon,
-      action: () => handleMoveToIssues && handleMoveToIssues(),
+      action: () => {
+        if (handleMoveToIssues) {
+          setMoveToIssue(true);
+          setIssueToEdit(issue);
+          setCreateUpdateIssueModal(true);
+        }
+      },
     },
     {
       key: "delete",
@@ -102,6 +109,7 @@ export const WorkspaceDraftIssueQuickActions: React.FC<IQuickActionProps> = obse
         onClose={() => {
           setCreateUpdateIssueModal(false);
           setIssueToEdit(undefined);
+          setMoveToIssue(false);
         }}
         data={issueToEdit ?? duplicateIssuePayload}
         onSubmit={async (data) => {
@@ -109,6 +117,7 @@ export const WorkspaceDraftIssueQuickActions: React.FC<IQuickActionProps> = obse
         }}
         storeType={EIssuesStoreType.WORKSPACE_DRAFT}
         fetchIssueDetails={false}
+        moveToIssue={moveToIssue}
         isDraft
       />
       <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />