fixing form error message issue (#2047)

kafka-ui-react-app/src/components/Topics/New/New.tsx

@@ -24,7 +24,7 @@ enum Filters {
 
 const New: React.FC = () => {
   const methods = useForm<TopicFormData>({
-    mode: 'all',
+    mode: 'onChange',
     resolver: yupResolver(topicFormValidationSchema),
   });
 

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx

@@ -59,7 +59,7 @@ const CustomParamField: React.FC<Props> = ({
       newExistingFields.push(nameValue);
       setExistingFields(newExistingFields);
       setValue(`customParams.${index}.value`, TOPIC_CUSTOM_PARAMS[nameValue], {
-        shouldValidate: true,
+        shouldValidate: !!TOPIC_CUSTOM_PARAMS[nameValue],
       });
     }
   }, [existingFields, index, nameValue, setExistingFields, setValue]);
@@ -92,7 +92,7 @@ const CustomParamField: React.FC<Props> = ({
         </FormError>
       </div>
       <div>
-        <InputLabel>Value</InputLabel>
+        <InputLabel>Value *</InputLabel>
         <Input
           name={`customParams.${index}.value` as const}
           hookFormOptions={{

kafka-ui-react-app/src/lib/yupExtended.ts

@@ -61,7 +61,7 @@ export const topicFormValidationSchema = yup.object().shape({
   maxMessageBytes: yup.number().min(1).required(),
   customParams: yup.array().of(
     yup.object().shape({
-      name: yup.string().required(),
+      name: yup.string().required('Custom parameter is required'),
       value: yup.string().required('Value is required'),
     })
   ),