[WEB-3837] fix: mutation of child work item added via Cmd+K with parent context

web/ce/components/command-palette/modals/issue-level.tsx

@@ -1,14 +1,16 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { EIssueServiceType, EIssuesStoreType } from "@plane/constants";
+import { TIssue } from "@plane/types";
 // components
 import { BulkDeleteIssuesModal } from "@/components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
-// constants
 // hooks
 import { useCommandPalette, useIssueDetail, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
 
 export type TIssueLevelModalsProps = {
   projectId: string | undefined;
@@ -26,9 +28,10 @@ export const IssueLevelModals: FC<TIssueLevelModalsProps> = observer((props) =>
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  const {
-    issues: { removeIssue },
-  } = useIssuesStore();
+
+  const { removeIssue: removeEpic } = useIssuesActions(EIssuesStoreType.EPIC);
+  const { removeIssue: removeWorkItem } = useIssuesActions(EIssuesStoreType.PROJECT);
+
   const {
     isCreateIssueModalOpen,
     toggleCreateIssueModal,
@@ -40,24 +43,51 @@ export const IssueLevelModals: FC<TIssueLevelModalsProps> = observer((props) =>
   // derived values
   const issueDetails = issueId ? getIssueById(issueId) : undefined;
   const isDraftIssue = pathname?.includes("draft-issues") || false;
+  const { fetchSubIssues: fetchSubWorkItems } = useIssueDetail();
+  const { fetchSubIssues: fetchEpicSubWorkItems } = useIssueDetail(EIssueServiceType.EPICS);
+
+  const handleDeleteIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const isEpic = issueDetails?.is_epic;
+      const deleteAction = isEpic ? removeEpic : removeWorkItem;
+      const redirectPath = `/${workspaceSlug}/projects/${projectId}/${isEpic ? "epics" : "issues"}`;
+
+      await deleteAction(projectId, issueId);
+      router.push(redirectPath);
+    } catch (error) {
+      console.error("Failed to delete issue:", error);
+    }
+  };
+
+  const handleCreateIssueSubmit = async (newIssue: TIssue) => {
+    if (!workspaceSlug || !newIssue.project_id || !newIssue.id || newIssue.parent_id !== issueDetails?.id) return;
+
+    const fetchAction = issueDetails?.is_epic ? fetchEpicSubWorkItems : fetchSubWorkItems;
+    await fetchAction(workspaceSlug?.toString(), newIssue.project_id, issueDetails.id);
+  };
+
+  const getCreateIssueModalData = () => {
+    if (cycleId) return { cycle_id: cycleId.toString() };
+    if (moduleId) return { module_ids: [moduleId.toString()] };
+    return undefined;
+  };
 
   return (
     <>
       <CreateUpdateIssueModal
         isOpen={isCreateIssueModalOpen}
         onClose={() => toggleCreateIssueModal(false)}
-        data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_ids: [moduleId.toString()] } : undefined}
+        data={getCreateIssueModalData()}
         isDraft={isDraftIssue}
+        onSubmit={handleCreateIssueSubmit}
       />
       {workspaceSlug && projectId && issueId && issueDetails && (
         <DeleteIssueModal
           handleClose={() => toggleDeleteIssueModal(false)}
           isOpen={isDeleteIssueModalOpen}
           data={issueDetails}
-          onSubmit={async () => {
-            await removeIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString());
-            router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
-          }}
+          onSubmit={() => handleDeleteIssue(workspaceSlug.toString(), projectId?.toString(), issueId?.toString())}
+          isEpic={issueDetails?.is_epic}
         />
       )}
       <BulkDeleteIssuesModal