feat: bulk assign sub-issues (#284)

apps/app/components/core/existing-issues-list-modal.tsx

@@ -20,7 +20,6 @@ type FormInput = {
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
-  type: string;
   issues: IIssue[];
   handleOnSubmit: any;
 };
@@ -30,7 +29,6 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   handleClose: onClose,
   issues,
   handleOnSubmit,
-  type,
 }) => {
   const [query, setQuery] = useState("");
 
@@ -132,7 +130,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                             <li className="p-2">
                               {query === "" && (
                                 <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
-                                  Select issues to add to {type}
+                                  Select issues to add
                                 </h2>
                               )}
                               <ul className="text-sm text-gray-700">
@@ -203,7 +201,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         onClick={handleSubmit(onSubmit)}
                         disabled={isSubmitting}
                       >
-                        {isSubmitting ? "Adding..." : `Add to ${type}`}
+                        {isSubmitting ? "Adding..." : "Add selected issues"}
                       </Button>
                     </div>
                   )}

apps/app/components/issues/index.ts

@@ -9,4 +9,3 @@ export * from "./my-issues-list-item";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
 export * from "./sub-issues-list";
-export * from "./sub-issues-list-modal";

apps/app/components/issues/sub-issues-list-modal.tsx

@@ -1,205 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
-// icons
-import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-// services
-import issuesServices from "services/issues.service";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IIssue, IssueResponse } from "types";
-// constants
-import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  parent: IIssue | undefined;
-};
-
-export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
-  const [query, setQuery] = useState("");
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const filteredIssues: IIssue[] =
-    query === ""
-      ? issues?.results ?? []
-      : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
-        [];
-
-  const handleModalClose = () => {
-    handleClose();
-    setQuery("");
-  };
-
-  const addAsSubIssue = (issue: IIssue) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<IIssue[]>(
-      SUB_ISSUES(parent?.id ?? ""),
-      (prevData) => {
-        let newSubIssues = [...(prevData as IIssue[])];
-        newSubIssues.push(issue);
-
-        newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
-
-        return newSubIssues;
-      },
-      false
-    );
-
-    issuesServices
-      .patchIssue(workspaceSlug as string, projectId as string, issue.id, { parent: parent?.id })
-      .then((res) => {
-        mutate(SUB_ISSUES(parent?.id ?? ""));
-        mutate<IssueResponse>(
-          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-          (prevData) => ({
-            ...(prevData as IssueResponse),
-            results: (prevData?.results ?? []).map((p) => {
-              if (p.id === res.id)
-                return {
-                  ...p,
-                  ...res,
-                };
-
-              return p;
-            }),
-          }),
-          false
-        );
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-      <Dialog as="div" className="relative z-20" onClose={handleModalClose}>
-        <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-gray-500 bg-opacity-25 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
-              <Combobox>
-                <div className="relative m-1">
-                  <MagnifyingGlassIcon
-                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
-                    aria-hidden="true"
-                  />
-                  <Combobox.Input
-                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
-                    placeholder="Search..."
-                    onChange={(e) => setQuery(e.target.value)}
-                  />
-                </div>
-
-                <Combobox.Options
-                  static
-                  className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
-                >
-                  {filteredIssues.length > 0 && (
-                    <>
-                      <li className="p-2">
-                        {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
-                            Issues
-                          </h2>
-                        )}
-                        <ul className="text-sm text-gray-700">
-                          {filteredIssues.map((issue) => {
-                            if (
-                              (issue.parent === "" || issue.parent === null) && // issue does not have any other parent
-                              issue.id !== parent?.id && // issue is not itself
-                              issue.id !== parent?.parent // issue is not it's parent
-                            )
-                              return (
-                                <Combobox.Option
-                                  key={issue.id}
-                                  value={{
-                                    name: issue.name,
-                                  }}
-                                  className={({ active }) =>
-                                    `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                      active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
-                                    }`
-                                  }
-                                  onClick={() => {
-                                    addAsSubIssue(issue);
-                                    handleClose();
-                                  }}
-                                >
-                                  <span
-                                    className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
-                                    style={{
-                                      backgroundColor: issue.state_detail.color,
-                                    }}
-                                  />
-                                  <span className="flex-shrink-0 text-xs text-gray-500">
-                                    {issue.project_detail.identifier}-{issue.sequence_id}
-                                  </span>
-                                  {issue.name}
-                                </Combobox.Option>
-                              );
-                          })}
-                        </ul>
-                      </li>
-                    </>
-                  )}
-                </Combobox.Options>
-
-                {query !== "" && filteredIssues.length === 0 && (
-                  <div className="py-14 px-6 text-center sm:px-14">
-                    <RectangleStackIcon
-                      className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
-                      aria-hidden="true"
-                    />
-                    <p className="mt-4 text-sm text-gray-900">
-                      We couldn{"'"}t find any issue with that term. Please try again.
-                    </p>
-                  </div>
-                )}
-              </Combobox>
-            </Dialog.Panel>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};

