refactor(react): Provide option to skip importing theme in CustomThem…

…eProvider; rearrange toplevel components (datahub-project#9940)
adderllyer · Mar 8, 2024 · 28b11d4 · 28b11d4
1 parent 927775d
commit 28b11d4
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/datahub-web-react/src/AppConfigProvider.tsx b/datahub-web-react/src/AppConfigProvider.tsx
@@ -39,7 +39,11 @@ const AppConfigProvider = ({ children }: { children: React.ReactNode }) => {
 
     return (
         <AppConfigContext.Provider
-            value={{ config: appConfigData?.appConfig || DEFAULT_APP_CONFIG, refreshContext: refreshAppConfig }}
+            value={{
+                config: appConfigData?.appConfig || DEFAULT_APP_CONFIG,
+                loaded: !!appConfigData,
+                refreshContext: refreshAppConfig,
+            }}
         >
             {children}
         </AppConfigContext.Provider>

diff --git a/datahub-web-react/src/CustomThemeProvider.tsx b/datahub-web-react/src/CustomThemeProvider.tsx
@@ -4,23 +4,28 @@ import { Theme } from './conf/theme/types';
 import defaultThemeConfig from './conf/theme/theme_light.config.json';
 import { CustomThemeContext } from './customThemeContext';
 
-const CustomThemeProvider = ({ children }: { children: React.ReactNode }) => {
+interface Props {
+    children: React.ReactNode;
+    skipSetTheme?: boolean;
+}
+
+const CustomThemeProvider = ({ children, skipSetTheme }: Props) => {
     const [currentTheme, setTheme] = useState<Theme>(defaultThemeConfig);
 
     useEffect(() => {
         if (import.meta.env.DEV) {
             import(/* @vite-ignore */ `./conf/theme/${import.meta.env.REACT_APP_THEME_CONFIG}`).then((theme) => {
                 setTheme(theme);
             });
-        } else {
+        } else if (!skipSetTheme) {
             // Send a request to the server to get the theme config.
             fetch(`/assets/conf/theme/${import.meta.env.REACT_APP_THEME_CONFIG}`)
                 .then((response) => response.json())
                 .then((theme) => {
                     setTheme(theme);
                 });
         }
-    }, []);
+    }, [skipSetTheme]);
 
     return (
         <CustomThemeContext.Provider value={{ theme: currentTheme, updateTheme: setTheme }}>

diff --git a/datahub-web-react/src/app/ProtectedRoutes.tsx b/datahub-web-react/src/app/ProtectedRoutes.tsx
@@ -3,7 +3,6 @@ import { Switch, Route } from 'react-router-dom';
 import { Layout } from 'antd';
 import { HomePage } from './home/HomePage';
 import { SearchRoutes } from './SearchRoutes';
-import AppProviders from './AppProviders';
 import EmbedRoutes from './EmbedRoutes';
 import { PageRoutes } from '../conf/Global';
 
@@ -12,14 +11,12 @@ import { PageRoutes } from '../conf/Global';
  */
 export const ProtectedRoutes = (): JSX.Element => {
     return (
-        <AppProviders>
-            <Layout>
-                <Switch>
-                    <Route exact path="/" render={() => <HomePage />} />
-                    <Route path={PageRoutes.EMBED} render={() => <EmbedRoutes />} />
-                    <Route path="/*" render={() => <SearchRoutes />} />
-                </Switch>
-            </Layout>
-        </AppProviders>
+        <Layout>
+            <Switch>
+                <Route exact path="/" render={() => <HomePage />} />
+                <Route path={PageRoutes.EMBED} render={() => <EmbedRoutes />} />
+                <Route path="/*" render={() => <SearchRoutes />} />
+            </Switch>
+        </Layout>
     );
 };
diff --git a/datahub-web-react/src/app/Routes.tsx b/datahub-web-react/src/app/Routes.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Switch, Route, RouteProps } from 'react-router-dom';
 import { useReactiveVar } from '@apollo/client';
+import AppProviders from './AppProviders';
 import { LogIn } from './auth/LogIn';
 import { SignUp } from './auth/SignUp';
 import { ResetCredentials } from './auth/ResetCredentials';
@@ -36,7 +37,14 @@ export const Routes = (): JSX.Element => {
             <Route path={PageRoutes.LOG_IN} component={LogIn} />
             <Route path={PageRoutes.SIGN_UP} component={SignUp} />
             <Route path={PageRoutes.RESET_CREDENTIALS} component={ResetCredentials} />
-            <ProtectedRoute isLoggedIn={isLoggedIn} render={() => <ProtectedRoutes />} />
+            <ProtectedRoute
+                isLoggedIn={isLoggedIn}
+                render={() => (
+                    <AppProviders>
+                        <ProtectedRoutes />
+                    </AppProviders>
+                )}
+            />
             <Route path="/*" component={NoPageFound} />
         </Switch>
     );

diff --git a/datahub-web-react/src/appConfigContext.tsx b/datahub-web-react/src/appConfigContext.tsx
@@ -56,5 +56,6 @@ export const DEFAULT_APP_CONFIG = {
 
 export const AppConfigContext = React.createContext<{
     config: AppConfig;
+    loaded: boolean;
     refreshContext: () => void;
-}>({ config: DEFAULT_APP_CONFIG, refreshContext: () => null });
+}>({ config: DEFAULT_APP_CONFIG, loaded: false, refreshContext: () => null });