chore: initialize withDraftIssueWrapper to be true

web/components/issues/confirm-issue-discard.tsx

@@ -69,15 +69,15 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                 </div>
                 <div className="flex justify-between gap-2 p-4 sm:px-6">
                   <div>
-                    <Button variant="neutral-primary" size="sm" onClick={onDiscard}>
+                    <Button variant="neutral-primary" onClick={onDiscard} size="sm">
                       Discard
                     </Button>
                   </div>
                   <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose} size="sm">
                       Cancel
                     </Button>
-                    <Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>
+                    <Button variant="primary" onClick={handleDeletion} loading={isLoading} size="sm">
                       {isLoading ? "Saving..." : "Save Draft"}
                     </Button>
                   </div>

web/components/issues/form.tsx

@@ -134,7 +134,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
 
   const payload: Partial<IIssue> = {
     name: getValues("name"),
-    description: getValues("description"),
     state: getValues("state"),
     priority: getValues("priority"),
     assignees: getValues("assignees"),
@@ -161,14 +160,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
     reset({
       ...defaultValues,
       project: projectId,
-      description: {
-        type: "doc",
-        content: [
-          {
-            type: "paragraph",
-          },
-        ],
-      },
       description_html: "<p></p>",
     });
     editorRef?.current?.clearEditor();
@@ -177,7 +168,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
   const handleAiAssistance = async (response: string) => {
     if (!workspaceSlug || !projectId) return;
 
-    setValue("description", {});
     setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
     editorRef.current?.setEditorValue(`${watch("description_html")}`);
   };
@@ -387,10 +377,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                             : value
                         }
                         customClassName="min-h-[7rem] border-custom-border-100"
-                        onChange={(description: Object, description_html: string) => {
-                          onChange(description_html);
-                          setValue("description", description);
-                        }}
+                        onChange={(description: Object, description_html: string) => onChange(description_html)}
                         mentionHighlights={editorSuggestion.mentionHighlights}
                         mentionSuggestions={editorSuggestion.mentionSuggestions}
                       />

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

