feat(frontend): create theme provider

Author: jenny-s51

clients/ui/frontend/src/app/App.tsx

@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import ToastNotifications from '~/shared/components/ToastNotifications';
 import { useSettings } from '~/shared/hooks/useSettings';
-import { isMUITheme, Theme, AUTH_HEADER, MOCK_AUTH, isStandalone } from '~/shared/utilities/const';
+import { AUTH_HEADER, MOCK_AUTH, isStandalone } from '~/shared/utilities/const';
 import { logout } from '~/shared/utilities/appUtils';
 import { NamespaceSelectorContext } from '~/shared/context/NamespaceSelectorContext';
 import NavSidebar from './NavSidebar';
@@ -36,15 +36,6 @@ const App: React.FC = () => {
 
   const username = userSettings?.userId;
 
-  React.useEffect(() => {
-    // Apply the theme based on the value of STYLE_THEME
-    if (isMUITheme()) {
-      document.documentElement.classList.add(Theme.MUI);
-    } else {
-      document.documentElement.classList.remove(Theme.MUI);
-    }
-  }, []);
-
   React.useEffect(() => {
     if (MOCK_AUTH && username) {
       localStorage.setItem(AUTH_HEADER, username);

clients/ui/frontend/src/app/NavBar.tsx

@@ -21,15 +21,16 @@ import {
 import { SimpleSelect } from '@patternfly/react-templates';
 import { BarsIcon } from '@patternfly/react-icons';
 import { NamespaceSelectorContext } from '~/shared/context/NamespaceSelectorContext';
-import { isMUITheme } from '~/shared/utilities/const';
 import logoDarkTheme from '~/images/logo-dark-theme.svg';
+import { useThemeContext } from './ThemeContext';
 
 interface NavBarProps {
   username?: string;
   onLogout: () => void;
 }
 
 const NavBar: React.FC<NavBarProps> = ({ username, onLogout }) => {
+  const { isMUITheme } = useThemeContext();
   const { namespaces, preferredNamespace, updatePreferredNamespace } =
     React.useContext(NamespaceSelectorContext);
 
@@ -60,7 +61,7 @@ const NavBar: React.FC<NavBarProps> = ({ username, onLogout }) => {
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
-        {!isMUITheme() ? (
+        {!isMUITheme ? (
           <MastheadBrand>
             <MastheadLogo component="a">
               <Brand src={logoDarkTheme} alt="Kubeflow" heights={{ default: '36px' }} />

clients/ui/frontend/src/app/NavSidebar.tsx

@@ -9,8 +9,9 @@ import {
   PageSidebar,
   PageSidebarBody,
 } from '@patternfly/react-core';
-import { isMUITheme, LOGO_LIGHT } from '~/shared/utilities/const';
+import { LOGO_LIGHT } from '~/shared/utilities/const';
 import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes';
+import { useThemeContext } from './ThemeContext';
 
 const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => (
   <NavItem key={item.label} data-id={item.label} itemId={item.label}>
@@ -42,13 +43,14 @@ const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
 
 const NavSidebar: React.FC = () => {
   const navData = useNavData();
+  const { isMUITheme } = useThemeContext();
 
   return (
     <PageSidebar>
       <PageSidebarBody>
         <Nav id="nav-primary-simple">
           <NavList id="nav-list-simple">
-            {isMUITheme() ? (
+            {isMUITheme ? (
               <NavItem>
                 <Brand
                   className="kubeflow_brand"

clients/ui/frontend/src/app/ThemeContext.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+type ThemeContextProps = {
+  isMUITheme: boolean;
+};
+
+export const ThemeContext = React.createContext({
+  isMUITheme: true,
+});
+
+export const useThemeContext = (): ThemeContextProps => React.useContext(ThemeContext);

clients/ui/frontend/src/app/ThemeProvider.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createTheme, Theme as MUITheme } from '@mui/material';
+import { isMUITheme, Theme } from '~/shared/utilities/const';
+import { ThemeContext } from './ThemeContext';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  theme?: MUITheme;
+};
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, theme }) => {
+  const themeValue = React.useMemo(() => ({ isMUITheme: isMUITheme() }), []);
+  const createMUITheme = createTheme({ cssVariables: true });
+
+  React.useEffect(() => {
+    // Apply the theme based on the value of STYLE_THEME
+    if (isMUITheme()) {
+      document.documentElement.classList.add(Theme.MUI);
+    } else {
+      document.documentElement.classList.remove(Theme.MUI);
+    }
+  }, []);
+
+  const appliedTheme = theme || createMUITheme;
+
+  return (
+    <ThemeContext.Provider value={themeValue}>
+      {isMUITheme() ? <ThemeProvider theme={appliedTheme}>{children}</ThemeProvider> : children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryCoreLoader.tsx

@@ -7,8 +7,8 @@ import { ProjectObjectType, typedEmptyImage } from '~/shared/components/design/u
 import { ModelRegistryContextProvider } from '~/app/context/ModelRegistryContext';
 import TitleWithIcon from '~/shared/components/design/TitleWithIcon';
 import WhosMyAdministrator from '~/shared/components/WhosMyAdministrator';
-import { isMUITheme } from '~/shared/utilities/const';
 import KubeflowDocs from '~/shared/components/KubeflowDocs';
+import { useThemeContext } from '~/app/ThemeContext';
 import EmptyModelRegistryState from './screens/components/EmptyModelRegistryState';
 import InvalidModelRegistry from './screens/InvalidModelRegistry';
 import ModelRegistrySelectorNavigator from './screens/ModelRegistrySelectorNavigator';
@@ -36,6 +36,7 @@ const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({
     preferredModelRegistry,
     updatePreferredModelRegistry,
   } = React.useContext(ModelRegistrySelectorContext);
+  const { isMUITheme } = useThemeContext();
 
   const modelRegistryFromRoute = modelRegistries.find((mr) => mr.name === modelRegistry);
 
@@ -65,16 +66,16 @@ const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({
       emptyStatePage: (
         <EmptyModelRegistryState
           testid="empty-model-registries-state"
-          title={isMUITheme() ? 'Deploy a model registry' : 'Request access to model registries'}
+          title={isMUITheme ? 'Deploy a model registry' : 'Request access to model registries'}
           description={
-            isMUITheme()
+            isMUITheme
               ? 'To deploy a new model registry, follow the instructions in the docs below.'
               : 'To request a new model registry, or to request permission to access an existing model registry, contact your administrator.'
           }
           headerIcon={() => (
             <img src={typedEmptyImage(ProjectObjectType.registeredModels)} alt="" />
           )}
-          customAction={isMUITheme() ? <KubeflowDocs /> : <WhosMyAdministrator />}
+          customAction={isMUITheme ? <KubeflowDocs /> : <WhosMyAdministrator />}
         />
       ),
       headerContent: null,
@@ -103,14 +104,14 @@ const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({
   return (
     <ApplicationsPage
       title={
-        !isMUITheme() ? (
+        !isMUITheme ? (
           <TitleWithIcon title="Model Registry" objectType={ProjectObjectType.registeredModels} />
         ) : (
           'Model Registry'
         )
       }
       description={
-        !isMUITheme() ? (
+        !isMUITheme ? (
           'Select a model registry to view and manage your registered models. Model registries provide a structured and organized way to store, share, version, deploy, and track models.'
         ) : (
           <Divider />

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx

@@ -15,7 +15,7 @@ import { CheckIcon, ExternalLinkAltIcon, TimesIcon } from '@patternfly/react-ico
 import { KeyValuePair } from '~/shared/types';
 import { EitherNotBoth } from '~/shared/typeHelpers';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
-import { isMUITheme } from '~/shared/utilities/const';
+import { useThemeContext } from '~/app/ThemeContext';
 import { isValidHttpUrl } from './utils';
 
 type ModelPropertiesTableRowProps = {
@@ -47,6 +47,8 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
   saveEditedProperty,
 }) => {
   const { key, value } = keyValuePair;
+  const { isMUITheme } = useThemeContext();
+
   const [unsavedKey, setUnsavedKey] = React.useState(key);
   const [unsavedValue, setUnsavedValue] = React.useState(value);
 
@@ -128,7 +130,7 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       <Td dataLabel="Key" width={45} modifier="breakWord">
         {isEditing ? (
           <>
-            {isMUITheme() ? (
+            {isMUITheme ? (
               <FormFieldset className="tr-fieldset-wrapper" component={propertyKeyInput} />
             ) : (
               propertyKeyInput
@@ -148,7 +150,7 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       </Td>
       <Td dataLabel="Value" width={45} modifier="breakWord">
         {isEditing ? (
-          isMUITheme() ? (
+          isMUITheme ? (
             <FormFieldset className="tr-fieldset-wrapper" component={propertyValueInput} />
           ) : (
             propertyValueInput

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistry.tsx

@@ -3,9 +3,9 @@ import { Divider } from '@patternfly/react-core';
 import ApplicationsPage from '~/shared/components/ApplicationsPage';
 import useRegisteredModels from '~/app/hooks/useRegisteredModels';
 import useModelVersions from '~/app/hooks/useModelVersions';
-import { isMUITheme } from '~/shared/utilities/const';
 import TitleWithIcon from '~/shared/components/design/TitleWithIcon';
 import { ProjectObjectType } from '~/shared/components/design/utils';
+import { useThemeContext } from '~/app/ThemeContext';
 import ModelRegistrySelectorNavigator from './ModelRegistrySelectorNavigator';
 import RegisteredModelListView from './RegisteredModels/RegisteredModelListView';
 import { modelRegistryUrl } from './routeUtils';
@@ -25,6 +25,7 @@ const ModelRegistry: React.FC<ModelRegistryProps> = ({ ...pageProps }) => {
   const [registeredModels, modelsLoaded, modelsLoadError, refreshModels] = useRegisteredModels();
   const [modelVersions, versionsLoaded, versionsLoadError, refreshVersions] = useModelVersions();
 
+  const { isMUITheme } = useThemeContext();
   const loaded = modelsLoaded && versionsLoaded;
   const loadError = modelsLoadError || versionsLoadError;
 
@@ -37,14 +38,14 @@ const ModelRegistry: React.FC<ModelRegistryProps> = ({ ...pageProps }) => {
     <ApplicationsPage
       {...pageProps}
       title={
-        !isMUITheme() ? (
+        !isMUITheme ? (
           <TitleWithIcon title="Model Registry" objectType={ProjectObjectType.registeredModels} />
         ) : (
           'Model Registry'
         )
       }
       description={
-        !isMUITheme() ? (
+        !isMUITheme ? (
           'Select a model registry to view and manage your registered models. Model registries provide a structured and organized way to store, share, version, deploy, and track models.'
         ) : (
           <Divider />

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistrySelector.tsx

@@ -21,8 +21,8 @@ import { ModelRegistrySelectorContext } from '~/app/context/ModelRegistrySelecto
 import { ModelRegistry } from '~/app/types';
 import SimpleSelect, { SimpleSelectOption } from '~/shared/components/SimpleSelect';
 import WhosMyAdministrator from '~/shared/components/WhosMyAdministrator';
-import { isMUITheme } from '~/shared/utilities/const';
 import KubeflowDocs from '~/shared/components/KubeflowDocs';
+import { useThemeContext } from '~/app/ThemeContext';
 
 const MODEL_REGISTRY_FAVORITE_STORAGE_KEY = 'kubeflow.dashboard.model.registry.favorite';
 
@@ -42,6 +42,7 @@ const ModelRegistrySelector: React.FC<ModelRegistrySelectorProps> = ({
   const { modelRegistries, updatePreferredModelRegistry } = React.useContext(
     ModelRegistrySelectorContext,
   );
+  const { isMUITheme } = useThemeContext();
 
   const selection = modelRegistries.find((mr) => mr.name === modelRegistry);
   const [favorites, setFavorites] = useBrowserStorage<string[]>(
@@ -175,7 +176,7 @@ const ModelRegistrySelector: React.FC<ModelRegistrySelectorProps> = ({
         </FlexItem>
       )}
       <FlexItem align={{ default: 'alignRight' }}>
-        {isMUITheme() ? (
+        {isMUITheme ? (
           <KubeflowDocs
             buttonLabel="Need another registry?"
             linkTestId="model-registry-help-button"

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx

@@ -34,8 +34,8 @@ import { asEnumMember } from '~/shared/utilities/utils';
 import ModelVersionsTable from '~/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable';
 import SimpleSelect from '~/shared/components/SimpleSelect';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
-import { isMUITheme } from '~/shared/utilities/const';
 import { filterArchiveVersions, filterLiveVersions } from '~/app/utils';
+import { useThemeContext } from '~/app/ThemeContext';
 
 type ModelVersionListViewProps = {
   modelVersions: ModelVersion[];
@@ -57,6 +57,7 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
   const archiveModelVersions = filterArchiveVersions(modelVersions);
   const navigate = useNavigate();
   const { preferredModelRegistry } = React.useContext(ModelRegistrySelectorContext);
+  const { isMUITheme } = useThemeContext();
 
   const [searchType, setSearchType] = React.useState<SearchType>(SearchType.KEYWORD);
   const [search, setSearch] = React.useState('');
@@ -158,7 +159,7 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
                   />
                 </ToolbarFilter>
                 <ToolbarItem>
-                  {isMUITheme() ? (
+                  {isMUITheme ? (
                     <FormFieldset
                       className="toolbar-fieldset-wrapper"
                       component={