[WEB-2388] fix: workspace draft issues (#5800)

* fix: create issue modal handle close

* fix: workspace level draft issue store update

* chore: count added

* chore: added description html in list endpoint

* fix: workspace draft issue mutation

* fix: workspace draft issue empty state and count

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

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

@@ -16,7 +16,6 @@ import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useEventTracker, useCycle, useIssues, useModule, useIssueDetail, useUser } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
-import useLocalStorage from "@/hooks/use-local-storage";
 // local components
 import { DraftIssueLayout } from "./draft-issue-layout";
 import { IssueFormRoot } from "./form";
@@ -55,10 +54,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   const { handleCreateUpdatePropertyValues } = useIssueModal();
   // pathname
   const pathname = usePathname();
-  // local storage
-  const { storedValue: localStorageDraftIssues, setValue: setLocalStorageDraftIssue } = useLocalStorage<
-    Record<string, Partial<TIssue>>
-  >("draftedIssue", {});
   // current store details
   const { createIssue, updateIssue } = useIssuesActions(storeType);
   // derived values
@@ -128,14 +123,9 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
     setCreateMore(value);
   };
 
-  const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
-    if (changesMade && saveDraftIssueInLocalStorage) {
-      // updating the current edited issue data in the local storage
-      let draftIssues = localStorageDraftIssues ? localStorageDraftIssues : {};
-      if (workspaceSlug) {
-        draftIssues = { ...draftIssues, [workspaceSlug.toString()]: changesMade };
-        setLocalStorageDraftIssue(draftIssues);
-      }
+  const handleClose = (saveAsDraft?: boolean) => {
+    if (changesMade && saveAsDraft && !data) {
+      handleCreateIssue(changesMade, true);
     }
 
     setActiveProjectId(null);
@@ -328,7 +318,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
             cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId.toString() : null,
             module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId.toString()] : null,
           }}
-          onClose={() => handleClose(false)}
+          onClose={handleClose}
           isCreateMoreToggleEnabled={createMore}
           onCreateMoreToggleChange={handleCreateMoreToggleChange}
           onSubmit={(payload) => handleFormSubmit(payload, isDraft)}

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

@@ -14,9 +14,7 @@ import { ConfirmIssueDiscard } from "@/components/issues";
 import { isEmptyHtmlString } from "@/helpers/string.helper";
 // hooks
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
-import { useEventTracker } from "@/hooks/store";
-// services
-import workspaceDraftService from "@/services/issue/workspace_draft.service";
+import { useEventTracker, useWorkspaceDraftIssues } from "@/hooks/store";
 // local components
 import { IssueFormRoot } from "./form";
 
@@ -55,6 +53,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   // store hooks
   const { captureIssueEvent } = useEventTracker();
   const { handleCreateUpdatePropertyValues } = useIssueModal();
+  const { createIssue } = useWorkspaceDraftIssues();
 
   const handleClose = () => {
     if (data?.id) {
@@ -96,8 +95,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
       project_id: projectId,
     };
 
-    const response = await workspaceDraftService
-      .createIssue(workspaceSlug.toString(), payload)
+    const response = await createIssue(workspaceSlug.toString(), payload)
       .then((res) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,

web/core/components/issues/workspace-draft/root.tsx

@@ -1,14 +1,17 @@
 "use client";
 
-import { FC } from "react";
+import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
+// components
+import { EmptyState } from "@/components/empty-state";
 // constants
+import { EmptyStateType } from "@/constants/empty-state";
 import { EDraftIssuePaginationType } from "@/constants/workspace-drafts";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useWorkspaceDraftIssues } from "@/hooks/store";
+import { useCommandPalette, useProject, useWorkspaceDraftIssues } from "@/hooks/store";
 // components
 import { DraftIssueBlock } from "./draft-issue-block";
 import { WorkspaceDraftEmptyState } from "./empty-state";
@@ -21,7 +24,9 @@ type TWorkspaceDraftIssuesRoot = {
 export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer((props) => {
   const { workspaceSlug } = props;
   // hooks
-  const { loader, paginationInfo, fetchIssues, issuesMap, issueIds } = useWorkspaceDraftIssues();
+  const { loader, paginationInfo, fetchIssues, issueIds } = useWorkspaceDraftIssues();
+  const { workspaceProjectIds } = useProject();
+  const { toggleCreateProjectModal } = useCommandPalette();
 
   // fetching issues
   useSWR(
@@ -39,6 +44,17 @@ export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer(
     return <WorkspaceDraftIssuesLoader items={14} />;
   }
 
+  if (workspaceProjectIds?.length === 0)
+    return (
+      <EmptyState
+        type={EmptyStateType.WORKSPACE_NO_PROJECTS}
+        size="sm"
+        primaryButtonOnClick={() => {
+          toggleCreateProjectModal(true);
+        }}
+      />
+    );
+
   if (loader === "empty-state" && issueIds.length <= 0) return <WorkspaceDraftEmptyState />;
 
   return (
@@ -48,22 +64,26 @@ export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer(
           <DraftIssueBlock key={issueId} workspaceSlug={workspaceSlug} issueId={issueId} />
         ))}
       </div>
-      {loader === "pagination" && issueIds.length >= 0 ? (
-        <WorkspaceDraftIssuesLoader items={1} />
-      ) : (
-        <div
-          className={cn(
-            "h-11 pl-6 p-3 text-sm font-medium bg-custom-background-100 border-b border-custom-border-200 transition-all",
-            {
-              "text-custom-primary-100 hover:text-custom-primary-200 cursor-pointer underline-offset-2 hover:underline":
-                paginationInfo?.next_page_results,
-              "text-custom-text-300 cursor-not-allowed": !paginationInfo?.next_page_results,
-            }
+
+      {paginationInfo?.next_page_results && (
+        <Fragment>
+          {loader === "pagination" && issueIds.length >= 0 ? (
+            <WorkspaceDraftIssuesLoader items={1} />
+          ) : (
+            <div
+              className={cn(
+                "h-11 pl-6 p-3 text-sm font-medium bg-custom-background-100 border-b border-custom-border-200 transition-all",
+                {
+                  "text-custom-primary-100 hover:text-custom-primary-200 cursor-pointer underline-offset-2 hover:underline":
+                    paginationInfo?.next_page_results,
+                }
+              )}
+              onClick={handleNextIssues}
+            >
+              Load More &darr;
+            </div>
           )}
-          onClick={handleNextIssues}
-        >
-          Load More &darr;
-        </div>
+        </Fragment>
       )}
     </div>
   );