feat(ui): reworked workflow loading flow

invokeai/frontend/web/src/app/hooks/useStudioInitAction.ts

@@ -15,7 +15,7 @@ import { $isWorkflowLibraryModalOpen } from 'features/nodes/store/workflowLibrar
 import { $isStylePresetsMenuOpen, activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
 import { toast } from 'features/toast/toast';
 import { activeTabCanvasRightPanelChanged, setActiveTab } from 'features/ui/store/uiSlice';
-import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
+import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import { atom } from 'nanostores';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -57,7 +57,7 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
   const { t } = useTranslation();
   const didParseOpenAPISchema = useStore($hasTemplates);
   const store = useAppStore();
-  const { getAndLoadWorkflow } = useGetAndLoadLibraryWorkflow();
+  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
 
   const handleSendToCanvas = useCallback(
     async (imageName: string) => {
@@ -113,10 +113,15 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
   const handleLoadWorkflow = useCallback(
     async (workflowId: string) => {
       // This shows a toast
-      await getAndLoadWorkflow(workflowId);
-      store.dispatch(setActiveTab('workflows'));
+      await loadWorkflowWithDialog({
+        type: 'library',
+        data: workflowId,
+        onSuccess: () => {
+          store.dispatch(setActiveTab('workflows'));
+        },
+      });
     },
-    [getAndLoadWorkflow, store]
+    [loadWorkflowWithDialog, store]
   );
 
   const handleSelectStylePreset = useCallback(

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemLoadWorkflow.tsx

@@ -1,29 +1,24 @@
 import { MenuItem } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { SpinnerIcon } from 'features/gallery/components/ImageContextMenu/SpinnerIcon';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { $hasTemplates } from 'features/nodes/store/nodesSlice';
-import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
+import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFlowArrowBold } from 'react-icons/pi';
 
 export const ImageMenuItemLoadWorkflow = memo(() => {
   const { t } = useTranslation();
   const imageDTO = useImageDTOContext();
-  const [getAndLoadEmbeddedWorkflow, { isLoading }] = useGetAndLoadEmbeddedWorkflow();
+  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
   const hasTemplates = useStore($hasTemplates);
 
   const onClick = useCallback(() => {
-    getAndLoadEmbeddedWorkflow(imageDTO.image_name);
-  }, [getAndLoadEmbeddedWorkflow, imageDTO.image_name]);
+    loadWorkflowWithDialog({ type: 'image', data: imageDTO.image_name });
+  }, [loadWorkflowWithDialog, imageDTO.image_name]);
 
   return (
-    <MenuItem
-      icon={isLoading ? <SpinnerIcon /> : <PiFlowArrowBold />}
-      onClickCapture={onClick}
-      isDisabled={!imageDTO.has_workflow || !hasTemplates}
-    >
+    <MenuItem icon={<PiFlowArrowBold />} onClickCapture={onClick} isDisabled={!imageDTO.has_workflow || !hasTemplates}>
       {t('nodes.loadWorkflow')}
     </MenuItem>
   );

invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts

@@ -17,7 +17,7 @@ import {
 } from 'features/stylePresets/store/stylePresetSlice';
 import { toast } from 'features/toast/toast';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
+import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
@@ -147,14 +147,15 @@ export const useImageActions = (imageDTO: ImageDTO) => {
     });
   }, [metadata, imageDTO]);
 
-  const [getAndLoadEmbeddedWorkflow] = useGetAndLoadEmbeddedWorkflow();
+  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
 
