fix: toast alert content

apps/app/components/core/modals/bulk-delete-issues-modal.tsx

@@ -1,41 +1,29 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";
 
-// react hook form
-import { SubmitHandler, useForm } from "react-hook-form";
-// headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
 import issuesServices from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useCalendarIssuesView from "hooks/use-calendar-issues-view";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+// components
+import { ExistingIssuesListModal } from "components/core";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { ICurrentUserResponse, ISearchIssueResponse } from "types";
 // fetch keys
 import {
   CYCLE_DETAILS,
   CYCLE_ISSUES_WITH_PARAMS,
   MODULE_DETAILS,
   MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   VIEW_ISSUES,
 } from "constants/fetch-keys";
 
-type FormInput = {
-  delete_issue_ids: string[];
-};
-
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -43,56 +31,24 @@ type Props = {
 };
 
 export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user }) => {
-  const [query, setQuery] = useState("");
-
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = 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 { setToastAlert } = useToast();
   const { issueView, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
   const { order_by, group_by, ...viewGanttParams } = params;
 
-  const {
-    handleSubmit,
-    watch,
-    reset,
-    setValue,
-    formState: { isSubmitting },
-  } = useForm<FormInput>({
-    defaultValues: {
-      delete_issue_ids: [],
-    },
-  });
-
   const handleClose = () => {
     setIsOpen(false);
-    setQuery("");
-    reset();
   };
 
-  const handleDelete: SubmitHandler<FormInput> = async (data) => {
+  const handleDelete = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId) return;
 
-    if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Please select at least one issue.",
-      });
-      return;
-    }
-
-    if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
+    const payload = {
+      delete_issue_ids: data.map((i) => i.id),
+    };
 
     const calendarFetchKey = cycleId
       ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
@@ -115,7 +71,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
         workspaceSlug as string,
         projectId as string,
         {
-          issue_ids: data.delete_issue_ids,
+          issue_ids: payload.delete_issue_ids,
         },
         user
       )
@@ -149,125 +105,17 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
       );
   };
 
-  const filteredIssues: IIssue[] =
-    query === ""
-      ? issues ?? []
-      : issues?.filter(
-          (issue) =>
-            issue.name.toLowerCase().includes(query.toLowerCase()) ||
-            `${issue.project_detail.identifier}-${issue.sequence_id}`
-              .toLowerCase()
-              .includes(query.toLowerCase())
-        ) ?? [];
-
   return (
-    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <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 rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
-              <form>
-                <Combobox
-                  onChange={(val: string) => {
-                    const selectedIssues = watch("delete_issue_ids");
-                    if (selectedIssues.includes(val))
-                      setValue(
-                        "delete_issue_ids",
-                        selectedIssues.filter((i) => i !== val)
-                      );
-                    else setValue("delete_issue_ids", [...selectedIssues, val]);
-                  }}
-                >
-                  <div className="relative m-1">
-                    <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
-                      aria-hidden="true"
-                    />
-                    <input
-                      type="text"
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
-                      placeholder="Search..."
-                      onChange={(event) => setQuery(event.target.value)}
-                    />
-                  </div>
-
-                  <Combobox.Options
-                    static
-                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
-                  >
-                    {filteredIssues.length > 0 ? (
-                      <li className="p-2">
-                        {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
-                            Select issues to delete
-                          </h2>
-                        )}
-                        <ul className="text-sm text-custom-text-200">
-                          {filteredIssues.map((issue) => (
-                            <Combobox.Option
-                              key={issue.id}
-                              as="div"
-                              value={issue.id}
-                              className={({ active, selected }) =>
-                                `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
-                                }`
-                              }
-                            >
-                              <div className="flex items-center gap-2">
-                                <input
-                                  type="checkbox"
-                                  checked={watch("delete_issue_ids").includes(issue.id)}
-                                  readOnly
-                                />
-                                <span
-                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor: issue.state_detail.color,
-                                  }}
-                                />
-                                <span className="flex-shrink-0 text-xs">
-                                  {issue.project_detail.identifier}-{issue.sequence_id}
-                                </span>
-                                <span>{issue.name}</span>
-                              </div>
-                            </Combobox.Option>
-                          ))}
-                        </ul>
-                      </li>
-                    ) : (
-                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                        <LayerDiagonalIcon height="56" width="56" />
-                        <h3 className="text-custom-text-200">
-                          No issues found. Create a new issue with{" "}
-                          <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
-                        </h3>
-                      </div>
-                    )}
-                  </Combobox.Options>
-                </Combobox>
-
-                {filteredIssues.length > 0 && (
-                  <div className="flex items-center justify-end gap-2 p-3">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
-                      {isSubmitting ? "Deleting..." : "Delete selected issues"}
-                    </DangerButton>
-                  </div>
-                )}
-              </form>
-            </Dialog.Panel>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ExistingIssuesListModal
+      isOpen={isOpen}
+      handleClose={handleClose}
+      searchParams={{}}
+      handleOnSubmit={handleDelete}
+      primaryButton={{
+        loadingText: "Deleting...",
+        defaultText: "Delete",
+        buttonType: "danger",
+      }}
+    />
   );
 };

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

