Update ILM form

Author: sebelga

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

@@ -7,6 +7,7 @@
 import React, { FunctionComponent, Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { get } from 'lodash';
 
 import { EuiFieldNumber, EuiDescribedFormGroup, EuiSwitch, EuiTextColor } from '@elastic/eui';
 
@@ -56,10 +57,12 @@ export const ColdPhase: FunctionComponent<Props> = ({
   errors,
   isShowingErrors,
 }) => {
-  const [{ [useRolloverPath]: hotPhaseRolloverEnabled }] = useFormData({
+  const [formData] = useFormData({
     watch: [useRolloverPath],
   });
 
+  const hotPhaseRolloverEnabled = get(formData, useRolloverPath);
+
   return (
     <div id="coldPhaseContent" aria-live="polite" role="region">
       <>

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

@@ -5,6 +5,7 @@
  */
 
 import React, { FunctionComponent, Fragment } from 'react';
+import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiDescribedFormGroup, EuiSwitch, EuiTextColor, EuiFormRow } from '@elastic/eui';
 
@@ -48,10 +49,12 @@ export const DeletePhase: FunctionComponent<Props> = ({
   isShowingErrors,
   getUrlForApp,
 }) => {
-  const [{ [useRolloverPath]: hotPhaseRolloverEnabled }] = useFormData({
-    watch: [useRolloverPath],
+  const [formData] = useFormData({
+    watch: useRolloverPath,
   });
 
+  const hotPhaseRolloverEnabled = get(formData, useRolloverPath);
+
   return (
     <div id="deletePhaseContent" aria-live="polite" role="region">
       <EuiDescribedFormGroup

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

@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
+import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import {
@@ -45,8 +46,11 @@ const hotProperty: keyof Phases = 'hot';
 export const HotPhase: FunctionComponent<{ setWarmPhaseOnRollover: (v: boolean) => void }> = ({
   setWarmPhaseOnRollover,
 }) => {
-  const [{ [useRolloverPath]: isRolloverEnabled }] = useFormData({ watch: [useRolloverPath] });
   const form = useFormContext();
+  const [formData] = useFormData({
+    watch: useRolloverPath,
+  });
+  const isRolloverEnabled = get(formData, useRolloverPath);
 
   const isShowingErrors = form.isValid === false;
   const [showEmptyRolloverFieldsError, setShowEmptyRolloverFieldsError] = useState(false);

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

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiDescribedFormGroup, EuiSpacer, EuiTextColor } from '@elastic/eui';
 import React from 'react';
@@ -23,9 +23,11 @@ interface Props {
 const forceMergeEnabledPath = '_meta.hot.forceMergeEnabled';
 
 export const Forcemerge: React.FunctionComponent<Props> = ({ phase }) => {
-  const [{ [forceMergeEnabledPath]: forceMergeEnabled }] = useFormData({
-    watch: [forceMergeEnabledPath],
+  const [formData] = useFormData({
+    watch: forceMergeEnabledPath,
   });
+  const forceMergeEnabled = get(formData, forceMergeEnabledPath);
+
   return (
     <EuiDescribedFormGroup
       title={

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

@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment, FunctionComponent } from 'react';
+import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import {
@@ -73,9 +74,12 @@ export const WarmPhase: FunctionComponent<Props> = ({
   errors,
   isShowingErrors,
 }) => {
-  const [{ [useRolloverPath]: hotPhaseRolloverEnabled }] = useFormData({
-    watch: [useRolloverPath],
+  const [formData] = useFormData({
+    watch: useRolloverPath,
   });
+
+  const hotPhaseRolloverEnabled = get(formData, useRolloverPath);
+
   return (
     <div id="warmPhaseContent" aria-live="polite" role="region" aria-relevant="additions">
       <>