feat(ui): add support to disableTabs

invokeai/frontend/web/index.d.ts

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { IAIPopoverProps } from '../web/src/common/components/IAIPopover';
 import { IAIIconButtonProps } from '../web/src/common/components/IAIIconButton';
+import { InvokeTabName } from 'features/ui/store/tabMap';
 
 export {};
 
@@ -69,6 +70,7 @@ declare module '@invoke-ai/invoke-ai-ui' {
 interface InvokeProps extends PropsWithChildren {
   apiUrl?: string;
   disabledPanels?: string[];
+  disabledTabs?: InvokeTabName[];
 }
 
 declare function Invoke(props: InvokeProps): JSX.Element;

invokeai/frontend/web/src/app/App.tsx

@@ -15,13 +15,15 @@ import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
 import { useAppDispatch, useAppSelector } from './storeHooks';
 import { PropsWithChildren, useEffect } from 'react';
-import { setDisabledPanels } from 'features/ui/store/uiSlice';
+import { setDisabledPanels, setDisabledTabs } from 'features/ui/store/uiSlice';
+import { InvokeTabName } from 'features/ui/store/tabMap';
 
 keepGUIAlive();
 
 interface Props extends PropsWithChildren {
   options: {
     disabledPanels: string[];
+    disabledTabs: InvokeTabName[];
   };
 }
 
@@ -36,6 +38,10 @@ const App = (props: Props) => {
     dispatch(setDisabledPanels(props.options.disabledPanels));
   }, [dispatch, props.options.disabledPanels]);
 
+  useEffect(() => {
+    dispatch(setDisabledTabs(props.options.disabledTabs));
+  }, [dispatch, props.options.disabledTabs]);
+
   useEffect(() => {
     setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');
   }, [setColorMode, currentTheme]);

invokeai/frontend/web/src/component.tsx

@@ -4,6 +4,7 @@ import { PersistGate } from 'redux-persist/integration/react';
 import { store } from './app/store';
 import { persistor } from './persistor';
 import { OpenAPI } from 'services/api';
+import { InvokeTabName } from 'features/ui/store/tabMap';
 import '@fontsource/inter/100.css';
 import '@fontsource/inter/200.css';
 import '@fontsource/inter/300.css';
