refactor how errors are listened to, use the new "onError" callback

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts

@@ -883,9 +883,9 @@ describe('<EditPolicy />', () => {
     // the form object before we look at the form object. See:
     // x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/form_errors_context.tsx
     // for where this logic lives.
-    const runTimers = async () => {
+    const runTimers = () => {
       const { component } = testBed;
-      await act(async () => {
+      act(() => {
         jest.runAllTimers();
       });
       component.update();
@@ -913,7 +913,7 @@ describe('<EditPolicy />', () => {
       // 1. Hot phase validation issue
       await actions.hot.toggleForceMerge(true);
       await actions.hot.setForcemergeSegmentsCount('-22');
-      await runTimers();
+      runTimers();
       expect(actions.hasGlobalErrorCallout()).toBe(true);
       expect(actions.hot.hasErrorIndicator()).toBe(true);
       expect(actions.warm.hasErrorIndicator()).toBe(false);

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/toggle_field_with_described_form_row.tsx

@@ -5,7 +5,7 @@
  */
 import React, { FunctionComponent } from 'react';
 
-import { UseField } from '../../../../../shared_imports';
+import { UseField } from '../../form';
 
 import {
   DescribedFormRow,

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/form_errors_callout.tsx

@@ -22,7 +22,9 @@ const i18nTexts = {
 };
 
 export const FormErrorsCallout: FunctionComponent = () => {
-  const { hasErrors } = useFormErrorsContext();
+  const {
+    errors: { hasErrors },
+  } = useFormErrorsContext();
 
   if (!hasErrors) {
     return null;

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx

@@ -9,7 +9,9 @@ import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiDescribedFormGroup, EuiTextColor, EuiFormRow } from '@elastic/eui';
 
-import { useFormData, UseField, ToggleField } from '../../../../../../shared_imports';
+import { useFormData, ToggleField } from '../../../../../../shared_imports';
+
+import { UseField } from '../../../form';
 
 import { ActiveBadge, LearnMoreLink, OptionalLabel } from '../../index';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx

@@ -19,11 +19,11 @@ import {
   EuiIcon,
 } from '@elastic/eui';
 
-import { useFormData, UseField, SelectField, NumericField } from '../../../../../../shared_imports';
+import { useFormData, SelectField, NumericField } from '../../../../../../shared_imports';
 
 import { i18nTexts } from '../../../i18n_texts';
 
-import { ROLLOVER_EMPTY_VALIDATION, useConfigurationIssues } from '../../../form';
+import { ROLLOVER_EMPTY_VALIDATION, useConfigurationIssues, UseField } from '../../../form';
 
 import { useEditPolicyContext } from '../../../edit_policy_context';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx

@@ -18,9 +18,10 @@ import {
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { ToggleField, UseField, useFormData } from '../../../../../../shared_imports';
+import { ToggleField, useFormData } from '../../../../../../shared_imports';
 import { i18nTexts } from '../../../i18n_texts';
 
+import { UseField } from '../../../form';
 import { ActiveHighlight } from '../../active_highlight';
 import { MinAgeField } from '../shared_fields';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_error_indicator.tsx

@@ -23,9 +23,9 @@ const i18nTexts = {
  * This component hooks into the form state and updates whenever new form data is inputted.
  */
 export const PhaseErrorIndicator: FunctionComponent<Props> = memo(({ phase }) => {
-  const errors = useFormErrorsContext();
+  const { errors } = useFormErrorsContext();
 
-  if (errors[phase].length > 0) {
+  if (Object.keys(errors[phase]).length) {
     return (
       <div data-test-subj={`phaseErrorIndicator-${phase}`}>
         <EuiIconTip type="alert" color="danger" content={i18nTexts.toolTipContent} />

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/components/data_tier_allocation.tsx

@@ -4,16 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import React, { FunctionComponent } from 'react';
 import { get } from 'lodash';
-import { i18n } from '@kbn/i18n';
 import { EuiText, EuiSpacer, EuiSuperSelectOption } from '@elastic/eui';
 
-import { UseField, SuperSelectField, useFormData } from '../../../../../../../../shared_imports';
+import { SuperSelectField, useFormData } from '../../../../../../../../shared_imports';
 import { PhaseWithAllocation } from '../../../../../../../../../common/types';
 
 import { DataTierAllocationType } from '../../../../../types';
 
+import { UseField } from '../../../../../form';
+
 import { NodeAllocation } from './node_allocation';
 import { SharedProps } from './types';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/components/node_allocation.tsx

@@ -4,13 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import React, { useState, FunctionComponent } from 'react';
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
 import { EuiButtonEmpty, EuiText, EuiSpacer } from '@elastic/eui';
 
-import { UseField, SelectField, useFormData } from '../../../../../../../../shared_imports';
+import { SelectField, useFormData } from '../../../../../../../../shared_imports';
+
+import { UseField } from '../../../../../form';
 
 import { LearnMoreLink } from '../../../../learn_more_link';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx

@@ -7,12 +7,14 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { UseField, CheckBoxField, NumericField } from '../../../../../../shared_imports';
+import { CheckBoxField, NumericField } from '../../../../../../shared_imports';
 
 import { i18nTexts } from '../../../i18n_texts';
 
 import { useEditPolicyContext } from '../../../edit_policy_context';
 
+import { UseField } from '../../../form';
+
 import { LearnMoreLink, DescribedFormRow } from '../../';
 
 interface Props {

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/index_priority_field.tsx

@@ -4,14 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import React, { FunctionComponent, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiTextColor } from '@elastic/eui';
 
-import { UseField, NumericField } from '../../../../../../shared_imports';
-import { LearnMoreLink, DescribedFormRow } from '../..';
+import { NumericField } from '../../../../../../shared_imports';
+
 import { useEditPolicyContext } from '../../../edit_policy_context';
+import { UseField } from '../../../form';
+
+import { LearnMoreLink, DescribedFormRow } from '../..';
 
 interface Props {
   phase: 'hot' | 'warm' | 'cold';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx

@@ -3,8 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
+import React, { FunctionComponent } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
@@ -17,7 +17,9 @@ import {
   EuiText,
 } from '@elastic/eui';
 
-import { UseField, getFieldValidityAndErrorMessage } from '../../../../../../../shared_imports';
+import { getFieldValidityAndErrorMessage } from '../../../../../../../shared_imports';
+
+import { UseField } from '../../../../form';
 
 import { getUnitsAriaLabelForPhase, getTimingLabelForPhase } from './util';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx

@@ -7,8 +7,11 @@
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { UseField, NumericField } from '../../../../../../shared_imports';
+import { NumericField } from '../../../../../../shared_imports';
+
 import { useEditPolicyContext } from '../../../edit_policy_context';
+import { UseField } from '../../../form';
+
 import { DescribedFormRow } from '../../described_form_row';
 
 interface Props {

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
+import { get } from 'lodash';
 import React, { FunctionComponent, useState, useEffect } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -17,15 +17,14 @@ import {
 } from '@elastic/eui';
 
 import {
-  UseField,
   ComboBoxField,
   useKibana,
   fieldValidators,
   useFormData,
 } from '../../../../../../../shared_imports';
 
 import { useEditPolicyContext } from '../../../../edit_policy_context';
-import { useConfigurationIssues } from '../../../../form';
+import { useConfigurationIssues, UseField } from '../../../../form';
 
 import { i18nTexts } from '../../../../i18n_texts';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/shrink_field.tsx

@@ -7,9 +7,10 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTextColor } from '@elastic/eui';
 import React, { FunctionComponent } from 'react';
 
-import { UseField, NumericField } from '../../../../../../shared_imports';
+import { NumericField } from '../../../../../../shared_imports';
 
 import { useEditPolicyContext } from '../../../edit_policy_context';
+import { UseField } from '../../../form';
 import { i18nTexts } from '../../../i18n_texts';
 
 import { LearnMoreLink, DescribedFormRow } from '../../';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/snapshot_policies_field.tsx

@@ -11,9 +11,11 @@ import { i18n } from '@kbn/i18n';
 
 import { EuiCallOut, EuiComboBoxOptionOption, EuiLink, EuiSpacer } from '@elastic/eui';
 
-import { UseField, ComboBoxField, useFormData } from '../../../../../../shared_imports';
+import { ComboBoxField, useFormData } from '../../../../../../shared_imports';
 import { useLoadSnapshotPolicies } from '../../../../../services/api';
+
 import { useEditPolicyContext } from '../../../edit_policy_context';
+import { UseField } from '../../../form';
 
 import { FieldLoadingError } from '../../';
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx

@@ -4,15 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { get } from 'lodash';
 
 import { RouteComponentProps } from 'react-router-dom';
 
-import { FormattedMessage } from '@kbn/i18n/react';
-
-import { i18n } from '@kbn/i18n';
-
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -31,11 +29,13 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import { TextField, UseField, useForm, useFormData } from '../../../shared_imports';
+import { TextField, useForm, useFormData } from '../../../shared_imports';
 
 import { toasts } from '../../services/notification';
 import { createDocLink } from '../../services/documentation';
 
+import { UseField } from './form';
+
 import { savePolicy } from './save_policy';
 
 import {

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/components/enhanced_use_field.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+
+// We wrap this component for edit policy so we do not export it from the "shared_imports" dir to avoid
+// accidentally using the non-enhanced version.
+import { UseField } from '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
+
+import { Phases } from '../../../../../../common/types';
+
+import { UseFieldProps, FormData } from '../../../../../shared_imports';
+
+import { useFormErrorsContext } from '../form_errors_context';
+
+const isXPhaseField = (phase: keyof Phases) => (fieldPath: string): boolean =>
+  fieldPath.startsWith(`phases.${phase}`) || fieldPath.startsWith(`_meta.${phase}`);
+
+const isHotPhaseField = isXPhaseField('hot');
+const isWarmPhaseField = isXPhaseField('warm');
+const isColdPhaseField = isXPhaseField('cold');
+const isDeletePhaseField = isXPhaseField('delete');
+
+const determineFieldPhase = (fieldPath: string): keyof Phases | 'other' => {
+  if (isHotPhaseField(fieldPath)) {
+    return 'hot';
+  }
+  if (isWarmPhaseField(fieldPath)) {
+    return 'warm';
+  }
+  if (isColdPhaseField(fieldPath)) {
+    return 'cold';
+  }
+  if (isDeletePhaseField(fieldPath)) {
+    return 'delete';
+  }
+  return 'other';
+};
+
+export const EnhancedUseField = <T, F = FormData, I = T>(
+  props: UseFieldProps<T, F, I>
+): React.ReactElement<any, any> | null => {
+  const { path } = props;
+  const isMounted = useRef<boolean>(false);
+  const phase = useMemo(() => determineFieldPhase(path), [path]);
+  const { addError, clearError } = useFormErrorsContext();
+
+  const onError = useCallback(
+    (errors: string[] | null) => {
+      if (!isMounted.current) {
+        return;
+      }
+      if (errors) {
+        addError(phase, path, errors);
+      } else {
+        clearError(phase, path);
+      }
+    },
+    [phase, path, addError, clearError]
+  );
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return <UseField {...props} onError={onError} />;
+};

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/components/index.ts

@@ -5,3 +5,5 @@
  */
 
 export { Form } from './form';
+
+export { EnhancedUseField } from './enhanced_use_field';