Apply MUI theming to Register Model Form (#451)

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 Signed-off-by: Jenny <[email protected]> move fieldset to components Signed-off-by: Jenny <[email protected]> add prop for className Signed-off-by: Jenny <[email protected]> lint Signed-off-by: Jenny <[email protected]> fix import warnings fix TS error with FormFieldset.tsx Signed-off-by: Jenny <[email protected]> fix import order errors
kubeflow · Oct 9, 2024 · 661cb25 · 661cb25
1 parent e680076
commit 661cb25
Show file tree

Hide file tree

Showing 8 changed files with 531 additions and 190 deletions.
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 '~/app/pages/modelRegistry/screens/components/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
@@ -13,6 +13,7 @@ import {
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { useParams, useNavigate } from 'react-router';
 import { Link } from 'react-router-dom';
+import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
 import FormSection from '~/app/components/pf-overrides/FormSection';
 import ApplicationsPage from '~/app/components/ApplicationsPage';
 import { modelRegistryUrl, registeredModelUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
@@ -21,7 +22,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 +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,29 @@ 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 '~/app/pages/modelRegistry/screens/components/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>
     );
   }