@@ -25,11 +26,13 @@ const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
 interface Props extends PropsWithChildren {
   apiUrl?: string;
   disabledPanels?: string[];
+  disabledTabs?: InvokeTabName[];
 }
 
 export default function Component({
   apiUrl,
   disabledPanels = [],
+  disabledTabs = [],
   children,
 }: Props) {
   useEffect(() => {
@@ -42,7 +45,7 @@ export default function Component({
         <PersistGate loading={<Loading />} persistor={persistor}>
           <React.Suspense fallback={<Loading showText />}>
             <ThemeLocaleProvider>
-              <App options={{ disabledPanels }}>{children}</App>
+              <App options={{ disabledPanels, disabledTabs }}>{children}</App>
             </ThemeLocaleProvider>
           </React.Suspense>
         </PersistGate>

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -45,38 +45,41 @@ const tabIconStyles: ChakraProps['sx'] = {
   boxSize: 6,
 };
 
-const tabInfo: InvokeTabInfo[] = [
-  {
-    id: 'txt2img',
-    icon: <Icon as={MdTextFields} sx={tabIconStyles} />,
-    workarea: <TextToImageWorkarea />,
-  },
-  {
-    id: 'img2img',
-    icon: <Icon as={MdPhotoLibrary} sx={tabIconStyles} />,
-    workarea: <ImageToImageWorkarea />,
-  },
-  {
-    id: 'unifiedCanvas',
-    icon: <Icon as={MdGridOn} sx={tabIconStyles} />,
-    workarea: <UnifiedCanvasWorkarea />,
-  },
-  {
-    id: 'nodes',
-    icon: <Icon as={MdDeviceHub} sx={tabIconStyles} />,
-    workarea: <NodesWIP />,
-  },
-  {
-    id: 'postprocessing',
-    icon: <Icon as={MdPhotoFilter} sx={tabIconStyles} />,
-    workarea: <PostProcessingWIP />,
-  },
-  {
-    id: 'training',
-    icon: <Icon as={MdFlashOn} sx={tabIconStyles} />,
-    workarea: <TrainingWIP />,
-  },
-];
+const buildTabs = (disabledTabs: InvokeTabName[]): InvokeTabInfo[] => {
+  const tabs: InvokeTabInfo[] = [
+    {
+      id: 'txt2img',
+      icon: <Icon as={MdTextFields} sx={tabIconStyles} />,
+      workarea: <TextToImageWorkarea />,
+    },
+    {
+      id: 'img2img',
+      icon: <Icon as={MdPhotoLibrary} sx={tabIconStyles} />,
+      workarea: <ImageToImageWorkarea />,
+    },
+    {
+      id: 'unifiedCanvas',
+      icon: <Icon as={MdGridOn} sx={tabIconStyles} />,
+      workarea: <UnifiedCanvasWorkarea />,
+    },
+    {
+      id: 'nodes',
+      icon: <Icon as={MdDeviceHub} sx={tabIconStyles} />,
+      workarea: <NodesWIP />,
+    },
+    {
+      id: 'postprocessing',
+      icon: <Icon as={MdPhotoFilter} sx={tabIconStyles} />,
+      workarea: <PostProcessingWIP />,
+    },
+    {
+      id: 'training',
+      icon: <Icon as={MdFlashOn} sx={tabIconStyles} />,
+      workarea: <TrainingWIP />,
+    },
+  ];
+  return tabs.filter((tab) => !disabledTabs.includes(tab.id));
+};
 
 export default function InvokeTabs() {
   const activeTab = useAppSelector(activeTabIndexSelector);
@@ -85,13 +88,10 @@ export default function InvokeTabs() {
     (state: RootState) => state.lightbox.isLightboxOpen
   );
 
-  const shouldPinGallery = useAppSelector(
-    (state: RootState) => state.ui.shouldPinGallery
-  );
+  const { shouldPinGallery, disabledTabs, shouldPinParametersPanel } =
+    useAppSelector((state: RootState) => state.ui);
 
-  const shouldPinParametersPanel = useAppSelector(
-    (state: RootState) => state.ui.shouldPinParametersPanel
-  );
+  const activeTabs = buildTabs(disabledTabs);
 
   const { t } = useTranslation();
 
@@ -142,7 +142,7 @@ export default function InvokeTabs() {
 
   const tabs = useMemo(
     () =>
-      tabInfo.map((tab) => (
+      activeTabs.map((tab) => (
         <Tooltip
           key={tab.id}
           hasArrow
@@ -157,13 +157,13 @@ export default function InvokeTabs() {
           </Tab>
         </Tooltip>
       )),
-    [t]
+    [t, activeTabs]
   );
 
   const tabPanels = useMemo(
     () =>
-      tabInfo.map((tab) => <TabPanel key={tab.id}>{tab.workarea}</TabPanel>),
-    []
+      activeTabs.map((tab) => <TabPanel key={tab.id}>{tab.workarea}</TabPanel>),
+    [activeTabs]
   );
 
   return (

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -17,6 +17,7 @@ const initialtabsState: UIState = {
   shouldPinGallery: true,
   shouldShowGallery: true,
   disabledParameterPanels: [],
+  disabledTabs: [],
 };
 
 const initialState: UIState = initialtabsState;
@@ -96,6 +97,9 @@ export const uiSlice = createSlice({
     setDisabledPanels: (state, action: PayloadAction<string[]>) => {
       state.disabledParameterPanels = action.payload;
     },
+    setDisabledTabs: (state, action: PayloadAction<InvokeTabName[]>) => {
+      state.disabledTabs = action.payload;
+    },
   },
 });
 
@@ -118,6 +122,7 @@ export const {
   toggleParametersPanel,
   toggleGalleryPanel,
   setDisabledPanels,
+  setDisabledTabs,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -1,3 +1,5 @@
+import { InvokeTabName } from './tabMap';
+
 export type AddNewModelType = 'ckpt' | 'diffusers' | null;
 
 export interface UIState {
@@ -14,4 +16,5 @@ export interface UIState {
   shouldPinGallery: boolean;
   shouldShowGallery: boolean;
   disabledParameterPanels: string[];
+  disabledTabs: InvokeTabName[];
 }