fix(ui): download button in workflow library downloads wrong workflow

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

@@ -921,6 +921,7 @@
         "currentImage": "Current Image",
         "currentImageDescription": "Displays the current image in the Node Editor",
         "downloadWorkflow": "Download Workflow JSON",
+        "downloadWorkflowError": "Error downloading workflow",
         "edge": "Edge",
         "edit": "Edit",
         "editMode": "Edit in Workflow Editor",

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx

@@ -6,7 +6,7 @@ import dateFormat, { masks } from 'dateformat';
 import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
 import { useDeleteWorkflow } from 'features/workflowLibrary/components/DeleteLibraryWorkflowConfirmationAlertDialog';
 import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
-import { useDownloadWorkflow } from 'features/workflowLibrary/hooks/useDownloadWorkflow';
+import { useDownloadWorkflowById } from 'features/workflowLibrary/hooks/useDownloadWorkflowById';
 import type { MouseEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -30,7 +30,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
   }, []);
 
   const workflowId = useAppSelector(selectWorkflowId);
-  const downloadWorkflow = useDownloadWorkflow();
+  const { downloadWorkflow, isLoading: isLoadingDownloadWorkflow } = useDownloadWorkflowById();
   const shareWorkflow = useShareWorkflow();
   const deleteWorkflow = useDeleteWorkflow();
   const loadWorkflow = useLoadWorkflow();
@@ -71,9 +71,9 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       setIsHovered(false);
-      downloadWorkflow();
+      downloadWorkflow(workflow.workflow_id);
     },
-    [downloadWorkflow]
+    [downloadWorkflow, workflow.workflow_id]
   );
 
   return (
@@ -144,6 +144,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
             aria-label={t('workflows.download')}
             onClick={handleClickDownload}
             icon={<PiDownloadSimpleBold />}
+            isLoading={isLoadingDownloadWorkflow}
           />
         </Tooltip>
         {!!projectUrl && workflow.workflow_id && workflow.category !== 'user' && (

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx

@@ -1,12 +1,12 @@
 import { MenuItem } from '@invoke-ai/ui-library';
-import { useDownloadWorkflow } from 'features/workflowLibrary/hooks/useDownloadWorkflow';
+import { useDownloadCurrentlyLoadedWorkflow } from 'features/workflowLibrary/hooks/useDownloadCurrentlyLoadedWorkflow';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiDownloadSimpleBold } from 'react-icons/pi';
 
 const DownloadWorkflowMenuItem = () => {
   const { t } = useTranslation();
-  const downloadWorkflow = useDownloadWorkflow();
+  const downloadWorkflow = useDownloadCurrentlyLoadedWorkflow();
 
   return (
     <MenuItem as="button" icon={<PiDownloadSimpleBold />} onClick={downloadWorkflow}>

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

@@ -3,7 +3,7 @@ import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
 import { workflowDownloaded } from 'features/workflowLibrary/store/actions';
 import { useCallback } from 'react';
 
-export const useDownloadWorkflow = () => {
+export const useDownloadCurrentlyLoadedWorkflow = () => {
   const dispatch = useAppDispatch();
 
   const downloadWorkflow = useCallback(() => {

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

@@ -0,0 +1,42 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import { toast } from 'features/toast/toast';
+import { workflowDownloaded } from 'features/workflowLibrary/store/actions';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyGetWorkflowQuery } from 'services/api/endpoints/workflows';
+
+export const useDownloadWorkflowById = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const [trigger, query] = useLazyGetWorkflowQuery();
+
+  const toastError = useCallback(() => {
+    toast({ status: 'error', description: t('nodes.downloadWorkflowError') });
+  }, [t]);
+
+  const downloadWorkflow = useCallback(
+    async (workflowId: string) => {
+      try {
+        const { data } = await trigger(workflowId);
+        if (!data) {
+          toastError();
+          return;
+        }
+        const { workflow } = data;
+        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());
+      } catch {
+        toastError();
+      }
+    },
+    [dispatch, toastError, trigger]
+  );
+
+  return { downloadWorkflow, isLoading: query.isLoading };
+};