feat(ui): improve image delete handling

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

@@ -12,7 +12,12 @@ import {
   addImageUploadedFulfilledListener,
   addImageUploadedRejectedListener,
 } from './listeners/imageUploaded';
-import { addRequestedImageDeletionListener } from './listeners/imageDeleted';
+import {
+  addImageDeletedFulfilledListener,
+  addImageDeletedPendingListener,
+  addImageDeletedRejectedListener,
+  addRequestedImageDeletionListener,
+} from './listeners/imageDeleted';
 import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
 import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
 import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
@@ -50,13 +55,17 @@ export type AppListenerEffect = ListenerEffect<
   AppDispatch
 >;
 
-// Image uploads
+// Image uploaded
 addImageUploadedFulfilledListener();
 addImageUploadedRejectedListener();
 
 addInitialImageSelectedListener();
 
+// Image deleted
 addRequestedImageDeletionListener();
+addImageDeletedPendingListener();
+addImageDeletedFulfilledListener();
+addImageDeletedRejectedListener();
 
 // Invoking stuff
 addUserInvokedCanvasListener();

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

@@ -4,9 +4,14 @@ import { imageDeleted } from 'services/thunks/image';
 import { log } from 'app/logging/useLogger';
 import { clamp } from 'lodash-es';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
+import { uploadsAdapter } from 'features/gallery/store/uploadsSlice';
+import { resultsAdapter } from 'features/gallery/store/resultsSlice';
 
 const moduleLog = log.child({ namespace: 'addRequestedImageDeletionListener' });
 
+/**
+ * Called when the user requests an image deletion
+ */
 export const addRequestedImageDeletionListener = () => {
   startAppListening({
     actionCreator: requestedImageDeletion,
@@ -19,11 +24,6 @@ export const addRequestedImageDeletionListener = () => {
 
       const { image_name, image_type } = image;
 
-      if (image_type !== 'uploads' && image_type !== 'results') {
-        moduleLog.warn({ data: image }, `Invalid image type ${image_type}`);
-        return;
-      }
-
       const selectedImageName = getState().gallery.selectedImage?.image_name;
 
       if (selectedImageName === image_name) {
@@ -57,3 +57,49 @@ export const addRequestedImageDeletionListener = () => {
     },
   });
 };
+
+/**
+ * Called when the actual delete request is sent to the server
+ */
+export const addImageDeletedPendingListener = () => {
+  startAppListening({
+    actionCreator: imageDeleted.pending,
+    effect: (action, { dispatch, getState }) => {
+      const { imageName, imageType } = action.meta.arg;
+      // Preemptively remove the image from the gallery
+      if (imageType === 'uploads') {
+        uploadsAdapter.removeOne(getState().uploads, imageName);
+      }
+      if (imageType === 'results') {
+        resultsAdapter.removeOne(getState().results, imageName);
+      }
+    },
+  });
+};
+
+/**
+ * Called on successful delete
+ */
+export const addImageDeletedFulfilledListener = () => {
+  startAppListening({
+    actionCreator: imageDeleted.fulfilled,
+    effect: (action, { dispatch, getState }) => {
+      moduleLog.info({ data: { image: action.meta.arg } }, 'Image deleted');
+    },
+  });
+};
+
+/**
+ * Called on failed delete
+ */
+export const addImageDeletedRejectedListener = () => {
+  startAppListening({
+    actionCreator: imageDeleted.rejected,
+    effect: (action, { dispatch, getState }) => {
+      moduleLog.warn(
+        { data: { image: action.meta.arg } },
+        'Unable to delete image'
+      );
+    },
+  });
+};

invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts

@@ -97,18 +97,6 @@ const resultsSlice = createSlice({
         });
       }
     });
-
-    /**
-     * Delete Image - PENDING
-     * Pre-emptively remove the image from the gallery
-     */
-    builder.addCase(imageDeleted.pending, (state, action) => {
-      const { imageType, imageName } = action.meta.arg;
-
-      if (imageType === 'results') {
-        resultsAdapter.removeOne(state, imageName);
-      }
-    });
   },
 });
 

invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts

@@ -83,18 +83,6 @@ const uploadsSlice = createSlice({
         });
       }
     });
-
-    /**
-     * Delete Image - pending
-     * Pre-emptively remove the image from the gallery
-     */
-    builder.addCase(imageDeleted.pending, (state, action) => {
-      const { imageType, imageName } = action.meta.arg;
-
-      if (imageType === 'uploads') {
-        uploadsAdapter.removeOne(state, imageName);
-      }
-    });
   },
 });
 

invokeai/frontend/web/src/services/thunks/image.ts

@@ -67,9 +67,6 @@ export const imageDeleted = createAppAsyncThunk(
   'api/imageDeleted',
   async (arg: ImageDeletedArg) => {
     const response = await ImagesService.deleteImage(arg);
-
-    imagesLog.debug({ arg, response }, 'Image deleted');
-
     return response;
   }
 );
@@ -77,7 +74,7 @@ export const imageDeleted = createAppAsyncThunk(
 type ImageUpdatedArg = Parameters<(typeof ImagesService)['updateImage']>[0];
 
 /**
- * `ImagesService.deleteImage()` thunk
+ * `ImagesService.updateImage()` thunk
  */
 export const imageUpdated = createAppAsyncThunk(
   'api/imageUpdated',