fix: merge conflicts resolved

apiserver/.env.example

@@ -39,7 +39,6 @@ OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
 OPENAI_API_KEY="sk-" # deprecated
 GPT_ENGINE="gpt-3.5-turbo" # deprecated
 
-
 # Settings related to Docker
 DOCKERIZED=1 # deprecated
 

apiserver/plane/app/views/config.py

@@ -20,7 +20,6 @@ class ConfigurationEndpoint(BaseAPIView):
     ]
 
     def get(self, request):
-
         # Get all the configuration
         (
             GOOGLE_CLIENT_ID,
@@ -90,8 +89,12 @@ class ConfigurationEndpoint(BaseAPIView):
 
         data = {}
         # Authentication
-        data["google_client_id"] = GOOGLE_CLIENT_ID if GOOGLE_CLIENT_ID and GOOGLE_CLIENT_ID != "\"\"" else None
+        data["google_client_id"] = (
-        data["github_client_id"] = GITHUB_CLIENT_ID if GITHUB_CLIENT_ID and GITHUB_CLIENT_ID != "\"\"" else None
+            GOOGLE_CLIENT_ID if GOOGLE_CLIENT_ID and GOOGLE_CLIENT_ID != '""' else None
+        )
+        data["github_client_id"] = (
+            GITHUB_CLIENT_ID if GITHUB_CLIENT_ID and GITHUB_CLIENT_ID != '""' else None
+        )
         data["github_app_name"] = GITHUB_APP_NAME
         data["magic_login"] = (
             bool(EMAIL_HOST_USER) and bool(EMAIL_HOST_PASSWORD)
@@ -114,7 +117,9 @@ class ConfigurationEndpoint(BaseAPIView):
         # File size settings
         data["file_size_limit"] = float(os.environ.get("FILE_SIZE_LIMIT", 5242880))
 
-        # is self managed
+        # is smtp configured
-        data["is_self_managed"] = bool(int(os.environ.get("IS_SELF_MANAGED", "1")))
+        data["is_smtp_configured"] = not (
+            bool(EMAIL_HOST_USER) and bool(EMAIL_HOST_PASSWORD)
+        )
 
         return Response(data, status=status.HTTP_200_OK)

packages/editor/core/src/ui/extensions/table/table/table-view.tsx

@@ -1,5 +1,5 @@
 import { h } from "jsx-dom-cjs";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
 import { Decoration, NodeView } from "@tiptap/pm/view";
 import tippy, { Instance, Props } from "tippy.js";
 
@@ -8,6 +8,12 @@ import { CellSelection, TableMap, updateColumnsOnResize } from "@tiptap/pm/table
 
 import { icons } from "src/ui/extensions/table/table/icons";
 
+type ToolboxItem = {
+  label: string;
+  icon: string;
+  action: (args: any) => void;
+};
+
 export function updateColumns(
   node: ProseMirrorNode,
   colgroup: HTMLElement,
@@ -75,7 +81,7 @@ const defaultTippyOptions: Partial<Props> = {
   placement: "right",
 };
 
-function setCellsBackgroundColor(editor: Editor, backgroundColor) {
+function setCellsBackgroundColor(editor: Editor, backgroundColor: string) {
   return editor
     .chain()
     .focus()
@@ -88,7 +94,7 @@ function setCellsBackgroundColor(editor: Editor, backgroundColor) {
     .run();
 }
 
-const columnsToolboxItems = [
+const columnsToolboxItems: ToolboxItem[] = [
   {
     label: "Add Column Before",
     icon: icons.insertLeftTableIcon,
@@ -109,7 +115,7 @@ const columnsToolboxItems = [
     }: {
       editor: Editor;
       triggerButton: HTMLElement;
-      controlsContainer;
+      controlsContainer: Element;
     }) => {
       createColorPickerToolbox({
         triggerButton,
@@ -127,7 +133,7 @@ const columnsToolboxItems = [
   },
 ];
 
-const rowsToolboxItems = [
+const rowsToolboxItems: ToolboxItem[] = [
   {
     label: "Add Row Above",
     icon: icons.insertTopTableIcon,
@@ -172,11 +178,12 @@ function createToolbox({
   tippyOptions,
   onClickItem,
 }: {
-  triggerButton: HTMLElement;
+  triggerButton: Element | null;
-  items: { icon: string; label: string }[];
+  items: ToolboxItem[];
   tippyOptions: any;
-  onClickItem: any;
+  onClickItem: (item: ToolboxItem) => void;
 }): Instance<Props> {
+  // @ts-expect-error
   const toolbox = tippy(triggerButton, {
     content: h(
       "div",
@@ -278,14 +285,14 @@ export class TableView implements NodeView {
   decorations: Decoration[];
   editor: Editor;
   getPos: () => number;
-  hoveredCell;
+  hoveredCell: ResolvedPos | null = null;
   map: TableMap;
   root: HTMLElement;
-  table: HTMLElement;
+  table: HTMLTableElement;
-  colgroup: HTMLElement;
+  colgroup: HTMLTableColElement;
   tbody: HTMLElement;
-  rowsControl?: HTMLElement;
+  rowsControl?: HTMLElement | null;
-  columnsControl?: HTMLElement;
+  columnsControl?: HTMLElement | null;
   columnsToolbox?: Instance<Props>;
   rowsToolbox?: Instance<Props>;
   controls?: HTMLElement;
@@ -398,13 +405,13 @@ export class TableView implements NodeView {
     this.render();
   }
 
-  update(node: ProseMirrorNode, decorations) {
+  update(node: ProseMirrorNode, decorations: readonly Decoration[]) {
     if (node.type !== this.node.type) {
       return false;
     }
 
     this.node = node;
-    this.decorations = decorations;
+    this.decorations = [...decorations];
     this.map = TableMap.get(this.node);
 
     if (this.editor.isEditable) {
@@ -430,19 +437,16 @@ export class TableView implements NodeView {
   }
 
   updateControls() {
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => {
-      (acc, curr) => {
+      if (curr.spec.hoveredCell !== undefined) {
-        if (curr.spec.hoveredCell !== undefined) {
+        acc["hoveredCell"] = curr.spec.hoveredCell;
-          acc["hoveredCell"] = curr.spec.hoveredCell;
+      }
-        }
 
-        if (curr.spec.hoveredTable !== undefined) {
+      if (curr.spec.hoveredTable !== undefined) {
-          acc["hoveredTable"] = curr.spec.hoveredTable;
+        acc["hoveredTable"] = curr.spec.hoveredTable;
-        }
+      }
-        return acc;
+      return acc;
-      },
+    }, {} as Record<string, HTMLElement>) as any;
-      {} as Record<string, HTMLElement>
-    ) as any;
 
     if (table === undefined || cell === undefined) {
       return this.root.classList.add("controls--disabled");
@@ -453,14 +457,21 @@ export class TableView implements NodeView {
 
     const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
 
+    if (!this.table) {
+      return;
+    }
+
     const tableRect = this.table.getBoundingClientRect();
     const cellRect = cellDom.getBoundingClientRect();
 
-    this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`;
+    if (this.columnsControl) {
-    this.columnsControl.style.width = `${cellRect.width}px`;
+      this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`;
-
+      this.columnsControl.style.width = `${cellRect.width}px`;
-    this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
+    }
-    this.rowsControl.style.height = `${cellRect.height}px`;
+    if (this.rowsControl) {
+      this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
+      this.rowsControl.style.height = `${cellRect.height}px`;
+    }
   }
 
   selectColumn() {
@@ -471,10 +482,7 @@ export class TableView implements NodeView {
     const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1);
 
     const cellSelection = CellSelection.create(this.editor.view.state.doc, anchorCellPos, headCellPos);
-    this.editor.view.dispatch(
+    this.editor.view.dispatch(this.editor.state.tr.setSelection(cellSelection));
-      // @ts-ignore
-      this.editor.state.tr.setSelection(cellSelection)
-    );
   }
 
   selectRow() {
@@ -485,9 +493,6 @@ export class TableView implements NodeView {
     const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1);
 
     const cellSelection = CellSelection.create(this.editor.state.doc, anchorCellPos, headCellPos);
-    this.editor.view.dispatch(
+    this.editor.view.dispatch(this.editor.view.state.tr.setSelection(cellSelection));
-      // @ts-ignore
-      this.editor.view.state.tr.setSelection(cellSelection)
-    );
   }
 }

packages/types/src/app.d.ts

@@ -1,5 +1,3 @@
-
-
 export interface IAppConfig {
   email_password_login: boolean;
   file_size_limit: number;
@@ -12,5 +10,5 @@ export interface IAppConfig {
   posthog_host: string | null;
   has_openai_configured: boolean;
   has_unsplash_configured: boolean;
-  is_self_managed: boolean;
+  is_smtp_configured: boolean;
 }

web/components/account/sign-in-forms/email-form.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
+import { observer } from "mobx-react-lite";
 // services
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useApplication } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
@@ -25,11 +27,13 @@ type TEmailFormValues = {
 
 const authService = new AuthService();
 
-export const EmailForm: React.FC<Props> = (props) => {
+export const EmailForm: React.FC<Props> = observer((props) => {
   const { handleStepChange, updateEmail } = props;
-
+  // hooks
   const { setToastAlert } = useToast();
-
+  const {
+    config: { envConfig },
+  } = useApplication();
   const {
     control,
     formState: { errors, isSubmitting, isValid },
@@ -54,9 +58,11 @@ export const EmailForm: React.FC<Props> = (props) => {
     await authService
       .emailCheck(payload)
       .then((res) => {
-        // if the password has been autoset, send the user to magic sign-in
+        // if the password has been auto set, send the user to magic sign-in
-        if (res.is_password_autoset) handleStepChange(ESignInSteps.UNIQUE_CODE);
+        if (res.is_password_autoset && envConfig?.is_smtp_configured) {
-        // if the password has not been autoset, send them to password sign-in
+          handleStepChange(ESignInSteps.UNIQUE_CODE);
+        }
+        // if the password has not been auto set, send them to password sign-in
         else handleStepChange(ESignInSteps.PASSWORD);
       })
       .catch((err) =>
@@ -119,4 +125,4 @@ export const EmailForm: React.FC<Props> = (props) => {
       </form>
     </>
   );
-};
+});

web/components/account/sign-in-forms/password.tsx

@@ -6,6 +6,7 @@ import { XCircle } from "lucide-react";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useApplication } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
@@ -14,12 +15,14 @@ import { checkEmailValidity } from "helpers/string.helper";
 import { IPasswordSignInData } from "@plane/types";
 // constants
 import { ESignInSteps } from "components/account";
+import { observer } from "mobx-react-lite";
 
 type Props = {
   email: string;
   updateEmail: (email: string) => void;
   handleStepChange: (step: ESignInSteps) => void;
   handleSignInRedirection: () => Promise<void>;
+  handleEmailClear: () => void;
 };
 
 type TPasswordFormValues = {
@@ -34,13 +37,16 @@ const defaultValues: TPasswordFormValues = {
 
 const authService = new AuthService();
 
-export const PasswordForm: React.FC<Props> = (props) => {
+export const PasswordForm: React.FC<Props> = observer((props) => {
-  const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
+  const { email, updateEmail, handleStepChange, handleSignInRedirection, handleEmailClear } = props;
   // states
   const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false);
   const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
+  const {
+    config: { envConfig },
+  } = useApplication();
   // form info
   const {
     control,
@@ -157,11 +163,12 @@ export const PasswordForm: React.FC<Props> = (props) => {
                   hasError={Boolean(errors.email)}
                   placeholder="orville.wright@frstflt.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                  disabled
                 />
                 {value.length > 0 && (
                   <XCircle
                     className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                    onClick={() => onChange("")}
+                    onClick={handleEmailClear}
                   />
                 )}
               </div>
@@ -199,26 +206,28 @@ export const PasswordForm: React.FC<Props> = (props) => {
             </button>
           </div>
         </div>
-        <div className="grid gap-2.5 sm:grid-cols-2">
+        <div className="flex gap-4">
-          <Button
+          {envConfig && envConfig.is_smtp_configured && (
-            type="button"
+            <Button
-            onClick={handleSendUniqueCode}
+              type="button"
-            variant="primary"
+              onClick={handleSendUniqueCode}
-            className="w-full"
+              variant="outline-primary"
-            size="xl"
+              className="w-full"
-            loading={isSendingUniqueCode}
+              size="xl"
-          >
+              loading={isSendingUniqueCode}
-            {isSendingUniqueCode ? "Sending code" : "Use unique code"}
+            >
-          </Button>
+              {isSendingUniqueCode ? "Sending code" : "Use unique code"}
+            </Button>
+          )}
           <Button
             type="submit"
-            variant="outline-primary"
+            variant="primary"
             className="w-full"
             size="xl"
             disabled={!isValid}
             loading={isSubmitting}
           >
-            Go to workspace
+            Continue
           </Button>
         </div>
         <p className="text-xs text-onboarding-text-200">
@@ -230,4 +239,4 @@ export const PasswordForm: React.FC<Props> = (props) => {
       </form>
     </>
   );
-};
+});

web/components/account/sign-in-forms/root.tsx

@@ -13,7 +13,6 @@ import {
   OAuthOptions,
   OptionalSetPasswordForm,
   CreatePasswordForm,
-  SelfHostedSignInForm,
 } from "components/account";
 
 export enum ESignInSteps {
@@ -45,69 +44,73 @@ export const SignInRoot = observer(() => {
   return (
     <>
       <div className="mx-auto flex flex-col">
-        {envConfig?.is_self_managed ? (
+        <>
-          <SelfHostedSignInForm
+          {signInStep === ESignInSteps.EMAIL && (
-            email={email}
+            <EmailForm
-            updateEmail={(newEmail) => setEmail(newEmail)}
+              handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleRedirection}
+              updateEmail={(newEmail) => setEmail(newEmail)}
-          />
+            />
-        ) : (
+          )}
-          <>
+          {signInStep === ESignInSteps.PASSWORD && (
-            {signInStep === ESignInSteps.EMAIL && (
+            <PasswordForm
-              <EmailForm
+              email={email}
-                handleStepChange={(step) => setSignInStep(step)}
+              updateEmail={(newEmail) => setEmail(newEmail)}
-                updateEmail={(newEmail) => setEmail(newEmail)}
+              handleStepChange={(step) => setSignInStep(step)}
-              />
+              handleEmailClear={() => {
-            )}
+                setEmail("");
-            {signInStep === ESignInSteps.PASSWORD && (
+                setSignInStep(ESignInSteps.EMAIL);
-              <PasswordForm
+              }}
-                email={email}
+              handleSignInRedirection={handleRedirection}
-                updateEmail={(newEmail) => setEmail(newEmail)}
+            />
-                handleStepChange={(step) => setSignInStep(step)}
+          )}
-                handleSignInRedirection={handleRedirection}
+          {signInStep === ESignInSteps.SET_PASSWORD_LINK && (
-              />
+            <SetPasswordLink email={email} updateEmail={(newEmail) => setEmail(newEmail)} />
-            )}
+          )}
-            {signInStep === ESignInSteps.SET_PASSWORD_LINK && (
+          {signInStep === ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD && (
-              <SetPasswordLink email={email} updateEmail={(newEmail) => setEmail(newEmail)} />
+            <UniqueCodeForm
-            )}
+              email={email}
-            {signInStep === ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD && (
+              updateEmail={(newEmail) => setEmail(newEmail)}
-              <UniqueCodeForm
+              handleStepChange={(step) => setSignInStep(step)}
-                email={email}
+              handleSignInRedirection={handleRedirection}
-                updateEmail={(newEmail) => setEmail(newEmail)}
+              submitButtonLabel="Go to workspace"
-                handleStepChange={(step) => setSignInStep(step)}
+              showTermsAndConditions
-                handleSignInRedirection={handleRedirection}
+              updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
-                submitButtonLabel="Go to workspace"
+              handleEmailClear={() => {
-                showTermsAndConditions
+                setEmail("");
-                updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
+                setSignInStep(ESignInSteps.EMAIL);
-              />
+              }}
-            )}
+            />
-            {signInStep === ESignInSteps.UNIQUE_CODE && (
+          )}
-              <UniqueCodeForm
+          {signInStep === ESignInSteps.UNIQUE_CODE && (
-                email={email}
+            <UniqueCodeForm
-                updateEmail={(newEmail) => setEmail(newEmail)}
+              email={email}
-                handleStepChange={(step) => setSignInStep(step)}
+              updateEmail={(newEmail) => setEmail(newEmail)}
-                handleSignInRedirection={handleRedirection}
+              handleStepChange={(step) => setSignInStep(step)}
-                updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
+              handleSignInRedirection={handleRedirection}
-              />
+              updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
-            )}
+              handleEmailClear={() => {
-            {signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
+                setEmail("");
-              <OptionalSetPasswordForm
+                setSignInStep(ESignInSteps.EMAIL);
-                email={email}
+              }}
-                handleStepChange={(step) => setSignInStep(step)}
+            />
-                handleSignInRedirection={handleRedirection}
+          )}
-                isOnboarded={isOnboarded}
+          {signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
-              />
+            <OptionalSetPasswordForm
-            )}
+              email={email}
-            {signInStep === ESignInSteps.CREATE_PASSWORD && (
+              handleStepChange={(step) => setSignInStep(step)}
-              <CreatePasswordForm
+              handleSignInRedirection={handleRedirection}
-                email={email}
+              isOnboarded={isOnboarded}
-                handleStepChange={(step) => setSignInStep(step)}
+            />
-                handleSignInRedirection={handleRedirection}
+          )}
-                isOnboarded={isOnboarded}
+          {signInStep === ESignInSteps.CREATE_PASSWORD && (
-              />
+            <CreatePasswordForm
-            )}
+              email={email}
-          </>
+              handleStepChange={(step) => setSignInStep(step)}
-        )}
+              handleSignInRedirection={handleRedirection}
+              isOnboarded={isOnboarded}
+            />
+          )}
+        </>
       </div>
       {isOAuthEnabled && !OAUTH_HIDDEN_STEPS.includes(signInStep) && (
         <OAuthOptions handleSignInRedirection={handleRedirection} />

web/components/account/sign-in-forms/unique-code.tsx

@@ -25,6 +25,7 @@ type Props = {
   submitButtonLabel?: string;
   showTermsAndConditions?: boolean;
   updateUserOnboardingStatus: (value: boolean) => void;
+  handleEmailClear: () => void;
 };
 
 type TUniqueCodeFormValues = {
@@ -50,6 +51,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
     submitButtonLabel = "Continue",
     showTermsAndConditions = false,
     updateUserOnboardingStatus,
+    handleEmailClear,
   } = props;
   // states
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
@@ -183,11 +185,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                   hasError={Boolean(errors.email)}
                   placeholder="orville.wright@frstflt.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                  disabled
                 />
                 {value.length > 0 && (
                   <XCircle
                     className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                    onClick={() => onChange("")}
+                    onClick={handleEmailClear}
                   />
                 )}
               </div>

web/components/command-palette/command-palette.tsx

@@ -60,7 +60,6 @@ export const CommandPalette: FC = observer(() => {
     isDeleteIssueModalOpen,
     toggleDeleteIssueModal,
     isAnyModalOpen,
-    createIssueStoreType,
   } = commandPalette;
 
   const { setToastAlert } = useToast();
@@ -215,11 +214,8 @@ export const CommandPalette: FC = observer(() => {
 
       <CreateUpdateIssueModal
         isOpen={isCreateIssueModalOpen}
-        handleClose={() => toggleCreateIssueModal(false)}
+        onClose={() => toggleCreateIssueModal(false)}
-        prePopulateData={
+        data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_id: moduleId.toString() } : undefined}
-          cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_id: moduleId.toString() } : undefined
-        }
-        currentStore={createIssueStoreType}
       />
 
       {workspaceSlug && projectId && issueId && issueDetails && (

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

@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 import { Sparkle, X } from "lucide-react";
 // hooks
-import { useApplication, useEstimate, useMention } from "hooks/store";
+import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // services
@@ -18,8 +18,10 @@ import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import {
+  CycleDropdown,
   DateDropdown,
   EstimateDropdown,
+  ModuleDropdown,
   PriorityDropdown,
   ProjectDropdown,
   ProjectMemberDropdown,
@@ -103,7 +105,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   // store hooks
-  const { areEstimatesActiveForProject } = useEstimate();
+  const { areEstimatesEnabledForProject } = useEstimate();
   const { mentionHighlights, mentionSuggestions } = useMention();
   // hooks
   const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
@@ -117,6 +119,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
   const {
     config: { envConfig },
   } = useApplication();
+  const { getProjectById } = useProject();
   // form info
   const {
     formState: { errors, isSubmitting },
@@ -277,6 +280,8 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
   const maxDate = targetDate ? new Date(targetDate) : null;
   maxDate?.setDate(maxDate.getDate());
 
+  const projectDetails = getProjectById(projectId);
+
   return (
     <>
       {projectId && (
@@ -302,19 +307,21 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                 control={control}
                 name="project_id"
                 render={({ field: { value, onChange } }) => (
-                  <ProjectDropdown
+                  <div className="h-7">
-                    value={value}
+                    <ProjectDropdown
-                    onChange={(val) => {
+                      value={value}
-                      onChange(val);
+                      onChange={(val) => {
-                      setActiveProject(val);
+                        onChange(val);
-                    }}
+                        setActiveProject(val);
-                    buttonVariant="background-with-text"
+                      }}
-                  />
+                      buttonVariant="border-with-text"
+                    />
+                  </div>
                 )}
               />
             )}
             <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
-              {status ? "Update" : "Create"} Issue
+              {status ? "Update" : "Create"} issue
             </h3>
           </div>
           {watch("parent_id") &&
@@ -374,11 +381,11 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
                 <div className="relative">
-                  <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex rounded bg-custom-background-80">
+                  <div className="border-0.5 absolute bottom-3.5 right-3.5 flex items-center gap-2">
                     {issueName && issueName !== "" && (
                       <button
                         type="button"
-                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
+                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80 ${
                           iAmFeelingLucky ? "cursor-wait" : ""
                         }`}
                         onClick={handleAutoGenerateDescription}
@@ -388,7 +395,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                           "Generating response..."
                         ) : (
                           <>
-                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
+                            <Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
                           </>
                         )}
                       </button>
@@ -408,10 +415,10 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                         button={
                           <button
                             type="button"
-                            className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
+                            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" />
+                            <Sparkle className="h-3.5 w-3.5" />
                             AI
                           </button>
                         }
@@ -470,7 +477,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                     name="priority"
                     render={({ field: { value, onChange } }) => (
                       <div className="h-7">
-                        <PriorityDropdown value={value} onChange={onChange} buttonVariant="background-with-text" />
+                        <PriorityDropdown value={value} onChange={onChange} buttonVariant="border-with-text" />
                       </div>
                     )}
                   />
@@ -485,8 +492,10 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                           projectId={projectId}
                           value={value}
                           onChange={onChange}
+                          buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
+                          buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
+                          placeholder="Assignees"
                           multiple
-                          buttonVariant="background-with-text"
                         />
                       </div>
                     )}
@@ -542,8 +551,40 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                     )}
                   />
                 )}
+                {projectDetails?.cycle_view && (
+                  <Controller
+                    control={control}
+                    name="cycle_id"
+                    render={({ field: { value, onChange } }) => (
+                      <div className="h-7">
+                        <CycleDropdown
+                          projectId={projectId}
+                          onChange={(cycleId) => onChange(cycleId)}
+                          value={value}
+                          buttonVariant="border-with-text"
+                        />
+                      </div>
+                    )}
+                  />
+                )}
+                {projectDetails?.module_view && (
+                  <Controller
+                    control={control}
+                    name="module_id"
+                    render={({ field: { value, onChange } }) => (
+                      <div className="h-7">
+                        <ModuleDropdown
+                          projectId={projectId}
+                          value={value}
+                          onChange={(moduleId) => onChange(moduleId)}
+                          buttonVariant="border-with-text"
+                        />
+                      </div>
+                    )}
+                  />
+                )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
-                  areEstimatesActiveForProject(projectId) && (
+                  areEstimatesEnabledForProject(projectId) && (
                     <Controller
                       control={control}
                       name="estimate_point"
@@ -553,7 +594,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                             value={value}
                             onChange={onChange}
                             projectId={projectId}
-                            buttonVariant="background-with-text"
+                            buttonVariant="border-with-text"
                           />
                         </div>
                       )}

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

@@ -322,7 +322,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
                 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 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
                   <DraftIssueForm
                     isOpen={isOpen}
                     handleFormSubmit={handleFormSubmit}

web/components/issues/form.tsx

@@ -1,655 +0,0 @@
-import React, { FC, useState, useEffect, useRef } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { Controller, useForm } from "react-hook-form";
-import { LayoutPanelTop, Sparkle, X } from "lucide-react";
-// hooks
-import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-// services
-import { AIService } from "services/ai.service";
-import { FileService } from "services/file.service";
-// components
-import { GptAssistantPopover } from "components/core";
-import { ParentIssuesListModal } from "components/issues";
-import { IssueLabelSelect } from "components/issues/select";
-import { CreateStateModal } from "components/states";
-import { CreateLabelModal } from "components/labels";
-import { RichTextEditorWithRef } from "@plane/rich-text-editor";
-import {
-  CycleDropdown,
-  DateDropdown,
-  EstimateDropdown,
-  ModuleDropdown,
-  PriorityDropdown,
-  ProjectDropdown,
-  ProjectMemberDropdown,
-  StateDropdown,
-} from "components/dropdowns";
-// ui
-import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
-// helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-// types
-import type { TIssue, ISearchIssueResponse } from "@plane/types";
-
-const defaultValues: Partial<TIssue> = {
-  project_id: "",
-  name: "",
-  description_html: "<p></p>",
-  estimate_point: null,
-  state_id: "",
-  parent_id: null,
-  priority: "none",
-  assignee_ids: [],
-  label_ids: [],
-  start_date: undefined,
-  target_date: undefined,
-};
-
-export interface IssueFormProps {
-  handleFormSubmit: (values: Partial<TIssue>) => Promise<void>;
-  initialData?: Partial<TIssue>;
-  projectId: string;
-  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
-  createMore: boolean;
-  setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
-  handleDiscardClose: () => void;
-  status: boolean;
-  handleFormDirty: (payload: Partial<TIssue> | null) => void;
-  fieldsToShow: (
-    | "project"
-    | "name"
-    | "description"
-    | "state"
-    | "priority"
-    | "assignee"
-    | "label"
-    | "startDate"
-    | "dueDate"
-    | "estimate"
-    | "parent"
-    | "all"
-    | "module"
-    | "cycle"
-  )[];
-}
-
-// services
-const aiService = new AIService();
-const fileService = new FileService();
-
-export const IssueForm: FC<IssueFormProps> = observer((props) => {
-  const {
-    handleFormSubmit,
-    initialData,
-    projectId,
-    setActiveProject,
-    createMore,
-    setCreateMore,
-    handleDiscardClose,
-    status,
-    fieldsToShow,
-    handleFormDirty,
-  } = props;
-  // states
-  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);
-  // refs
-  const editorRef = useRef<any>(null);
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // store hooks
-  const {
-    config: { envConfig },
-  } = useApplication();
-  const { getProjectById } = useProject();
-  const { areEstimatesActiveForProject } = useEstimate();
-  const { mentionHighlights, mentionSuggestions } = useMention();
-  // toast alert
-  const { setToastAlert } = useToast();
-  // form info
-  const {
-    formState: { errors, isSubmitting, isDirty },
-    handleSubmit,
-    reset,
-    watch,
-    control,
-    getValues,
-    setValue,
-    setFocus,
-  } = useForm<TIssue>({
-    defaultValues: initialData ?? defaultValues,
-    reValidateMode: "onChange",
-  });
-
-  const issueName = watch("name");
-
-  const payload: Partial<TIssue> = {
-    name: getValues("name"),
-    state_id: getValues("state_id"),
-    priority: getValues("priority"),
-    assignee_ids: getValues("assignee_ids"),
-    label_ids: getValues("label_ids"),
-    start_date: getValues("start_date"),
-    target_date: getValues("target_date"),
-    project_id: getValues("project_id"),
-    parent_id: getValues("parent_id"),
-    cycle_id: getValues("cycle_id"),
-    module_id: getValues("module_id"),
-  };
-
-  // derived values
-  const projectDetails = getProjectById(projectId);
-
-  useEffect(() => {
-    if (isDirty) handleFormDirty(payload);
-    else handleFormDirty(null);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(payload), isDirty]);
-
-  const handleCreateUpdateIssue = async (formData: Partial<TIssue>) => {
-    await handleFormSubmit(formData);
-
-    setGptAssistantModal(false);
-
-    reset({
-      ...defaultValues,
-      project_id: projectId,
-      description_html: "<p></p>",
-    });
-    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) return;
-
-    setIAmFeelingLucky(true);
-
-    aiService
-      .createGptTask(workspaceSlug.toString(), projectId.toString(), {
-        prompt: issueName,
-        task: "Generate a proper description for this issue.",
-      })
-      .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(() => {
-    setFocus("name");
-
-    reset({
-      ...defaultValues,
-      ...initialData,
-    });
-  }, [setFocus, initialData, reset]);
-
-  // update projectId in form when projectId changes
-  useEffect(() => {
-    reset({
-      ...getValues(),
-      project_id: projectId,
-    });
-  }, [getValues, projectId, reset]);
-
-  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("label_ids", [...watch("label_ids"), response.id])}
-          />
-        </>
-      )}
-      <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
-        <div className="space-y-5">
-          <div className="flex items-center gap-x-2">
-            {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && !status && (
-              <Controller
-                control={control}
-                name="project_id"
-                rules={{
-                  required: true,
-                }}
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <ProjectDropdown
-                      value={value}
-                      onChange={(val) => {
-                        onChange(val);
-                        setActiveProject(val);
-                      }}
-                      buttonVariant="border-with-text"
-                    />
-                  </div>
-                )}
-              />
-            )}
-            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
-              {status ? "Update" : "Create"} Issue
-            </h3>
-          </div>
-          {watch("parent_id") &&
-            (fieldsToShow.includes("all") || fieldsToShow.includes("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_id", null);
-                      setSelectedParentIssue(null);
-                    }}
-                  />
-                </div>
-              </div>
-            )}
-          <div className="space-y-3">
-            <div className="mt-2 space-y-3">
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
-                <div>
-                  <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="w-full resize-none text-xl focus:border-blue-400"
-                      />
-                    )}
-                  />
-                </div>
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
-                <div className="relative">
-                  <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex rounded bg-custom-background-80">
-                    {issueName && issueName !== "" && (
-                      <button
-                        type="button"
-                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
-                          iAmFeelingLucky ? "cursor-wait" : ""
-                        }`}
-                        onClick={handleAutoGenerateDescription}
-                        disabled={iAmFeelingLucky}
-                      >
-                        {iAmFeelingLucky ? (
-                          "Generating response..."
-                        ) : (
-                          <>
-                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
-                          </>
-                        )}
-                      </button>
-                    )}
-                    {envConfig?.has_openai_configured && (
-                      <GptAssistantPopover
-                        isOpen={gptAssistantModal}
-                        projectId={projectId}
-                        handleClose={() => {
-                          setGptAssistantModal((prevData) => !prevData);
-                          // this is done so that the title do not reset after gpt popover closed
-                          reset(getValues());
-                        }}
-                        onResponse={(response) => {
-                          handleAiAssistance(response);
-                        }}
-                        placement="top-end"
-                        button={
-                          <button
-                            type="button"
-                            className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
-                            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}
-                        restoreFile={fileService.restoreImage}
-                        ref={editorRef}
-                        debouncedUpdatesEnabled={false}
-                        value={
-                          !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
-                            ? watch("description_html")
-                            : value
-                        }
-                        customClassName="min-h-[7rem] border-custom-border-100"
-                        onChange={(description: Object, description_html: string) => {
-                          onChange(description_html);
-                        }}
-                        mentionHighlights={mentionHighlights}
-                        mentionSuggestions={mentionSuggestions}
-                      />
-                    )}
-                  />
-                </div>
-              )}
-              <div className="flex flex-wrap items-center gap-2">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <Controller
-                    control={control}
-                    name="state_id"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <StateDropdown
-                          value={value}
-                          onChange={onChange}
-                          projectId={projectId}
-                          buttonVariant="border-with-text"
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <Controller
-                    control={control}
-                    name="priority"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <PriorityDropdown value={value} onChange={onChange} buttonVariant="border-with-text" />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <Controller
-                    control={control}
-                    name="assignee_ids"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <ProjectMemberDropdown
-                          projectId={projectId}
-                          value={value}
-                          onChange={onChange}
-                          buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
-                          buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
-                          placeholder="Assignees"
-                          multiple
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-                  <Controller
-                    control={control}
-                    name="label_ids"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <IssueLabelSelect
-                          setIsOpen={setLabelModal}
-                          value={value}
-                          onChange={onChange}
-                          projectId={projectId}
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
-                  <Controller
-                    control={control}
-                    name="start_date"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <DateDropdown
-                          value={value}
-                          onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
-                          buttonVariant="border-with-text"
-                          placeholder="Start date"
-                          maxDate={maxDate ?? undefined}
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
-                  <div>
-                    <Controller
-                      control={control}
-                      name="target_date"
-                      render={({ field: { value, onChange } }) => (
-                        <div className="h-7">
-                          <DateDropdown
-                            value={value}
-                            onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
-                            buttonVariant="border-with-text"
-                            placeholder="Due date"
-                            minDate={minDate ?? undefined}
-                          />
-                        </div>
-                      )}
-                    />
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
-                  <Controller
-                    control={control}
-                    name="cycle_id"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <CycleDropdown
-                          projectId={projectId}
-                          onChange={onChange}
-                          value={value}
-                          buttonVariant="border-with-text"
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
-                  <Controller
-                    control={control}
-                    name="module_id"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <ModuleDropdown
-                          projectId={projectId}
-                          value={value}
-                          onChange={onChange}
-                          buttonVariant="border-with-text"
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
-                  areEstimatesActiveForProject(projectId) && (
-                    <Controller
-                      control={control}
-                      name="estimate_point"
-                      render={({ field: { value, onChange } }) => (
-                        <div className="h-7">
-                          <EstimateDropdown
-                            value={value}
-                            onChange={onChange}
-                            projectId={projectId}
-                            buttonVariant="border-with-text"
-                          />
-                        </div>
-                      )}
-                    />
-                  )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <>
-                    {watch("parent_id") ? (
-                      <CustomMenu
-                        customButton={
-                          <button
-                            type="button"
-                            className="h-7 flex items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
-                          >
-                            <div className="flex items-center gap-1 text-custom-text-200">
-                              <LayoutPanelTop className="h-2.5 w-2.5 flex-shrink-0" />
-                              <span className="whitespace-nowrap">
-                                {selectedParentIssue &&
-                                  `${selectedParentIssue.project__identifier}-
-                                  ${selectedParentIssue.sequence_id}`}
-                              </span>
-                            </div>
-                          </button>
-                        }
-                        placement="bottom-start"
-                      >
-                        <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-                          Change parent issue
-                        </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent_id", null)}>
-                          Remove parent issue
-                        </CustomMenu.MenuItem>
-                      </CustomMenu>
-                    ) : (
-                      <button
-                        type="button"
-                        className="h-7 flex items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80"
-                        onClick={() => setParentIssueListModalOpen(true)}
-                      >
-                        <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-                        <span className="whitespace-nowrap">Add parent</span>
-                      </button>
-                    )}
-
-                    <Controller
-                      control={control}
-                      name="parent_id"
-                      render={({ field: { onChange } }) => (
-                        <ParentIssuesListModal
-                          isOpen={parentIssueListModalOpen}
-                          handleClose={() => setParentIssueListModalOpen(false)}
-                          onChange={(issue) => {
-                            onChange(issue.id);
-                            setSelectedParentIssue(issue);
-                          }}
-                          projectId={projectId}
-                        />
-                      )}
-                    />
-                  </>
-                )}
-              </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">
-          {!status && (
-            <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="ml-auto flex items-center gap-2">
-            <Button
-              variant="neutral-primary"
-              size="sm"
-              onClick={() => {
-                handleDiscardClose();
-              }}
-            >
-              Discard
-            </Button>
-            <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-              {status
-                ? isSubmitting
-                  ? "Updating Issue..."
-                  : "Update Issue"
-                : isSubmitting
-                ? "Adding Issue..."
-                : "Add Issue"}
-            </Button>
-          </div>
-        </div>
-      </form>
-    </>
-  );
-});

web/components/issues/index.ts

@@ -1,15 +1,14 @@
 export * from "./attachment";
 export * from "./comment";
+export * from "./issue-modal";
 export * from "./sidebar-select";
 export * from "./view-select";
 export * from "./activity";
 export * from "./delete-issue-modal";
 export * from "./description-form";
-export * from "./form";
 export * from "./issue-layouts";
 export * from "./peek-overview";
 export * from "./main-content";
-export * from "./modal";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
 export * from "./label";

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -2,9 +2,8 @@ import React, { FC } from "react";
 import { useRouter } from "next/router";
 // components
 import { CustomMenu } from "@plane/ui";
-import { CreateUpdateIssueModal } from "components/issues/modal";
-import { CreateUpdateDraftIssueModal } from "components/issues/draft-issue-modal";
 import { ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/issues";
 // lucide icons
 import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
 // hooks
@@ -85,12 +84,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
           fieldsToShow={["all"]}
         />
       ) : (
-        <CreateUpdateIssueModal
+        <CreateUpdateIssueModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
-          isOpen={isOpen}
-          handleClose={() => setIsOpen(false)}
-          prePopulateData={issuePayload}
-          currentStore={currentStore}
-        />
       )}
       {renderExistingIssueModal && (
         <ExistingIssuesListModal

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -2,8 +2,7 @@ import { useRouter } from "next/router";
 // lucide icons
 import { CircleDashed, Plus } from "lucide-react";
 // components
-import { CreateUpdateDraftIssueModal } from "components/issues/draft-issue-modal";
+import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/issues";
-import { CreateUpdateIssueModal } from "components/issues/modal";
 import { ExistingIssuesListModal } from "components/core";
 import { CustomMenu } from "@plane/ui";
 // mobx
@@ -102,12 +101,7 @@ export const HeaderGroupByCard = observer(
               fieldsToShow={["all"]}
             />
           ) : (
-            <CreateUpdateIssueModal
+            <CreateUpdateIssueModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
-              isOpen={isOpen}
-              handleClose={() => setIsOpen(false)}
-              currentStore={currentStore}
-              prePopulateData={issuePayload}
-            />
           )}
 
           {renderExistingIssueModal && (

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -11,19 +11,17 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
-import { EIssuesStoreType } from "constants/issue";
 
 export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, customActionButton } = props;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // toast alert
   const { setToastAlert } = useToast();
 
   const handleCopyIssueLink = () => {
@@ -36,6 +34,12 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
     );
   };
 
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
+
   return (
     <>
       <DeleteIssueModal
@@ -46,17 +50,14 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
       />
       <CreateUpdateIssueModal
         isOpen={createUpdateIssueModal}
-        handleClose={() => {
+        onClose={() => {
           setCreateUpdateIssueModal(false);
-          setIssueToEdit(null);
+          setIssueToEdit(undefined);
         }}
-        // pre-populate date only if not editing
+        data={issueToEdit ?? duplicateIssuePayload}
-        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
-        data={issueToEdit}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
-        currentStore={EIssuesStoreType.PROJECT}
       />
       <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
         <CustomMenu.MenuItem

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -11,19 +11,17 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
-import { EIssuesStoreType } from "constants/issue";
 
 export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, cycleId } = router.query;
-
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-
+  // router
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+  // toast alert
   const { setToastAlert } = useToast();
 
   const handleCopyIssueLink = () => {
@@ -36,6 +34,12 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
     );
   };
 
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
+
   return (
     <>
       <DeleteIssueModal
@@ -46,17 +50,14 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
       />
       <CreateUpdateIssueModal
         isOpen={createUpdateIssueModal}
-        handleClose={() => {
+        onClose={() => {
           setCreateUpdateIssueModal(false);
-          setIssueToEdit(null);
+          setIssueToEdit(undefined);
         }}
-        // pre-populate date only if not editing
+        data={issueToEdit ?? duplicateIssuePayload}
-        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
-        data={issueToEdit}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
-        currentStore={EIssuesStoreType.CYCLE}
       />
       <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
         <CustomMenu.MenuItem

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -11,19 +11,17 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
-import { EIssuesStoreType } from "constants/issue";
 
 export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, moduleId } = router.query;
-
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-
+  // router
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+  // toast alert
   const { setToastAlert } = useToast();
 
   const handleCopyIssueLink = () => {
@@ -36,6 +34,12 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
     );
   };
 
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
+
   return (
     <>
       <DeleteIssueModal
@@ -46,17 +50,14 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
       />
       <CreateUpdateIssueModal
         isOpen={createUpdateIssueModal}
-        handleClose={() => {
+        onClose={() => {
           setCreateUpdateIssueModal(false);
-          setIssueToEdit(null);
+          setIssueToEdit(undefined);
         }}
-        // pre-populate date only if not editing
+        data={issueToEdit ?? duplicateIssuePayload}
-        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
-        data={issueToEdit}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
-        currentStore={EIssuesStoreType.MODULE}
       />
       <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
         <CustomMenu.MenuItem

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -14,7 +14,6 @@ import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constant
 import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, customActionButton } = props;
@@ -23,7 +22,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const { workspaceSlug } = router.query;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   // store hooks
   const {
@@ -44,6 +43,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
     );
   };
 
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
+
   return (
     <>
       <DeleteIssueModal
@@ -54,17 +59,14 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
       />
       <CreateUpdateIssueModal
         isOpen={createUpdateIssueModal}
-        handleClose={() => {
+        onClose={() => {
           setCreateUpdateIssueModal(false);
-          setIssueToEdit(null);
+          setIssueToEdit(undefined);
         }}
-        // pre-populate date only if not editing
+        data={issueToEdit ?? duplicateIssuePayload}
-        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
-        data={issueToEdit}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
-        currentStore={EIssuesStoreType.PROJECT}
       />
       <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
         <CustomMenu.MenuItem

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

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { IssueDraftService } from "services/issue";
+// components
+import { IssueFormRoot } from "components/issues/issue-modal/form";
+import { ConfirmIssueDiscard } from "components/issues";
+// types
+import type { TIssue } from "@plane/types";
+
+export interface DraftIssueProps {
+  changesMade: Partial<TIssue> | null;
+  data?: Partial<TIssue>;
+  onChange: (formData: Partial<TIssue> | null) => void;
+  onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
+  onSubmit: (formData: Partial<TIssue>) => Promise<void>;
+  projectId: string;
+}
+
+const issueDraftService = new IssueDraftService();
+
+export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
+  const { changesMade, data, onChange, onClose, onSubmit, projectId } = props;
+  // states
+  const [issueDiscardModal, setIssueDiscardModal] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // toast alert
+  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.",
+        })
+      );
+  };
+
+  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={projectId} />
+    </>
+  );
+});

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

@@ -0,0 +1,599 @@
+import React, { FC, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { LayoutPanelTop, Sparkle, X } from "lucide-react";
+// editor
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+// hooks
+import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
+import useToast from "hooks/use-toast";
+// services
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
+// components
+import { GptAssistantPopover } from "components/core";
+import { ParentIssuesListModal } from "components/issues";
+import { IssueLabelSelect } from "components/issues/select";
+import { CreateLabelModal } from "components/labels";
+import {
+  CycleDropdown,
+  DateDropdown,
+  EstimateDropdown,
+  ModuleDropdown,
+  PriorityDropdown,
+  ProjectDropdown,
+  ProjectMemberDropdown,
+  StateDropdown,
+} from "components/dropdowns";
+// ui
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
+// helpers
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+// types
+import type { TIssue, ISearchIssueResponse } from "@plane/types";
+
+const defaultValues: Partial<TIssue> = {
+  project_id: "",
+  name: "",
+  description_html: "",
+  estimate_point: null,
+  state_id: "",
+  parent_id: null,
+  priority: "none",
+  assignee_ids: [],
+  label_ids: [],
+  cycle_id: null,
+  module_id: null,
+  start_date: null,
+  target_date: null,
+};
+
+export interface IssueFormProps {
+  data?: Partial<TIssue>;
+  onChange?: (formData: Partial<TIssue> | null) => void;
+  onClose: () => void;
+  onSubmit: (values: Partial<TIssue>) => 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;
+  // states
+  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);
+  // refs
+  const editorRef = useRef<any>(null);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store hooks
+  const {
+    config: { envConfig },
+  } = useApplication();
+  const { getProjectById } = useProject();
+  const { areEstimatesEnabledForProject } = useEstimate();
+  const { mentionHighlights, mentionSuggestions } = useMention();
+  // toast alert
+  const { setToastAlert } = useToast();
+  // form info
+  const {
+    formState: { errors, isDirty, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    getValues,
+    setValue,
+  } = useForm<TIssue>({
+    defaultValues: { ...defaultValues, project_id: projectId, ...data },
+    reValidateMode: "onChange",
+  });
+
+  const issueName = watch("name");
+
+  const handleFormSubmit = async (formData: Partial<TIssue>) => {
+    await onSubmit(formData);
+
+    setGptAssistantModal(false);
+
+    reset({
+      ...defaultValues,
+      project_id: getValues("project_id"),
+    });
+    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) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug.toString(), projectId.toString(), {
+        prompt: issueName,
+        task: "Generate a proper description for this issue.",
+      })
+      .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));
+  };
+
+  const handleFormChange = () => {
+    if (!onChange) return;
+
+    if (isDirty) onChange(watch());
+    else onChange(null);
+  };
+
+  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());
+
+  const projectDetails = getProjectById(projectId);
+
+  return (
+    <>
+      {projectId && (
+        <CreateLabelModal
+          isOpen={labelModal}
+          handleClose={() => setLabelModal(false)}
+          projectId={projectId}
+          onSuccess={(response) => {
+            setValue("label_ids", [...watch("label_ids"), response.id]);
+            handleFormChange();
+          }}
+        />
+      )}
+      <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_id"
+                rules={{
+                  required: true,
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <div className="h-7">
+                    <ProjectDropdown
+                      value={value}
+                      onChange={(projectId) => {
+                        onChange(projectId);
+                        handleFormChange();
+                      }}
+                      buttonVariant="border-with-text"
+                    />
+                  </div>
+                )}
+              />
+            )}
+            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
+              {data?.id ? "Update" : "Create"} issue
+            </h3>
+          </div>
+          {watch("parent_id") && 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_id", null);
+                    handleFormChange();
+                    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={(e) => {
+                      onChange(e.target.value);
+                      handleFormChange();
+                    }}
+                    ref={ref}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Issue Title"
+                    className="resize-none text-xl w-full"
+                  />
+                )}
+              />
+              <div className="relative">
+                <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex items-center gap-2">
+                  {issueName && issueName.trim() !== "" && (
+                    <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-3.5 w-3.5" />I{"'"}m feeling lucky
+                        </>
+                      )}
+                    </button>
+                  )}
+                  {envConfig?.has_openai_configured && (
+                    <GptAssistantPopover
+                      isOpen={gptAssistantModal}
+                      projectId={projectId}
+                      handleClose={() => {
+                        setGptAssistantModal((prevData) => !prevData);
+                        // this is done so that the title do not reset after gpt popover closed
+                        reset(getValues());
+                      }}
+                      onResponse={(response) => {
+                        handleAiAssistance(response);
+                      }}
+                      placement="top-end"
+                      button={
+                        <button
+                          type="button"
+                          className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
+                          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}
+                      restoreFile={fileService.restoreImage}
+                      ref={editorRef}
+                      debouncedUpdatesEnabled={false}
+                      value={
+                        !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                          ? watch("description_html")
+                          : value
+                      }
+                      customClassName="min-h-[7rem] border-custom-border-100"
+                      onChange={(description: Object, description_html: string) => {
+                        onChange(description_html);
+                        handleFormChange();
+                      }}
+                      mentionHighlights={mentionHighlights}
+                      mentionSuggestions={mentionSuggestions}
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <Controller
+                  control={control}
+                  name="state_id"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <StateDropdown
+                        value={value}
+                        onChange={(stateId) => {
+                          onChange(stateId);
+                          handleFormChange();
+                        }}
+                        projectId={projectId}
+                        buttonVariant="border-with-text"
+                      />
+                    </div>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="priority"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <PriorityDropdown
+                        value={value}
+                        onChange={(priority) => {
+                          onChange(priority);
+                          handleFormChange();
+                        }}
+                        buttonVariant="border-with-text"
+                      />
+                    </div>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="assignee_ids"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <ProjectMemberDropdown
+                        projectId={projectId}
+                        value={value}
+                        onChange={(assigneeIds) => {
+                          onChange(assigneeIds);
+                          handleFormChange();
+                        }}
+                        buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
+                        buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
+                        placeholder="Assignees"
+                        multiple
+                      />
+                    </div>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="label_ids"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <IssueLabelSelect
+                        setIsOpen={setLabelModal}
+                        value={value}
+                        onChange={(labelIds) => {
+                          onChange(labelIds);
+                          handleFormChange();
+                        }}
+                        projectId={projectId}
+                      />
+                    </div>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="start_date"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <DateDropdown
+                        value={value}
+                        onChange={(date) => {
+                          onChange(date ? renderFormattedPayloadDate(date) : null);
+                          handleFormChange();
+                        }}
+                        buttonVariant="border-with-text"
+                        placeholder="Start date"
+                        maxDate={maxDate ?? undefined}
+                      />
+                    </div>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value, onChange } }) => (
+                    <div className="h-7">
+                      <DateDropdown
+                        value={value}
+                        onChange={(date) => {
+                          onChange(date ? renderFormattedPayloadDate(date) : null);
+                          handleFormChange();
+                        }}
+                        buttonVariant="border-with-text"
+                        placeholder="Due date"
+                        minDate={minDate ?? undefined}
+                      />
+                    </div>
+                  )}
+                />
+                {projectDetails?.cycle_view && (
+                  <Controller
+                    control={control}
+                    name="cycle_id"
+                    render={({ field: { value, onChange } }) => (
+                      <div className="h-7">
+                        <CycleDropdown
+                          projectId={projectId}
+                          onChange={(cycleId) => {
+                            onChange(cycleId);
+                            handleFormChange();
+                          }}
+                          value={value}
+                          buttonVariant="border-with-text"
+                        />
+                      </div>
+                    )}
+                  />
+                )}
+                {projectDetails?.module_view && (
+                  <Controller
+                    control={control}
+                    name="module_id"
+                    render={({ field: { value, onChange } }) => (
+                      <div className="h-7">
+                        <ModuleDropdown
+                          projectId={projectId}
+                          value={value}
+                          onChange={(moduleId) => {
+                            onChange(moduleId);
+                            handleFormChange();
+                          }}
+                          buttonVariant="border-with-text"
+                        />
+                      </div>
+                    )}
+                  />
+                )}
+                {areEstimatesEnabledForProject(projectId) && (
+                  <Controller
+                    control={control}
+                    name="estimate_point"
+                    render={({ field: { value, onChange } }) => (
+                      <div className="h-7">
+                        <EstimateDropdown
+                          value={value}
+                          onChange={(estimatePoint) => {
+                            onChange(estimatePoint);
+                            handleFormChange();
+                          }}
+                          projectId={projectId}
+                          buttonVariant="border-with-text"
+                        />
+                      </div>
+                    )}
+                  />
+                )}
+                <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_id") ? (
+                        <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_id") ? (
+                    <>
+                      <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                        Change parent issue
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem
+                        className="!p-1"
+                        onClick={() => {
+                          setValue("parent_id", null);
+                          handleFormChange();
+                        }}
+                      >
+                        Remove parent issue
+                      </CustomMenu.MenuItem>
+                    </>
+                  ) : (
+                    <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                      Select parent Issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+                <Controller
+                  control={control}
+                  name="parent_id"
+                  render={({ field: { onChange } }) => (
+                    <ParentIssuesListModal
+                      isOpen={parentIssueListModalOpen}
+                      handleClose={() => setParentIssueListModalOpen(false)}
+                      onChange={(issue) => {
+                        onChange(issue.id);
+                        handleFormChange();
+                        setSelectedParentIssue(issue);
+                      }}
+                      projectId={projectId}
+                    />
+                  )}
+                />
+              </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" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+});

web/components/issues/issue-modal/index.ts

@@ -0,0 +1,3 @@
+export * from "./draft-issue-layout";
+export * from "./form";
+export * from "./modal";

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

@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import { useIssues, useProject } from "hooks/store";
+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 { TIssue } from "@plane/types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
+
+export interface IssuesModalProps {
+  data?: Partial<TIssue>;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit?: (res: Partial<TIssue>) => Promise<void>;
+  withDraftIssueWrapper?: boolean;
+}
+
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const { data, isOpen, onClose, onSubmit, withDraftIssueWrapper = true } = props;
+  // states
+  const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store hooks
+  const { workspaceProjectIds } = useProject();
+  const {
+    issues: { createIssue, updateIssue },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  const {
+    issues: { addIssueToCycle },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const {
+    issues: { addIssueToModule },
+  } = useIssues(EIssuesStoreType.MODULE);
+  // toast alert
+  const { setToastAlert } = useToast();
+  // local storage
+  const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
+
+  const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
+    if (changesMade && saveDraftIssueInLocalStorage) {
+      const draftIssue = JSON.stringify(changesMade);
+
+      setLocalStorageDraftIssue(draftIssue);
+    }
+
+    onClose();
+  };
+
+  const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
+    if (!workspaceSlug || !payload.project_id) return null;
+
+    await createIssue(workspaceSlug.toString(), payload.project_id, payload)
+      .then(async (res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+        handleClose();
+        return res;
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+
+    return null;
+  };
+
+  const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
+    if (!workspaceSlug || !payload.project_id || !data?.id) return null;
+
+    await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload)
+      .then((res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue updated successfully.",
+        });
+        handleClose();
+        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<TIssue>) => {
+    if (!workspaceSlug || !formData.project_id) return;
+
+    const payload: Partial<TIssue> = {
+      ...formData,
+      description_html: formData.description_html ?? "<p></p>",
+    };
+
+    let res: TIssue | null = null;
+    if (!data?.id) res = await handleCreateIssue(payload);
+    else res = await handleUpdateIssue(payload);
+
+    // add issue to cycle if cycle is selected, and cycle is different from current cycle
+    if (formData.cycle_id && res && (!data?.id || formData.cycle_id !== data?.cycle_id))
+      await addIssueToCycle(workspaceSlug.toString(), formData.project_id, formData.cycle_id, [res.id]);
+
+    // add issue to module if module is selected, and module is different from current module
+    if (formData.module_id && res && (!data?.id || formData.module_id !== data?.module_id))
+      await addIssueToModule(workspaceSlug.toString(), formData.project_id, formData.module_id, [res.id]);
+
+    if (res && onSubmit) await onSubmit(res);
+  };
+
+  const handleFormChange = (formData: Partial<TIssue> | null) => setChangesMade(formData);
+
+  // don't open the modal if there are no projects
+  if (!workspaceProjectIds || workspaceProjectIds.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() : workspaceProjectIds[0];
+
+  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-custom-shadow-md transition-all sm:w-full mx-4 sm:max-w-4xl">
+                {withDraftIssueWrapper ? (
+                  <DraftIssueLayout
+                    changesMade={changesMade}
+                    data={data}
+                    onChange={handleFormChange}
+                    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/issues/modal.tsx

@@ -1,448 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { mutate } from "swr";
-import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import { useApplication, useCycle, useIssues, useModule, useProject, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useLocalStorage from "hooks/use-local-storage";
-// services
-import { IssueDraftService } from "services/issue";
-// components
-import { IssueForm, ConfirmIssueDiscard } from "components/issues";
-// types
-import type { TIssue } from "@plane/types";
-// fetch-keys
-import { USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
-import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
-
-export interface IssuesModalProps {
-  data?: TIssue | null;
-  handleClose: () => void;
-  isOpen: boolean;
-  prePopulateData?: Partial<TIssue>;
-  fieldsToShow?: (
-    | "project"
-    | "name"
-    | "description"
-    | "state"
-    | "priority"
-    | "assignee"
-    | "label"
-    | "startDate"
-    | "dueDate"
-    | "estimate"
-    | "parent"
-    | "all"
-    | "module"
-    | "cycle"
-  )[];
-  onSubmit?: (data: Partial<TIssue>) => Promise<void>;
-  handleSubmit?: (data: Partial<TIssue>) => Promise<void>;
-  currentStore?: TCreateModalStoreTypes;
-}
-
-const issueDraftService = new IssueDraftService();
-
-export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
-  const {
-    data,
-    handleClose,
-    isOpen,
-    prePopulateData: prePopulateDataProps,
-    fieldsToShow = ["all"],
-    onSubmit,
-    handleSubmit,
-    currentStore = EIssuesStoreType.PROJECT,
-  } = props;
-  // states
-  const [createMore, setCreateMore] = useState(false);
-  const [formDirtyState, setFormDirtyState] = useState<any>(null);
-  const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
-  const [activeProject, setActiveProject] = useState<string | null>(null);
-  const [prePopulateData, setPreloadedData] = useState<Partial<TIssue>>({});
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query as {
-    workspaceSlug: string;
-    projectId: string | undefined;
-    cycleId: string | undefined;
-    moduleId: string | undefined;
-  };
-  // store hooks
-
-  const { issues: projectIssues } = useIssues(EIssuesStoreType.PROJECT);
-  const { issues: moduleIssues } = useIssues(EIssuesStoreType.MODULE);
-  const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
-  const { issues: viewIssues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const { issues: profileIssues } = useIssues(EIssuesStoreType.PROFILE);
-
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
-  const { currentUser } = useUser();
-  const { currentWorkspace } = useWorkspace();
-  const { workspaceProjectIds } = useProject();
-  const { fetchCycleDetails } = useCycle();
-  const { fetchModuleDetails } = useModule();
-
-  const issueStores = {
-    [EIssuesStoreType.PROJECT]: {
-      store: projectIssues,
-      dataIdToUpdate: activeProject,
-      viewId: undefined,
-    },
-    [EIssuesStoreType.PROJECT_VIEW]: {
-      store: viewIssues,
-      dataIdToUpdate: activeProject,
-      viewId: undefined,
-    },
-    [EIssuesStoreType.PROFILE]: {
-      store: profileIssues,
-      dataIdToUpdate: currentUser?.id || undefined,
-      viewId: undefined,
-    },
-    [EIssuesStoreType.CYCLE]: {
-      store: cycleIssues,
-      dataIdToUpdate: activeProject,
-      viewId: cycleId,
-    },
-    [EIssuesStoreType.MODULE]: {
-      store: moduleIssues,
-      dataIdToUpdate: activeProject,
-      viewId: moduleId,
-    },
-  };
-
-  const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[currentStore];
-
-  const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
-    "draftedIssue",
-    {}
-  );
-
-  const { setToastAlert } = useToast();
-
-  useEffect(() => {
-    setPreloadedData(prePopulateDataProps ?? {});
-
-    if (cycleId && !prePopulateDataProps?.cycle_id) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        cycle_id: cycleId.toString(),
-      }));
-    }
-    if (moduleId && !prePopulateDataProps?.module_id) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        module_id: moduleId.toString(),
-      }));
-    }
-    if (
-      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
-      !prePopulateDataProps?.assignee_ids
-    ) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        assignees: prePopulateDataProps?.assignee_ids ?? [currentUser?.id ?? ""],
-      }));
-    }
-  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, currentUser?.id]);
-
-  /**
-   *
-   * @description This function is used to close the modals. This function will show a confirm discard modal if the form is dirty.
-   * @returns void
-   */
-
-  const onClose = () => {
-    if (!showConfirmDiscard) handleClose();
-    if (formDirtyState === null) return setActiveProject(null);
-    const data = JSON.stringify(formDirtyState);
-    setValueInLocalStorage(data);
-  };
-
-  /**
-   * @description This function is used to close the modals. This function is to be used when the form is submitted,
-   * meaning we don't need to show the confirm discard modal or store the form data in local storage.
-   */
-
-  const onFormSubmitClose = () => {
-    setFormDirtyState(null);
-    handleClose();
-  };
-
-  /**
-   * @description This function is used to close the modals. This function is to be used when we click outside the modal,
-   * meaning we don't need to show the confirm discard modal but will store the form data in local storage.
-   * Use this function when you want to store the form data in local storage.
-   */
-
-  const onDiscardClose = () => {
-    if (formDirtyState !== null && formDirtyState.name.trim() !== "") {
-      setShowConfirmDiscard(true);
-    } else {
-      handleClose();
-      setActiveProject(null);
-    }
-  };
-
-  const handleFormDirty = (data: any) => {
-    setFormDirtyState(data);
-  };
-
-  useEffect(() => {
-    // if modal is closed, reset active project to null
-    // and return to avoid activeProject being set to some other project
-    if (!isOpen) {
-      setActiveProject(null);
-      return;
-    }
-
-    // if data is present, set active project to the project of the
-    // issue. This has more priority than the project in the url.
-    if (data && data.project_id) {
-      setActiveProject(data.project_id);
-      return;
-    }
-
-    // if data is not present, set active project to the project
-    // in the url. This has the least priority.
-    if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
-      setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
-  }, [data, projectId, workspaceProjectIds, isOpen, activeProject]);
-
-  const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
-    if (!workspaceSlug || !activeProject) return;
-
-    await cycleIssues.addIssueToCycle(workspaceSlug, issue.project_id, cycleId, [issue.id]);
-    fetchCycleDetails(workspaceSlug, activeProject, cycleId);
-  };
-
-  const addIssueToModule = async (issue: TIssue, moduleId: string) => {
-    if (!workspaceSlug || !activeProject) return;
-
-    await moduleIssues.addIssueToModule(workspaceSlug, activeProject, moduleId, [issue.id]);
-    fetchModuleDetails(workspaceSlug, activeProject, moduleId);
-  };
-
-  const createIssue = async (payload: Partial<TIssue>) => {
-    if (!workspaceSlug || !dataIdToUpdate) return;
-
-    await currentIssueStore
-      .createIssue(workspaceSlug, dataIdToUpdate, payload, viewId)
-      .then(async (res) => {
-        if (!res) throw new Error();
-
-        if (handleSubmit) {
-          await handleSubmit(res);
-        } else {
-          currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
-
-          if (payload.cycle_id && payload.cycle_id !== "") await addIssueToCycle(res, payload.cycle_id);
-          if (payload.module_id && payload.module_id !== "") await addIssueToModule(res, payload.module_id);
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "Issue created successfully.",
-          });
-          postHogEventTracker(
-            "ISSUE_CREATED",
-            {
-              ...res,
-              state: "SUCCESS",
-            },
-            {
-              isGrouping: true,
-              groupType: "Workspace_metrics",
-              groupId: currentWorkspace?.id!,
-            }
-          );
-          if (payload.parent_id && payload.parent_id !== "") mutate(SUB_ISSUES(payload.parent_id));
-        }
-      })
-      .catch((err) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: err.detail ?? "Issue could not be created. Please try again.",
-        });
-        postHogEventTracker(
-          "ISSUE_CREATED",
-          {
-            state: "FAILED",
-          },
-          {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          }
-        );
-      });
-
-    if (!createMore) onFormSubmitClose();
-  };
-
-  const createDraftIssue = async () => {
-    if (!workspaceSlug || !activeProject || !currentUser) return;
-
-    const payload: Partial<TIssue> = {
-      ...formDirtyState,
-    };
-
-    await issueDraftService
-      .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Draft Issue created successfully.",
-        });
-        handleClose();
-        setActiveProject(null);
-        setFormDirtyState(null);
-        setShowConfirmDiscard(false);
-
-        if (payload.assignee_ids?.some((assignee) => assignee === currentUser?.id))
-          mutate(USER_ISSUE(workspaceSlug as string));
-
-        if (payload.parent_id && payload.parent_id !== "") mutate(SUB_ISSUES(payload.parent_id));
-      })
-      .catch((err) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: err.detail ?? "Issue could not be created. Please try again.",
-        });
-      });
-  };
-
-  const updateIssue = async (payload: Partial<TIssue>) => {
-    if (!workspaceSlug || !dataIdToUpdate || !data) return;
-
-    await currentIssueStore
-      .updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId)
-      .then((res) => {
-        if (!createMore) onFormSubmitClose();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Issue updated successfully.",
-        });
-        postHogEventTracker(
-          "ISSUE_UPDATED",
-          {
-            ...res,
-            state: "SUCCESS",
-          },
-          {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          }
-        );
-      })
-      .catch((err) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: err.detail ?? "Issue could not be updated. Please try again.",
-        });
-        postHogEventTracker(
-          "ISSUE_UPDATED",
-          {
-            state: "FAILED",
-          },
-          {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          }
-        );
-      });
-  };
-
-  const handleFormSubmit = async (formData: Partial<TIssue>) => {
-    if (!workspaceSlug || !dataIdToUpdate || !currentStore) return;
-
-    const payload: Partial<TIssue> = {
-      ...formData,
-      description_html: formData.description_html ?? "<p></p>",
-    };
-
-    if (!data) await createIssue(payload);
-    else await updateIssue(payload);
-
-    if (onSubmit) await onSubmit(payload);
-  };
-
-  if (!workspaceProjectIds || workspaceProjectIds.length === 0) return null;
-
-  return (
-    <>
-      <ConfirmIssueDiscard
-        isOpen={showConfirmDiscard}
-        handleClose={() => setShowConfirmDiscard(false)}
-        onConfirm={createDraftIssue}
-        onDiscard={() => {
-          handleClose();
-          setActiveProject(null);
-          setFormDirtyState(null);
-          setShowConfirmDiscard(false);
-          clearLocalStorageValue();
-        }}
-      />
-
-      <Transition.Root show={isOpen} as={React.Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={onClose}>
-          <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 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-20 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 mx-4 transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
-                  <IssueForm
-                    handleFormSubmit={handleFormSubmit}
-                    initialData={data ?? prePopulateData}
-                    createMore={createMore}
-                    setCreateMore={setCreateMore}
-                    handleDiscardClose={onDiscardClose}
-                    projectId={activeProject ?? ""}
-                    setActiveProject={setActiveProject}
-                    status={data ? true : false}
-                    fieldsToShow={fieldsToShow}
-                    handleFormDirty={handleFormDirty}
-                  />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
-  );
-});

