Apply MUI theming to Register Model form

Signed-off-by: Jenny <[email protected]> fix tests Signed-off-by: Jenny <[email protected]> add fieldset to custom components fix spacing issue with helper text Signed-off-by: Jenny <[email protected]> remove comment Signed-off-by: Jenny <[email protected]> fixes for text area Signed-off-by: Jenny <[email protected]> format Signed-off-by: Jenny <[email protected]> add model description fix
kubeflow · Oct 8, 2024 · 69f59d5 · 69f59d5
1 parent 0c369a0
commit 69f59d5
Show file tree

Hide file tree

Showing 7 changed files with 577 additions and 175 deletions.
diff --git a/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -6,8 +6,15 @@ type PrefilledModelRegistryFieldProps = {
 };
 
 const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => (
-  <FormGroup label="Model registry" isRequired fieldId="mr-name">
-    <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+  <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
+    <div className="form-fieldset-wrapper">
+      <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+      <fieldset aria-hidden="true" className="form-fieldset">
+        <legend className="form-fieldset-legend">
+          <span>Model Registry</span>
+        </legend>
+      </fieldset>
+    </div>
   </FormGroup>
 );
 

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
@@ -21,7 +21,6 @@ import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterM
 import { isRegisterModelSubmitDisabled, registerModel } from './utils';
 import { useRegistrationCommonState } from './useRegistrationCommonState';
 import RegistrationCommonFormSections from './RegistrationCommonFormSections';
-import PrefilledModelRegistryField from './PrefilledModelRegistryField';
 import RegistrationFormFooter from './RegistrationFormFooter';
 
 const RegisterModel: React.FC = () => {
@@ -42,6 +41,31 @@ const RegisterModel: React.FC = () => {
     });
   const onCancel = () => navigate(modelRegistryUrl(mrName));
 
+  const modelRegistryInput = (
+    <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+  );
+
+  const modelNameInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="model-name"
+      name="model-name"
+      value={modelName}
+      onChange={(_e, value) => setData('modelName', value)}
+    />
+  );
+
+  const modelDescriptionInput = (
+    <TextArea
+      type="text"
+      id="model-description"
+      name="model-description"
+      value={modelDescription}
+      onChange={(_e, value) => setData('modelDescription', value)}
+    />
+  );
+
   return (
     <ApplicationsPage
       title="Register model"
@@ -61,31 +85,50 @@ const RegisterModel: React.FC = () => {
         <Form isWidthLimited>
           <Stack hasGutter>
             <StackItem className={spacing.mbLg}>
-              <PrefilledModelRegistryField mrName={mrName} />
+              <FormGroup
+                className="form-group-disabled"
+                label="Model registry"
+                isRequired
+                fieldId="mr-name"
+              >
+                <div className="form-fieldset-wrapper">
+                  {modelRegistryInput}
+                  <fieldset aria-hidden="true" className="form-fieldset">
+                    <legend className="form-fieldset-legend">
+                      <span>Model Registry</span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </FormGroup>
             </StackItem>
             <StackItem>
               <FormSection
                 title="Model details"
                 description="Provide general details that apply to all versions of this model."
               >
                 <FormGroup label="Model name" isRequired fieldId="model-name">
-                  <TextInput
-                    isRequired
-                    type="text"
-                    id="model-name"
-                    name="model-name"
-                    value={modelName}
-                    onChange={(_e, value) => setData('modelName', value)}
-                  />
+                  <div className="form-fieldset-wrapper">
+                    {modelNameInput}
+                    <fieldset aria-hidden="true" className="form-fieldset">
+                      <legend className="form-fieldset-legend">
+                        <span>Model Name</span>
+                      </legend>
+                    </fieldset>
+                  </div>
                 </FormGroup>
-                <FormGroup label="Model description" fieldId="model-description">
-                  <TextArea
-                    type="text"
-                    id="model-description"
-                    name="model-description"
-                    value={modelDescription}
-                    onChange={(_e, value) => setData('modelDescription', value)}
-                  />
+                <FormGroup
+                  className="model-description"
+                  label="Model description"
+                  fieldId="model-description"
+                >
+                  <div className="form-fieldset-wrapper">
+                    {modelDescriptionInput}
+                    <fieldset aria-hidden="true" className="form-fieldset">
+                      <legend className="form-fieldset-legend">
+                        <span>Model Description</span>
+                      </legend>
+                    </fieldset>
+                  </div>
                 </FormGroup>
               </FormSection>
               <RegistrationCommonFormSections

diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx
@@ -101,7 +101,6 @@ const RegisterVersion: React.FC = () => {
             <StackItem className={spacing.mbLg}>
               <FormGroup
                 id="registered-model-container"
-                label="Model name"
                 isRequired
                 fieldId="model-name"
                 labelHelp={

diff --git a/...ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx b/...ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInput } from '@patternfly/react-core';
+import { FormGroup, TextInput } from '@patternfly/react-core';
 import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
 import { RegisteredModel } from '~/app/types';
 
@@ -34,14 +34,23 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
         See related PatternFly issue https://github.com/patternfly/patternfly-react/issues/10842
     */
     return (
-      <TextInput
-        isDisabled
-        isRequired
-        type="text"
-        id="model-name"
-        name="registered-model-prefilled"
-        value={options.find(({ value }) => value === registeredModelId)?.content}
-      />
+      <FormGroup label="Model name" className="form-group-disabled" isRequired fieldId="model-name">
+        <div className="form-fieldset-wrapper">
+          <TextInput
+            isDisabled
+            isRequired
+            type="text"
+            id="model-name"
+            name="registered-model-prefilled"
+            value={options.find(({ value }) => value === registeredModelId)?.content}
+          />
+          <fieldset aria-hidden="true" className="form-fieldset">
+            <legend className="form-fieldset-legend">
+              <span>Model Name</span>
+            </legend>
+          </fieldset>
+        </div>
+      </FormGroup>
     );
   }