[ILM] Migrate Warm phase to Form Lib (#81323) (#81735)

* migrate all fields on warm phase except, data alloc, replicas and shrink

* introduce edit policy context to share original policy and migrate shrink and replicas fields

* Refactored biggest field; data allocation

Copied the entire field for now duplicating all of the components

* remove unused import

* complete migration of new serialization

* Remove last vestiges of legacy warm phase

- also removed policy serialization tests for warm phase

* fix existing test coverage and remove use of "none" for node attribute

* added policy serialization tests

* remove unused translations

* Fix use of useFormData after update

- also minor refactor to use useCallback in policy flyout now
  that getFormData changes when the form data changes.

* fix import path

* simplify serialization snapshot tests

* type phases: string -> phases: Phases

* Addressed some PR review items

- refactor toggle click to take a boolean arg
- refactor selection options in data tier component to use a func
  to get select options.

* updated data tier callout logic after new changes

* getPolicy -> updatePolicy

Also rather deconstruct the validate fn from the form object

* fix detection of migrate false and refactor serialization to pure function

* fix type issue

* fix for correctly detecting policy data tier type

- with jest tests see origin here:
#81642

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -14,17 +14,52 @@ export const DEFAULT_POLICY: PolicyFromES = {
   version: 1,
   modified_date: Date.now().toString(),
   policy: {
-    name: '',
+    name: 'my_policy',
+    phases: {
+      hot: {
+        min_age: '0ms',
+        actions: {
+          rollover: {
+            max_age: '30d',
+            max_size: '50gb',
+          },
+        },
+      },
+    },
+  },
+  name: 'my_policy',
+};
+
+export const POLICY_WITH_INCLUDE_EXCLUDE: PolicyFromES = {
+  version: 1,
+  modified_date: Date.now().toString(),
+  policy: {
+    name: 'my_policy',
     phases: {
       hot: {
         min_age: '123ms',
         actions: {
-          rollover: {},
+          rollover: {
+            max_age: '30d',
+            max_size: '50gb',
+          },
+        },
+      },
+      warm: {
+        actions: {
+          allocate: {
+            include: {
+              abc: '123',
+            },
+            exclude: {
+              def: '456',
+            },
+          },
         },
       },
     },
   },
-  name: '',
+  name: 'my_policy',
 };
 
 export const DELETE_PHASE_POLICY: PolicyFromES = {
@@ -60,3 +95,58 @@ export const DELETE_PHASE_POLICY: PolicyFromES = {
   },
   name: POLICY_NAME,
 };
+
+export const POLICY_WITH_NODE_ATTR_AND_OFF_ALLOCATION: PolicyFromES = {
+  version: 1,
+  modified_date: Date.now().toString(),
+  policy: {
+    phases: {
+      hot: {
+        min_age: '0ms',
+        actions: {
+          rollover: {
+            max_size: '50gb',
+          },
+        },
+      },
+      warm: {
+        actions: {
+          allocate: {
+            require: {},
+            include: { test: '123' },
+            exclude: {},
+          },
+        },
+      },
+      cold: {
+        actions: {
+          migrate: { enabled: false },
+        },
+      },
+    },
+    name: POLICY_NAME,
+  },
+  name: POLICY_NAME,
+};
+
+export const POLICY_WITH_NODE_ROLE_ALLOCATION: PolicyFromES = {
+  version: 1,
+  modified_date: Date.now().toString(),
+  policy: {
+    phases: {
+      hot: {
+        min_age: '0ms',
+        actions: {
+          rollover: {
+            max_size: '50gb',
+          },
+        },
+      },
+      warm: {
+        actions: {},
+      },
+    },
+    name: POLICY_NAME,
+  },
+  name: POLICY_NAME,
+};

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx

@@ -9,11 +9,16 @@ import { act } from 'react-dom/test-utils';
 
 import { registerTestBed, TestBedConfig } from '../../../../../test_utils';
 
+import { EditPolicy } from '../../../public/application/sections/edit_policy';
+import { DataTierAllocationType } from '../../../public/application/sections/edit_policy/types';
+
+import { Phases as PolicyPhases } from '../../../common/types';
+
+type Phases = keyof PolicyPhases;
+
 import { POLICY_NAME } from './constants';
 import { TestSubjects } from '../helpers';
 
-import { EditPolicy } from '../../../public/application/sections/edit_policy';
-
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
 
@@ -52,7 +57,23 @@ export type EditPolicyTestBed = SetupReturn extends Promise<infer U> ? U : Setup
 export const setup = async () => {
   const testBed = await initTestBed();
 
-  const { find, component } = testBed;
+  const { find, component, form } = testBed;
+
+  const createFormToggleAction = (dataTestSubject: string) => async (checked: boolean) => {
+    await act(async () => {
+      form.toggleEuiSwitch(dataTestSubject, checked);
+    });
+    component.update();
+  };
+
+  function createFormSetValueAction<V extends string = string>(dataTestSubject: string) {
+    return async (value: V) => {
+      await act(async () => {
+        form.setInputValue(dataTestSubject, value);
+      });
+      component.update();
+    };
+  }
 
   const setWaitForSnapshotPolicy = async (snapshotPolicyName: string) => {
     act(() => {
@@ -68,12 +89,7 @@ export const setup = async () => {
     component.update();
   };
 
-  const toggleRollover = async (checked: boolean) => {
-    await act(async () => {
-      find('rolloverSwitch').simulate('click', { target: { checked } });
-    });
-    component.update();
-  };
+  const toggleRollover = createFormToggleAction('rolloverSwitch');
 
   const setMaxSize = async (value: string, units?: string) => {
     await act(async () => {
@@ -87,12 +103,7 @@ export const setup = async () => {
     component.update();
   };
 
-  const setMaxDocs = async (value: string) => {
-    await act(async () => {
-      find('hot-selectedMaxDocuments').simulate('change', { target: { value } });
-    });
-    component.update();
-  };
+  const setMaxDocs = createFormSetValueAction('hot-selectedMaxDocuments');
 
   const setMaxAge = async (value: string, units?: string) => {
     await act(async () => {
@@ -104,32 +115,56 @@ export const setup = async () => {
     component.update();
   };
 
-  const toggleForceMerge = (phase: string) => async (checked: boolean) => {
-    await act(async () => {
-      find(`${phase}-forceMergeSwitch`).simulate('click', { target: { checked } });
+  const toggleForceMerge = (phase: Phases) => createFormToggleAction(`${phase}-forceMergeSwitch`);
+
+  const setForcemergeSegmentsCount = (phase: Phases) =>
+    createFormSetValueAction(`${phase}-selectedForceMergeSegments`);
+
+  const setBestCompression = (phase: Phases) => createFormToggleAction(`${phase}-bestCompression`);
+
+  const setIndexPriority = (phase: Phases) =>
+    createFormSetValueAction(`${phase}-phaseIndexPriority`);
+
+  const enable = (phase: Phases) => createFormToggleAction(`enablePhaseSwitch-${phase}`);
+
+  const warmPhaseOnRollover = createFormToggleAction(`warm-warmPhaseOnRollover`);
+
+  const setMinAgeValue = (phase: Phases) => createFormSetValueAction(`${phase}-selectedMinimumAge`);
+
+  const setMinAgeUnits = (phase: Phases) =>
+    createFormSetValueAction(`${phase}-selectedMinimumAgeUnits`);
+
+  const setDataAllocation = (phase: Phases) => async (value: DataTierAllocationType) => {
+    act(() => {
+      find(`${phase}-dataTierAllocationControls.dataTierSelect`).simulate('click');
     });
     component.update();
-  };
-
-  const setForcemergeSegmentsCount = (phase: string) => async (value: string) => {
     await act(async () => {
-      find(`${phase}-selectedForceMergeSegments`).simulate('change', { target: { value } });
+      switch (value) {
+        case 'node_roles':
+          find(`${phase}-dataTierAllocationControls.defaultDataAllocationOption`).simulate('click');
+          break;
+        case 'node_attrs':
+          find(`${phase}-dataTierAllocationControls.customDataAllocationOption`).simulate('click');
+          break;
+        default:
+          find(`${phase}-dataTierAllocationControls.noneDataAllocationOption`).simulate('click');
+      }
     });
     component.update();
   };
 
-  const setBestCompression = (phase: string) => async (checked: boolean) => {
-    await act(async () => {
-      find(`${phase}-bestCompression`).simulate('click', { target: { checked } });
-    });
-    component.update();
+  const setSelectedNodeAttribute = (phase: string) =>
+    createFormSetValueAction(`${phase}-selectedNodeAttrs`);
+
+  const setReplicas = async (value: string) => {
+    await createFormToggleAction('warm-setReplicasSwitch')(true);
+    await createFormSetValueAction('warm-selectedReplicaCount')(value);
   };
 
-  const setIndexPriority = (phase: string) => async (value: string) => {
-    await act(async () => {
-      find(`${phase}-phaseIndexPriority`).simulate('change', { target: { value } });
-    });
-    component.update();
+  const setShrink = async (value: string) => {
+    await createFormToggleAction('shrinkSwitch')(true);
+    await createFormSetValueAction('warm-selectedPrimaryShardCount')(value);
   };
 
   return {
@@ -147,6 +182,20 @@ export const setup = async () => {
         setBestCompression: setBestCompression('hot'),
         setIndexPriority: setIndexPriority('hot'),
       },
+      warm: {
+        enable: enable('warm'),
+        warmPhaseOnRollover,
+        setMinAgeValue: setMinAgeValue('warm'),
+        setMinAgeUnits: setMinAgeUnits('warm'),
+        setDataAllocation: setDataAllocation('warm'),
+        setSelectedNodeAttribute: setSelectedNodeAttribute('warm'),
+        setReplicas,
+        setShrink,
+        toggleForceMerge: toggleForceMerge('warm'),
+        setForcemergeSegments: setForcemergeSegmentsCount('warm'),
+        setBestCompression: setBestCompression('warm'),
+        setIndexPriority: setIndexPriority('warm'),
+      },
     },
   };
 };