@@ -12,12 +12,10 @@ import {
   KanBanLayout,
   ProjectAppliedFiltersRoot,
   ProjectSpreadsheetLayout,
-  ProjectEmptyState,
 } from "components/issues";
 import { Spinner } from "@plane/ui";
 
 export const ProjectLayoutRoot: React.FC = observer(() => {
-  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 

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

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueDraftService } from "services/issue";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { IssueFormRoot } from "components/issues/issue-modal/form";
+import { ConfirmIssueDiscard } from "components/issues";
+// types
+import type { IIssue } from "types";
+
+export interface DraftIssueProps {
+  changesMade: Partial<IIssue> | null;
+  data?: IIssue;
+  onChange: (formData: Partial<IIssue> | null) => void;
+  onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
+  onSubmit: (formData: Partial<IIssue>) => Promise<void>;
+  projectId: string;
+}
+
+const issueDraftService = new IssueDraftService();
+
+export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
+  const { changesMade, data, onChange, onClose, onSubmit } = props;
+
+  const [issueDiscardModal, setIssueDiscardModal] = useState(false);
+
+  const { project: projectStore } = useMobxStore();
+  const projects = projectStore.workspaceProjects;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    if (changesMade) setIssueDiscardModal(true);
+    else onClose(false);
+  };
+
+  const handleCreateDraftIssue = async () => {
+    if (!changesMade || !workspaceSlug || !projectId) return;
+
+    const payload = { ...changesMade };
+
+    await issueDraftService
+      .createDraftIssue(workspaceSlug.toString(), projectId.toString(), payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Draft Issue created successfully.",
+        });
+
+        onChange(null);
+        setIssueDiscardModal(false);
+        onClose(false);
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        })
+      );
+  };
+
+  // don't open the modal if there are no projects
+  if (!projects || projects.length === 0) return null;
+
+  // if project id is present in the router query, use that as the selected project id, otherwise use the first project id
+  const selectedProjectId = projectId ? projectId.toString() : projects[0].id;
+
+  return (
+    <>
+      <ConfirmIssueDiscard
+        isOpen={issueDiscardModal}
+        handleClose={() => setIssueDiscardModal(false)}
+        onConfirm={handleCreateDraftIssue}
+        onDiscard={() => {
+          onChange(null);
+          setIssueDiscardModal(false);
+          onClose(false);
+        }}
+      />
+      <IssueFormRoot
+        data={data}
+        onChange={onChange}
+        onClose={handleClose}
+        onSubmit={onSubmit}
+        projectId={selectedProjectId}
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,512 @@
+import React, { FC, useState, useRef, useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { GptAssistantModal } from "components/core";
+import { ParentIssuesListModal } from "components/issues";
+import {
+  IssueAssigneeSelect,
+  IssueDateSelect,
+  IssueEstimateSelect,
+  IssueLabelSelect,
+  IssuePrioritySelect,
+  IssueProjectSelect,
+  IssueStateSelect,
+  IssueModuleSelect,
+  IssueCycleSelect,
+} from "components/issues/select";
+import { CreateStateModal } from "components/states";
+import { CreateLabelModal } from "components/labels";
+// ui
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
+// icons
+import { LayoutPanelTop, Sparkle, X } from "lucide-react";
+// types
+import type { IIssue, ISearchIssueResponse } from "types";
+// components
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+const defaultValues: Partial<IIssue> = {
+  project: "",
+  name: "",
+  description_html: "<p></p>",
+  estimate_point: null,
+  state: "",
+  parent: null,
+  priority: "none",
+  assignees: [],
+  labels: [],
+  cycle: null,
+  module: null,
+  start_date: null,
+  target_date: null,
+};
+
+export interface IssueFormProps {
+  data?: Partial<IIssue>;
+  onChange?: (formData: Partial<IIssue> | null) => void;
+  onClose: () => void;
+  onSubmit: (values: Partial<IIssue>) => Promise<void>;
+  projectId: string;
+}
+
+// services
+const aiService = new AIService();
+const fileService = new FileService();
+
+export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
+  const { data, onChange, onClose, onSubmit, projectId } = props;
+
+  const [stateModal, setStateModal] = useState(false);
+  const [labelModal, setLabelModal] = useState(false);
+  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
+  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
+
+  const [gptAssistantModal, setGptAssistantModal] = useState(false);
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
+  const [createMore, setCreateMore] = useState(false);
+
+  const editorRef = useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+
+  const editorSuggestion = useEditorSuggestions();
+
+  const { setToastAlert } = useToast();
+
+  const {
+    formState: { errors, isDirty, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    getValues,
+    setValue,
+  } = useForm<IIssue>({
+    defaultValues: { ...defaultValues, project: projectId, ...data },
+    reValidateMode: "onChange",
+  });
+
+  const issueName = watch("name");
+
+  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+    await onSubmit(formData);
+
+    setGptAssistantModal(false);
+
+    reset({
+      ...defaultValues,
+      project: getValues("project"),
+    });
+    editorRef?.current?.clearEditor();
+  };
+
+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+    editorRef.current?.setEditorValue(`${watch("description_html")}`);
+  };
+
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId || !user) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          prompt: issueName,
+          task: "Generate a proper description for this issue.",
+        },
+        user
+      )
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Issue title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else handleAiAssistance(res.response_html);
+      })
+      .catch((err) => {
+        const error = err?.data?.error;
+
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "Some error occurred. Please try again.",
+          });
+      })
+      .finally(() => setIAmFeelingLucky(false));
+  };
+
+  useEffect(() => {
+    if (!onChange) return;
+
+    if (isDirty) onChange(getValues());
+    else onChange(null);
+  }, [isDirty, onChange, getValues]);
+
+  const startDate = watch("start_date");
+  const targetDate = watch("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <>
+      {projectId && (
+        <>
+          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
+          <CreateLabelModal
+            isOpen={labelModal}
+            handleClose={() => setLabelModal(false)}
+            projectId={projectId}
+            onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
+          />
+        </>
+      )}
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        <div className="space-y-5">
+          <div className="flex items-center gap-x-2">
+            {/* Don't show project selection if editing an issue */}
+            {!data?.id && (
+              <Controller
+                control={control}
+                name="project"
+                rules={{
+                  required: true,
+                }}
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <IssueProjectSelect value={value} error={error} onChange={onChange} />
+                )}
+              />
+            )}
+            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
+              {data?.id ? "Update" : "Create"} Issue
+            </h3>
+          </div>
+          {watch("parent") && selectedParentIssue && (
+            <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
+              <div className="flex items-center gap-2">
+                <span
+                  className="block h-1.5 w-1.5 rounded-full"
+                  style={{
+                    backgroundColor: selectedParentIssue.state__color,
+                  }}
+                />
+                <span className="flex-shrink-0 text-custom-text-200">
+                  {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
+                </span>
+                <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
+                <X
+                  className="h-3 w-3 cursor-pointer"
+                  onClick={() => {
+                    setValue("parent", null);
+                    setSelectedParentIssue(null);
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          <div className="space-y-3">
+            <div className="mt-2 space-y-3">
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: "Title is required",
+                  maxLength: {
+                    value: 255,
+                    message: "Title should be less than 255 characters",
+                  },
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Issue Title"
+                    className="resize-none text-xl w-full focus:border-blue-400"
+                  />
+                )}
+              />
+              <div className="relative">
+                <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex items-center gap-1">
+                  {issueName && issueName !== "" && (
+                    <button
+                      type="button"
+                      className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80 ${
+                        iAmFeelingLucky ? "cursor-wait" : ""
+                      }`}
+                      onClick={handleAutoGenerateDescription}
+                      disabled={iAmFeelingLucky}
+                    >
+                      {iAmFeelingLucky ? (
+                        "Generating response..."
+                      ) : (
+                        <>
+                          <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
+                        </>
+                      )}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80"
+                    onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                  >
+                    <Sparkle className="h-4 w-4" />
+                    AI
+                  </button>
+                </div>
+                <Controller
+                  name="description_html"
+                  control={control}
+                  render={({ field: { value, onChange } }) => (
+                    <RichTextEditorWithRef
+                      cancelUploadImage={fileService.cancelUpload}
+                      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                      deleteFile={fileService.deleteImage}
+                      ref={editorRef}
+                      debouncedUpdatesEnabled={false}
+                      value={!value || value.trim() === "" ? "<p></p>" : value}
+                      customClassName="min-h-[7rem] border-custom-border-100"
+                      onChange={(description: Object, description_html: string) => onChange(description_html)}
+                      mentionHighlights={editorSuggestion.mentionHighlights}
+                      mentionSuggestions={editorSuggestion.mentionSuggestions}
+                    />
+                  )}
+                />
+                <GptAssistantModal
+                  isOpen={gptAssistantModal}
+                  handleClose={() => {
+                    setGptAssistantModal(false);
+                    // this is done so that the title do not reset after gpt popover closed
+                    reset(getValues());
+                  }}
+                  inset="top-2 left-0"
+                  content=""
+                  htmlContent={watch("description_html")}
+                  onResponse={(response) => {
+                    handleAiAssistance(response);
+                  }}
+                  projectId={watch("project")}
+                />
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <Controller
+                  control={control}
+                  name="state"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueStateSelect
+                      setIsOpen={setStateModal}
+                      value={value}
+                      onChange={onChange}
+                      projectId={watch("project")}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="priority"
+                  render={({ field: { value, onChange } }) => <IssuePrioritySelect value={value} onChange={onChange} />}
+                />
+                <Controller
+                  control={control}
+                  name="assignees"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueAssigneeSelect projectId={watch("project")} value={value} onChange={onChange} />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="labels"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueLabelSelect
+                      setIsOpen={setLabelModal}
+                      value={value}
+                      onChange={onChange}
+                      projectId={watch("project")}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="start_date"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueDateSelect
+                      label="Start date"
+                      maxDate={maxDate ?? undefined}
+                      onChange={onChange}
+                      value={value}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueDateSelect
+                      label="Due date"
+                      minDate={minDate ?? undefined}
+                      onChange={onChange}
+                      value={value}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="module"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueModuleSelect
+                      workspaceSlug={workspaceSlug as string}
+                      projectId={watch("project")}
+                      value={value}
+                      onChange={(val: string) => {
+                        onChange(val);
+                      }}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="cycle"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueCycleSelect
+                      workspaceSlug={workspaceSlug as string}
+                      projectId={watch("project")}
+                      value={value}
+                      onChange={(val: string) => {
+                        onChange(val);
+                      }}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="estimate_point"
+                  render={({ field: { value, onChange } }) => <IssueEstimateSelect value={value} onChange={onChange} />}
+                />
+                <CustomMenu
+                  customButton={
+                    <button
+                      type="button"
+                      className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
+                    >
+                      {watch("parent") ? (
+                        <div className="flex items-center gap-1 text-custom-text-200">
+                          <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                          <span className="whitespace-nowrap">
+                            {selectedParentIssue &&
+                              `${selectedParentIssue.project__identifier}-
+                                  ${selectedParentIssue.sequence_id}`}
+                          </span>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-1 text-custom-text-300">
+                          <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                          <span className="whitespace-nowrap">Add Parent</span>
+                        </div>
+                      )}
+                    </button>
+                  }
+                  placement="bottom-start"
+                >
+                  {watch("parent") ? (
+                    <>
+                      <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                        Change parent issue
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
+                        Remove parent issue
+                      </CustomMenu.MenuItem>
+                    </>
+                  ) : (
+                    <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                      Select Parent Issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+                <Controller
+                  control={control}
+                  name="parent"
+                  render={({ field: { onChange } }) => (
+                    <ParentIssuesListModal
+                      isOpen={parentIssueListModalOpen}
+                      handleClose={() => setParentIssueListModalOpen(false)}
+                      onChange={(issue) => {
+                        onChange(issue.id);
+                        setSelectedParentIssue(issue);
+                      }}
+                      projectId={watch("project")}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+          </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
+            className="flex cursor-default items-center gap-1.5"
+            onClick={() => setCreateMore((prevData) => !prevData)}
+          >
+            <div className="flex cursor-pointer items-center justify-center">
+              <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
+            </div>
+            <span className="text-xs">Create more</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="neutral-primary" size="sm" onClick={onClose}>
+              Discard
+            </Button>
+            <Button type="submit" variant="primary" size="sm" loading={isSubmitting}>
+              {data?.id
+                ? isSubmitting
+                  ? "Updating Issue..."
+                  : "Update Issue"
+                : isSubmitting
+                ? "Adding Issue..."
+                : "Add Issue"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+});

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

@@ -0,0 +1,187 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+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";
+
+export interface IssuesModalProps {
+  data?: IIssue;
+  isOpen: boolean;
+  onClose: () => void;
+  withDraftIssueWrapper?: boolean;
+}
+
+export const ProjectIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const { data, isOpen, onClose, withDraftIssueWrapper = true } = props;
+
+  const [changesMade, setChangesMade] = useState<Partial<IIssue> | null>(null);
+
+  const {
+    project: projectStore,
+    issueDetail: issueDetailStore,
+    cycleIssue: cycleIssueStore,
+    moduleIssue: moduleIssueStore,
+  } = useMobxStore();
+  const projects = projectStore.workspaceProjects;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
+
+  const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
+    if (changesMade && saveDraftIssueInLocalStorage) {
+      const draftIssue = JSON.stringify(changesMade);
+
+      setLocalStorageDraftIssue(draftIssue);
+    }
+
+    onClose();
+  };
+
+  const createIssue = async (payload: Partial<IIssue>): Promise<IIssue | null> => {
+    const issueProject = payload.project;
+
+    if (!workspaceSlug || !issueProject) return null;
+
+    await issueDetailStore
+      .createIssue(workspaceSlug.toString(), issueProject, payload)
+      .then(async (res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+
+        return res;
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+
+    return null;
+  };
+
+  const updateIssue = async (payload: Partial<IIssue>): Promise<IIssue | null> => {
+    const issueProject = payload.project;
+
+    if (!workspaceSlug || !issueProject || !data?.id) return null;
+
+    await issueDetailStore
+      .updateIssue(workspaceSlug.toString(), issueProject, data.id, payload)
+      .then((res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue updated successfully.",
+        });
+
+        return { ...payload, ...res };
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be updated. Please try again.",
+        });
+      });
+
+    return null;
+  };
+
+  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+    if (!workspaceSlug || !formData.project) return;
+
+    const payload: Partial<IIssue> = {
+      ...formData,
+      description_html: formData.description_html ?? "<p></p>",
+    };
+
+    let res: IIssue | null = null;
+    if (!data?.id) res = await createIssue(payload);
+    else res = await updateIssue(payload);
+
+    // add issue to cycle if cycle is selected, and cycle is different from current cycle
+    if (formData.cycle && res && (!data?.id || formData.cycle !== data?.cycle))
+      cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), formData.project, formData.cycle, [res.id]);
+
+    // add issue to module if module is selected, and module is different from current module
+    if (formData.module && res && (!data?.id || formData.module !== data?.module))
+      moduleIssueStore.addIssueToModule(workspaceSlug.toString(), formData.project, formData.module, [res.id]);
+
+    handleClose();
+  };
+
+  // don't open the modal if there are no projects
+  if (!projects || projects.length === 0) return null;
+
+  // if project id is present in the router query, use that as the selected project id, otherwise use the first project id
+  const selectedProjectId = projectId ? projectId.toString() : projects[0].id;
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={() => handleClose(true)}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              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}
+                    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>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});

web/components/page-views/workspace-dashboard.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import useSWR from "swr";
@@ -20,7 +20,6 @@ export const WorkspaceDashboardView = observer(() => {
   // store
 
   const { user: userStore, project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
-
   const user = userStore.currentUser;
   const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
   const workspaceDashboardInfo = userStore.dashboardInfo;

web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -21,7 +21,6 @@ import { NextPageWithLayout } from "types/app";
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
 
 const defaultValues: Partial<IIssue> = {
-  description: "",
   description_html: "",
   estimate_point: null,
   issue_cycle: null,

web/store/project-issues.ts

@@ -0,0 +1,207 @@
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
+// services
+import { IssueService } from "services/issue/issue.service";
+// constants
+import { ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
+// types
+import { IIssue, IState, TIssueGroupByOptions } from "types";
+import { RootStore } from "store/root";
+
+export interface IGroupedIssues {
+  [group_id: string]: string[];
+}
+
+export interface ISubGroupedIssues {
+  [sub_grouped_id: string]: {
+    [group_id: string]: string[];
+  };
+}
+
+export type TUnGroupedIssues = string[];
+
+export interface IIssueResponse {
+  [issue_id: string]: IIssue;
+}
+
+enum issueGroupByKeys {
+  state = "state",
+  "state_detail.group" = "state_detail.group",
+  priority = "priority",
+  labels = "labels",
+  created_by = "created_by",
+  project = "project",
+  assignees = "assignees",
+  mentions = "assignees",
+}
+
+export interface IProjectIssueStore {
+  loader: "init-loader" | "mutation" | null;
+  projectId: string | undefined;
+  issues:
+    | {
+        [project_id: string]: {
+          [issue_id: string]: IIssue;
+        };
+      }
+    | undefined;
+
+  // computed
+  groupedIssues: IGroupedIssues | undefined;
+  subGroupedIssues: ISubGroupedIssues | undefined;
+  unGroupedIssues: TUnGroupedIssues | undefined;
+
+  // actions
+  fetchProjectIssues: (workspaceSlug: string, projectId: string) => Promise<IIssueResponse> | undefined;
+}
+
+export class ProjectIssueStore implements IProjectIssueStore {
+  loader: "init-loader" | "mutation" | null = null;
+  projectId: string | undefined = undefined;
+  issues:
+    | {
+        [project_id: string]: {
+          [issue_id: string]: IIssue;
+        };
+      }
+    | undefined = undefined;
+  // root store
+  rootStore;
+  // service
+  issueService;
+
+  constructor(_rootStore: RootStore | null = null) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      projectId: observable.ref,
+      issues: observable.ref,
+      // computed
+      groupedIssues: computed,
+      subGroupedIssues: computed,
+      unGroupedIssues: computed,
+      // action
+      fetchProjectIssues: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  issueDisplayFiltersDefaultData = (): { [filter_key: string]: string[] } => {
+    const data: { [filter_key: string]: string[] } = {
+      state: (this.rootStore?.projectState?.projectStates ?? []).map((i: IState) => i.id),
+      "state_detail.group": ISSUE_STATE_GROUPS.map((i) => i.key),
+      priority: ISSUE_PRIORITIES.map((i) => i.key),
+      labels: [...(this.rootStore?.project?.projectLabels ?? []).map((i) => i.id), "None"],
+      created_by: (this.rootStore?.project?.projectMembers ?? []).map((i) => i.member.id),
+      project: (this.rootStore?.project.workspaceProjects ?? []).map((i) => i.id),
+      assignees: [...(this.rootStore?.project?.projectMembers ?? []).map((i) => i.member.id), "None"],
+    };
+
+    return data;
+  };
+
+  get groupedIssues() {
+    const groupBy: TIssueGroupByOptions | undefined = this.rootStore?.issueFilter.userDisplayFilters.group_by;
+    const projectId: string | undefined | null = this.rootStore?.project.projectId;
+
+    if (!groupBy || !projectId || !this.issues || !this.issues[projectId]) return undefined;
+
+    const displayFiltersDefaultData: { [filter_key: string]: string[] } = this.issueDisplayFiltersDefaultData();
+
+    const issues: { [group_id: string]: string[] } = {};
+    displayFiltersDefaultData[groupBy].forEach((group) => {
+      issues[group] = [];
+    });
+
+    const projectIssues = this.issues[projectId];
+
+    for (const issue in projectIssues) {
+      const _issue = projectIssues[issue];
+      const groupArray = this.getGroupArray(_issue[issueGroupByKeys[groupBy] as keyof IIssue]);
+
+      for (const group of groupArray) {
+        if (group && issues[group]) {
+          issues[group].push(_issue.id);
+        }
+      }
+    }
+
+    return issues;
+  }
+
+  get subGroupedIssues() {
+    const subGroupBy: TIssueGroupByOptions | undefined = this.rootStore?.issueFilter.userDisplayFilters.sub_group_by;
+    const groupBy: TIssueGroupByOptions | undefined = this.rootStore?.issueFilter.userDisplayFilters.group_by;
+    const projectId: string | undefined | null = this.rootStore?.project.projectId;
+
+    if (!subGroupBy || !groupBy || !projectId || !this.issues || !this.issues[projectId]) return undefined;
+
+    const displayFiltersDefaultData: { [filter_key: string]: string[] } = this.issueDisplayFiltersDefaultData();
+
+    const issues: { [sub_group_id: string]: { [group_id: string]: string[] } } = {};
+    displayFiltersDefaultData[subGroupBy].forEach((sub_group: any) => {
+      const groupByIssues: { [group_id: string]: string[] } = {};
+      displayFiltersDefaultData[groupBy].forEach((group) => {
+        groupByIssues[group] = [];
+      });
+      issues[sub_group] = groupByIssues;
+    });
+
+    const projectIssues = this.issues[projectId];
+
+    for (const issue in projectIssues) {
+      const _issue = projectIssues[issue];
+      const subGroupArray = this.getGroupArray(_issue[issueGroupByKeys[subGroupBy] as keyof IIssue]);
+      const groupArray = this.getGroupArray(_issue[issueGroupByKeys[groupBy] as keyof IIssue]);
+
+      for (const subGroup of subGroupArray) {
+        for (const group of groupArray) {
+          if (subGroup && group && issues[subGroup]) {
+            issues[subGroup][group].push(_issue.id);
+          }
+        }
+      }
+    }
+
+    return issues;
+  }
+
+  get unGroupedIssues() {
+    if (!this.projectId || !this.issues || !this.issues[this.projectId]) return undefined;
+    return Object.keys(this.issues[this.projectId]);
+  }
+
+  fetchProjectIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.projectId = projectId;
+      this.rootStore?.project.setProjectId(projectId);
+
+      const response = await this.issueService.getV3Issues(workspaceSlug, projectId);
+      const _issues = {
+        ...this.issues,
+        [projectId]: { ...response },
+      };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   *
+   * @description this function helps to convert the typeof value (array | string | null) to array and returns an array
+   */
+  getGroupArray(value: string[] | string | null) {
+    if (Array.isArray(value)) {
+      return value;
+    } else {
+      return [value || "None"];
+    }
+  }
+}

web/store/root.ts

@@ -157,6 +157,9 @@ import {
 import { CycleIssueFiltersStore, ICycleIssueFiltersStore } from "store/cycle-issues";
 import { ModuleIssueFiltersStore, IModuleIssueFiltersStore } from "store/module-issues";
 
+// v3
+import { ProjectIssueStore, IProjectIssueStore } from "store/project-issues";
+
 import { IMentionsStore, MentionsStore } from "store/editor";
 // pages
 import { PageStore, IPageStore } from "store/page.store";

web/types/issues.d.ts

@@ -91,9 +91,8 @@ export interface IIssue {
   cycle: string | null;
   cycle_id: string | null;
   cycle_detail: ICycle | null;
-  description: any;
-  description_html: any;
-  description_stripped: any;
+  description_html: string;
+  description_stripped: string;
   estimate_point: number | null;
   id: string;
   // tempId is used for optimistic updates. It is not a part of the API response.
@@ -116,7 +115,6 @@ export interface IIssue {
   project_detail: IProjectLite;
   sequence_id: number;
   sort_order: number;
-  sprints: string | null;
   start_date: string | null;
   state: string;
   state_detail: IState;