@@ -13,7 +13,14 @@ import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch, Tooltip } from "components/ui";
+import {
+  DangerButton,
+  Loader,
+  PrimaryButton,
+  SecondaryButton,
+  ToggleSwitch,
+  Tooltip,
+} from "components/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -34,6 +41,11 @@ type Props = {
   searchParams: Partial<TProjectIssuesSearchParams>;
   handleOnSubmit: (data: ISearchIssueResponse[]) => Promise<void>;
   workspaceLevelToggle?: boolean;
+  primaryButton: {
+    loadingText: string;
+    defaultText: string;
+    buttonType: "danger" | "primary";
+  };
 };
 
 export const ExistingIssuesListModal: React.FC<Props> = ({
@@ -42,6 +54,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   searchParams,
   handleOnSubmit,
   workspaceLevelToggle = false,
+  primaryButton,
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
@@ -92,12 +105,6 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
     }
 
     handleClose();
-
-    setToastAlert({
-      title: "Success",
-      type: "success",
-      message: `Issue${selectedIssues.length > 1 ? "s" : ""} added successfully`,
-    });
   };
 
   useEffect(() => {
@@ -310,9 +317,15 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                 {selectedIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={onSubmit} loading={isSubmitting}>
-                      {isSubmitting ? "Adding..." : "Add selected issues"}
-                    </PrimaryButton>
+                    {primaryButton.buttonType === "danger" ? (
+                      <DangerButton onClick={onSubmit} loading={isSubmitting}>
+                        {isSubmitting ? primaryButton.loadingText : primaryButton.defaultText}
+                      </DangerButton>
+                    ) : (
+                      <PrimaryButton onClick={onSubmit} loading={isSubmitting}>
+                        {isSubmitting ? primaryButton.loadingText : primaryButton.defaultText}
+                      </PrimaryButton>
+                    )}
                   </div>
                 )}
               </Dialog.Panel>

apps/app/components/issues/sidebar-select/blocked.tsx

@@ -82,6 +82,11 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         handleClose={() => setIsBlockedModalOpen(false)}
         searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
+        primaryButton={{
+          loadingText: "Adding...",
+          defaultText: "Add selected issues",
+          buttonType: "primary",
+        }}
         workspaceLevelToggle
       />
       <div className="flex flex-wrap items-start py-2">

apps/app/components/issues/sidebar-select/blocker.tsx

@@ -82,6 +82,11 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         handleClose={() => setIsBlockerModalOpen(false)}
         searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
+        primaryButton={{
+          loadingText: "Adding...",
+          defaultText: "Add selected issues",
+          buttonType: "primary",
+        }}
         workspaceLevelToggle
       />
       <div className="flex flex-wrap items-start py-2">

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

@@ -9,6 +9,8 @@ import useSWR, { mutate } from "swr";
 import { Disclosure, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // components
@@ -38,6 +40,8 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { setToastAlert } = useToast();
+
   const { memberRole } = useProjectMyMembership();
 
   const { data: subIssuesResponse } = useSWR(
@@ -56,6 +60,13 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }
 
     await issuesService
       .addSubIssues(workspaceSlug as string, parentIssue.project, parentIssue.id, payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Issues added successfully",
+        })
+      )
       .finally(() => mutate(SUB_ISSUES(parentIssue.id)));
   };
 
@@ -116,6 +127,11 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }
         handleClose={() => setSubIssuesListModal(false)}
         searchParams={{ sub_issue: true, issue_id: parentIssue?.id }}
         handleOnSubmit={addAsSubIssue}
+        primaryButton={{
+          loadingText: "Adding...",
+          defaultText: "Add selected issues",
+          buttonType: "primary",
+        }}
         workspaceLevelToggle
       />
       {subIssuesResponse && subIssuesResponse.sub_issues.length > 0 ? (

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

@@ -106,6 +106,11 @@ const SingleCycle: React.FC = () => {
         handleClose={() => setCycleIssuesListModal(false)}
         searchParams={{ cycle: true }}
         handleOnSubmit={handleAddIssuesToCycle}
+        primaryButton={{
+          loadingText: "Adding...",
+          defaultText: "Add selected issues",
+          buttonType: "primary",
+        }}
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={

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

@@ -109,6 +109,11 @@ const SingleModule: React.FC = () => {
         handleClose={() => setModuleIssuesListModal(false)}
         searchParams={{ module: true }}
         handleOnSubmit={handleAddIssuesToModule}
+        primaryButton={{
+          loadingText: "Adding...",
+          defaultText: "Add selected issues",
+          buttonType: "primary",
+        }}
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={