Add enum and env var to conditionally render MUI theme (#564)

Signed-off-by: Jenny <[email protected]>
kubeflow · Nov 21, 2024 · a12fd00 · a12fd00
1 parent 71e7bc2
commit a12fd00
Show file tree

Hide file tree

Showing 15 changed files with 395 additions and 279 deletions.
diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx
@@ -21,6 +21,7 @@ import {
 import { BarsIcon } from '@patternfly/react-icons';
 import ToastNotifications from '~/shared/components/ToastNotifications';
 import { useSettings } from '~/shared/hooks/useSettings';
+import { isMUITheme, Theme } from '~/shared/utilities/const';
 import NavSidebar from './NavSidebar';
 import AppRoutes from './AppRoutes';
 import { AppContext } from './AppContext';
@@ -34,6 +35,15 @@ const App: React.FC = () => {
     loadError: configError,
   } = useSettings();
 
+  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 contextValue = React.useMemo(
     () =>
       configSettings && userSettings

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 { isMUITheme } from '~/shared/utilities/const';
 
 type ModelPropertiesTableRowProps = {
   allExistingKeys: string[];
@@ -90,31 +91,45 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
     setIsEditing(false);
   };
 
+  const propertyKeyInput = (
+    <TextInput
+      data-testid={isAddRow ? `add-property-key-input` : `edit-property-${key}-key-input`}
+      aria-label={
+        isAddRow ? 'Key input for new property' : `Key input for editing property with key ${key}`
+      }
+      isRequired
+      type="text"
+      value={unsavedKey}
+      onChange={(_event, str) => setUnsavedKey(str)}
+      validated={keyValidationError ? 'error' : 'default'}
+    />
+  );
+
+  const propertyValueInput = (
+    <TextInput
+      data-testid={isAddRow ? `add-property-value-input` : `edit-property-${key}-value-input`}
+      aria-label={
+        isAddRow
+          ? 'Value input for new property'
+          : `Value input for editing property with key ${key}`
+      }
+      isRequired
+      type="text"
+      value={unsavedValue}
+      onChange={(_event, str) => setUnsavedValue(str)}
+    />
+  );
+
   return (
     <Tr>
       <Td dataLabel="Key" width={45} modifier="breakWord">
         {isEditing ? (
           <>
-            <FormFieldset
-              className="tr-fieldset-wrapper"
-              component={
-                <TextInput
-                  data-testid={
-                    isAddRow ? `add-property-key-input` : `edit-property-${key}-key-input`
-                  }
-                  aria-label={
-                    isAddRow
-                      ? 'Key input for new property'
-                      : `Key input for editing property with key ${key}`
-                  }
-                  isRequired
-                  type="text"
-                  value={unsavedKey}
-                  onChange={(_event, str) => setUnsavedKey(str)}
-                  validated={keyValidationError ? 'error' : 'default'}
-                />
-              }
-            />
+            {isMUITheme() ? (
+              <FormFieldset className="tr-fieldset-wrapper" component={propertyKeyInput} />
+            ) : (
+              propertyKeyInput
+            )}
 
             {keyValidationError && (
               <FormHelperText>
@@ -130,25 +145,11 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       </Td>
       <Td dataLabel="Value" width={45} modifier="breakWord">
         {isEditing ? (
-          <FormFieldset
-            className="tr-fieldset-wrapper"
-            component={
-              <TextInput
-                data-testid={
-                  isAddRow ? `add-property-value-input` : `edit-property-${key}-value-input`
-                }
-                aria-label={
-                  isAddRow
-                    ? 'Value input for new property'
-                    : `Value input for editing property with key ${key}`
-                }
-                isRequired
-                type="text"
-                value={unsavedValue}
-                onChange={(_event, str) => setUnsavedValue(str)}
-              />
-            }
-          />
+          isMUITheme() ? (
+            <FormFieldset className="tr-fieldset-wrapper" component={propertyValueInput} />
+          ) : (
+            propertyValueInput
+          )
         ) : (
           <ExpandableSection
             variant="truncate"

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
@@ -7,6 +7,7 @@ import {
   DropdownList,
   MenuToggle,
   MenuToggleElement,
+  SearchInput,
   TextInput,
   ToolbarContent,
   ToolbarFilter,
@@ -33,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 { isMUITheme } from '~/shared/utilities/const';
 
 type ModelVersionListViewProps = {
   modelVersions: ModelVersion[];
@@ -148,22 +150,35 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
                   />
                 </ToolbarFilter>
                 <ToolbarItem>
-                  <FormFieldset
-                    className="toolbar-fieldset-wrapper"
-                    component={
-                      <TextInput
-                        value={search}
-                        type="text"
-                        onChange={(_, searchValue) => {
-                          setSearch(searchValue);
-                        }}
-                        style={{ minWidth: '200px' }}
-                        data-testid="model-versions-table-search"
-                        aria-label="Search"
-                      />
-                    }
-                    field={`Find by ${searchType.toLowerCase()}`}
-                  />
+                  {isMUITheme() ? (
+                    <FormFieldset
+                      className="toolbar-fieldset-wrapper"
+                      component={
+                        <TextInput
+                          value={search}
+                          type="text"
+                          onChange={(_, searchValue) => {
+                            setSearch(searchValue);
+                          }}
+                          style={{ minWidth: '200px' }}
+                          data-testid="model-versions-table-search"
+                          aria-label="Search"
+                        />
+                      }
+                      field={`Find by ${searchType.toLowerCase()}`}
+                    />
+                  ) : (
+                    <SearchInput
+                      placeholder={`Find by ${searchType.toLowerCase()}`}
+                      value={search}
+                      onChange={(_, searchValue) => {
+                        setSearch(searchValue);
+                      }}
+                      onClear={() => setSearch('')}
+                      style={{ minWidth: '200px' }}
+                      data-testid="model-versions-table-search"
+                    />
+                  )}
                 </ToolbarItem>
               </ToolbarGroup>
             </ToolbarToggleGroup>

diff --git a/...src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx b/...src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  SearchInput,
   TextInput,
   ToolbarContent,
   ToolbarFilter,
@@ -15,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 { isMUITheme } from '~/shared/utilities/const';
 import ModelVersionsArchiveTable from './ModelVersionsArchiveTable';
 
 type ModelVersionsArchiveListViewProps = {
@@ -74,22 +76,35 @@ const ModelVersionsArchiveListView: React.FC<ModelVersionsArchiveListViewProps>
                 />
               </ToolbarFilter>
               <ToolbarItem>
-                <FormFieldset
-                  className="toolbar-fieldset-wrapper"
-                  component={
-                    <TextInput
-                      value={search}
-                      type="text"
-                      onChange={(_, searchValue) => {
-                        setSearch(searchValue);
-                      }}
-                      style={{ minWidth: '200px' }}
-                      data-testid="model-versions-archive-table-search"
-                      aria-label="Search"
-                    />
-                  }
-                  field={`Find by ${searchType.toLowerCase()}`}
-                />
+                {isMUITheme() ? (
+                  <FormFieldset
+                    className="toolbar-fieldset-wrapper"
+                    component={
+                      <TextInput
+                        value={search}
+                        type="text"
+                        onChange={(_, searchValue) => {
+                          setSearch(searchValue);
+                        }}
+                        style={{ minWidth: '200px' }}
+                        data-testid="model-versions-archive-table-search"
+                        aria-label="Search"
+                      />
+                    }
+                    field={`Find by ${searchType.toLowerCase()}`}
+                  />
+                ) : (
+                  <SearchInput
+                    placeholder={`Find by ${searchType.toLowerCase()}`}
+                    value={search}
+                    onChange={(_, searchValue) => {
+                      setSearch(searchValue);
+                    }}
+                    onClear={() => setSearch('')}
+                    style={{ minWidth: '200px' }}
+                    data-testid="model-versions-archive-table-search"
+                  />
+                )}
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarToggleGroup>

diff --git a/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -1,20 +1,22 @@
 import React from 'react';
 import { FormGroup, TextInput } from '@patternfly/react-core';
 import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
+import { isMUITheme } from '~/shared/utilities/const';
 
 type PrefilledModelRegistryFieldProps = {
   mrName?: string;
 };
 
-const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => (
-  <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
-    <FormFieldset
-      component={
-        <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
-      }
-      field="Model Registry"
-    />
-  </FormGroup>
-);
+const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => {
+  const mrNameInput = (
+    <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+  );
+
+  return (
+    <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
+      {isMUITheme() ? <FormFieldset component={mrNameInput} field="Model Registry" /> : mrNameInput}
+    </FormGroup>
+  );
+};
 
 export default PrefilledModelRegistryField;
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 { isMUITheme } from '~/shared/utilities/const';
 import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterModelData';
 import { isRegisterModelSubmitDisabled, registerModel } from './utils';
 import { useRegistrationCommonState } from './useRegistrationCommonState';
@@ -92,7 +93,11 @@ const RegisterModel: React.FC = () => {
                 isRequired
                 fieldId="mr-name"
               >
-                <FormFieldset component={modelRegistryInput} field="Model Registry" />
+                {isMUITheme() ? (
+                  <FormFieldset component={modelRegistryInput} field="Model Registry" />
+                ) : (
+                  modelRegistryInput
+                )}
               </FormGroup>
             </StackItem>
             <StackItem>
@@ -101,14 +106,22 @@ const RegisterModel: React.FC = () => {
                 description="Provide general details that apply to all versions of this model."
               >
                 <FormGroup label="Model name" isRequired fieldId="model-name">
-                  <FormFieldset component={modelNameInput} field="Model Name" />
+                  {isMUITheme() ? (
+                    <FormFieldset component={modelNameInput} field="Model Name" />
+                  ) : (
+                    modelNameInput
+                  )}
                 </FormGroup>
                 <FormGroup
                   className="model-description"
                   label="Model description"
                   fieldId="model-description"
                 >
-                  <FormFieldset component={modelDescriptionInput} field="Model Description" />
+                  {isMUITheme() ? (
+                    <FormFieldset component={modelDescriptionInput} field="Model Description" />
+                  ) : (
+                    modelDescriptionInput
+                  )}
                 </FormGroup>
               </FormSection>
               <RegistrationCommonFormSections

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 { isMUITheme } from '~/shared/utilities/const';
 
 type RegisteredModelSelectorProps = {
   registeredModels: RegisteredModel[];
@@ -27,6 +28,17 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
     [registeredModels, registeredModelId],
   );
 
+  const modelNameInput = (
+    <TextInput
+      isDisabled
+      isRequired
+      type="text"
+      id="model-name"
+      name="registered-model-prefilled"
+      value={options.find(({ value }) => value === registeredModelId)?.content}
+    />
+  );
+
   if (isDisabled && registeredModelId) {
     /*
       If we're registering a new version for an existing model, we prefill the model and don't allow it to change.
@@ -36,19 +48,11 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
     */
     return (
       <FormGroup label="Model name" className="form-group-disabled" isRequired fieldId="model-name">
-        <FormFieldset
-          component={
-            <TextInput
-              isDisabled
-              isRequired
-              type="text"
-              id="model-name"
-              name="registered-model-prefilled"
-              value={options.find(({ value }) => value === registeredModelId)?.content}
-            />
-          }
-          field="Model Name"
-        />
+        {isMUITheme() ? (
+          <FormFieldset component={modelNameInput} field="Model Name" />
+        ) : (
+          modelNameInput
+        )}
       </FormGroup>
     );
   }