From 81817532f8fbed227fa5914bc5f240406452d22b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 8 Jul 2023 23:48:32 +1000
Subject: [PATCH] fix(ui): fix tab translations

model manager was using the wrong key due to the tabs render func subbing values in. made translation key a prop of a tab item.
---
 .../web/src/features/ui/components/InvokeTabs.tsx      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index c618997f03..9eb99afa3e 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -41,6 +41,7 @@ import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
 
 export interface InvokeTabInfo {
   id: InvokeTabName;
+  translationKey: string;
   icon: ReactNode;
   content: ReactNode;
 }
@@ -48,26 +49,31 @@ export interface InvokeTabInfo {
 const tabs: InvokeTabInfo[] = [
   {
     id: 'txt2img',
+    translationKey: 'common.txt2img',
     icon: <Icon as={FaFont} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <TextToImageTab />,
   },
   {
     id: 'img2img',
+    translationKey: 'common.img2img',
     icon: <Icon as={FaImage} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ImageTab />,
   },
   {
     id: 'unifiedCanvas',
+    translationKey: 'common.unifiedCanvas',
     icon: <Icon as={MdGridOn} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <UnifiedCanvasTab />,
   },
   {
     id: 'nodes',
+    translationKey: 'common.nodes',
     icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <NodesTab />,
   },
   {
     id: 'modelManager',
+    translationKey: 'modelManager.modelManager',
     icon: <Icon as={FaCube} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ModelManagerTab />,
   },
@@ -146,12 +152,12 @@ const InvokeTabs = () => {
         <Tooltip
           key={tab.id}
           hasArrow
-          label={String(t(`common.${tab.id}` as ResourceKey))}
+          label={String(t(tab.translationKey as ResourceKey))}
           placement="end"
         >
           <Tab onClick={handleClickTab}>
             <VisuallyHidden>
-              {String(t(`common.${tab.id}` as ResourceKey))}
+              {String(t(tab.translationKey as ResourceKey))}
             </VisuallyHidden>
             {tab.icon}
           </Tab>