feat: introduce uniqueness validation for remote role name

packages/web/src/components/ControlledAutocomplete/index.jsx

@@ -29,6 +29,8 @@ function ControlledAutocomplete(props) {
     options = [],
     dependsOn = [],
     showOptionValue,
+    renderInput,
+    showHelperText = true,
     ...autocompleteProps
   } = props;
   let dependsOnValues = [];
@@ -105,16 +107,18 @@ function ControlledAutocomplete(props) {
                 )}
               </li>
             )}
+            renderInput={(params) => renderInput(params, fieldState)}
           />
-
-          <FormHelperText
-            variant="outlined"
-            error={Boolean(fieldState.isTouched && fieldState.error)}
-          >
-            {fieldState.isTouched
-              ? fieldState.error?.message || description
-              : description}
-          </FormHelperText>
+          {showHelperText && (
+            <FormHelperText
+              variant="outlined"
+              error={Boolean(fieldState.isTouched && fieldState.error)}
+            >
+              {fieldState.isTouched
+                ? fieldState.error?.message || description
+                : description}
+            </FormHelperText>
+          )}
         </div>
       )}
     />
@@ -132,6 +136,10 @@ ControlledAutocomplete.propTypes = {
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   options: PropTypes.array,
+  renderInput: PropTypes.func.isRequired,
+  showFormHelperText: PropTypes.bool,
+  showErrorTouched: PropTypes.bool,
+  showHelperText: PropTypes.bool,
 };
 
 export default ControlledAutocomplete;

packages/web/src/components/Form/index.jsx

@@ -13,12 +13,14 @@ function Form(props) {
     resolver,
     render,
     mode = 'all',
+    reValidateMode = 'onBlur',
+    automaticValidation = true,
     ...formProps
   } = props;
 
   const methods = useForm({
     defaultValues,
-    reValidateMode: 'onBlur',
+    reValidateMode,
     resolver,
     mode,
   });
@@ -30,7 +32,9 @@ function Form(props) {
    * For fields having `dependsOn` fields, we need to re-validate the form.
    */
   React.useEffect(() => {
-    methods.trigger();
+    if (automaticValidation) {
+      methods.trigger();
+    }
   }, [methods.trigger, form]);
 
   React.useEffect(() => {
@@ -56,6 +60,8 @@ Form.propTypes = {
   render: PropTypes.func,
   resolver: PropTypes.func,
   mode: PropTypes.oneOf(['onChange', 'onBlur', 'onSubmit', 'onTouched', 'all']),
+  reValidateMode: PropTypes.oneOf(['onChange', 'onBlur', 'onSubmit']),
+  automaticValidation: PropTypes.bool,
 };
 
 export default Form;

packages/web/src/components/TextField/index.jsx

@@ -31,6 +31,7 @@ function TextField(props) {
     onBlur,
     onChange,
     'data-test': dataTest,
+    showError = false,
     ...textFieldProps
   } = props;
   return (
@@ -47,6 +48,7 @@ function TextField(props) {
           onBlur: controllerOnBlur,
           ...field
         },
+        fieldState: { error },
       }) => (
         <MuiTextField
           {...textFieldProps}
@@ -72,6 +74,7 @@ function TextField(props) {
           inputProps={{
             'data-test': dataTest,
           }}
+          {...(showError && { helperText: error?.message, error: !!error })}
         />
       )}
     />
@@ -89,6 +92,7 @@ TextField.propTypes = {
   disabled: PropTypes.bool,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
+  showError: PropTypes.bool,
 };
 
 export default TextField;