fix: existing issues modal for cycle and module (#2664)

* fix: existing issues modal for cycle and module

* refactor: existing issues modal code

* fix: build errors

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

@@ -1,38 +1,85 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
 // components
 import { EmptyState } from "components/common";
+import { ExistingIssuesListModal } from "components/core";
+// ui
+import { Button } from "@plane/ui";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
-import { Button } from "@plane/ui";
+// types
+import { ISearchIssueResponse } from "types";
 
 type Props = {
-  openIssuesListModal: () => void;
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  cycleId: string | undefined;
 };
 
-export const CycleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
+export const CycleEmptyState: React.FC<Props> = observer((props) => {
-  <div className="h-full w-full grid place-items-center">
+  const { workspaceSlug, projectId, cycleId } = props;
-    <EmptyState
+  // states
-      title="Cycle issues will appear here"
+  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
-      description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+
-      image={emptyIssue}
+  const { cycleIssue: cycleIssueStore } = useMobxStore();
-      primaryButton={{
+
-        text: "New issue",
+  const { setToastAlert } = useToast();
-        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+
-        onClick: () => {
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
-          const e = new KeyboardEvent("keydown", {
+    if (!workspaceSlug || !projectId || !cycleId) return;
-            key: "c",
+
-          });
+    const issueIds = data.map((i) => i.id);
-          document.dispatchEvent(e);
+
-        },
+    await cycleIssueStore
-      }}
+      .addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
-      secondaryButton={
+      .catch(() => {
-        <Button
+        setToastAlert({
-          variant="neutral-primary"
+          type: "error",
-          prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} onClick={openIssuesListModal} />}
+          title: "Error!",
-        >
+          message: "Selected issues could not be added to the cycle. Please try again.",
-          Add an existing issue
+        });
-        </Button>
+      });
-      }
+  };
-    />
+
-  </div>
+  return (
-);
+    <>
+      <ExistingIssuesListModal
+        isOpen={cycleIssuesListModal}
+        handleClose={() => setCycleIssuesListModal(false)}
+        searchParams={{ cycle: true }}
+        handleOnSubmit={handleAddIssuesToCycle}
+      />
+      <div className="h-full w-full grid place-items-center">
+        <EmptyState
+          title="Cycle issues will appear here"
+          description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+          image={emptyIssue}
+          primaryButton={{
+            text: "New issue",
+            icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "c",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+          secondaryButton={
+            <Button
+              variant="neutral-primary"
+              prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+              onClick={() => setCycleIssuesListModal(true)}
+            >
+              Add an existing issue
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+});

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

@@ -4,36 +4,78 @@ import { EmptyState } from "components/common";
 import { Button } from "@plane/ui";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
+import { ExistingIssuesListModal } from "components/core";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { ISearchIssueResponse } from "types";
+import useToast from "hooks/use-toast";
+import { useState } from "react";
 
 type Props = {
-  openIssuesListModal: () => void;
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  moduleId: string | undefined;
 };
 
-export const ModuleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
+export const ModuleEmptyState: React.FC<Props> = observer((props) => {
-  <div className="h-full w-full grid place-items-center">
+  const { workspaceSlug, projectId, moduleId } = props;
-    <EmptyState
+  // states
-      title="Module issues will appear here"
+  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
-      description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+
-      image={emptyIssue}
+  const { moduleIssue: moduleIssueStore } = useMobxStore();
-      primaryButton={{
+
-        text: "New issue",
+  const { setToastAlert } = useToast();
-        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+
-        onClick: () => {
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
-          const e = new KeyboardEvent("keydown", {
+    if (!workspaceSlug || !projectId || !moduleId) return;
-            key: "c",
+
-          });
+    const issueIds = data.map((i) => i.id);
-          document.dispatchEvent(e);
+
-        },
+    await moduleIssueStore
-      }}
+      .addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds)
-      secondaryButton={
+      .catch(() =>
-        <Button
+        setToastAlert({
-          variant="neutral-primary"
+          type: "error",
-          prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+          title: "Error!",
-          onClick={openIssuesListModal}
+          message: "Selected issues could not be added to the module. Please try again.",
-        >
+        })
-          Add an existing issue
+      );
-        </Button>
+  };
-      }
+
-    />
+  return (
-  </div>
+    <>
-);
+      <ExistingIssuesListModal
+        isOpen={moduleIssuesListModal}
+        handleClose={() => setModuleIssuesListModal(false)}
+        searchParams={{ module: true }}
+        handleOnSubmit={handleAddIssuesToModule}
+      />
+      <div className="h-full w-full grid place-items-center">
+        <EmptyState
+          title="Module issues will appear here"
+          description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+          image={emptyIssue}
+          primaryButton={{
+            text: "New issue",
+            icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "c",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+          secondaryButton={
+            <Button
+              variant="neutral-primary"
+              prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+              onClick={() => setModuleIssuesListModal(true)}
+            >
+              Add an existing issue
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+});

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

@@ -20,11 +20,7 @@ import { Spinner } from "@plane/ui";
 // helpers
 import { getDateRangeStatus } from "helpers/date-time.helper";
 
-type Props = {
+export const CycleLayoutRoot: React.FC = observer(() => {
-  openIssuesListModal: () => void;
-};
-
-export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
   const [transferIssuesModal, setTransferIssuesModal] = useState(false);
 
   const router = useRouter();
@@ -73,7 +69,11 @@ export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
         {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
         <CycleAppliedFiltersRoot />
         {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
-          <CycleEmptyState openIssuesListModal={openIssuesListModal} />
+          <CycleEmptyState
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            cycleId={cycleId?.toString()}
+          />
         ) : (
           <div className="w-full h-full overflow-auto">
             {activeLayout === "list" ? (

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

@@ -18,11 +18,7 @@ import {
 // ui
 import { Spinner } from "@plane/ui";
 
-type Props = {
+export const ModuleLayoutRoot: React.FC = observer(() => {
-  openIssuesListModal: () => void;
-};
-
-export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query as {
     workspaceSlug: string;
@@ -66,7 +62,11 @@ export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <ModuleAppliedFiltersRoot />
       {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
-        <ModuleEmptyState openIssuesListModal={openIssuesListModal} />
+        <ModuleEmptyState
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          moduleId={moduleId?.toString()}
+        />
       ) : (
         <div className="h-full w-full overflow-auto">
           {activeLayout === "list" ? (

web/components/issues/issue-peek-overview/properties.tsx

@@ -74,13 +74,13 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   };
   const addIssueToCycle = async (cycleId: string) => {
     if (!workspaceSlug || !issue || !cycleId) return;
-    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, issue.id);
+    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, [issue.id]);
   };
 
   const addIssueToModule = async (moduleId: string) => {
     if (!workspaceSlug || !issue || !moduleId) return;
 
-    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, issue.id);
+    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, [issue.id]);
   };
   const handleLabels = (formData: Partial<IIssue>) => {
     issueUpdate({ ...issue, ...formData });

web/components/issues/modal.tsx

@@ -171,13 +171,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const addIssueToCycle = async (issueId: string, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, issueId);
+    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, [issueId]);
   };
 
   const addIssueToModule = async (issueId: string, moduleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, issueId);
+    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, [issueId]);
   };
 
   const createIssue = async (payload: Partial<IIssue>) => {

web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -1,19 +1,14 @@
-import { useState, ReactElement } from "react";
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-// services
-import { IssueService } from "services/issue";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
 import { CycleIssuesHeader } from "components/headers";
-import { ExistingIssuesListModal } from "components/core";
 import { CycleDetailsSidebar } from "components/cycles";
 import { CycleLayoutRoot } from "components/issues/issue-layouts";
 // ui
@@ -21,23 +16,14 @@ import { EmptyState } from "components/common";
 // assets
 import emptyCycle from "public/empty-state/cycle.svg";
 // types
-import { ISearchIssueResponse } from "types";
 import { NextPageWithLayout } from "types/app";
 
-const issueService = new IssueService();
-
 const CycleDetailPage: NextPageWithLayout = () => {
-  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
-
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
   const { cycle: cycleStore } = useMobxStore();
 
-  const { user } = useUser();
-
-  const { setToastAlert } = useToast();
-
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
 
@@ -52,38 +38,8 @@ const CycleDetailPage: NextPageWithLayout = () => {
     setValue(`${!isSidebarCollapsed}`);
   };
 
-  // TODO: add this function to bulk add issues to cycle
-  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload = {
-      issues: data.map((i) => i.id),
-    };
-
-    await issueService
-      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Selected issues could not be added to the cycle. Please try again.",
-        });
-      });
-  };
-
-  const openIssuesListModal = () => {
-    setCycleIssuesListModal(true);
-  };
-
   return (
     <>
-      {/* TODO: Update logic to bulk add issues to a cycle */}
-      <ExistingIssuesListModal
-        isOpen={cycleIssuesListModal}
-        handleClose={() => setCycleIssuesListModal(false)}
-        searchParams={{ cycle: true }}
-        handleOnSubmit={handleAddIssuesToCycle}
-      />
       {error ? (
         <EmptyState
           image={emptyCycle}
@@ -98,7 +54,7 @@ const CycleDetailPage: NextPageWithLayout = () => {
         <>
           <div className="flex h-full w-full">
             <div className="h-full w-full overflow-hidden">
-              <CycleLayoutRoot openIssuesListModal={openIssuesListModal} />
+              <CycleLayoutRoot />
             </div>
             {cycleId && !isSidebarCollapsed && (
               <div

web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -1,18 +1,13 @@
-import { useState, ReactElement } from "react";
+import { ReactElement } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-// services
-import { ModuleService } from "services/module.service";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
-import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
-import { ExistingIssuesListModal } from "components/core";
 import { ModuleDetailsSidebar } from "components/modules";
 import { ModuleLayoutRoot } from "components/issues";
 import { ModuleIssuesHeader } from "components/headers";
@@ -22,21 +17,13 @@ import { EmptyState } from "components/common";
 import emptyModule from "public/empty-state/module.svg";
 // types
 import { NextPageWithLayout } from "types/app";
-import { ISearchIssueResponse } from "types";
-
-const moduleService = new ModuleService();
 
 const ModuleIssuesPage: NextPageWithLayout = () => {
-  // states
-  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
   // store
   const { module: moduleStore } = useMobxStore();
-  // hooks
-  const { user } = useUser();
-  const { setToastAlert } = useToast();
   // local storage
   const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@@ -48,42 +35,12 @@ const ModuleIssuesPage: NextPageWithLayout = () => {
       : null
   );
 
-  // TODO: add this function to bulk add issues to cycle
-  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload = {
-      issues: data.map((i) => i.id),
-    };
-
-    await moduleService
-      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Selected issues could not be added to the module. Please try again.",
-        })
-      );
-  };
-
-  const openIssuesListModal = () => {
-    setModuleIssuesListModal(true);
-  };
-
   const toggleSidebar = () => {
     setValue(`${!isSidebarCollapsed}`);
   };
 
   return (
     <>
-      {/* TODO: Update logic to bulk add issues to a cycle */}
-      <ExistingIssuesListModal
-        isOpen={moduleIssuesListModal}
-        handleClose={() => setModuleIssuesListModal(false)}
-        searchParams={{ module: true }}
-        handleOnSubmit={handleAddIssuesToModule}
-      />
       {error ? (
         <EmptyState
           image={emptyModule}
@@ -97,7 +54,7 @@ const ModuleIssuesPage: NextPageWithLayout = () => {
       ) : (
         <div className="flex h-full w-full">
           <div className="h-full w-full overflow-hidden">
-            <ModuleLayoutRoot openIssuesListModal={openIssuesListModal} />
+            <ModuleLayoutRoot />
           </div>
           {moduleId && !isSidebarCollapsed && (
             <div

web/store/cycle/cycle_issue.store.ts

@@ -36,7 +36,7 @@ export interface ICycleIssueStore {
   updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
   updateGanttIssueStructure: (workspaceSlug: string, cycleId: string, issue: IIssue, payload: IBlockUpdateData) => void;
   deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
-  addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => void;
+  addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
   removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => void;
 }
 
@@ -322,7 +322,7 @@ export class CycleIssueStore implements ICycleIssueStore {
     }
   };
 
-  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
     try {
       const user = this.rootStore.user.currentUser ?? undefined;
 
@@ -331,7 +331,7 @@ export class CycleIssueStore implements ICycleIssueStore {
         projectId,
         cycleId,
         {
-          issues: [issueId],
+          issues: issueIds,
         },
         user
       );

web/store/module/module_issue.store.ts

@@ -40,7 +40,7 @@ export interface IModuleIssueStore {
     payload: IBlockUpdateData
   ) => void;
   deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
-  addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => Promise<any>;
+  addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
   removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => Promise<any>;
 }
 
@@ -337,7 +337,7 @@ export class ModuleIssueStore implements IModuleIssueStore {
     }
   };
 
-  addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
+  addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
     try {
       const user = this.rootStore.user.currentUser ?? undefined;
 
@@ -346,7 +346,7 @@ export class ModuleIssueStore implements IModuleIssueStore {
         projectId,
         moduleId,
         {
-          issues: [issueId],
+          issues: issueIds,
         },
         user
       );