Use enum to control theme

Signed-off-by: Jenny <[email protected]> format fix build errors Signed-off-by: Jenny <[email protected]> fix import order and linting Signed-off-by: Jenny <[email protected]> Add process.env.STYLE_THEME
kubeflow · Nov 18, 2024 · ccd6543 · ccd6543
1 parent ee1c21c
commit ccd6543
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 109 deletions.
diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx
@@ -17,11 +17,11 @@ import {
   Spinner,
   Stack,
   StackItem,
-  Switch,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import ToastNotifications from '~/shared/components/ToastNotifications';
 import { useSettings } from '~/shared/hooks/useSettings';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 import NavSidebar from './NavSidebar';
 import AppRoutes from './AppRoutes';
 import { AppContext } from './AppContext';
@@ -41,22 +41,14 @@ const App: React.FC = () => {
     loadError: configError,
   } = useSettings();
 
-  const [isChecked, setIsChecked] = React.useState<boolean>(window.isSwitched ?? false);
-
-  // Sync window.isSwitched with local state when it changes
   React.useEffect(() => {
-    window.isSwitched = isChecked;
-    document.documentElement.classList.toggle('mui-theme', isChecked);
-
-    const event = new CustomEvent('isSwitchedChanged', {
-      detail: isChecked,
-    });
-    window.dispatchEvent(event);
-  }, [isChecked]);
-
-  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
-    setIsChecked(checked);
-  };
+    // Apply the theme based on the value of STYLE_THEME
+    if (STYLE_THEME === Theme.MUI) {
+      document.documentElement.classList.add(Theme.MUI);
+    } else {
+      document.documentElement.classList.remove(Theme.MUI);
+    }
+  }, []);
 
   const contextValue = React.useMemo(
     () =>
@@ -119,13 +111,6 @@ const App: React.FC = () => {
       </MastheadMain>
 
       <MastheadContent>
-        <Switch
-          id="simple-switch"
-          label="Toggle MUI Theme"
-          isChecked={isChecked}
-          onChange={handleChange}
-          ouiaId="BasicSwitch"
-        />
         {/* TODO: [Auth-enablement] Add logout and user status once we enable itNavigates to register page from table toolbar */}
       </MastheadContent>
     </Masthead>

diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx
@@ -14,6 +14,7 @@ import { CheckIcon, TimesIcon } from '@patternfly/react-icons';
 import { KeyValuePair } from '~/shared/types';
 import { EitherNotBoth } from '~/shared/typeHelpers';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 
 type ModelPropertiesTableRowProps = {
   allExistingKeys: string[];
@@ -49,23 +50,6 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
 
   const [isValueExpanded, setIsValueExpanded] = React.useState(false);
 
-  const [isSwitched, setIsSwitched] = React.useState<boolean>(window.isSwitched ?? false);
-
-  // Listen for changes to `window.isSwitched`
-  React.useEffect(() => {
-    const handleSwitchChange = (event: Event) => {
-      if (event instanceof CustomEvent) {
-        setIsSwitched(event.detail); // Update state with the new value
-      }
-    };
-
-    window.addEventListener('isSwitchedChanged', handleSwitchChange);
-
-    return () => {
-      window.removeEventListener('isSwitchedChanged', handleSwitchChange);
-    };
-  }, []);
-
   let keyValidationError: string | null = null;
   if (unsavedKey !== key && allExistingKeys.includes(unsavedKey)) {
     keyValidationError = 'Key must not match an existing property key or label';
@@ -141,7 +125,7 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       <Td dataLabel="Key" width={45} modifier="breakWord">
         {isEditing ? (
           <>
-            {window.isSwitched ? (
+            {STYLE_THEME === Theme.MUI ? (
               <FormFieldset className="tr-fieldset-wrapper" component={propertyKeyInput} />
             ) : (
               propertyKeyInput
@@ -161,7 +145,7 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       </Td>
       <Td dataLabel="Value" width={45} modifier="breakWord">
         {isEditing ? (
-          isSwitched ? (
+          STYLE_THEME === Theme.MUI ? (
             <FormFieldset className="tr-fieldset-wrapper" component={propertyValueInput} />
           ) : (
             propertyValueInput

diff --git a/...ts/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx b/...ts/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx
@@ -34,6 +34,7 @@ import { asEnumMember } from '~/app/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 { STYLE_THEME, Theme } from '~/shared/utilities/const';
 
 type ModelVersionListViewProps = {
   modelVersions: ModelVersion[];
@@ -54,18 +55,6 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
   const [searchType, setSearchType] = React.useState<SearchType>(SearchType.KEYWORD);
   const [search, setSearch] = React.useState('');
 
-  const [isSwitched, setIsSwitched] = React.useState<boolean>(window.isSwitched ?? false);
-
-  React.useEffect(() => {
-    const handleSwitchChange = () => {
-      setIsSwitched(window.isSwitched ?? false);
-    };
-    window.addEventListener('isSwitchedChanged', handleSwitchChange);
-    return () => {
-      window.removeEventListener('isSwitchedChanged', handleSwitchChange);
-    };
-  }, []);
-
   const searchTypes = [SearchType.KEYWORD, SearchType.AUTHOR];
 
   const [isArchivedModelVersionKebabOpen, setIsArchivedModelVersionKebabOpen] =
@@ -161,7 +150,7 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
                   />
                 </ToolbarFilter>
                 <ToolbarItem>
-                  {isSwitched ? (
+                  {STYLE_THEME === Theme.MUI ? (
                     <FormFieldset
                       className="toolbar-fieldset-wrapper"
                       component={

diff --git a/...src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx b/...src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx
@@ -16,6 +16,7 @@ import { asEnumMember } from '~/app/utils';
 import { filterModelVersions } from '~/app/pages/modelRegistry/screens/utils';
 import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 import ModelVersionsArchiveTable from './ModelVersionsArchiveTable';
 
 type ModelVersionsArchiveListViewProps = {
@@ -32,18 +33,6 @@ const ModelVersionsArchiveListView: React.FC<ModelVersionsArchiveListViewProps>
 
   const searchTypes = [SearchType.KEYWORD, SearchType.AUTHOR];
 
-  const [isSwitched, setIsSwitched] = React.useState<boolean>(window.isSwitched ?? false);
-
-  React.useEffect(() => {
-    const handleSwitchChange = () => {
-      setIsSwitched(window.isSwitched ?? false);
-    };
-    window.addEventListener('isSwitchedChanged', handleSwitchChange);
-    return () => {
-      window.removeEventListener('isSwitchedChanged', handleSwitchChange);
-    };
-  }, []);
-
   const filteredModelVersions = filterModelVersions(unfilteredmodelVersions, search, searchType);
 
   if (unfilteredmodelVersions.length === 0) {
@@ -87,7 +76,7 @@ const ModelVersionsArchiveListView: React.FC<ModelVersionsArchiveListViewProps>
                 />
               </ToolbarFilter>
               <ToolbarItem>
-                {isSwitched ? (
+                {STYLE_THEME === Theme.MUI ? (
                   <FormFieldset
                     className="toolbar-fieldset-wrapper"
                     component={

diff --git a/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormGroup, TextInput } from '@patternfly/react-core';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 
 type PrefilledModelRegistryFieldProps = {
   mrName?: string;
@@ -13,7 +14,7 @@ const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> =
 
   return (
     <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
-      {window.isSwitched ? (
+      {STYLE_THEME === Theme.MUI ? (
         <FormFieldset component={mrNameInput} field="Model Registry" />
       ) : (
         mrNameInput

diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -18,6 +18,7 @@ import FormSection from '~/shared/components/pf-overrides/FormSection';
 import ApplicationsPage from '~/shared/components/ApplicationsPage';
 import { modelRegistryUrl, registeredModelUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
 import { ValueOf } from '~/shared/typeHelpers';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterModelData';
 import { isRegisterModelSubmitDisabled, registerModel } from './utils';
 import { useRegistrationCommonState } from './useRegistrationCommonState';
@@ -92,7 +93,7 @@ const RegisterModel: React.FC = () => {
                 isRequired
                 fieldId="mr-name"
               >
-                {window.isSwitched ? (
+                {STYLE_THEME === Theme.MUI ? (
                   <FormFieldset component={modelRegistryInput} field="Model Registry" />
                 ) : (
                   modelRegistryInput
@@ -105,7 +106,7 @@ const RegisterModel: React.FC = () => {
                 description="Provide general details that apply to all versions of this model."
               >
                 <FormGroup label="Model name" isRequired fieldId="model-name">
-                  {window.isSwitched ? (
+                  {STYLE_THEME === Theme.MUI ? (
                     <FormFieldset component={modelNameInput} field="Model Name" />
                   ) : (
                     modelNameInput
@@ -116,7 +117,7 @@ const RegisterModel: React.FC = () => {
                   label="Model description"
                   fieldId="model-description"
                 >
-                  {window.isSwitched ? (
+                  {STYLE_THEME === Theme.MUI ? (
                     <FormFieldset component={modelDescriptionInput} field="Model Description" />
                   ) : (
                     modelDescriptionInput

diff --git a/...ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx b/...ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
@@ -3,6 +3,7 @@ import { FormGroup, TextInput } from '@patternfly/react-core';
 import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
 import { RegisteredModel } from '~/app/types';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 
 type RegisteredModelSelectorProps = {
   registeredModels: RegisteredModel[];
@@ -47,7 +48,7 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
     */
     return (
       <FormGroup label="Model name" className="form-group-disabled" isRequired fieldId="model-name">
-        {window.isSwitched ? (
+        {STYLE_THEME === Theme.MUI ? (
           <FormFieldset component={modelNameInput} field="Model Name" />
         ) : (
           modelNameInput

diff --git a/...tend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/...tend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
@@ -19,6 +19,7 @@ import { UpdateObjectAtPropAndValue } from '~/shared/types';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 import FormSection from '~/shared/components/pf-overrides/FormSection';
 import { ModelVersion } from '~/app/types';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 import { ModelLocationType, RegistrationCommonFormData } from './useRegisterModelData';
 // import { ConnectionModal } from './ConnectionModal';
 
@@ -173,7 +174,7 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
         }
       >
         <FormGroup label="Version name" isRequired fieldId="version-name">
-          {window.isSwitched ? (
+          {STYLE_THEME === Theme.MUI ? (
             <FormFieldset component={versionNameInput} field="Version Name" />
           ) : (
             versionNameInput
@@ -191,21 +192,21 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
           label="Version description"
           fieldId="version-description"
         >
-          {window.isSwitched ? (
+          {STYLE_THEME === Theme.MUI ? (
             <FormFieldset component={versionDescriptionInput} field="Version Description" />
           ) : (
             versionDescriptionInput
           )}
         </FormGroup>
         <FormGroup label="Source model format" fieldId="source-model-format">
-          {window.isSwitched ? (
+          {STYLE_THEME === Theme.MUI ? (
             <FormFieldset component={sourceModelFormatInput} field="Source Model Format" />
           ) : (
             sourceModelFormatInput
           )}
         </FormGroup>
         <FormGroup label="Source model format version" fieldId="source-model-format-version">
-          {window.isSwitched ? (
+          {STYLE_THEME === Theme.MUI ? (
             <FormFieldset
               component={sourceModelFormatVersionInput}
               field="Source Model Format Version"
@@ -253,28 +254,32 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
               isRequired
               fieldId="location-endpoint"
             >
-              {window.isSwitched ? (
+              {STYLE_THEME === Theme.MUI ? (
                 <FormFieldset component={endpointInput} field="Endpoint" />
               ) : (
                 endpointInput
               )}
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Bucket" isRequired fieldId="location-bucket">
-              {window.isSwitched ? (
+              {STYLE_THEME === Theme.MUI ? (
                 <FormFieldset component={bucketInput} field="Bucket" />
               ) : (
                 bucketInput
               )}
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Region" fieldId="location-region">
-              {window.isSwitched ? (
+              {STYLE_THEME === Theme.MUI ? (
                 <FormFieldset component={regionInput} field="Region" />
               ) : (
                 regionInput
               )}
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Path" isRequired fieldId="location-path">
-              {window.isSwitched ? <FormFieldset component={pathInput} field="Path" /> : pathInput}
+              {STYLE_THEME === Theme.MUI ? (
+                <FormFieldset component={pathInput} field="Path" />
+              ) : (
+                pathInput
+              )}
             </FormGroup>
             <FormHelperText className="path-helper-text">
               <HelperText>
@@ -301,7 +306,11 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
         {modelLocationType === ModelLocationType.URI && (
           <>
             <FormGroup className={spacing.mlLg} label="URI" isRequired fieldId="location-uri">
-              {window.isSwitched ? <FormFieldset component={uriInput} field="URI" /> : uriInput}
+              {STYLE_THEME === Theme.MUI ? (
+                <FormFieldset component={uriInput} field="URI" />
+              ) : (
+                uriInput
+              )}
             </FormGroup>
           </>
         )}

diff --git a/...frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/...frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -20,6 +20,7 @@ import {
 } from '~/app/pages/modelRegistry/screens/routeUtils';
 import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { STYLE_THEME, Theme } from '~/shared/utilities/const';
 import RegisteredModelTable from './RegisteredModelTable';
 import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar';
 
@@ -37,18 +38,6 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
   const [searchType, setSearchType] = React.useState<SearchType>(SearchType.KEYWORD);
   const [search, setSearch] = React.useState('');
 
-  const [isSwitched, setIsSwitched] = React.useState<boolean>(window.isSwitched ?? false);
-
-  React.useEffect(() => {
-    const handleSwitchChange = () => {
-      setIsSwitched(window.isSwitched ?? false);
-    };
-    window.addEventListener('isSwitchedChanged', handleSwitchChange);
-    return () => {
-      window.removeEventListener('isSwitchedChanged', handleSwitchChange);
-    };
-  }, []);
-
   const searchTypes = React.useMemo(() => [SearchType.KEYWORD, SearchType.OWNER], []);
 
   if (unfilteredRegisteredModels.length === 0) {
@@ -109,7 +98,7 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
         />
       </ToolbarFilter>
       <ToolbarItem variant="label-group">
-        {isSwitched ? (
+        {STYLE_THEME === Theme.MUI ? (
           <FormFieldset
             className="toolbar-fieldset-wrapper"
             component={