fix(automl/create, autorag/create): validation errors for display_name

Author: Daniel Duong

packages/automl/frontend/src/app/components/create/AutomlCreate.tsx

@@ -1,4 +1,11 @@
-import { FormGroup, TextArea, TextInput } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { ConfigureSchema } from '~/app/schemas/configure.schema';
@@ -11,9 +18,16 @@ function AutomlCreate(): React.JSX.Element {
       <Controller
         control={form.control}
         name="display_name"
-        render={({ field }) => (
+        render={({ field, fieldState }) => (
           <FormGroup fieldId={field.name} label="Name" isRequired>
             <TextInput {...field} id={field.name} type="text" isRequired />
+            {fieldState.error && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem variant="error">{fieldState.error.message}</HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         )}
       />

packages/autorag/frontend/src/app/components/create/AutoragCreate.tsx

@@ -1,9 +1,16 @@
-import { FormGroup, TextArea, TextInput } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core';
 import React, { useEffect } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useParams } from 'react-router';
-import { ConfigureSchema } from '~/app/schemas/configure.schema';
 import SecretSelector, { SecretSelection } from '~/app/components/common/SecretSelector';
+import { ConfigureSchema } from '~/app/schemas/configure.schema';
 
 function AutoragCreate(): React.JSX.Element {
   const { namespace } = useParams();
@@ -28,9 +35,16 @@ function AutoragCreate(): React.JSX.Element {
       <Controller
         control={form.control}
         name="display_name"
-        render={({ field }) => (
+        render={({ field, fieldState }) => (
           <FormGroup fieldId={field.name} label="Name" isRequired>
             <TextInput {...field} id={field.name} type="text" isRequired />
+            {fieldState.error && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem variant="error">{fieldState.error.message}</HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         )}
       />