Fix error when validating the form with non blocking validations

issue: #102338

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.test.tsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { act } from 'react-dom/test-utils';
+import { registerTestBed } from '../shared_imports';
+
+import { Form, UseField } from '../components';
+import React from 'react';
+import { useForm } from '.';
+import { emptyField } from '../../helpers/field_validators';
+import { FieldHook, FieldValidateResponse, VALIDATION_TYPES } from '..';
+
+describe('useField() hook', () => {
+  describe('field.validate()', () => {
+    const EMPTY_VALUE = '   ';
+
+    test('It should not invalidate a field with arrayItem validation when isBlocking is false', async () => {
+      let fieldHook: FieldHook;
+
+      const TestField = ({ field }: { field: FieldHook }) => {
+        fieldHook = field;
+        return null;
+      };
+
+      const TestForm = () => {
+        const { form } = useForm();
+
+        return (
+          <Form form={form}>
+            <UseField
+              path="test-path"
+              component={TestField}
+              config={{
+                validations: [
+                  {
+                    validator: emptyField('error-message'),
+                    type: VALIDATION_TYPES.ARRAY_ITEM,
+                    isBlocking: false,
+                  },
+                ],
+              }}
+            />
+          </Form>
+        );
+      };
+
+      registerTestBed(TestForm)();
+
+      let validateResponse: FieldValidateResponse;
+
+      await act(async () => {
+        validateResponse = await fieldHook!.validate({
+          value: EMPTY_VALUE,
+          validationType: VALIDATION_TYPES.ARRAY_ITEM,
+        });
+      });
+
+      // validation fails for ARRAY_ITEM with a non-blocking validation error
+      expect(validateResponse!).toEqual({
+        isValid: false,
+        errors: [
+          {
+            code: 'ERR_FIELD_MISSING',
+            path: 'test-path',
+            message: 'error-message',
+            __isBlocking__: false,
+            validationType: 'arrayItem',
+          },
+        ],
+      });
+
+      // expect the field to be valid because the validation error is non-blocking
+      expect(fieldHook!.isValid).toBe(true);
+    });
+
+    test('It should invalidate an arrayItem field when isBlocking is true', async () => {
+      let fieldHook: FieldHook;
+
+      const TestField = ({ field }: { field: FieldHook }) => {
+        fieldHook = field;
+        return null;
+      };
+
+      const TestForm = () => {
+        const { form } = useForm();
+
+        return (
+          <Form form={form}>
+            <UseField
+              path="test-path"
+              component={TestField}
+              config={{
+                validations: [
+                  {
+                    validator: emptyField('error-message'),
+                    type: VALIDATION_TYPES.ARRAY_ITEM,
+                    isBlocking: true,
+                  },
+                ],
+              }}
+            />
+          </Form>
+        );
+      };
+
+      registerTestBed(TestForm)();
+
+      let validateResponse: FieldValidateResponse;
+
+      await act(async () => {
+        validateResponse = await fieldHook!.validate({
+          value: EMPTY_VALUE,
+          validationType: VALIDATION_TYPES.ARRAY_ITEM,
+        });
+      });
+
+      // validation fails for ARRAY_ITEM with a blocking validation error
+      expect(validateResponse!).toEqual({
+        isValid: false,
+        errors: [
+          {
+            code: 'ERR_FIELD_MISSING',
+            path: 'test-path',
+            message: 'error-message',
+            __isBlocking__: true,
+            validationType: 'arrayItem',
+          },
+        ],
+      });
+
+      // expect the field to be invalid because the validation error is blocking
+      expect(fieldHook!.isValid).toBe(false);
+    });
+  });
+});

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -189,11 +189,11 @@ export const useField = <T, FormType = FormData, I = T>(
       {
         formData,
         value: valueToValidate,
-        validationTypeToValidate,
+        validationTypeToValidate = VALIDATION_TYPES.FIELD,
       }: {
         formData: any;
         value: I;
-        validationTypeToValidate?: string;
+        validationTypeToValidate: string;
       },
       clearFieldErrors: FieldHook['clearErrors']
     ): ValidationError[] | Promise<ValidationError[]> => {
@@ -203,7 +203,7 @@ 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([VALIDATION_TYPES.FIELD, VALIDATION_TYPES.ASYNC]);
+      clearFieldErrors([validationTypeToValidate, VALIDATION_TYPES.ASYNC]);
 
       cancelInflightValidation();
 
@@ -343,7 +343,7 @@ export const useField = <T, FormType = FormData, I = T>(
       const {
         formData = __getFormData$().value,
         value: valueToValidate = value,
-        validationType,
+        validationType = VALIDATION_TYPES.FIELD,
       } = validationData;
 
       setIsValidated(true);

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.test.tsx

@@ -10,15 +10,16 @@ import React, { useEffect } from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { registerTestBed, getRandomString, TestBed } from '../shared_imports';
-
+import { emptyField } from '../../helpers/field_validators';
 import { Form, UseField } from '../components';
 import {
   FormSubmitHandler,
   OnUpdateHandler,
   FormHook,
   ValidationFunc,
   FieldConfig,
-} from '../types';
+  VALIDATION_TYPES,
+} from '..';
 import { useForm } from './use_form';
 
 interface MyForm {
@@ -501,4 +502,74 @@ describe('useForm() hook', () => {
       expect(isValid).toBeUndefined(); // Make sure it is "undefined" and not "false".
     });
   });
+
+  describe('form.validate()', () => {
+    test('should not invalidate a field with arrayItem validation when validating a form', async () => {
+      const TestComp = () => {
+        const { form } = useForm();
+        formHook = form;
+
+        return (
+          <Form form={form}>
+            <UseField
+              path="test-path"
+              config={{
+                validations: [
+                  {
+                    validator: emptyField('error-message'),
+                    type: VALIDATION_TYPES.ARRAY_ITEM,
+                    isBlocking: false,
+                  },
+                ],
+              }}
+            />
+          </Form>
+        );
+      };
+
+      registerTestBed(TestComp)();
+
+      let isValid: boolean = false;
+
+      await act(async () => {
+        isValid = await formHook!.validate();
+      });
+
+      expect(isValid).toBe(true);
+    });
+
+    test('should invalidate a field with a blocking arrayItem validation when validating a form', async () => {
+      const TestComp = () => {
+        const { form } = useForm();
+        formHook = form;
+
+        return (
+          <Form form={form}>
+            <UseField
+              path="test-path"
+              config={{
+                validations: [
+                  {
+                    validator: emptyField('error-message'),
+                    type: VALIDATION_TYPES.ARRAY_ITEM,
+                    isBlocking: true,
+                  },
+                ],
+              }}
+            />
+          </Form>
+        );
+      };
+
+      registerTestBed(TestComp)();
+
+      let isValid: boolean = false;
+
+      await act(async () => {
+        isValid = await formHook!.validate();
+      });
+
+      expect(isValid).toBe(false);
+    });
+  });
 });