add actions for workflow library (#5669)

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>

invokeai/frontend/web/src/common/hooks/useDownloadImage.ts

@@ -1,4 +1,6 @@
 import { useAppToaster } from 'app/components/Toaster';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { imageDownloaded } from 'features/gallery/store/actions';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,6 +10,7 @@ export const useDownloadImage = () => {
   const toaster = useAppToaster();
   const { t } = useTranslation();
   const imageUrlToBlob = useImageUrlToBlob();
+  const dispatch = useAppDispatch();
 
   const downloadImage = useCallback(
     async (image_url: string, image_name: string) => {
@@ -26,6 +29,7 @@ export const useDownloadImage = () => {
         document.body.appendChild(a);
         a.click();
         window.URL.revokeObjectURL(url);
+        dispatch(imageDownloaded());
       } catch (err) {
         toaster({
           title: t('toast.problemDownloadingImage'),
@@ -36,7 +40,7 @@ export const useDownloadImage = () => {
         });
       }
     },
-    [t, toaster, imageUrlToBlob]
+    [t, toaster, imageUrlToBlob, dispatch]
   );
 
   return { downloadImage };

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

@@ -14,3 +14,5 @@ export const requestedBoardImagesDeletion = createAction<RequestedBoardImagesDel
 export const sentImageToCanvas = createAction('gallery/sentImageToCanvas');
 
 export const sentImageToImg2Img = createAction('gallery/sentImageToImg2Img');
+
+export const imageDownloaded = createAction('gallery/imageDownloaded');

invokeai/frontend/web/src/features/workflowLibrary/hooks/useDownloadWorkflow.ts

@@ -1,19 +1,25 @@
+import { useAppDispatch } from 'app/store/storeHooks';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
-
+import { workflowDownloaded } from 'features/workflowLibrary/store/actions';
-const downloadWorkflow = () => {
+import { useCallback } from 'react';
-  const workflow = $builtWorkflow.get();
-  if (!workflow) {
-    return;
-  }
-  const blob = new Blob([JSON.stringify(workflow, null, 2)]);
-  const a = document.createElement('a');
-  a.href = URL.createObjectURL(blob);
-  a.download = `${workflow.name || 'My Workflow'}.json`;
-  document.body.appendChild(a);
-  a.click();
-  a.remove();
-};
 
 export const useDownloadWorkflow = () => {
+  const dispatch = useAppDispatch();
+
+  const downloadWorkflow = useCallback(() => {
+    const workflow = $builtWorkflow.get();
+    if (!workflow) {
+      return;
+    }
+    const blob = new Blob([JSON.stringify(workflow, null, 2)]);
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `${workflow.name || 'My Workflow'}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    dispatch(workflowDownloaded());
+  }, [dispatch]);
+
   return downloadWorkflow;
 };

invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx

@@ -3,6 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { workflowLoadRequested } from 'features/nodes/store/actions';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
+import { workflowLoadedFromFile } from 'features/workflowLibrary/store/actions';
 import type { RefObject } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,6 +30,7 @@ export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({ resetRef }) =
         try {
           const parsedJSON = JSON.parse(String(rawJSON));
           dispatch(workflowLoadRequested({ workflow: parsedJSON, asCopy: true }));
+          dispatch(workflowLoadedFromFile());
         } catch (e) {
           // There was a problem reading the file
           logger.error(t('nodes.unableToLoadWorkflow'));

invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts

@@ -4,6 +4,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
 import { workflowIDChanged, workflowSaved } from 'features/nodes/store/workflowSlice';
 import type { WorkflowV2 } from 'features/nodes/types/workflow';
+import { workflowUpdated } from 'features/workflowLibrary/store/actions';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCreateWorkflowMutation, useUpdateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
@@ -41,6 +42,7 @@ export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
     try {
       if (isWorkflowWithID(workflow)) {
         await updateWorkflow(workflow).unwrap();
+        dispatch(workflowUpdated());
       } else {
         const data = await createWorkflow(workflow).unwrap();
         dispatch(workflowIDChanged(data.workflow.id));

invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts

@@ -9,6 +9,7 @@ import {
   workflowSaved,
 } from 'features/nodes/store/workflowSlice';
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
+import { newWorkflowSaved } from 'features/workflowLibrary/store/actions';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCreateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
@@ -56,6 +57,7 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
         dispatch(workflowNameChanged(data.workflow.name));
         dispatch(workflowCategoryChanged(data.workflow.meta.category));
         dispatch(workflowSaved());
+        dispatch(newWorkflowSaved({ category }));
 
         onSuccess && onSuccess();
         toast.update(toastRef.current, {

invokeai/frontend/web/src/features/workflowLibrary/store/actions.ts

@@ -0,0 +1,10 @@
+import { createAction } from '@reduxjs/toolkit';
+import type { WorkflowCategory } from 'features/nodes/types/workflow';
+
+export const workflowDownloaded = createAction('workflowLibrary/workflowDownloaded');
+
+export const workflowLoadedFromFile = createAction('workflowLibrary/workflowLoadedFromFile');
+
+export const newWorkflowSaved = createAction<{ category: WorkflowCategory }>('workflowLibrary/newWorkflowSaved');
+
+export const workflowUpdated = createAction('workflowLibrary/workflowUpdated');