feat(ui): restore upload workflow button

Author: psychedelicious

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

@@ -1699,7 +1699,6 @@
         "openWorkflow": "Open Workflow",
         "updated": "Updated",
         "uploadWorkflow": "Load from File",
-        "uploadAndSaveWorkflow": "Upload to Library",
         "deleteWorkflow": "Delete Workflow",
         "deleteWorkflow2": "Are you sure you want to delete this workflow? This cannot be undone.",
         "unnamedWorkflow": "Unnamed Workflow",

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

@@ -11,6 +11,7 @@ import {
   workflowSelectedTagsRese,
   workflowSelectedTagToggled,
 } from 'features/nodes/store/workflowSlice';
+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';
@@ -129,6 +130,8 @@ export const WorkflowLibrarySideNav = () => {
           </Flex>
         </Collapse>
       </Flex>
+      <Spacer />
+      <UploadWorkflowButton />
     </Flex>
   );
 };

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

@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { Button } from '@invoke-ai/ui-library';
 import { useWorkflowLibraryModal } from 'features/nodes/store/workflowLibraryModal';
 import { saveWorkflowAs } from 'features/workflowLibrary/components/SaveWorkflowAsDialog';
 import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
@@ -7,7 +7,7 @@ import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { PiUploadSimpleBold } from 'react-icons/pi';
 
-const UploadWorkflowButton = () => {
+export const UploadWorkflowButton = memo(() => {
   const { t } = useTranslation();
   const resetRef = useRef<() => void>(null);
   const workflowLibraryModal = useWorkflowLibraryModal();
@@ -38,18 +38,13 @@ const UploadWorkflowButton = () => {
   });
   return (
     <>
-      <IconButton
-        aria-label={t('workflows.uploadAndSaveWorkflow')}
-        tooltip={t('workflows.uploadAndSaveWorkflow')}
-        icon={<PiUploadSimpleBold />}
-        {...getRootProps()}
-        pointerEvents="auto"
-        variant="ghost"
-      />
+      <Button leftIcon={<PiUploadSimpleBold />} {...getRootProps()} pointerEvents="auto" variant="ghost">
+        {t('workflows.uploadWorkflow')}
+      </Button>
 
       <input {...getInputProps()} />
     </>
   );
-};
+});
 
-export default memo(UploadWorkflowButton);
+UploadWorkflowButton.displayName = 'UploadWorkflowButton';