[7.x] [ILM] Migrate Hot phase to Form Lib (#80012)

src/plugins/es_ui_shared/static/forms/components/fields/checkbox_field.tsx

@@ -39,8 +39,8 @@ export const CheckBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) =>
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiCheckbox
         label={field.label}

src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx

@@ -87,8 +87,8 @@ export const ComboBoxField = ({ field, euiFieldProps = {}, ...rest }: Props) =>
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiComboBox
         noSuggestions

src/plugins/es_ui_shared/static/forms/components/fields/multi_select_field.tsx

@@ -39,8 +39,8 @@ export const MultiSelectField = ({ field, euiFieldProps = {}, ...rest }: Props)
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiSelectable
         allowExclusions={false}

src/plugins/es_ui_shared/static/forms/components/fields/numeric_field.tsx

@@ -39,8 +39,8 @@ export const NumericField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiFieldNumber
         isInvalid={isInvalid}

src/plugins/es_ui_shared/static/forms/components/fields/radio_group_field.tsx

@@ -39,8 +39,8 @@ export const RadioGroupField = ({ field, euiFieldProps = {}, ...rest }: Props) =
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiRadioGroup
         idSelected={field.value as string}

src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx

@@ -50,8 +50,8 @@ export const RangeField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiRange
         value={field.value as number}

src/plugins/es_ui_shared/static/forms/components/fields/select_field.tsx

