feat(ui): update linear UI to use new board field on save_image

- No longer need to make network request to add image to board after it's finished - removed
- Update linear graphs & upscale graph to save image to the board
- Update autoSwitch logic so when image is generated we still switch to the right board

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

@@ -37,6 +37,7 @@ export const addInvocationCompleteEventListener = () => {
         const { image_name } = result.image;
         const { canvas, gallery } = getState();
 
+        // This populates the `getImageDTO` cache
         const imageDTO = await dispatch(
           imagesApi.endpoints.getImageDTO.initiate(image_name)
         ).unwrap();
@@ -52,27 +53,14 @@ export const addInvocationCompleteEventListener = () => {
         if (!imageDTO.is_intermediate) {
           /**
            * Cache updates for when an image result is received
-           * - *add* to getImageDTO
+           * - add it to the no_board/images
-           * - IF `autoAddBoardId` is set:
-           *    - THEN add it to the board_id/images
-           * - ELSE (`autoAddBoardId` is not set):
-           *    - THEN add it to the no_board/images
            */
 
-          const { autoAddBoardId } = gallery;
-          if (autoAddBoardId && autoAddBoardId !== 'none') {
-            dispatch(
-              imagesApi.endpoints.addImageToBoard.initiate({
-                board_id: autoAddBoardId,
-                imageDTO,
-              })
-            );
-          } else {
           dispatch(
             imagesApi.util.updateQueryData(
               'listImages',
               {
-                  board_id: 'none',
+                board_id: imageDTO.board_id ?? 'none',
                 categories: IMAGE_CATEGORIES,
               },
               (draft) => {
@@ -80,26 +68,21 @@ export const addInvocationCompleteEventListener = () => {
               }
             )
           );
-          }
 
           dispatch(
             imagesApi.util.invalidateTags([
-              { type: 'BoardImagesTotal', id: autoAddBoardId },
+              { type: 'BoardImagesTotal', id: imageDTO.board_id },
-              { type: 'BoardAssetsTotal', id: autoAddBoardId },
+              { type: 'BoardAssetsTotal', id: imageDTO.board_id },
             ])
           );
 
-          const { selectedBoardId, shouldAutoSwitch } = gallery;
+          const { shouldAutoSwitch } = gallery;
 
           // If auto-switch is enabled, select the new image
           if (shouldAutoSwitch) {
             // if auto-add is enabled, switch the board as the image comes in
-            if (autoAddBoardId && autoAddBoardId !== selectedBoardId) {
-              dispatch(boardIdSelected(autoAddBoardId));
             dispatch(galleryViewChanged('images'));
-            } else if (!autoAddBoardId) {
+            dispatch(boardIdSelected(imageDTO.board_id ?? 'none'));
-              dispatch(galleryViewChanged('images'));
-            }
             dispatch(imageSelected(imageDTO));
           }
         }

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

@@ -18,11 +18,14 @@ export const addUpscaleRequestedListener = () => {
       const log = logger('session');
 
       const { image_name } = action.payload;
-      const { esrganModelName } = getState().postprocessing;
+      const state = getState();
+      const { esrganModelName } = state.postprocessing;
+      const { autoAddBoardId } = state.gallery;
 
       const graph = buildAdHocUpscaleGraph({
         image_name,
         esrganModelName,
+        autoAddBoardId,
       });
 
       try {

invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSaveImageNode.ts

@@ -24,12 +24,14 @@ export const addSaveImageNode = (
   const activeTabName = activeTabNameSelector(state);
   const is_intermediate =
     activeTabName === 'unifiedCanvas' ? !state.canvas.shouldAutoSave : false;
+  const { autoAddBoardId } = state.gallery;
 
   const saveImageNode: SaveImageInvocation = {
     id: SAVE_IMAGE,
     type: 'save_image',
     is_intermediate,
     use_cache: false,
+    board: autoAddBoardId === 'none' ? undefined : { board_id: autoAddBoardId },
   };
 
   graph.nodes[SAVE_IMAGE] = saveImageNode;

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildAdHocUpscaleGraph.ts

@@ -6,15 +6,18 @@ import {
   SaveImageInvocation,
 } from 'services/api/types';
 import { REALESRGAN as ESRGAN, SAVE_IMAGE } from './constants';
+import { BoardId } from 'features/gallery/store/types';
 
 type Arg = {
   image_name: string;
   esrganModelName: ESRGANModelName;
+  autoAddBoardId: BoardId;
 };
 
 export const buildAdHocUpscaleGraph = ({
   image_name,
   esrganModelName,
+  autoAddBoardId,
 }: Arg): Graph => {
   const realesrganNode: ESRGANInvocation = {
     id: ESRGAN,
@@ -28,6 +31,8 @@ export const buildAdHocUpscaleGraph = ({
     id: SAVE_IMAGE,
     type: 'save_image',
     use_cache: false,
+    is_intermediate: false,
+    board: autoAddBoardId === 'none' ? undefined : { board_id: autoAddBoardId },
   };
 
   const graph: NonNullableGraph = {