Fix downsample validation when downsample action disappears from the …

…previous phase (elastic#140628)
wayneseymour · Sep 15, 2022 · 517ef60 · 517ef60
1 parent e3664b1
commit 517ef60
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 21 deletions.
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
@@ -16,8 +16,6 @@ import { emptyField } from '../../helpers/field_validators';
 import { FieldHook, FieldValidateResponse, VALIDATION_TYPES, FieldConfig } from '..';
 
 describe('useField() hook', () => {
-  let fieldHook: FieldHook;
-
   beforeAll(() => {
     jest.useFakeTimers();
   });
@@ -26,22 +24,23 @@ describe('useField() hook', () => {
     jest.useRealTimers();
   });
 
-  const TestField = ({ field }: { field: FieldHook }) => {
-    fieldHook = field;
-    return null;
-  };
-
-  const getTestForm = (config?: FieldConfig) => () => {
-    const { form } = useForm();
-
-    return (
-      <Form form={form}>
-        <UseField path="test-path" component={TestField} config={config} />
-      </Form>
-    );
-  };
-
   describe('field.validate()', () => {
+    let fieldHook: FieldHook;
+    const TestField = ({ field }: { field: FieldHook }) => {
+      fieldHook = field;
+      return null;
+    };
+
+    const getTestForm = (config?: FieldConfig) => () => {
+      const { form } = useForm();
+
+      return (
+        <Form form={form}>
+          <UseField path="test-path" component={TestField} config={config} />
+        </Form>
+      );
+    };
+
     const EMPTY_VALUE = '   ';
 
     test('it should not invalidate a field with arrayItem validation when isBlocking is false', async () => {
@@ -149,4 +148,45 @@ describe('useField() hook', () => {
       expect(validatorFn).toBeCalledTimes(0);
     });
   });
+
+  describe('fieldsToValidateOnChange', () => {
+    const getTestForm =
+      (configField1?: FieldConfig, configField2?: FieldConfig) =>
+      ({ showField1, showField2 }: { showField1: boolean; showField2: boolean }) => {
+        const { form } = useForm();
+
+        return (
+          <Form form={form}>
+            {showField1 && <UseField path="field1" component={() => null} config={configField1} />}
+            {showField2 && <UseField path="field2" component={() => null} config={configField2} />}
+          </Form>
+        );
+      };
+
+    test('validates dependent fields on unmount', async () => {
+      const field2ValidatorFn = jest.fn();
+      const TestForm = getTestForm(
+        {
+          fieldsToValidateOnChange: ['field1', 'field2'],
+        },
+        {
+          validations: [
+            {
+              validator: field2ValidatorFn,
+            },
+          ],
+        }
+      );
+
+      const wrapper = registerTestBed(TestForm, {
+        memoryRouter: { wrapComponent: false },
+      })({ showField1: true, showField2: true });
+      expect(field2ValidatorFn).toBeCalledTimes(0);
+
+      await act(async () => {
+        wrapper.setProps({ showField1: false });
+      });
+      expect(field2ValidatorFn).toBeCalledTimes(1);
+    });
+  });
 });
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
@@ -602,8 +602,14 @@ export const useField = <T, FormType = FormData, I = T>(
       // We only remove the field from the form "fieldsRefs" map when its path
       // changes (which in practice never occurs) or whenever the <UseField /> unmounts
       __removeField(path);
+
+      // We also have to trigger validation of dependant fields
+      const dependantFields = fieldsToValidateOnChange?.filter((f) => f !== path);
+      if (dependantFields?.length) {
+        validateFields(dependantFields);
+      }
     };
-  }, [path, __removeField]);
+  }, [path, __removeField, fieldsToValidateOnChange, validateFields]);
 
   // Value change: notify prop listener (<UseField onChange={() => {...}})
   // We have a separate useEffect for this as the "onChange" handler pass through prop

diff --git a/...ement/__jest__/client_integration/edit_policy/form_validation/downsample_interval.test.ts b/...ement/__jest__/client_integration/edit_policy/form_validation/downsample_interval.test.ts
@@ -112,10 +112,13 @@ describe('<EditPolicy /> downsample interval validation', () => {
       'cold'
     );
 
-    // disable warm phase;
+    // disable warm phase, check that we now get an error because of the hot phase;
     await actions.togglePhase('warm');
-    // TODO: there is a bug that disabling a phase doesn't trigger downsample validation in other phases,
-    // users can work around it by changing the value
+    actions.errors.waitForValidation();
+    actions.errors.expectMessages(
+      ['Must be greater than and a multiple of the hot phase value (60m)'],
+      'cold'
+    );
     await actions.cold.downsample.setDownsampleInterval('120', 'm');
     actions.errors.waitForValidation();
     actions.errors.expectMessages([], 'cold');