feat(ui): workflow menu tweaks

- "Reset Workflow Editor" -> "New Workflow"
- "New Workflow" gets nodes icon & is no longer danger coloured
- When creating a new workflow, if the current workflow has unsaved changes, you get a dialog asking for confirmation. If the current workflow is saved, it immediately creates a new workflow.
- "Download Workflow" -> "Save to File"
- "Upload Workflow" -> "Load from File"
- Moved "Load from File" up 1 in the menu

Author: psychedelicious

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

@@ -950,9 +950,9 @@
         "problemSettingTitle": "Problem Setting Title",
         "reloadNodeTemplates": "Reload Node Templates",
         "removeLinearView": "Remove from Linear View",
-        "resetWorkflow": "Reset Workflow Editor",
-        "resetWorkflowDesc": "Are you sure you want to reset the Workflow Editor?",
-        "resetWorkflowDesc2": "Resetting the Workflow Editor will clear all nodes, edges and workflow details. Saved workflows will not be affected.",
+        "newWorkflow": "New Workflow",
+        "newWorkflowDesc": "Create a new workflow?",
+        "newWorkflowDesc2": "Your current workflow has unsaved changes.",
         "scheduler": "Scheduler",
         "schedulerDescription": "TODO",
         "sDXLMainModelField": "SDXL Model",
@@ -1634,10 +1634,10 @@
         "userWorkflows": "My Workflows",
         "defaultWorkflows": "Default Workflows",
         "openWorkflow": "Open Workflow",
-        "uploadWorkflow": "Upload Workflow",
+        "uploadWorkflow": "Load from File",
         "deleteWorkflow": "Delete Workflow",
         "unnamedWorkflow": "Unnamed Workflow",
-        "downloadWorkflow": "Download Workflow",
+        "downloadWorkflow": "Save to File",
         "saveWorkflow": "Save Workflow",
         "saveWorkflowAs": "Save Workflow As",
         "savingWorkflow": "Saving Workflow...",
@@ -1652,7 +1652,7 @@
         "searchWorkflows": "Search Workflows",
         "clearWorkflowSearchFilter": "Clear Workflow Search Filter",
         "workflowName": "Workflow Name",
-        "workflowEditorReset": "Workflow Editor Reset",
+        "newWorkflowCreated": "New Workflow Created",
         "workflowEditorMenu": "Workflow Editor Menu",
         "workflowIsOpen": "Workflow is Open"
     },

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/ResetWorkflowEditorMenuItem.tsx renamed to invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx

@@ -11,44 +11,48 @@ import {
   Text,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
+import { FaCircleNodes } from 'react-icons/fa6';
 
-const ResetWorkflowEditorMenuItem = () => {
+const NewWorkflowMenuItem = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const cancelRef = useRef<HTMLButtonElement | null>(null);
+  const isTouched = useAppSelector((state) => state.workflow.isTouched);
 
-  const handleConfirmClear = useCallback(() => {
+  const handleNewWorkflow = useCallback(() => {
     dispatch(nodeEditorReset());
 
     dispatch(
       addToast(
         makeToast({
-          title: t('workflows.workflowEditorReset'),
+          title: t('workflows.newWorkflowCreated'),
           status: 'success',
         })
       )
     );
 
     onClose();
-  }, [dispatch, t, onClose]);
+  }, [dispatch, onClose, t]);
+
+  const onClick = useCallback(() => {
+    if (!isTouched) {
+      handleNewWorkflow();
+      return;
+    }
+    onOpen();
+  }, [handleNewWorkflow, isTouched, onOpen]);
 
   return (
     <>
-      <MenuItem
-        as="button"
-        icon={<FaTrash />}
-        sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
-        onClick={onOpen}
-      >
-        {t('nodes.resetWorkflow')}
+      <MenuItem as="button" icon={<FaCircleNodes />} onClick={onClick}>
+        {t('nodes.newWorkflow')}
       </MenuItem>
 
       <AlertDialog
@@ -61,21 +65,21 @@ const ResetWorkflowEditorMenuItem = () => {
 
         <AlertDialogContent>
           <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            {t('nodes.resetWorkflow')}
+            {t('nodes.newWorkflow')}
           </AlertDialogHeader>
 
           <AlertDialogBody py={4}>
             <Flex flexDir="column" gap={2}>
-              <Text>{t('nodes.resetWorkflowDesc')}</Text>
-              <Text variant="subtext">{t('nodes.resetWorkflowDesc2')}</Text>
+              <Text>{t('nodes.newWorkflowDesc')}</Text>
+              <Text variant="subtext">{t('nodes.newWorkflowDesc2')}</Text>
             </Flex>
           </AlertDialogBody>
 
           <AlertDialogFooter>
             <Button ref={cancelRef} onClick={onClose}>
               {t('common.cancel')}
             </Button>
-            <Button colorScheme="error" ml={3} onClick={handleConfirmClear}>
+            <Button colorScheme="error" ml={3} onClick={handleNewWorkflow}>
               {t('common.accept')}
             </Button>
           </AlertDialogFooter>
@@ -85,4 +89,4 @@ const ResetWorkflowEditorMenuItem = () => {
   );
 };
 
-export default memo(ResetWorkflowEditorMenuItem);
+export default memo(NewWorkflowMenuItem);

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

@@ -9,7 +9,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import DownloadWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem';
-import ResetWorkflowEditorMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/ResetWorkflowEditorMenuItem';
+import NewWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem';
 import SaveWorkflowAsMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem';
 import SaveWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem';
 import SettingsMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem';
@@ -39,7 +39,7 @@ const WorkflowLibraryMenu = () => {
         {isWorkflowLibraryEnabled && <SaveWorkflowAsMenuItem />}
         <DownloadWorkflowMenuItem />
         <UploadWorkflowMenuItem />
-        <ResetWorkflowEditorMenuItem />
+        <NewWorkflowMenuItem />
         <MenuDivider />
         <SettingsMenuItem />
       </MenuList>