Add a flag to only validate blocking validation when validating the form

elastic · Jul 12, 2021 · 080ed06 · 080ed06
1 parent b165157
commit 080ed06
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
@@ -189,11 +189,13 @@ export const useField = <T, FormType = FormData, I = T>(
       {
         formData,
         value: valueToValidate,
-        validationTypeToValidate = VALIDATION_TYPES.FIELD,
+        onlyBlocking: runOnlyBlockingValidations,
+        validationTypeToValidate,
       }: {
         formData: any;
         value: I;
-        validationTypeToValidate: string;
+        onlyBlocking: boolean;
+        validationTypeToValidate?: string;
       },
       clearFieldErrors: FieldHook['clearErrors']
     ): ValidationError[] | Promise<ValidationError[]> => {
@@ -203,7 +205,10 @@ export const useField = <T, FormType = FormData, I = T>(
 
       // By default, for fields that have an asynchronous validation
       // we will clear the errors as soon as the field value changes.
-      clearFieldErrors([validationTypeToValidate, VALIDATION_TYPES.ASYNC]);
+      clearFieldErrors([
+        validationTypeToValidate ?? VALIDATION_TYPES.FIELD,
+        VALIDATION_TYPES.ASYNC,
+      ]);
 
       cancelInflightValidation();
 
@@ -217,6 +222,7 @@ export const useField = <T, FormType = FormData, I = T>(
             validator,
             exitOnFail = true,
             type: validationType = VALIDATION_TYPES.FIELD,
+            isBlocking = true,
           } = validation;
 
           if (
@@ -226,6 +232,10 @@ export const useField = <T, FormType = FormData, I = T>(
             continue;
           }
 
+          if (runOnlyBlockingValidations && isBlocking === false) {
+            continue;
+          }
+
           inflightValidation.current = validator({
             value: valueToValidate,
             errors: validationErrors,
@@ -263,6 +273,7 @@ export const useField = <T, FormType = FormData, I = T>(
             validator,
             exitOnFail = true,
             type: validationType = VALIDATION_TYPES.FIELD,
+            isBlocking = true,
           } = validation;
 
           if (
@@ -272,6 +283,10 @@ export const useField = <T, FormType = FormData, I = T>(
             continue;
           }
 
+          if (runOnlyBlockingValidations && isBlocking === false) {
+            continue;
+          }
+
           const validationResult = validator({
             value: valueToValidate,
             errors: validationErrors,
@@ -343,7 +358,8 @@ export const useField = <T, FormType = FormData, I = T>(
       const {
         formData = __getFormData$().value,
         value: valueToValidate = value,
-        validationType = VALIDATION_TYPES.FIELD,
+        validationType,
+        onlyBlocking = false,
       } = validationData;
 
       setIsValidated(true);
@@ -377,6 +393,7 @@ export const useField = <T, FormType = FormData, I = T>(
           formData,
           value: valueToValidate,
           validationTypeToValidate: validationType,
+          onlyBlocking,
         },
         clearErrors
       );

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts
@@ -151,14 +151,14 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(
   }, [fieldsToArray]);
 
   const validateFields: FormHook<T, I>['__validateFields'] = useCallback(
-    async (fieldNames) => {
+    async (fieldNames, onlyBlocking = false) => {
       const fieldsToValidate = fieldNames
         .map((name) => fieldsRefs.current[name])
         .filter((field) => field !== undefined);
 
       const formData = getFormData$().value;
       const validationResult = await Promise.all(
-        fieldsToValidate.map((field) => field.validate({ formData }))
+        fieldsToValidate.map((field) => field.validate({ formData, onlyBlocking }))
       );
 
       if (isMounted.current === false) {
@@ -315,7 +315,8 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(
     if (fieldsToValidate.length === 0) {
       isFormValid = fieldsArray.every(isFieldValid);
     } else {
-      ({ isFormValid } = await validateFields(fieldsToValidate.map((field) => field.path)));
+      const fieldPathsToValidate = fieldsToValidate.map((field) => field.path);
+      ({ isFormValid } = await validateFields(fieldPathsToValidate, true));
     }
 
     setIsValid(isFormValid);

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts
@@ -53,7 +53,9 @@ export interface FormHook<T extends FormData = FormData, I extends FormData = T>
   __addField: (field: FieldHook) => void;
   __removeField: (fieldNames: string | string[]) => void;
   __validateFields: (
-    fieldNames: string[]
+    fieldNames: string[],
+    /** Run only blocking validations */
+    onlyBlocking?: boolean
   ) => Promise<{ areFieldsValid: boolean; isFormValid: boolean | undefined }>;
   __updateFormDataAt: (field: string, value: unknown) => void;
   __updateDefaultValueAt: (field: string, value: unknown) => void;
@@ -137,6 +139,7 @@ export interface FieldHook<T = unknown, I = T> {
     formData?: any;
     value?: I;
     validationType?: string;
+    onlyBlocking?: boolean;
   }) => FieldValidateResponse | Promise<FieldValidateResponse>;
   reset: (options?: { resetValue?: boolean; defaultValue?: T }) => unknown | undefined;
   // Flag to indicate if the field value will be included in the form data outputted