From 6ea09ba0b6101b5c0be09d4129c253c8d44f464e Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 14 Dec 2023 19:55:47 +1100 Subject: [PATCH] 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 --- invokeai/frontend/web/public/locales/en.json | 12 +++--- ...orMenuItem.tsx => NewWorkflowMenuItem.tsx} | 40 ++++++++++--------- .../WorkflowLibraryMenu.tsx | 4 +- 3 files changed, 30 insertions(+), 26 deletions(-) rename invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/{ResetWorkflowEditorMenuItem.tsx => NewWorkflowMenuItem.tsx} (63%) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index ec257ee044..f5f3f434f5 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/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" }, diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/ResetWorkflowEditorMenuItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx similarity index 63% rename from invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/ResetWorkflowEditorMenuItem.tsx rename to invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx index 5d7e58e198..c4497c5ddb 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/ResetWorkflowEditorMenuItem.tsx +++ b/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(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 ( <> - } - sx={{ color: 'error.600', _dark: { color: 'error.300' } }} - onClick={onOpen} - > - {t('nodes.resetWorkflow')} + } onClick={onClick}> + {t('nodes.newWorkflow')} { - {t('nodes.resetWorkflow')} + {t('nodes.newWorkflow')} - {t('nodes.resetWorkflowDesc')} - {t('nodes.resetWorkflowDesc2')} + {t('nodes.newWorkflowDesc')} + {t('nodes.newWorkflowDesc2')} @@ -75,7 +79,7 @@ const ResetWorkflowEditorMenuItem = () => { - @@ -85,4 +89,4 @@ const ResetWorkflowEditorMenuItem = () => { ); }; -export default memo(ResetWorkflowEditorMenuItem); +export default memo(NewWorkflowMenuItem); diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx index a19b9cd6b5..c07bb8f5cd 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx +++ b/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 && } - +