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 Signed-off-by: Jenny <[email protected]> create reusable fieldset component
kubeflow · Oct 8, 2024 · e5c8052 · e5c8052
1 parent 0c369a0
commit e5c8052
Show file tree

Hide file tree

Showing 8 changed files with 518 additions and 175 deletions.
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/FormFieldset.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/FormFieldset.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+interface FormFieldsetProps {
+  component: ReactNode;
+  field: string;
+}
+
+const FormFieldset: React.FC<FormFieldsetProps> = ({ component, field }) => {
+  return (
+    <div className="form-fieldset-wrapper">
+      {component}
+      <fieldset aria-hidden="true" className="form-fieldset">
+        <legend className="form-fieldset-legend">
+          <span>{field}</span>
+        </legend>
+      </fieldset>
+    </div>
+  );
+};
+
+export default FormFieldset;
diff --git a/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import { FormGroup, TextInput } from '@patternfly/react-core';
+import FormFieldset from "./FormFieldset";
 
 type PrefilledModelRegistryFieldProps = {
   mrName?: string;
 };
 
 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">
+    <FormFieldset
+      component={
+        <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+      }
+      field="Model Registry"
+    />
   </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,8 +21,8 @@ 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';
+import FormFieldset from './FormFieldset';
 
 const RegisterModel: React.FC = () => {
   const { modelRegistry: mrName } = useParams();
@@ -42,6 +42,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 +86,30 @@ 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"
+              >
+                <FormFieldset component={modelRegistryInput} field="Model Registry" />
+              </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)}
-                  />
+                <FormFieldset component={modelNameInput} field="Model Name" />
                 </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"
+                >
+                                  <FormFieldset component={modelDescriptionInput} field="Model Description" />
+
                 </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,7 +1,8 @@
 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';
+import FormFieldset from './FormFieldset';
 
 type RegisteredModelSelectorProps = {
   registeredModels: RegisteredModel[];
@@ -34,14 +35,21 @@ 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">
+        <FormFieldset
+          component={
+            <TextInput
+              isDisabled
+              isRequired
+              type="text"
+              id="model-name"
+              name="registered-model-prefilled"
+              value={options.find(({ value }) => value === registeredModelId)?.content}
+            />
+          }
+          field="Model Name"
+        />
+      </FormGroup>
     );
   }