-  const loadWorkflow = useCallback(() => {
+  const loadWorkflowFromImage = useCallback(() => {
     if (!imageDTO.has_workflow || !hasTemplates) {
       return;
     }
-    getAndLoadEmbeddedWorkflow(imageDTO.image_name);
-  }, [getAndLoadEmbeddedWorkflow, hasTemplates, imageDTO.has_workflow, imageDTO.image_name]);
+
+    loadWorkflowWithDialog({ type: 'image', data: imageDTO.image_name });
+  }, [hasTemplates, imageDTO.has_workflow, imageDTO.image_name, loadWorkflowWithDialog]);
 
   const recallSize = useCallback(() => {
     if (isStaging) {
@@ -180,7 +181,7 @@ export const useImageActions = (imageDTO: ImageDTO) => {
     recallSeed,
     recallPrompts,
     createAsPreset,
-    loadWorkflow,
+    loadWorkflow: loadWorkflowFromImage,
     hasWorkflow: imageDTO.has_workflow,
     recallSize,
     upscale,

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/EditWorkflow.tsx

@@ -1,20 +1,29 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
-import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { workflowModeChanged } from 'features/nodes/store/workflowSlice';
+import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPencilBold } from 'react-icons/pi';
 
 export const EditWorkflow = ({ workflowId }: { workflowId: string }) => {
-  const loadWorkflow = useLoadWorkflow();
+  const dispatch = useAppDispatch();
+  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
   const { t } = useTranslation();
 
   const handleClickEdit = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      loadWorkflow.loadWithDialog(workflowId, 'edit');
+      loadWorkflowWithDialog({
+        type: 'library',
+        data: workflowId,
+        onSuccess: () => {
+          dispatch(workflowModeChanged('edit'));
+        },
+      });
     },
-    [loadWorkflow, workflowId]
+    [dispatch, loadWorkflowWithDialog, workflowId]
   );
 
   return (

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ViewWorkflow.tsx

@@ -1,20 +1,29 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
-import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { workflowModeChanged } from 'features/nodes/store/workflowSlice';
+import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiEyeBold } from 'react-icons/pi';
 
 export const ViewWorkflow = ({ workflowId }: { workflowId: string }) => {
-  const loadWorkflow = useLoadWorkflow();
+  const dispatch = useAppDispatch();
+  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
   const { t } = useTranslation();
 
   const handleClickLoad = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      loadWorkflow.loadWithDialog(workflowId, 'view');
+      loadWorkflowWithDialog({
+        type: 'library',
+        data: workflowId,
+        onSuccess: () => {
+          dispatch(workflowModeChanged('view'));
+        },
+      });
     },
-    [loadWorkflow, workflowId]
+    [dispatch, loadWorkflowWithDialog, workflowId]
   );
 
   return (

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibrarySideNav.tsx

@@ -1,5 +1,5 @@
 import type { ButtonProps, CheckboxProps } from '@invoke-ai/ui-library';
-import { Button, Checkbox, Collapse, Flex, Icon, Spacer, Text } from '@invoke-ai/ui-library';
+import { Button, Checkbox, Collapse, Flex, Spacer, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { WorkflowLibraryView, WorkflowTagCategory } from 'features/nodes/store/workflowLibrarySlice';
@@ -13,15 +13,13 @@ import {
   workflowLibraryTagToggled,
   workflowLibraryViewChanged,
 } from 'features/nodes/store/workflowLibrarySlice';
-import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import { NewWorkflowButton } from 'features/workflowLibrary/components/NewWorkflowButton';
 import { UploadWorkflowButton } from 'features/workflowLibrary/components/UploadWorkflowButton';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiUsersBold } from 'react-icons/pi';
 import { useDispatch } from 'react-redux';
 import { useGetCountsByTagQuery } from 'services/api/endpoints/workflows';
-import type { S } from 'services/api/types';
 
 export const WorkflowLibrarySideNav = () => {
   const { t } = useTranslation();
@@ -154,31 +152,6 @@ const useCountForTagCategory = (tagCategory: WorkflowTagCategory) => {
   return count;
 };
 
-const RecentWorkflowButton = memo(({ workflow }: { workflow: S['WorkflowRecordListItemWithThumbnailDTO'] }) => {
-  const loadWorkflow = useLoadWorkflow();
-  const load = useCallback(() => {
-    loadWorkflow.loadWithDialog(workflow.workflow_id, 'view');
-  }, [loadWorkflow, workflow.workflow_id]);
-
-  return (
-    <Flex
-      role="button"
-      key={workflow.workflow_id}
-      gap={2}
-      alignItems="center"
-      _hover={{ textDecoration: 'underline' }}
-      color="base.300"
-      onClick={load}
-    >
-      <Text as="span" noOfLines={1} w="full" fontWeight="semibold">
-        {workflow.name}
-      </Text>
-      {workflow.category === 'project' && <Icon as={PiUsersBold} boxSize="12px" />}
-    </Flex>
-  );
-});
-RecentWorkflowButton.displayName = 'RecentWorkflowButton';
-
 const WorkflowLibraryViewButton = memo(({ view, ...rest }: ButtonProps & { view: WorkflowLibraryView }) => {
   const dispatch = useDispatch();
   const selectedView = useAppSelector(selectWorkflowLibraryView);

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

@@ -1,9 +1,9 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Badge, Flex, Icon, Image, Spacer, Text } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { ShareWorkflowButton } from 'features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ShareWorkflow';
-import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
-import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
+import { selectWorkflowId, workflowModeChanged } from 'features/nodes/store/workflowSlice';
+import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import InvokeLogo from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,17 +31,23 @@ const sx: SystemStyleObject = {
 
 export const WorkflowListItem = memo(({ workflow }: { workflow: WorkflowRecordListItemWithThumbnailDTO }) => {
   const { t } = useTranslation();
-
+  const dispatch = useAppDispatch();
   const workflowId = useAppSelector(selectWorkflowId);
-  const loadWorkflow = useLoadWorkflow();
+  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
 
   const isActive = useMemo(() => {
     return workflowId === workflow.workflow_id;
   }, [workflowId, workflow.workflow_id]);
 
   const handleClickLoad = useCallback(() => {
-    loadWorkflow.loadWithDialog(workflow.workflow_id, 'view');
-  }, [loadWorkflow, workflow.workflow_id]);
+    loadWorkflowWithDialog({
+      type: 'library',
+      data: workflow.workflow_id,
+      onSuccess: () => {
+        dispatch(workflowModeChanged('view'));
+      },
+    });
+  }, [dispatch, loadWorkflowWithDialog, workflow.workflow_id]);
 
   return (
     <Flex

invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts

@@ -132,6 +132,7 @@ export const workflowSlice = createSlice({
         elements: { [rootElement.id]: rootElement },
         rootElementId: rootElement.id,
       };
+      state.isTouched = true;
     },
     formElementAdded: (
       state,
@@ -148,36 +149,44 @@ export const workflowSlice = createSlice({
       if (isNodeFieldElement(element)) {
         state.formFieldInitialValues[element.id] = initialValue;
       }
+      state.isTouched = true;
     },
     formElementRemoved: (state, action: PayloadAction<{ id: string }>) => {
       const { form } = state;
       const { id } = action.payload;
       removeElement({ form, id });
       delete state.formFieldInitialValues[id];
+      state.isTouched = true;
     },
     formElementReparented: (state, action: PayloadAction<{ id: string; newParentId: string; index: number }>) => {
       const { form } = state;
       const { id, newParentId, index } = action.payload;
       reparentElement({ form, id, newParentId, index });
+      state.isTouched = true;
     },
     formElementHeadingDataChanged: (state, action: FormElementDataChangedAction<HeadingElement>) => {
       formElementDataChangedReducer(state, action, isHeadingElement);
+      state.isTouched = true;
     },
     formElementTextDataChanged: (state, action: FormElementDataChangedAction<TextElement>) => {
       formElementDataChangedReducer(state, action, isTextElement);
+      state.isTouched = true;
     },
     formElementNodeFieldDataChanged: (state, action: FormElementDataChangedAction<NodeFieldElement>) => {
       formElementDataChangedReducer(state, action, isNodeFieldElement);
+      state.isTouched = true;
     },
     formElementContainerDataChanged: (state, action: FormElementDataChangedAction<ContainerElement>) => {
       formElementDataChangedReducer(state, action, isContainerElement);
+      state.isTouched = true;
     },
     formFieldInitialValuesChanged: (
       state,
       action: PayloadAction<{ formFieldInitialValues: WorkflowState['formFieldInitialValues'] }>
     ) => {
       const { formFieldInitialValues } = action.payload;
       state.formFieldInitialValues = formFieldInitialValues;
+      state.isTouched = true;
     },
   },
   extraReducers: (builder) => {