Apply MUI theming to "Versions" and "Details" Screens (#471)

Signed-off-by: Jenny <[email protected]> apply theming to model info screens fix button color on hover add comment fix button color on hover Signed-off-by: Jenny <[email protected]> format update to absolute path
kubeflow · Oct 11, 2024 · 115e195 · 115e195
1 parent 1ae613c
commit 115e195
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 79 deletions.
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx
@@ -13,6 +13,7 @@ import {
 import { CheckIcon, TimesIcon } from '@patternfly/react-icons';
 import { KeyValuePair } from '~/types';
 import { EitherNotBoth } from '~/typeHelpers';
+import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 
 type ModelPropertiesTableRowProps = {
   allExistingKeys: string[];
@@ -94,19 +95,27 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       <Td dataLabel="Key" width={45} modifier="breakWord">
         {isEditing ? (
           <>
-            <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}`
+            <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'}
+                />
               }
-              isRequired
-              type="text"
-              value={unsavedKey}
-              onChange={(_event, str) => setUnsavedKey(str)}
-              validated={keyValidationError ? 'error' : 'default'}
             />
+
             {keyValidationError && (
               <FormHelperText>
                 <HelperText>
@@ -121,17 +130,24 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       </Td>
       <Td dataLabel="Value" width={45} modifier="breakWord">
         {isEditing ? (
-          <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}`
+          <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)}
+              />
             }
-            isRequired
-            type="text"
-            value={unsavedValue}
-            onChange={(_event, str) => setUnsavedValue(str)}
           />
         ) : (
           <ExpandableSection

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,7 +7,7 @@ import {
   DropdownList,
   MenuToggle,
   MenuToggleElement,
-  SearchInput,
+  TextInput,
   ToolbarContent,
   ToolbarFilter,
   ToolbarGroup,
@@ -32,6 +32,7 @@ import {
 import { asEnumMember } from '~/app/utils';
 import ModelVersionsTable from '~/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable';
 import SimpleSelect from '~/app/components/SimpleSelect';
+import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 
 type ModelVersionListViewProps = {
   modelVersions: ModelVersion[];
@@ -147,15 +148,21 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
                   />
                 </ToolbarFilter>
                 <ToolbarItem>
-                  <SearchInput
-                    placeholder={`Find by ${searchType.toLowerCase()}`}
-                    value={search}
-                    onChange={(_, searchValue) => {
-                      setSearch(searchValue);
-                    }}
-                    onClear={() => setSearch('')}
-                    style={{ minWidth: '200px' }}
-                    data-testid="model-versions-table-search"
+                  <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()}`}
                   />
                 </ToolbarItem>
               </ToolbarGroup>

diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/FormFieldset.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/FormFieldset.tsx
@@ -2,17 +2,19 @@ import React, { ReactNode } from 'react';
 
 interface FormFieldsetProps {
   component: ReactNode;
-  field: string;
+  field?: string;
   className?: string;
 }
 
 const FormFieldset: React.FC<FormFieldsetProps> = ({ component, field, className }) => (
   <div className={className ?? 'form-fieldset-wrapper'}>
     {component}
     <fieldset aria-hidden="true" className="form-fieldset">
-      <legend className="form-fieldset-legend">
-        <span>{field}</span>
-      </legend>
+      {field && (
+        <legend className="form-fieldset-legend">
+          <span>{field}</span>
+        </legend>
+      )}
     </fieldset>
   </div>
 );

diff --git a/clients/ui/frontend/src/components/EditableTextDescriptionListGroup.tsx b/clients/ui/frontend/src/components/EditableTextDescriptionListGroup.tsx
@@ -3,6 +3,7 @@ import { ExpandableSection, TextArea } from '@patternfly/react-core';
 import DashboardDescriptionListGroup, {
   DashboardDescriptionListGroupProps,
 } from '~/components/DashboardDescriptionListGroup';
+import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 
 type EditableTextDescriptionListGroupProps = Pick<
   DashboardDescriptionListGroupProps,
@@ -35,14 +36,17 @@ const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGrou
       isEditing={isEditing}
       isSavingEdits={isSavingEdits}
       contentWhenEditing={
-        <TextArea
-          data-testid={`edit-text-area-${title}`}
-          aria-label={`Text box for editing ${title}`}
-          value={unsavedValue}
-          onChange={(_event, v) => setUnsavedValue(v)}
-          isDisabled={isSavingEdits}
-          rows={24}
-          resizeOrientation="vertical"
+        <FormFieldset
+          component={
+            <TextArea
+              data-testid={`edit-text-area-${title}`}
+              aria-label={`Text box for editing ${title}`}
+              value={unsavedValue}
+              onChange={(_event, v) => setUnsavedValue(v)}
+              isDisabled={isSavingEdits}
+              rows={24}
+            />
+          }
         />
       }
       onEditClick={() => {