feat(ui): split out new workflow dialog logic, use it in list menu, restore new workflow dialog

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

@@ -1,22 +1,21 @@
-import { ConfirmationAlertDialog, Flex, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { ConfirmationAlertDialog, Flex, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { buildUseDisclosure } from 'common/hooks/useBoolean';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { selectWorkflowIsTouched, workflowModeChanged } from 'features/nodes/store/workflowSlice';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-type Props = {
-  renderButton: (onClick: () => void) => JSX.Element;
-};
+const [useDialogState] = buildUseDisclosure(false);
 
-export const NewWorkflowConfirmationAlertDialog = memo((props: Props) => {
+export const useNewWorkflow = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const dialog = useDialogState();
   const isTouched = useAppSelector(selectWorkflowIsTouched);
 
-  const handleNewWorkflow = useCallback(() => {
+  const createImmediate = useCallback(() => {
     dispatch(nodeEditorReset());
     dispatch(workflowModeChanged('edit'));
 
@@ -26,34 +25,41 @@ export const NewWorkflowConfirmationAlertDialog = memo((props: Props) => {
       status: 'success',
     });
 
-    onClose();
-  }, [dispatch, onClose, t]);
+    dialog.close();
+  }, [dialog, dispatch, t]);
 
-  const onClick = useCallback(() => {
+  const createWithDialog = useCallback(() => {
     if (!isTouched) {
-      handleNewWorkflow();
+      createImmediate();
       return;
     }
-    onOpen();
-  }, [handleNewWorkflow, isTouched, onOpen]);
+    dialog.open();
+  }, [dialog, createImmediate, isTouched]);
+
+  return {
+    createImmediate,
+    createWithDialog,
+  } as const;
+};
+
+export const NewWorkflowConfirmationAlertDialog = memo(() => {
+  const { t } = useTranslation();
+  const dialog = useDialogState();
+  const newWorkflow = useNewWorkflow();
 
   return (
-    <>
-      {props.renderButton(onClick)}
-
-      <ConfirmationAlertDialog
-        isOpen={isOpen}
-        onClose={onClose}
-        title={t('nodes.newWorkflow')}
-        acceptCallback={handleNewWorkflow}
-        useInert={false}
-      >
-        <Flex flexDir="column" gap={2}>
-          <Text>{t('nodes.newWorkflowDesc')}</Text>
-          <Text variant="subtext">{t('nodes.newWorkflowDesc2')}</Text>
-        </Flex>
-      </ConfirmationAlertDialog>
-    </>
+    <ConfirmationAlertDialog
+      isOpen={dialog.isOpen}
+      onClose={dialog.close}
+      title={t('nodes.newWorkflow')}
+      acceptCallback={newWorkflow.createImmediate}
+      useInert={false}
+    >
+      <Flex flexDir="column" gap={2}>
+        <Text>{t('nodes.newWorkflowDesc')}</Text>
+        <Text variant="subtext">{t('nodes.newWorkflowDesc2')}</Text>
+      </Flex>
+    </ConfirmationAlertDialog>
   );
 });
 

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

@@ -1,22 +1,18 @@
 import { MenuItem } from '@invoke-ai/ui-library';
-import { NewWorkflowConfirmationAlertDialog } from 'features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog';
-import { memo, useCallback } from 'react';
+import { useNewWorkflow } from 'features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFilePlusBold } from 'react-icons/pi';
 
 export const NewWorkflowMenuItem = memo(() => {
   const { t } = useTranslation();
+  const newWorkflow = useNewWorkflow();
 
-  const renderButton = useCallback(
-    (onClick: () => void) => (
-      <MenuItem as="button" icon={<PiFilePlusBold />} onClick={onClick}>
-        {t('nodes.newWorkflow')}
-      </MenuItem>
-    ),
-    [t]
+  return (
+    <MenuItem as="button" icon={<PiFilePlusBold />} onClick={newWorkflow.createWithDialog}>
+      {t('nodes.newWorkflow')}
+    </MenuItem>
   );
-
-  return <NewWorkflowConfirmationAlertDialog renderButton={renderButton} />;
 });
 
 NewWorkflowMenuItem.displayName = 'NewWorkflowMenuItem';