From cd11d08d74dffd1a72b437e0401cd464be2901e5 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  |  3 +++
 .../components/panels/TopCenterPanel.tsx      | 17 ++++---------
 .../components/ui/ReloadSchemaButton.tsx      | 25 +++++++++++++++++++
 3 files changed, 33 insertions(+), 12 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 b904219e9c..1a902a88b7 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -674,5 +674,8 @@
         "showProgressImages": "Show Progress Images",
         "hideProgressImages": "Hide Progress Images",
         "swapSizes": "Swap Sizes"
+    },
+    "nodes": {
+        "reloadSchema": "Reload Schema"
     }
 }
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 223791e4ad..77062f16e7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx
@@ -1,25 +1,18 @@
 import { HStack } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
-import IAIButton from 'common/components/IAIButton';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { Panel } from 'reactflow';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
-import NodeInvokeButton from '../ui/NodeInvokeButton';
+
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
+import NodeInvokeButton from '../ui/NodeInvokeButton';
+import ReloadSchemaButton from '../ui/ReloadSchemaButton';
 
 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 />
       </HStack>
     </Panel>
   );
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}
+    />
+  );
+}