[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/workspace/settings/invitations-list-item.tsx

@@ -4,11 +4,10 @@ import { observer } from "mobx-react-lite";
 import { ChevronDown, XCircle } from "lucide-react";
 // hooks
 import { useMember, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
 // components
 import { ConfirmWorkspaceMemberRemove } from "components/workspace";
 // ui
-import { CustomSelect, Tooltip } from "@plane/ui";
+import { CustomSelect, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
 
@@ -30,8 +29,6 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
   const {
     workspace: { updateMemberInvitation, deleteMemberInvitation, getWorkspaceInvitationDetails },
   } = useMember();
-  // toast alert
-  const { setToastAlert } = useToast();
   // derived values
   const invitationDetails = getWorkspaceInvitationDetails(invitationId);
 
@@ -40,15 +37,15 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
 
     await deleteMemberInvitation(workspaceSlug.toString(), invitationDetails.id)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success",
           message: "Invitation removed successfully.",
         });
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error",
           message: err?.error || "Something went wrong. Please try again.",
         })
@@ -116,8 +113,8 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
               updateMemberInvitation(workspaceSlug.toString(), invitationDetails.id, {
                 role: value,
               }).catch(() => {
-                setToastAlert({
-                  type: "error",
+                setToast({
+                  type: TOAST_TYPE.ERROR,
                   title: "Error!",
                   message: "An error occurred while updating member role. Please try again.",
                 });

web/components/workspace/settings/members-list-item.tsx

@@ -5,11 +5,10 @@ import { observer } from "mobx-react-lite";
 import { ChevronDown, Dot, XCircle } from "lucide-react";
 // hooks
 import { useEventTracker, useMember, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
 // components
 import { ConfirmWorkspaceMemberRemove } from "components/workspace";
 // ui
-import { CustomSelect, Tooltip } from "@plane/ui";
+import { CustomSelect, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
 import { WORKSPACE_MEMBER_lEAVE } from "constants/event-tracker";
@@ -35,8 +34,6 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
     workspace: { updateMember, removeMemberFromWorkspace, getWorkspaceMemberDetails },
   } = useMember();
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
   // derived values
   const memberDetails = getWorkspaceMemberDetails(memberId);
 
@@ -52,8 +49,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
         router.push("/profile");
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error",
           message: err?.error || "Something went wrong. Please try again.",
         })
@@ -64,8 +61,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
     if (!workspaceSlug || !memberDetails) return;
 
     await removeMemberFromWorkspace(workspaceSlug.toString(), memberDetails.member.id).catch((err) =>
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error",
         message: err?.error || "Something went wrong. Please try again.",
       })
@@ -165,8 +162,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
               updateMember(workspaceSlug.toString(), memberDetails.member.id, {
                 role: value,
               }).catch(() => {
-                setToastAlert({
-                  type: "error",
+                setToast({
+                  type: TOAST_TYPE.ERROR,
                   title: "Error!",
                   message: "An error occurred while updating member role. Please try again.",
                 });

web/components/workspace/settings/workspace-details.tsx

@@ -7,12 +7,11 @@ import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
 import { FileService } from "services/file.service";
 // hooks
 import { useEventTracker, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
 // components
 import { DeleteWorkspaceModal } from "components/workspace";
 import { WorkspaceImageUploadModal } from "components/core";
 // ui
-import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
+import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
@@ -43,8 +42,6 @@ export const WorkspaceDetails: FC = observer(() => {
     membership: { currentWorkspaceRole },
   } = useUser();
   const { currentWorkspace, updateWorkspace } = useWorkspace();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     handleSubmit,
@@ -77,9 +74,9 @@ export const WorkspaceDetails: FC = observer(() => {
             element: "Workspace general settings page",
           },
         });
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Workspace updated successfully",
         });
       })
@@ -110,16 +107,16 @@ export const WorkspaceDetails: FC = observer(() => {
     fileService.deleteFile(currentWorkspace.id, url).then(() => {
       updateWorkspace(currentWorkspace.slug, { logo: "" })
         .then(() => {
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Workspace picture removed successfully.",
           });
           setIsImageUploadModalOpen(false);
         })
         .catch(() => {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "There was some error in deleting your profile picture. Please try again.",
           });
@@ -132,8 +129,8 @@ export const WorkspaceDetails: FC = observer(() => {
     if (!currentWorkspace) return;
 
     copyUrlToClipboard(`${currentWorkspace.slug}`).then(() => {
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Workspace URL copied to the clipboard.",
       });
     });