[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/api-token/modal/create-token-modal.tsx

@@ -4,8 +4,8 @@ import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import { APITokenService } from "services/api_token.service";
-// hooks
-import useToast from "hooks/use-toast";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { CreateApiTokenForm, GeneratedTokenDetails } from "components/api-token";
 // helpers
@@ -32,8 +32,6 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -76,10 +74,10 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
         );
       })
       .catch((err) => {
-        setToastAlert({
-          message: err.message,
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error",
+          message: err.message,
         });
 
         throw err;

web/components/api-token/modal/form.tsx

@@ -3,10 +3,8 @@ import { add } from "date-fns";
 import { Controller, useForm } from "react-hook-form";
 import { DateDropdown } from "components/dropdowns";
 import { Calendar } from "lucide-react";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Button, CustomSelect, Input, TextArea, ToggleSwitch } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
@@ -66,8 +64,6 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
   const { handleClose, neverExpires, toggleNeverExpires, onSubmit } = props;
   // states
   const [customDate, setCustomDate] = useState<Date | null>(null);
-  // toast alert
-  const { setToastAlert } = useToast();
   // form
   const {
     control,
@@ -80,8 +76,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
   const handleFormSubmit = async (data: IApiToken) => {
     // if never expires is toggled off, and the user has not selected a custom date or a predefined date, show an error
     if (!neverExpires && (!data.expired_at || (data.expired_at === "custom" && !customDate)))
-      return setToastAlert({
-        type: "error",
+      return setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select an expiration date.",
       });

web/components/api-token/modal/generated-token-details.tsx

@@ -1,8 +1,6 @@
 import { Copy } from "lucide-react";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Button, Tooltip } from "@plane/ui";
+import { Button, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -17,12 +15,10 @@ type Props = {
 export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   const { handleClose, tokenDetails } = props;
 
-  const { setToastAlert } = useToast();
-
   const copyApiToken = (token: string) => {
     copyTextToClipboard(token).then(() =>
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Success!",
         message: "Token copied to clipboard.",
       })