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 new file mode 100644 index 000000000..01b6fe979 --- /dev/null +++ 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 = ({ component, field }) => { + return ( +
+ {component} + +
+ ); +}; + +export default FormFieldset; diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx index 980da8d37..fef2b8313 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx +++ b/clients/ui/frontend/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 = ({ mrName }) => ( - - + + + } + field="Model Registry" + /> ); 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 index c6cffb9de..8641834d5 100644 --- 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 = ( + + ); + + const modelNameInput = ( + setData('modelName', value)} + /> + ); + + const modelDescriptionInput = ( +