From 108ce06c623ea6e16d05e652577f4be7b25a5cb7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 12 May 2023 17:45:56 +1000
Subject: [PATCH] feat(ui): change custom header to be a prop instead of
 children

---
 .../frontend/web/src/app/components/App.tsx    | 18 ++++++------------
 .../web/src/app/components/InvokeAIUI.tsx      | 13 ++++++++++---
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index 57d507c89f..b920698f14 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -11,14 +11,8 @@ import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GalleryDrawer from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  memo,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { memo, ReactNode, useCallback, useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Loading from 'common/components/Loading/Loading';
 import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
@@ -27,16 +21,16 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
-import ProgressImagePreview from 'features/parameters/components/_ProgressImagePreview';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';
 
 const DEFAULT_CONFIG = {};
 
-interface Props extends PropsWithChildren {
+interface Props {
   config?: PartialAppConfig;
+  headerComponent?: ReactNode;
 }
 
-const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
+const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
   useToastWatcher();
   useGlobalHotkeys();
   const log = useLogger();
@@ -70,7 +64,7 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
           w={APP_WIDTH}
           h={APP_HEIGHT}
         >
-          {children || <SiteHeader />}
+          {headerComponent || <SiteHeader />}
           <Flex
             gap={4}
             w={{ base: '100vw', xl: 'full' }}
diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index f0303cfc99..442c1d967a 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -1,4 +1,10 @@
-import React, { lazy, memo, PropsWithChildren, useEffect } from 'react';
+import React, {
+  lazy,
+  memo,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+} from 'react';
 import { Provider } from 'react-redux';
 import { store } from 'app/store/store';
 import { OpenAPI } from 'services/api';
@@ -17,9 +23,10 @@ interface Props extends PropsWithChildren {
   apiUrl?: string;
   token?: string;
   config?: PartialAppConfig;
+  headerComponent?: ReactNode;
 }
 
-const InvokeAIUI = ({ apiUrl, token, config, children }: Props) => {
+const InvokeAIUI = ({ apiUrl, token, config, headerComponent }: Props) => {
   useEffect(() => {
     // configure API client token
     if (token) {
@@ -48,7 +55,7 @@ const InvokeAIUI = ({ apiUrl, token, config, children }: Props) => {
       <Provider store={store}>
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
-            <App config={config}>{children}</App>
+            <App config={config} headerComponent={headerComponent} />
           </ThemeLocaleProvider>
         </React.Suspense>
       </Provider>