feat(ui): restore new workflow button

Author: psychedelicious

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

@@ -12,6 +12,7 @@ import {
   workflowSelectedTagToggled,
 } from 'features/nodes/store/workflowSlice';
 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';
@@ -141,6 +142,7 @@ export const WorkflowLibrarySideNav = () => {
         </Collapse>
       </Flex>
       <Spacer />
+      <NewWorkflowButton />
       <UploadWorkflowButton />
     </Flex>
   );

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

@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { Button } from '@invoke-ai/ui-library';
 import { useNewWorkflow } from 'features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog';
 import type { MouseEvent } from 'react';
 import { memo, useCallback } from 'react';
@@ -20,13 +20,9 @@ export const NewWorkflowButton = memo(() => {
   );
 
   return (
-    <IconButton
-      onClick={onClickNewWorkflow}
-      variant="ghost"
-      aria-label={t('nodes.newWorkflow')}
-      tooltip={t('nodes.newWorkflow')}
-      icon={<PiFilePlusBold />}
-    />
+    <Button onClick={onClickNewWorkflow} variant="ghost" leftIcon={<PiFilePlusBold />}>
+      {t('nodes.newWorkflow')}
+    </Button>
   );
 });
 

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

@@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { buildUseDisclosure } from 'common/hooks/useBoolean';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
+import { useWorkflowLibraryModal } from 'features/nodes/store/workflowLibraryModal';
 import { selectWorkflowIsTouched, workflowModeChanged } from 'features/nodes/store/workflowSlice';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
@@ -15,10 +16,12 @@ export const useNewWorkflow = () => {
   const dispatch = useAppDispatch();
   const dialog = useDialogState();
   const isTouched = useAppSelector(selectWorkflowIsTouched);
+  const workflowLibraryModal = useWorkflowLibraryModal();
 
   const createImmediate = useCallback(() => {
     dispatch(nodeEditorReset());
     dispatch(workflowModeChanged('edit'));
+    workflowLibraryModal.close();
 
     toast({
       id: 'NEW_WORKFLOW_CREATED',
@@ -27,7 +30,7 @@ export const useNewWorkflow = () => {
     });
 
     dialog.close();
-  }, [dialog, dispatch, t]);
+  }, [dialog, dispatch, t, workflowLibraryModal]);
 
   const createWithDialog = useCallback(() => {
     if (!isTouched) {