chore: new create issue modal

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" onClick={onDiscard}>
+                    <Button variant="neutral-primary" onClick={onDiscard} size="sm">
                       Discard
                     </Button>
                   </div>
                   <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose} size="sm">
                       Cancel
                     </Button>
-                    <Button variant="primary" 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")}`);
   };
@@ -392,10 +382,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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -15,8 +15,11 @@ import {
   ProjectEmptyState,
 } 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;
 
@@ -41,6 +44,8 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
     );
 
   return (
+    <>
+      {projectId && <ProjectIssueModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />}
       <div className="relative w-full h-full flex flex-col overflow-hidden">
         <ProjectAppliedFiltersRoot />
         {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
@@ -61,5 +66,6 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
           </div>
         )}
       </div>
+    </>
   );
 });

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: () => 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();
+  };
+
+  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);
+        handleClose();
+      })
+      .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();
+        }}
+      />
+      <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,176 @@
+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";
+// types
+import type { IIssue } from "types";
+
+export interface IssuesModalProps {
+  data?: IIssue;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ProjectIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const { data, isOpen, onClose } = 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 = () => {
+    if (changesMade) {
+      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}>
+        <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">
+                <DraftIssueLayout
+                  changesMade={changesMade}
+                  data={data}
+                  onChange={(formData) => setChangesMade(formData)}
+                  onClose={handleClose}
+                  onSubmit={handleFormSubmit}
+                  projectId={selectedProjectId}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});

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

@@ -23,7 +23,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/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;