From 42bda1d29483d404462a8578937f8b324d4c6cff Mon Sep 17 00:00:00 2001
From: Pablo Neves Machado <pablo.nevesmachado@elastic.co>
Date: Mon, 28 Jun 2021 17:25:04 +0200
Subject: [PATCH] Fix error when validating the form with non blocking
 validations

issue: https://github.com/elastic/kibana/issues/102338
---
 .../hook_form_lib/hooks/use_field.test.tsx    | 142 ++++++++++++++++++
 .../forms/hook_form_lib/hooks/use_field.ts    |   2 +-
 2 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.test.tsx

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.test.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.test.tsx
new file mode 100644
index 000000000000000..575e662dae82bdb
--- /dev/null
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.test.tsx
@@ -0,0 +1,142 @@
+/*
+ * 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, FormHook, VALIDATION_TYPES } from '..';
+
+describe('useField() hook', () => {
+  describe('form.validate()', () => {
+    test('It should not invalidate a field with arrayItem validation when validating a form', async () => {
+      let formHook: FormHook;
+
+      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,
+                  },
+                ],
+              }}
+            />
+          </Form>
+        );
+      };
+
+      registerTestBed(TestComp)();
+
+      await act(async () => {
+        await formHook!.validate();
+      });
+
+      const { isValid } = formHook!;
+      expect(isValid).toBe(true);
+    });
+  });
+
+  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)();
+
+      act(() => {
+        fieldHook!.validate({
+          value: EMPTY_VALUE,
+          validationType: VALIDATION_TYPES.ARRAY_ITEM,
+        });
+      });
+
+      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)();
+
+      act(() => {
+        fieldHook!.validate({
+          value: EMPTY_VALUE,
+          validationType: VALIDATION_TYPES.ARRAY_ITEM,
+        });
+      });
+
+      expect(fieldHook!.isValid).toBe(false);
+    });
+  });
+});
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
index 0cf1bb360166716..3b642548b3e8362 100644
--- 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
@@ -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);