kubeflow · jenny-s51 · Nov 13, 2024
diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx
@@ -17,6 +17,7 @@ import {
   Spinner,
   Stack,
   StackItem,
+  Switch,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import ToastNotifications from '~/shared/components/ToastNotifications';
@@ -26,6 +27,12 @@ import AppRoutes from './AppRoutes';
 import { AppContext } from './AppContext';
 import { ModelRegistrySelectorContextProvider } from './context/ModelRegistrySelectorContext';
 
+declare global {
+  export interface Window {
+    isSwitched?: boolean;
+  }
+}
+
 const App: React.FC = () => {
   const {
     configSettings,
@@ -34,6 +41,23 @@ 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);
+  };
+
   const contextValue = React.useMemo(
     () =>
       configSettings && userSettings
@@ -95,6 +119,13 @@ 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
@@ -49,6 +49,23 @@ 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';
@@ -90,31 +107,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'}
-                />
-              }
-            />
+            {window.isSwitched ? (
+              <FormFieldset className="tr-fieldset-wrapper" component={propertyKeyInput} />
+            ) : (
+              propertyKeyInput
+            )}
 
             {keyValidationError && (
               <FormHelperText>
@@ -130,25 +161,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)}
-              />
-            }
-          />
+          isSwitched ? (
+            <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,
@@ -53,6 +54,18 @@ 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] =
@@ -148,22 +161,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()}`}
-                  />
+                  {isSwitched ? (
+                    <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,
@@ -31,6 +32,18 @@ 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) {
@@ -74,22 +87,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()}`}
-                />
+                {isSwitched ? (
+                  <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
@@ -6,15 +6,20 @@ 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">
+      {window.isSwitched ? (
+        <FormFieldset component={mrNameInput} field="Model Registry" />
+      ) : (
+        mrNameInput
+      )}
+    </FormGroup>
+  );
+};
 
 export default PrefilledModelRegistryField;