@@ -44,8 +44,8 @@ export const SelectField = ({ field, euiFieldProps, ...rest }: Props) => {
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiSelect
         fullWidth

src/plugins/es_ui_shared/static/forms/components/fields/super_select_field.tsx

@@ -42,8 +42,8 @@ export const SuperSelectField = ({ field, euiFieldProps = { options: [] }, ...re
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiSuperSelect
         fullWidth

src/plugins/es_ui_shared/static/forms/components/fields/text_area_field.tsx

@@ -39,8 +39,8 @@ export const TextAreaField = ({ field, euiFieldProps = {}, ...rest }: Props) =>
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiTextArea
         isInvalid={isInvalid}

src/plugins/es_ui_shared/static/forms/components/fields/text_field.tsx

@@ -39,8 +39,8 @@ export const TextField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiFieldText
         isInvalid={isInvalid}

src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx

@@ -46,8 +46,8 @@ export const ToggleField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth
-      data-test-subj={rest['data-test-subj']}
       describedByIds={rest.idAria ? [rest.idAria] : undefined}
+      {...rest}
     >
       <EuiSwitch
         label={field.label}

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

@@ -10,6 +10,23 @@ export const POLICY_NAME = 'my_policy';
 export const SNAPSHOT_POLICY_NAME = 'my_snapshot_policy';
 export const NEW_SNAPSHOT_POLICY_NAME = 'my_new_snapshot_policy';
 
+export const DEFAULT_POLICY: PolicyFromES = {
+  version: 1,
+  modified_date: Date.now().toString(),
+  policy: {
+    name: '',
+    phases: {
+      hot: {
+        min_age: '123ms',
+        actions: {
+          rollover: {},
+        },
+      },
+    },
+  },
+  name: '',
+};
+
 export const DELETE_PHASE_POLICY: PolicyFromES = {
   version: 1,
   modified_date: Date.now().toString(),
@@ -19,8 +36,12 @@ export const DELETE_PHASE_POLICY: PolicyFromES = {
         min_age: '0ms',
         actions: {
           rollover: {
+            max_age: '30d',
             max_size: '50gb',
           },
+          set_priority: {
+            priority: 100,
+          },
         },
       },
       delete: {

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

@@ -7,7 +7,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import { registerTestBed, TestBed, TestBedConfig } from '../../../../../test_utils';
+import { registerTestBed, TestBedConfig } from '../../../../../test_utils';
 
 import { POLICY_NAME } from './constants';
 import { TestSubjects } from '../helpers';
@@ -43,39 +43,110 @@ const testBedConfig: TestBedConfig = {
   },
 };
 
-const initTestBed = registerTestBed(EditPolicy, testBedConfig);
+const initTestBed = registerTestBed<TestSubjects>(EditPolicy, testBedConfig);
 
-export interface EditPolicyTestBed extends TestBed<TestSubjects> {
-  actions: {
-    setWaitForSnapshotPolicy: (snapshotPolicyName: string) => void;
-    savePolicy: () => void;
-  };
-}
+type SetupReturn = ReturnType<typeof setup>;
+
+export type EditPolicyTestBed = SetupReturn extends Promise<infer U> ? U : SetupReturn;
 
-export const setup = async (): Promise<EditPolicyTestBed> => {
+export const setup = async () => {
   const testBed = await initTestBed();
 
+  const { find, component } = testBed;
+
   const setWaitForSnapshotPolicy = async (snapshotPolicyName: string) => {
-    const { component } = testBed;
     act(() => {
-      testBed.find('snapshotPolicyCombobox').simulate('change', [{ label: snapshotPolicyName }]);
+      find('snapshotPolicyCombobox').simulate('change', [{ label: snapshotPolicyName }]);
     });
     component.update();
   };
 
   const savePolicy = async () => {
-    const { component, find } = testBed;
     await act(async () => {
       find('savePolicyButton').simulate('click');
     });
     component.update();
   };
 
+  const toggleRollover = async (checked: boolean) => {
+    await act(async () => {
+      find('rolloverSwitch').simulate('click', { target: { checked } });
+    });
+    component.update();
+  };
+
+  const setMaxSize = async (value: string, units?: string) => {
+    await act(async () => {
+      find('hot-selectedMaxSizeStored').simulate('change', { target: { value } });
+      if (units) {
+        find('hot-selectedMaxSizeStoredUnits.select').simulate('change', {
+          target: { value: units },
+        });
+      }
+    });
+    component.update();
+  };
+
+  const setMaxDocs = async (value: string) => {
+    await act(async () => {
+      find('hot-selectedMaxDocuments').simulate('change', { target: { value } });
+    });
+    component.update();
+  };
+
+  const setMaxAge = async (value: string, units?: string) => {
+    await act(async () => {
+      find('hot-selectedMaxAge').simulate('change', { target: { value } });
+      if (units) {
+        find('hot-selectedMaxAgeUnits.select').simulate('change', { target: { value: units } });
+      }
+    });
+    component.update();
+  };
+
+  const toggleForceMerge = (phase: string) => async (checked: boolean) => {
+    await act(async () => {
+      find(`${phase}-forceMergeSwitch`).simulate('click', { target: { checked } });
+    });
+    component.update();
+  };
+
+  const setForcemergeSegmentsCount = (phase: string) => async (value: string) => {
+    await act(async () => {
+      find(`${phase}-selectedForceMergeSegments`).simulate('change', { target: { value } });
+    });
+    component.update();
+  };
+
+  const setBestCompression = (phase: string) => async (checked: boolean) => {
+    await act(async () => {
+      find(`${phase}-bestCompression`).simulate('click', { target: { checked } });
+    });
+    component.update();
+  };
+
+  const setIndexPriority = (phase: string) => async (value: string) => {
+    await act(async () => {
+      find(`${phase}-phaseIndexPriority`).simulate('change', { target: { value } });
+    });
+    component.update();
+  };
+
   return {
     ...testBed,
     actions: {
       setWaitForSnapshotPolicy,
       savePolicy,
+      hot: {
+        setMaxSize,
+        setMaxDocs,
+        setMaxAge,
+        toggleRollover,
+        toggleForceMerge: toggleForceMerge('hot'),
+        setForcemergeSegments: setForcemergeSegmentsCount('hot'),
+        setBestCompression: setBestCompression('hot'),
+        setIndexPriority: setIndexPriority('hot'),
+      },
     },
   };
 };

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

@@ -10,7 +10,12 @@ import { setupEnvironment } from '../helpers/setup_environment';
 import { EditPolicyTestBed, setup } from './edit_policy.helpers';
 
 import { API_BASE_PATH } from '../../../common/constants';
-import { DELETE_PHASE_POLICY, NEW_SNAPSHOT_POLICY_NAME, SNAPSHOT_POLICY_NAME } from './constants';
+import {
+  DELETE_PHASE_POLICY,
+  NEW_SNAPSHOT_POLICY_NAME,
+  SNAPSHOT_POLICY_NAME,
+  DEFAULT_POLICY,
+} from './constants';
 
 window.scrollTo = jest.fn();
 
@@ -21,6 +26,83 @@ describe('<EditPolicy />', () => {
     server.restore();
   });
 
+  describe('hot phase', () => {
+    describe('serialization', () => {
+      beforeEach(async () => {
+        httpRequestsMockHelpers.setLoadPolicies([DEFAULT_POLICY]);
+        httpRequestsMockHelpers.setLoadSnapshotPolicies([]);
+
+        await act(async () => {
+          testBed = await setup();
+        });
+
+        const { component } = testBed;
+        component.update();
+      });
+
+      test('setting all values', async () => {
+        const { actions } = testBed;
+
+        await actions.hot.setMaxSize('123', 'mb');
+        await actions.hot.setMaxDocs('123');
+        await actions.hot.setMaxAge('123', 'h');
+        await actions.hot.toggleForceMerge(true);
+        await actions.hot.setForcemergeSegments('123');
+        await actions.hot.setBestCompression(true);
+        await actions.hot.setIndexPriority('123');
+
+        await actions.savePolicy();
+        const latestRequest = server.requests[server.requests.length - 1];
+        expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toMatchInlineSnapshot(`
+          Object {
+            "name": "my_policy",
+            "phases": Object {
+              "hot": Object {
+                "actions": Object {
+                  "forcemerge": Object {
+                    "index_codec": "best_compression",
+                    "max_num_segments": 123,
+                  },
+                  "rollover": Object {
+                    "max_age": "123h",
+                    "max_docs": 123,
+                    "max_size": "123mb",
+                  },
+                  "set_priority": Object {
+                    "priority": 123,
+                  },
+                },
+                "min_age": "0ms",
+              },
+            },
+          }
+        `);
+      });
+
+      test('disabling rollover', async () => {
+        const { actions } = testBed;
+        await actions.hot.toggleRollover(false);
+        await actions.savePolicy();
+        const latestRequest = server.requests[server.requests.length - 1];
+        expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toMatchInlineSnapshot(`
+          Object {
+            "name": "my_policy",
+            "phases": Object {
+              "hot": Object {
+                "actions": Object {
+                  "set_priority": Object {
+                    "priority": 100,
+                  },
+                },
+                "min_age": "0ms",
+              },
+            },
+          }
+        `);
+      });
+    });
+  });
+
   describe('delete phase', () => {
     beforeEach(async () => {
       httpRequestsMockHelpers.setLoadPolicies([DELETE_PHASE_POLICY]);