From b6b22dc7994942534a2b7b39bbcc4597cc679544 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 12 Jul 2023 07:50:11 +1200
Subject: [PATCH] feat: Update Reload Schema button

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../components/panels/TopCenterPanel.tsx      | 14 +++--------
 .../components/ui/ReloadSchemaButton.tsx      | 25 +++++++++++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 173cd1fa51..f169b742e8 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -679,6 +679,7 @@
         "swapSizes": "Swap Sizes"
     },
     "nodes": {
+        "reloadSchema": "Reload Schema",
         "saveNodes": "Save Nodes",
         "loadNodes": "Load Nodes"
     }
diff --git a/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx
index fab68d7599..10e59f2af9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx
@@ -1,27 +1,19 @@
 import { HStack } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
-import IAIButton from 'common/components/IAIButton';
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { Panel } from 'reactflow';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import LoadNodesButton from '../ui/LoadNodesButton';
 import NodeInvokeButton from '../ui/NodeInvokeButton';
+import ReloadSchemaButton from '../ui/ReloadSchemaButton';
 import SaveNodesButton from '../ui/SaveNodesButton';
 
 const TopCenterPanel = () => {
-  const dispatch = useAppDispatch();
-
-  const handleReloadSchema = useCallback(() => {
-    dispatch(receivedOpenAPISchema());
-  }, [dispatch]);
-
   return (
     <Panel position="top-center">
       <HStack>
         <NodeInvokeButton />
         <CancelButton />
-        <IAIButton onClick={handleReloadSchema}>Reload Schema</IAIButton>
+        <ReloadSchemaButton />
         <SaveNodesButton />
         <LoadNodesButton />
       </HStack>
diff --git a/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx b/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx
new file mode 100644
index 0000000000..613297d217
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx
@@ -0,0 +1,25 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BiRefresh } from 'react-icons/bi';
+import { receivedOpenAPISchema } from 'services/api/thunks/schema';
+
+export default function ReloadSchemaButton() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const handleReloadSchema = useCallback(() => {
+    dispatch(receivedOpenAPISchema());
+  }, [dispatch]);
+
+  return (
+    <IAIIconButton
+      icon={<BiRefresh />}
+      fontSize={24}
+      tooltip={t('nodes.reloadSchema')}
+      aria-label={t('nodes.reloadSchema')}
+      onClick={handleReloadSchema}
+    />
+  );
+}