web/components/issues/sub-issues/root.tsx

@@ -320,10 +320,10 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
           {isEditable && issueCrudOperation?.create?.toggle && (
             <CreateUpdateIssueModal
               isOpen={issueCrudOperation?.create?.toggle}
-              prePopulateData={{
+              data={{
                 parent_id: issueCrudOperation?.create?.issueId,
               }}
-              handleClose={() => {
+              onClose={() => {
                 mutateSubIssues(issueCrudOperation?.create?.issueId);
                 handleIssueCrudOperation("create", null);
               }}
@@ -342,11 +342,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
             <>
               <CreateUpdateIssueModal
                 isOpen={issueCrudOperation?.edit?.toggle}
-                handleClose={() => {
+                onClose={() => {
                   mutateSubIssues(issueCrudOperation?.edit?.issueId);
                   handleIssueCrudOperation("edit", null, null);
                 }}
-                data={issueCrudOperation?.edit?.issue}
+                data={issueCrudOperation?.edit?.issue ?? undefined}
               />
             </>
           )}

web/store/estimate.store.ts

@@ -14,7 +14,7 @@ export interface IEstimateStore {
   projectEstimates: IEstimate[] | null;
   activeEstimateDetails: IEstimate | null;
   // computed actions
-  areEstimatesActiveForProject: (projectId: string) => boolean;
+  areEstimatesEnabledForProject: (projectId: string) => boolean;
   getEstimatePointValue: (estimateKey: number | null) => string;
   getProjectEstimateById: (estimateId: string) => IEstimate | null;
   getProjectActiveEstimateDetails: (projectId: string) => IEstimate | null;
@@ -48,7 +48,7 @@ export class EstimateStore implements IEstimateStore {
       projectEstimates: computed,
       activeEstimateDetails: computed,
       // computed actions
-      areEstimatesActiveForProject: action,
+      areEstimatesEnabledForProject: action,
       getProjectEstimateById: action,
       getEstimatePointValue: action,
       getProjectActiveEstimateDetails: action,
@@ -96,7 +96,7 @@ export class EstimateStore implements IEstimateStore {
    * @description returns true if estimates are enabled for a project using project id
    * @param projectId
    */
-  areEstimatesActiveForProject = (projectId: string) => {
+  areEstimatesEnabledForProject = (projectId: string) => {
     const projectDetails = this.rootStore.projectRoot.project.getProjectById(projectId);
     if (!projectDetails) return false;
     return Boolean(projectDetails.estimate) ?? false;