feat(ui): port all toasts to use new util

invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts

@@ -1,7 +1,7 @@
 import { useAppDispatch } from 'app/store/storeHooks';
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useClearIntermediatesMutation, useGetIntermediatesCountQuery } from 'services/api/endpoints/images';
@@ -42,20 +42,18 @@ export const useClearIntermediates = (shouldShowClearIntermediates: boolean): Us
       .then((clearedCount) => {
         dispatch(controlAdaptersReset());
         dispatch(resetCanvas());
-        dispatch(
-          addToast({
-            title: t('settings.intermediatesCleared', { count: clearedCount }),
-            status: 'info',
-          })
-        );
+        toast({
+          id: 'INTERMEDIATES_CLEARED',
+          title: t('settings.intermediatesCleared', { count: clearedCount }),
+          status: 'info',
+        });
       })
       .catch(() => {
-        dispatch(
-          addToast({
-            title: t('settings.intermediatesClearedFailed'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'INTERMEDIATES_CLEAR_FAILED',
+          title: t('settings.intermediatesClearedFailed'),
+          status: 'error',
+        });
       });
   }, [t, _clearIntermediates, dispatch, hasPendingItems]);
 

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -1,11 +1,7 @@
-import type { UseToastOptions } from '@invoke-ai/ui-library';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import { createSlice, isAnyOf } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { calculateStepPercentage } from 'features/system/util/calculateStepPercentage';
-import { makeToast } from 'features/system/util/makeToast';
-import { t } from 'i18next';
-import { startCase } from 'lodash-es';
 import type { LogLevelName } from 'roarr';
 import {
   socketConnected,
@@ -13,13 +9,10 @@ import {
   socketGeneratorProgress,
   socketGraphExecutionStateComplete,
   socketInvocationComplete,
-  socketInvocationError,
-  socketInvocationRetrievalError,
   socketInvocationStarted,
   socketModelLoadCompleted,
   socketModelLoadStarted,
   socketQueueItemStatusChanged,
-  socketSessionRetrievalError,
 } from 'services/events/actions';
 
 import type { Language, SystemState } from './types';
@@ -29,7 +22,6 @@ const initialSystemState: SystemState = {
   isConnected: false,
   shouldConfirmOnDelete: true,
   enableImageDebugging: false,
-  toastQueue: [],
   denoiseProgress: null,
   shouldAntialiasProgressImage: false,
   consoleLogLevel: 'debug',
@@ -51,12 +43,6 @@ export const systemSlice = createSlice({
     setEnableImageDebugging: (state, action: PayloadAction<boolean>) => {
       state.enableImageDebugging = action.payload;
     },
-    addToast: (state, action: PayloadAction<UseToastOptions>) => {
-      state.toastQueue.push(action.payload);
-    },
-    clearToastQueue: (state) => {
-      state.toastQueue = [];
-    },
     consoleLogLevelChanged: (state, action: PayloadAction<LogLevelName>) => {
       state.consoleLogLevel = action.payload;
     },
@@ -162,29 +148,12 @@ export const systemSlice = createSlice({
         state.denoiseProgress = null;
       }
     });
-
-    // *** Matchers - must be after all cases ***
-
-    /**
-     * Any server error
-     */
-    builder.addMatcher(isAnyServerError, (state, action) => {
-      state.toastQueue.push(
-        makeToast({
-          title: t('toast.serverError'),
-          status: 'error',
-          description: startCase(action.payload.data.error_type),
-        })
-      );
-    });
   },
 });
 
 export const {
   setShouldConfirmOnDelete,
   setEnableImageDebugging,
-  addToast,
-  clearToastQueue,
   consoleLogLevelChanged,
   shouldLogToConsoleChanged,
   shouldAntialiasProgressImageChanged,
@@ -194,8 +163,6 @@ export const {
   setShouldEnableInformationalPopovers,
 } = systemSlice.actions;
 
-const isAnyServerError = isAnyOf(socketInvocationError, socketSessionRetrievalError, socketInvocationRetrievalError);
-
 export const selectSystemSlice = (state: RootState) => state.system;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

invokeai/frontend/web/src/features/system/store/types.ts

@@ -1,4 +1,3 @@
-import type { UseToastOptions } from '@invoke-ai/ui-library';
 import type { LogLevel } from 'app/logging/logger';
 import type { ProgressImage } from 'services/events/types';
 import { z } from 'zod';
@@ -47,7 +46,6 @@ export interface SystemState {
   isConnected: boolean;
   shouldConfirmOnDelete: boolean;
   enableImageDebugging: boolean;
-  toastQueue: UseToastOptions[];
   denoiseProgress: DenoiseProgress | null;
   consoleLogLevel: LogLevel;
   shouldLogToConsole: boolean;

invokeai/frontend/web/src/features/system/util/makeToast.ts

@@ -1,20 +0,0 @@
-import type { UseToastOptions } from '@invoke-ai/ui-library';
-
-export type MakeToastArg = string | UseToastOptions;
-
-/**
- * Makes a toast from a string or a UseToastOptions object.
- * If a string is passed, the toast will have the status 'info' and will be closable with a duration of 2500ms.
- */
-export const makeToast = (arg: MakeToastArg): UseToastOptions => {
-  if (typeof arg === 'string') {
-    return {
-      title: arg,
-      status: 'info',
-      isClosable: true,
-      duration: 2500,
-    };
-  }
-
-  return { status: 'info', isClosable: true, duration: 2500, ...arg };
-};