[Runtime field editor] Reset validation when type change (#96302)

elastic · Apr 7, 2021 · 1327bfe · 1327bfe
1 parent 80e3d21
commit 1327bfe
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 9 deletions.
diff --git a/src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.test.tsx b/src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.test.tsx
@@ -6,10 +6,12 @@
  * Side Public License, v 1.
  */
 
+import React, { useState, useMemo } from 'react';
 import { act } from 'react-dom/test-utils';
 
 import '../../test_utils/setup_environment';
 import { registerTestBed, TestBed, getCommonActions } from '../../test_utils';
+import { RuntimeFieldPainlessError } from '../../lib';
 import { Field } from '../../types';
 import { FieldEditor, Props, FieldEditorFormState } from './field_editor';
 
@@ -208,5 +210,66 @@ describe('<FieldEditor />', () => {
       expect(getLastStateUpdate().isValid).toBe(true);
       expect(form.getErrorsMessages()).toEqual([]);
     });
+
+    test('should clear the painless syntax error whenever the field type changes', async () => {
+      const field: Field = {
+        name: 'myRuntimeField',
+        type: 'keyword',
+        script: { source: 'emit(6)' },
+      };
+
+      const TestComponent = () => {
+        const dummyError = {
+          reason: 'Awwww! Painless syntax error',
+          message: '',
+          position: { offset: 0, start: 0, end: 0 },
+          scriptStack: [''],
+        };
+        const [error, setError] = useState<RuntimeFieldPainlessError | null>(null);
+        const clearError = useMemo(() => () => setError(null), []);
+        const syntaxError = useMemo(() => ({ error, clear: clearError }), [error, clearError]);
+
+        return (
+          <>
+            <FieldEditor {...defaultProps} field={field} syntaxError={syntaxError} />
+
+            {/* Button to forward dummy syntax error */}
+            <button onClick={() => setError(dummyError)} data-test-subj="setPainlessErrorButton">
+              Set painless error
+            </button>
+          </>
+        );
+      };
+
+      const customTestbed = registerTestBed(TestComponent, {
+        memoryRouter: {
+          wrapComponent: false,
+        },
+      })() as TestBed<string>;
+
+      testBed = {
+        ...customTestbed,
+        actions: getCommonActions(customTestbed),
+      };
+
+      const {
+        form,
+        component,
+        find,
+        actions: { changeFieldType },
+      } = testBed;
+
+      // We set some dummy painless error
+      act(() => {
+        find('setPainlessErrorButton').simulate('click');
+      });
+      component.update();
+
+      expect(form.getErrorsMessages()).toEqual(['Awwww! Painless syntax error']);
+
+      // We change the type and expect the form error to not be there anymore
+      await changeFieldType('long');
+      expect(form.getErrorsMessages()).toEqual([]);
+    });
   });
 });
diff --git a/src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.tsx b/src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.tsx
@@ -21,6 +21,7 @@ import type { CoreStart } from 'src/core/public';
 import {
   Form,
   useForm,
+  useFormData,
   FormHook,
   UseField,
   TextField,
@@ -184,6 +185,9 @@ const FieldEditorComponent = ({
     serializer: formSerializer,
   });
   const { submit, isValid: isFormValid, isSubmitted } = form;
+  const { clear: clearSyntaxError } = syntaxError;
+
+  const [{ type }] = useFormData<FieldFormInternal>({ form });
 
   const nameFieldConfig = getNameFieldConfig(namesNotAllowed, field);
   const i18nTexts = geti18nTexts();
@@ -194,6 +198,12 @@ const FieldEditorComponent = ({
     }
   }, [onChange, isFormValid, isSubmitted, submit]);
 
+  useEffect(() => {
+    // Whenever the field "type" changes we clear any possible painless syntax
+    // error as it is possibly stale.
+    clearSyntaxError();
+  }, [type, clearSyntaxError]);
+
   return (
     <Form form={form} className="indexPatternFieldEditor__form">
       <EuiFlexGroup>

diff --git a/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.test.ts b/src/plugins/index_pattern_field_editor/public/components/field_editor_flyout_content.test.ts
@@ -140,7 +140,7 @@ describe('<FieldEditorFlyoutContent />', () => {
         find,
         component,
         form,
-        actions: { toggleFormRow },
+        actions: { toggleFormRow, changeFieldType },
       } = setup({ ...defaultProps, onSave });
 
       act(() => {
@@ -173,14 +173,7 @@ describe('<FieldEditorFlyoutContent />', () => {
       });
 
       // Change the type and make sure it is forwarded
-      act(() => {
-        find('typeField').simulate('change', [
-          {
-            label: 'Other type',
-            value: 'other_type',
-          },
-        ]);
-      });
+      await changeFieldType('other_type', 'Other type');
 
       await act(async () => {
         find('fieldSaveButton').simulate('click');

diff --git a/src/plugins/index_pattern_field_editor/public/test_utils/helpers.ts b/src/plugins/index_pattern_field_editor/public/test_utils/helpers.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { act } from 'react-dom/test-utils';
 import { TestBed } from './test_utils';
 
 export const getCommonActions = (testBed: TestBed) => {
@@ -21,7 +22,20 @@ export const getCommonActions = (testBed: TestBed) => {
     testBed.form.toggleEuiSwitch(testSubj);
   };
 
+  const changeFieldType = async (value: string, label?: string) => {
+    await act(async () => {
+      testBed.find('typeField').simulate('change', [
+        {
+          value,
+          label: label ?? value,
+        },
+      ]);
+    });
+    testBed.component.update();
+  };
+
   return {
     toggleFormRow,
+    changeFieldType,
   };
 };