From 099082abc10b60edecaeb097763981391d7ef008 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 4 Jul 2023 14:52:00 +1000
Subject: [PATCH] feat(ui): model manager tab naming tweaks

---
 .../ui/components/FloatingGalleryButton.tsx   |  5 +-
 .../src/features/ui/components/InvokeTabs.tsx |  7 +-
 .../tabs/ModelManager/ModelManagerTab.tsx     | 70 +++++++++----------
 .../web/src/features/ui/store/tabMap.ts       |  2 +-
 4 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
index 1bab4abe02..af3eb72d8d 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@@ -7,18 +7,17 @@ import { isEqual } from 'lodash-es';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdPhotoLibrary } from 'react-icons/md';
-import { InvokeTabName } from '../store/tabMap';
 import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
+import { NO_GALLERY_TABS } from './InvokeTabs';
 
 const floatingGalleryButtonSelector = createSelector(
   [activeTabNameSelector, uiSelector],
   (activeTabName, ui) => {
     const { shouldPinGallery, shouldShowGallery } = ui;
-    const noGalleryTabs: InvokeTabName[] = ['modelmanager'];
 
     return {
       shouldPinGallery,
-      shouldShowGalleryButton: noGalleryTabs.includes(activeTabName)
+      shouldShowGalleryButton: NO_GALLERY_TABS.includes(activeTabName)
         ? false
         : !shouldShowGallery,
     };
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 72722ea30e..6986ded0a7 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -72,7 +72,7 @@ const tabs: InvokeTabInfo[] = [
   //   content: <BatchTab />,
   // },
   {
-    id: 'modelmanager',
+    id: 'modelManager',
     icon: <Icon as={FaCube} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ModelManagerTab />,
   },
@@ -92,6 +92,7 @@ const enabledTabsSelector = createSelector(
 
 const MIN_GALLERY_WIDTH = 300;
 const DEFAULT_GALLERY_PCT = 20;
+export const NO_GALLERY_TABS: InvokeTabName[] = ['modelManager'];
 
 const InvokeTabs = () => {
   const activeTab = useAppSelector(activeTabIndexSelector);
@@ -101,8 +102,6 @@ const InvokeTabs = () => {
     (state: RootState) => state.lightbox.isLightboxOpen
   );
 
-  const noGalleryTabs: InvokeTabName[] = ['modelmanager'];
-
   const { shouldPinGallery, shouldPinParametersPanel, shouldShowGallery } =
     useAppSelector((state: RootState) => state.ui);
 
@@ -207,7 +206,7 @@ const InvokeTabs = () => {
         </Panel>
         {shouldPinGallery &&
           shouldShowGallery &&
-          !noGalleryTabs.includes(activeTabName) && (
+          !NO_GALLERY_TABS.includes(activeTabName) && (
             <>
               <ResizeHandle />
               <Panel
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
index b0c60d96ad..8d675b17c8 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
@@ -5,7 +5,7 @@ import AddModelsPanel from './subpanels/AddModelsPanel';
 import MergeModelsPanel from './subpanels/MergeModelsPanel';
 import ModelManagerPanel from './subpanels/ModelManagerPanel';
 
-type ModelManagerTabName = 'modelmanager' | 'add_models' | 'merge_models';
+type ModelManagerTabName = 'modelManager' | 'addModels' | 'mergeModels';
 
 type ModelManagerTabInfo = {
   id: ModelManagerTabName;
@@ -15,57 +15,57 @@ type ModelManagerTabInfo = {
 
 const modelManagerTabs: ModelManagerTabInfo[] = [
   {
-    id: 'modelmanager',
+    id: 'modelManager',
     label: i18n.t('modelManager.modelManager'),
     content: <ModelManagerPanel />,
   },
   {
-    id: 'add_models',
+    id: 'addModels',
     label: i18n.t('modelManager.addModel'),
     content: <AddModelsPanel />,
   },
   {
-    id: 'merge_models',
+    id: 'mergeModels',
     label: i18n.t('modelManager.mergeModels'),
     content: <MergeModelsPanel />,
   },
 ];
 
-const ModelManagerTab = () => {
-  const renderTabsList = () => {
-    const modelManagerTabListsToRender: ReactNode[] = [];
-    modelManagerTabs.forEach((modelManagerTab) => {
-      modelManagerTabListsToRender.push(
-        <Tab key={modelManagerTab.id}>{modelManagerTab.label}</Tab>
-      );
-    });
-
-    return (
-      <TabList
-        sx={{
-          w: '100%',
-          color: 'base.200',
-          flexDirection: 'row',
-          borderBottomWidth: 2,
-          borderColor: 'accent.700',
-        }}
-      >
-        {modelManagerTabListsToRender}
-      </TabList>
+const renderTabsList = () => {
+  const modelManagerTabListsToRender: ReactNode[] = [];
+  modelManagerTabs.forEach((modelManagerTab) => {
+    modelManagerTabListsToRender.push(
+      <Tab key={modelManagerTab.id}>{modelManagerTab.label}</Tab>
     );
-  };
+  });
 
-  const renderTabPanels = () => {
-    const modelManagerTabPanelsToRender: ReactNode[] = [];
-    modelManagerTabs.forEach((modelManagerTab) => {
-      modelManagerTabPanelsToRender.push(
-        <TabPanel key={modelManagerTab.id}>{modelManagerTab.content}</TabPanel>
-      );
-    });
+  return (
+    <TabList
+      sx={{
+        w: '100%',
+        color: 'base.200',
+        flexDirection: 'row',
+        borderBottomWidth: 2,
+        borderColor: 'accent.700',
+      }}
+    >
+      {modelManagerTabListsToRender}
+    </TabList>
+  );
+};
 
-    return <TabPanels sx={{ p: 2 }}>{modelManagerTabPanelsToRender}</TabPanels>;
-  };
+const renderTabPanels = () => {
+  const modelManagerTabPanelsToRender: ReactNode[] = [];
+  modelManagerTabs.forEach((modelManagerTab) => {
+    modelManagerTabPanelsToRender.push(
+      <TabPanel key={modelManagerTab.id}>{modelManagerTab.content}</TabPanel>
+    );
+  });
 
+  return <TabPanels sx={{ p: 2 }}>{modelManagerTabPanelsToRender}</TabPanels>;
+};
+
+const ModelManagerTab = () => {
   return (
     <Tabs
       isLazy
diff --git a/invokeai/frontend/web/src/features/ui/store/tabMap.ts b/invokeai/frontend/web/src/features/ui/store/tabMap.ts
index a2d64f0ab9..7c85805fe7 100644
--- a/invokeai/frontend/web/src/features/ui/store/tabMap.ts
+++ b/invokeai/frontend/web/src/features/ui/store/tabMap.ts
@@ -7,7 +7,7 @@ export const tabMap = [
   'batch',
   // 'postprocessing',
   // 'training',
-  'modelmanager',
+  'modelManager',
 ] as const;
 
 export type InvokeTabName = (typeof tabMap)[number];