[WEB-570] chore: toast refactor (#3836)

* new toast setup

* chore: new toast implementation.

* chore: move toast component to ui package.

* chore: replace `setToast` with `setPromiseToast` in required places for better UX.
* chore: code cleanup.

* chore: update theme.

* fix: theme switching issue.

* chore: remove toast from issue update operations.

* chore: add promise toast for add/ remove issue to cycle/ module and remove local spinners.

---------

Co-authored-by: rahulramesha <rahulramesham@gmail.com>

web/components/core/modals/bulk-delete-issues-modal.tsx

@@ -6,10 +6,8 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
 import { IssueService } from "services/issue";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Button, LayersIcon } from "@plane/ui";
+import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
 import { Search } from "lucide-react";
 // types
@@ -55,8 +53,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
       : null
   );
 
-  const { setToastAlert } = useToast();
-
   const {
     handleSubmit,
     watch,
@@ -79,8 +75,8 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
     if (!workspaceSlug || !projectId) return;
 
     if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select at least one issue.",
       });
@@ -91,16 +87,16 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
 
     await removeBulkIssues(workspaceSlug as string, projectId as string, data.delete_issue_ids)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Issues deleted successfully!",
         });
         handleClose();
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
         })

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

@@ -3,11 +3,9 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { Rocket, Search, X } from "lucide-react";
 // services
 import { ProjectService } from "services/project";
-// hooks
-import useToast from "hooks/use-toast";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 
@@ -43,8 +41,6 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
-  const { setToastAlert } = useToast();
-
   const handleClose = () => {
     onClose();
     setSearchTerm("");
@@ -54,8 +50,8 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
   const onSubmit = async () => {
     if (selectedIssues.length === 0) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select at least one issue.",
       });
@@ -69,9 +65,9 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
     handleClose();
 
-    setToastAlert({
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
       title: "Success",
-      type: "success",
       message: `Issue${selectedIssues.length > 1 ? "s" : ""} added successfully`,
     });
   };

web/components/core/modals/gpt-assistant-popover.tsx

@@ -3,10 +3,9 @@ import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form"; // services
 import { AIService } from "services/ai.service";
 // hooks
-import useToast from "hooks/use-toast";
 import { usePopper } from "react-popper";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
 import { Popover, Transition } from "@headlessui/react";
@@ -44,8 +43,6 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // popper
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "auto",
@@ -78,8 +75,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
         ? error || "You have reached the maximum number of requests of 50 requests per month per user."
         : error || "Some error occurred. Please try again.";
 
-    setToastAlert({
-      type: "error",
+    setToast({
+      type: TOAST_TYPE.ERROR,
       title: "Error!",
       message: errorMessage,
     });
@@ -104,8 +101,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   };
 
   const handleInvalidTask = () => {
-    setToastAlert({
-      type: "error",
+    setToast({
+      type: TOAST_TYPE.ERROR,
       title: "Error!",
       message: "Please enter some task to get AI assistance.",
     });

web/components/core/modals/user-image-upload-modal.tsx

@@ -6,10 +6,8 @@ import { Transition, Dialog } from "@headlessui/react";
 import { useApplication } from "hooks/store";
 // services
 import { FileService } from "services/file.service";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Button } from "@plane/ui";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
 import { UserCircle2 } from "lucide-react";
 // constants
@@ -32,8 +30,6 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
   // states
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const {
     config: { envConfig },
@@ -76,8 +72,8 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
         if (value) fileService.deleteUserFile(value);
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })

web/components/core/modals/workspace-image-upload-modal.tsx

@@ -7,10 +7,8 @@ import { Transition, Dialog } from "@headlessui/react";
 import { useApplication, useWorkspace } from "hooks/store";
 // services
 import { FileService } from "services/file.service";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Button } from "@plane/ui";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
 import { UserCircle2 } from "lucide-react";
 // constants
@@ -37,8 +35,6 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const {
     config: { envConfig },
   } = useApplication();
@@ -83,8 +79,8 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
         if (value && currentWorkspace) fileService.deleteFile(currentWorkspace.id, value);
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })