Skip to content

Commit a66b349

Browse files
feat(ui): port all toasts to use new util
1 parent 683ec8e commit a66b349

File tree

74 files changed

+733
-1110
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+733
-1110
lines changed

invokeai/frontend/web/public/locales/en.json

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,8 +1073,9 @@
10731073
},
10741074
"toast": {
10751075
"addedToBoard": "Added to board",
1076-
"baseModelChangedCleared_one": "Base model changed, cleared or disabled {{count}} incompatible submodel",
1077-
"baseModelChangedCleared_other": "Base model changed, cleared or disabled {{count}} incompatible submodels",
1076+
"baseModelChanged": "Base Model Changed",
1077+
"baseModelChangedCleared_one": "Cleared or disabled {{count}} incompatible submodel",
1078+
"baseModelChangedCleared_other": "Cleared or disabled {{count}} incompatible submodels",
10781079
"canceled": "Processing Canceled",
10791080
"canvasCopiedClipboard": "Canvas Copied to Clipboard",
10801081
"canvasDownloaded": "Canvas Downloaded",
@@ -1095,10 +1096,17 @@
10951096
"metadataLoadFailed": "Failed to load metadata",
10961097
"modelAddedSimple": "Model Added to Queue",
10971098
"modelImportCanceled": "Model Import Canceled",
1099+
"outOfMemoryError": "Out of Memory Error",
1100+
"outOfMemoryErrorDesc": "Your current generation settings exceed system capacity. Please adjust your settings and try again.",
10981101
"parameters": "Parameters",
1099-
"parameterNotSet": "{{parameter}} not set",
1100-
"parameterSet": "{{parameter}} set",
1101-
"parametersNotSet": "Parameters Not Set",
1102+
"parameterSet": "Parameter Recalled",
1103+
"parameterSetDesc": "Recalled {{parameter}}",
1104+
"parameterNotSet": "Parameter Recalled",
1105+
"parameterNotSetDesc": "Unable to recall {{parameter}}",
1106+
"parameterNotSetDescWithMessage": "Unable to recall {{parameter}}: {{message}}",
1107+
"parametersSet": "Parameters Recalled",
1108+
"parametersNotSet": "Parameters Not Recalled",
1109+
"errorCopied": "Error Copied",
11021110
"problemCopyingCanvas": "Problem Copying Canvas",
11031111
"problemCopyingCanvasDesc": "Unable to export base layer",
11041112
"problemCopyingImage": "Unable to Copy Image",
@@ -1118,11 +1126,13 @@
11181126
"sentToImageToImage": "Sent To Image To Image",
11191127
"sentToUnifiedCanvas": "Sent to Unified Canvas",
11201128
"serverError": "Server Error",
1129+
"sessionRef": "Session: {{sessionId}}",
11211130
"setAsCanvasInitialImage": "Set as canvas initial image",
11221131
"setCanvasInitialImage": "Set canvas initial image",
11231132
"setControlImage": "Set as control image",
11241133
"setInitialImage": "Set as initial image",
11251134
"setNodeField": "Set as node field",
1135+
"somethingWentWrong": "Something Went Wrong",
11261136
"uploadFailed": "Upload failed",
11271137
"uploadFailedInvalidUploadDesc": "Must be single PNG or JPEG image",
11281138
"uploadInitialImage": "Upload Initial Image",

invokeai/frontend/web/src/app/components/App.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
2525

2626
import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
2727
import PreselectedImage from './PreselectedImage';
28-
import Toaster from './Toaster';
2928

3029
const DEFAULT_CONFIG = {};
3130

@@ -96,7 +95,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
9695
<DeleteImageModal />
9796
<ChangeBoardModal />
9897
<DynamicPromptsModal />
99-
<Toaster />
10098
<PreselectedImage selectedImage={selectedImage} />
10199
</ErrorBoundary>
102100
);

invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library';
1+
import { Button, Flex, Heading, Link, Text } from '@invoke-ai/ui-library';
2+
import { toast } from 'features/toast/toast';
23
import newGithubIssueUrl from 'new-github-issue-url';
34
import { memo, useCallback, useMemo } from 'react';
45
import { useTranslation } from 'react-i18next';
@@ -11,16 +12,16 @@ type Props = {
1112
};
1213

1314
const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
14-
const toast = useToast();
1515
const { t } = useTranslation();
1616

1717
const handleCopy = useCallback(() => {
1818
const text = JSON.stringify(serializeError(error), null, 2);
1919
navigator.clipboard.writeText(`\`\`\`\n${text}\n\`\`\``);
2020
toast({
21-
title: 'Error Copied',
21+
id: 'ERROR_COPIED',
22+
title: t('toast.errorCopied'),
2223
});
23-
}, [error, toast]);
24+
}, [error, t]);
2425

2526
const url = useMemo(
2627
() =>

invokeai/frontend/web/src/app/components/Toaster.ts

Lines changed: 0 additions & 44 deletions
This file was deleted.

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,10 @@ import { addGeneratorProgressEventListener } from 'app/store/middleware/listener
4141
import { addGraphExecutionStateCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketGraphExecutionStateComplete';
4242
import { addInvocationCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete';
4343
import { addInvocationErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError';
44-
import { addInvocationRetrievalErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError';
4544
import { addInvocationStartedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted';
4645
import { addModelInstallEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall';
4746
import { addModelLoadEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad';
4847
import { addSocketQueueItemStatusChangedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged';
49-
import { addSessionRetrievalErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError';
5048
import { addSocketSubscribedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketSubscribed';
5149
import { addSocketUnsubscribedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketUnsubscribed';
5250
import { addStagingAreaImageSavedListener } from 'app/store/middleware/listenerMiddleware/listeners/stagingAreaImageSaved';
@@ -114,8 +112,6 @@ addSocketSubscribedEventListener(startAppListening);
114112
addSocketUnsubscribedEventListener(startAppListening);
115113
addModelLoadEventListener(startAppListening);
116114
addModelInstallEventListener(startAppListening);
117-
addSessionRetrievalErrorEventListener(startAppListening);
118-
addInvocationRetrievalErrorEventListener(startAppListening);
119115
addSocketQueueItemStatusChangedEventListener(startAppListening);
120116
addBulkDownloadListeners(startAppListening);
121117

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
resetCanvas,
99
setInitialCanvasImage,
1010
} from 'features/canvas/store/canvasSlice';
11-
import { addToast } from 'features/system/store/systemSlice';
11+
import { toast } from 'features/toast/toast';
1212
import { t } from 'i18next';
1313
import { queueApi } from 'services/api/endpoints/queue';
1414

@@ -30,22 +30,20 @@ export const addCommitStagingAreaImageListener = (startAppListening: AppStartLis
3030
req.reset();
3131
if (canceled > 0) {
3232
log.debug(`Canceled ${canceled} canvas batches`);
33-
dispatch(
34-
addToast({
35-
title: t('queue.cancelBatchSucceeded'),
36-
status: 'success',
37-
})
38-
);
33+
toast({
34+
id: 'CANCEL_BATCH_SUCCEEDED',
35+
title: t('queue.cancelBatchSucceeded'),
36+
status: 'success',
37+
});
3938
}
4039
dispatch(canvasBatchIdsReset());
4140
} catch {
4241
log.error('Failed to cancel canvas batches');
43-
dispatch(
44-
addToast({
45-
title: t('queue.cancelBatchFailed'),
46-
status: 'error',
47-
})
48-
);
42+
toast({
43+
id: 'CANCEL_BATCH_FAILED',
44+
title: t('queue.cancelBatchFailed'),
45+
status: 'error',
46+
});
4947
}
5048
},
5149
});

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { logger } from 'app/logging/logger';
22
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
33
import { parseify } from 'common/util/serialize';
4-
import { toast } from 'common/util/toast';
54
import { zPydanticValidationError } from 'features/system/store/zodSchemas';
5+
import { toast } from 'features/toast/toast';
66
import { t } from 'i18next';
77
import { truncate, upperFirst } from 'lodash-es';
88
import { queueApi } from 'services/api/endpoints/queue';
@@ -16,18 +16,15 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
1616
const arg = action.meta.arg.originalArgs;
1717
logger('queue').debug({ enqueueResult: parseify(response) }, 'Batch enqueued');
1818

19-
if (!toast.isActive('batch-queued')) {
20-
toast({
21-
id: 'batch-queued',
22-
title: t('queue.batchQueued'),
23-
description: t('queue.batchQueuedDesc', {
24-
count: response.enqueued,
25-
direction: arg.prepend ? t('queue.front') : t('queue.back'),
26-
}),
27-
duration: 1000,
28-
status: 'success',
29-
});
30-
}
19+
toast({
20+
id: 'QUEUE_BATCH_SUCCEEDED',
21+
title: t('queue.batchQueued'),
22+
status: 'success',
23+
description: t('queue.batchQueuedDesc', {
24+
count: response.enqueued,
25+
direction: arg.prepend ? t('queue.front') : t('queue.back'),
26+
}),
27+
});
3128
},
3229
});
3330

@@ -40,9 +37,10 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
4037

4138
if (!response) {
4239
toast({
40+
id: 'QUEUE_BATCH_FAILED',
4341
title: t('queue.batchFailedToQueue'),
4442
status: 'error',
45-
description: 'Unknown Error',
43+
description: t('common.unknownError'),
4644
});
4745
logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));
4846
return;
@@ -52,7 +50,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
5250
if (result.success) {
5351
result.data.data.detail.map((e) => {
5452
toast({
55-
id: 'batch-failed-to-queue',
53+
id: 'QUEUE_BATCH_FAILED',
5654
title: truncate(upperFirst(e.msg), { length: 128 }),
5755
status: 'error',
5856
description: truncate(
@@ -64,9 +62,10 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
6462
});
6563
} else if (response.status !== 403) {
6664
toast({
65+
id: 'QUEUE_BATCH_FAILED',
6766
title: t('queue.batchFailedToQueue'),
68-
description: t('common.unknownError'),
6967
status: 'error',
68+
description: t('common.unknownError'),
7069
});
7170
}
7271
logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/bulkDownload.tsx

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import type { UseToastOptions } from '@invoke-ai/ui-library';
21
import { ExternalLink } from '@invoke-ai/ui-library';
32
import { logger } from 'app/logging/logger';
43
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
5-
import { toast } from 'common/util/toast';
4+
import { toast } from 'features/toast/toast';
65
import { t } from 'i18next';
76
import { imagesApi } from 'services/api/endpoints/images';
87
import {
@@ -28,7 +27,6 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
2827
// Show the response message if it exists, otherwise show the default message
2928
description: action.payload.response || t('gallery.bulkDownloadRequestedDesc'),
3029
duration: null,
31-
isClosable: true,
3230
});
3331
},
3432
});
@@ -40,9 +38,9 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
4038

4139
// There isn't any toast to update if we get this event.
4240
toast({
41+
id: 'BULK_DOWNLOAD_REQUEST_FAILED',
4342
title: t('gallery.bulkDownloadRequestFailed'),
44-
status: 'success',
45-
isClosable: true,
43+
status: 'error',
4644
});
4745
},
4846
});
@@ -65,7 +63,7 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
6563
// TODO(psyche): This URL may break in in some environments (e.g. Nvidia workbench) but we need to test it first
6664
const url = `/api/v1/images/download/${bulk_download_item_name}`;
6765

68-
const toastOptions: UseToastOptions = {
66+
toast({
6967
id: bulk_download_item_name,
7068
title: t('gallery.bulkDownloadReady', 'Download ready'),
7169
status: 'success',
@@ -77,14 +75,7 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
7775
/>
7876
),
7977
duration: null,
80-
isClosable: true,
81-
};
82-
83-
if (toast.isActive(bulk_download_item_name)) {
84-
toast.update(bulk_download_item_name, toastOptions);
85-
} else {
86-
toast(toastOptions);
87-
}
78+
});
8879
},
8980
});
9081

@@ -95,20 +86,13 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
9586

9687
const { bulk_download_item_name } = action.payload.data;
9788

98-
const toastOptions: UseToastOptions = {
89+
toast({
9990
id: bulk_download_item_name,
10091
title: t('gallery.bulkDownloadFailed'),
10192
status: 'error',
10293
description: action.payload.data.error,
10394
duration: null,
104-
isClosable: true,
105-
};
106-
107-
if (toast.isActive(bulk_download_item_name)) {
108-
toast.update(bulk_download_item_name, toastOptions);
109-
} else {
110-
toast(toastOptions);
111-
}
95+
});
11296
},
11397
});
11498
};

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { $logger } from 'app/logging/logger';
22
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
33
import { canvasCopiedToClipboard } from 'features/canvas/store/actions';
44
import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
5-
import { addToast } from 'features/system/store/systemSlice';
65
import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
6+
import { toast } from 'features/toast/toast';
77
import { t } from 'i18next';
88

99
export const addCanvasCopiedToClipboardListener = (startAppListening: AppStartListening) => {
1010
startAppListening({
1111
actionCreator: canvasCopiedToClipboard,
12-
effect: async (action, { dispatch, getState }) => {
12+
effect: async (action, { getState }) => {
1313
const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' });
1414
const state = getState();
1515

@@ -19,22 +19,20 @@ export const addCanvasCopiedToClipboardListener = (startAppListening: AppStartLi
1919
copyBlobToClipboard(blob);
2020
} catch (err) {
2121
moduleLog.error(String(err));
22-
dispatch(
23-
addToast({
24-
title: t('toast.problemCopyingCanvas'),
25-
description: t('toast.problemCopyingCanvasDesc'),
26-
status: 'error',
27-
})
28-
);
22+
toast({
23+
id: 'CANVAS_COPY_FAILED',
24+
title: t('toast.problemCopyingCanvas'),
25+
description: t('toast.problemCopyingCanvasDesc'),
26+
status: 'error',
27+
});
2928
return;
3029
}
3130

32-
dispatch(
33-
addToast({
34-
title: t('toast.canvasCopiedClipboard'),
35-
status: 'success',
36-
})
37-
);
31+
toast({
32+
id: 'CANVAS_COPY_SUCCEEDED',
33+
title: t('toast.canvasCopiedClipboard'),
34+
status: 'success',
35+
});
3836
},
3937
});
4038
};

0 commit comments

Comments
 (0)