apps/app/components/issues/sub-issues-list.tsx

@@ -10,11 +10,14 @@ import { Disclosure, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issues.service";
 // components
-import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
+import { ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal } from "components/issues";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
 import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue, IssueResponse, UserAuth } from "types";
 // fetch-keys
@@ -42,6 +45,65 @@ export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth })
       : null
   );
 
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const addAsSubIssue = async (data: { issues: string[] }) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await issuesService
+      .addSubIssues(workspaceSlug as string, projectId as string, parentIssue?.id ?? "", {
+        sub_issue_ids: data.issues,
+      })
+      .then((res) => {
+        mutate<IIssue[]>(
+          SUB_ISSUES(parentIssue?.id ?? ""),
+          (prevData) => {
+            let newSubIssues = [...(prevData as IIssue[])];
+
+            data.issues.forEach((issueId: string) => {
+              const issue = issues?.results.find((i) => i.id === issueId);
+
+              if (issue) newSubIssues.push(issue);
+            });
+
+            newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
+
+            return newSubIssues;
+          },
+          false
+        );
+
+        mutate<IssueResponse>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((p) => {
+              if (data.issues.includes(p.id))
+                return {
+                  ...p,
+                  parent: parentIssue.id,
+                };
+
+              return p;
+            }),
+          }),
+          false
+        );
+
+        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   const handleSubIssueRemove = (issueId: string) => {
     if (!workspaceSlug || !projectId) return;
 
@@ -94,10 +156,18 @@ export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth })
         prePopulateData={{ ...preloadedData }}
         handleClose={() => setCreateIssueModal(false)}
       />
-      <SubIssuesListModal
+      <ExistingIssuesListModal
         isOpen={subIssuesListModal}
         handleClose={() => setSubIssuesListModal(false)}
-        parent={parentIssue}
+        issues={
+          issues?.results.filter(
+            (i) =>
+              (i.parent === "" || i.parent === null) &&
+              i.id !== parentIssue?.id &&
+              i.id !== parentIssue?.parent
+          ) ?? []
+        }
+        handleOnSubmit={addAsSubIssue}
       />
       {subIssues && subIssues.length > 0 ? (
         <Disclosure defaultOpen={true}>

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -118,7 +118,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       <ExistingIssuesListModal
         isOpen={cycleIssuesListModal}
         handleClose={() => setCycleIssuesListModal(false)}
-        type="cycle"
         issues={issues?.results.filter((i) => !i.issue_cycle) ?? []}
         handleOnSubmit={handleAddIssuesToCycle}
       />

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -113,7 +113,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       <ExistingIssuesListModal
         isOpen={moduleIssuesListModal}
         handleClose={() => setModuleIssuesListModal(false)}
-        type="module"
         issues={issues?.results.filter((i) => !i.issue_module) ?? []}
         handleOnSubmit={handleAddIssuesToModule}
       />

apps/app/services/issues.service.ts

@@ -277,6 +277,22 @@ class ProjectIssuesServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async addSubIssues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { sub_issue_ids: string[] }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectIssuesServices();