chore: issue relation modal and issue peek overview mutation fix (#3482)

* fix: resolve addtocycle and addtomodule mutation in peek overview and issue sidebar

* fix: issue relation modal fix for all issues peek overview

* fix: cycle and module mutation in issue detail and issue peek overview

* fix: updated the issue actions for cycle and module mutation in peek overview

* chore: module issue store updated

* chore: existing isssue modal improvement and build error fix

---------

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

web/components/core/modals/existing-issues-list-modal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { Rocket, Search, X } from "lucide-react";
 // services
@@ -13,6 +12,8 @@ import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 
 type Props = {
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
   isOpen: boolean;
   handleClose: () => void;
   searchParams: Partial<TProjectIssuesSearchParams>;
@@ -23,7 +24,15 @@ type Props = {
 const projectService = new ProjectService();
 
 export const ExistingIssuesListModal: React.FC<Props> = (props) => {
-  const { isOpen, handleClose: onClose, searchParams, handleOnSubmit, workspaceLevelToggle = false } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    isOpen,
+    handleClose: onClose,
+    searchParams,
+    handleOnSubmit,
+    workspaceLevelToggle = false,
+  } = props;
   // states
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
@@ -34,9 +43,6 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
   const { setToastAlert } = useToast();
 
   const handleClose = () => {

web/components/issues/issue-detail/relation-select.tsx

@@ -90,6 +90,8 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
   return (
     <>
       <ExistingIssuesListModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
         isOpen={isRelationModalOpen === relationKey}
         handleClose={() => toggleRelationModal(null)}
         searchParams={{ issue_relation: true, issue_id: issueId }}

web/components/issues/issue-detail/root.tsx

@@ -120,23 +120,12 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds)
+          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-            .then((res) => {
-              updateIssue(workspaceSlug, projectId, res.id, res);
-              fetchIssue(workspaceSlug, projectId, res.id);
           setToastAlert({
             title: "Cycle added to issue successfully",
             type: "success",
             message: "Issue added to issue successfully",
           });
-            })
-            .catch(() => {
-              setToastAlert({
-                type: "error",
-                title: "Error!",
-                message: "Selected issues could not be added to the cycle. Please try again.",
-              });
-            });
         } catch (error) {
           setToastAlert({
             title: "Cycle add to issue failed",
@@ -163,23 +152,12 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
         try {
-          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds)
+          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds);
-            .then((res) => {
-              updateIssue(workspaceSlug, projectId, res.id, res);
-              fetchIssue(workspaceSlug, projectId, res.id);
           setToastAlert({
             title: "Module added to issue successfully",
             type: "success",
             message: "Module added to issue successfully",
           });
-            })
-            .catch(() =>
-              setToastAlert({
-                type: "error",
-                title: "Error!",
-                message: "Selected issues could not be added to the module. Please try again.",
-              })
-            );
         } catch (error) {
           setToastAlert({
             title: "Module add to issue failed",

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -65,6 +65,8 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   return (
     <>
       <ExistingIssuesListModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
         isOpen={cycleIssuesListModal}
         handleClose={() => setCycleIssuesListModal(false)}
         searchParams={{ cycle: true }}

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -65,6 +65,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
   return (
     <>
       <ExistingIssuesListModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
         isOpen={moduleIssuesListModal}
         handleClose={() => setModuleIssuesListModal(false)}
         searchParams={{ module: true }}

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

@@ -93,6 +93,8 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
       )}
       {renderExistingIssueModal && (
         <ExistingIssuesListModal
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
           isOpen={openExistingIssueListModal}
           handleClose={() => setOpenExistingIssueListModal(false)}
           searchParams={ExistingIssuesListModalPayload}

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

@@ -110,6 +110,8 @@ export const HeaderGroupByCard = observer(
 
           {renderExistingIssueModal && (
             <ExistingIssuesListModal
+              workspaceSlug={workspaceSlug?.toString()}
+              projectId={projectId?.toString()}
               isOpen={openExistingIssueListModal}
               handleClose={() => setOpenExistingIssueListModal(false)}
               searchParams={ExistingIssuesListModalPayload}

web/components/issues/peek-overview/root.tsx

@@ -113,23 +113,12 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds)
+          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-            .then((res) => {
-              updateIssue(workspaceSlug, projectId, res.id, res);
-              fetchIssue(workspaceSlug, projectId, res.id);
           setToastAlert({
             title: "Cycle added to issue successfully",
             type: "success",
             message: "Issue added to issue successfully",
           });
-            })
-            .catch(() => {
-              setToastAlert({
-                type: "error",
-                title: "Error!",
-                message: "Selected issues could not be added to the cycle. Please try again.",
-              });
-            });
         } catch (error) {
           setToastAlert({
             title: "Cycle add to issue failed",
@@ -156,23 +145,12 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
         try {
-          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds)
+          await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds);
-            .then((res) => {
-              updateIssue(workspaceSlug, projectId, res.id, res);
-              fetchIssue(workspaceSlug, projectId, res.id);
           setToastAlert({
             title: "Module added to issue successfully",
             type: "success",
             message: "Module added to issue successfully",
           });
-            })
-            .catch(() =>
-              setToastAlert({
-                type: "error",
-                title: "Error!",
-                message: "Selected issues could not be added to the module. Please try again.",
-              })
-            );
         } catch (error) {
           setToastAlert({
             title: "Module add to issue failed",

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

@@ -369,6 +369,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
 
           {issueCrudState?.existing?.toggle && issueCrudState?.existing?.parentIssueId && (
             <ExistingIssuesListModal
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
               isOpen={issueCrudState?.existing?.toggle}
               handleClose={() => handleIssueCrudState("existing", null, null)}
               searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}

web/store/issue/cycle/issue.store.ts

@@ -3,6 +3,7 @@ import set from "lodash/set";
 import update from "lodash/update";
 import concat from "lodash/concat";
 import pull from "lodash/pull";
+import uniq from "lodash/uniq";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
@@ -165,7 +166,6 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
       return response;
     } catch (error) {
-      console.log(error);
       this.loader = undefined;
       throw error;
     }
@@ -267,11 +267,13 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       });
 
       runInAction(() => {
-        update(this.issues, cycleId, (cycleIssueIds) => {
+        update(this.issues, cycleId, (cycleIssueIds = []) => {
-          if (!cycleIssueIds) return [...issueIds];
+          uniq(concat(cycleIssueIds, issueIds));
-          else return concat(cycleIssueIds, [...issueIds]);
         });
       });
+      issueIds.forEach((issueId) => {
+        this.rootStore.issues.updateIssue(issueId, { cycle_id: cycleId });
+      });
 
       return issueToCycle;
     } catch (error) {
@@ -332,7 +334,6 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
       return response;
     } catch (error) {
-      console.log(error);
       this.loader = undefined;
       throw error;
     }

web/store/issue/module/issue.store.ts

@@ -3,6 +3,7 @@ import set from "lodash/set";
 import update from "lodash/update";
 import concat from "lodash/concat";
 import pull from "lodash/pull";
+import uniq from "lodash/uniq";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
@@ -259,11 +260,13 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
       });
 
       runInAction(() => {
-        update(this.issues, moduleId, (moduleIssueIds) => {
+        update(this.issues, moduleId, (moduleIssueIds = []) => {
-          if (!moduleIssueIds) return [...issueIds];
+          uniq(concat(moduleIssueIds, issueIds));
-          else return concat(moduleIssueIds, [...issueIds]);
         });
       });
+      issueIds.forEach((issueId) => {
+        this.rootStore.issues.updateIssue(issueId, { module_id: moduleId });
+      });
 
       return issueToModule;
     } catch (error) {