[ILM] Fix json in request flyout (#75971)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: yuliacech

x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js

@@ -187,6 +187,34 @@ describe('edit policy', () => {
       save(rendered);
       expectedErrorMessages(rendered, [policyNameStartsWithUnderscoreErrorMessage]);
     });
+    test('should show correct json in policy flyout', () => {
+      const rendered = mountWithIntl(component);
+      findTestSubject(rendered, 'requestButton').simulate('click');
+      const json = rendered.find(`code`).text();
+      const expected = `PUT _ilm/policy/<policyName>\n${JSON.stringify(
+        {
+          policy: {
+            phases: {
+              hot: {
+                min_age: '0ms',
+                actions: {
+                  rollover: {
+                    max_age: '30d',
+                    max_size: '50gb',
+                  },
+                  set_priority: {
+                    priority: 100,
+                  },
+                },
+              },
+            },
+          },
+        },
+        null,
+        2
+      )}`;
+      expect(json).toBe(expected);
+    });
   });
   describe('hot phase', () => {
     test('should show errors when trying to save with no max size and no max age', () => {

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

@@ -18,29 +18,35 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { Policy } from '../../../services/policies/types';
+import { Policy, PolicyFromES } from '../../../services/policies/types';
+import { serializePolicy } from '../../../services/policies/policy_serialization';
 
 interface Props {
   close: () => void;
   policy: Policy;
+  existingPolicy?: PolicyFromES;
   policyName: string;
 }
 
-export const PolicyJsonFlyout: React.FunctionComponent<Props> = ({ close, policy, policyName }) => {
-  const getEsJson = ({ phases }: Policy) => {
-    return JSON.stringify(
-      {
-        policy: {
-          phases,
-        },
+export const PolicyJsonFlyout: React.FunctionComponent<Props> = ({
+  close,
+  policy,
+  policyName,
+  existingPolicy,
+}) => {
+  const { phases } = serializePolicy(policy, existingPolicy?.policy);
+  const json = JSON.stringify(
+    {
+      policy: {
+        phases,
       },
-      null,
-      2
-    );
-  };
+    },
+    null,
+    2
+  );
 
   const endpoint = `PUT _ilm/policy/${policyName || '<policyName>'}`;
-  const request = `${endpoint}\n${getEsJson(policy)}`;
+  const request = `${endpoint}\n${json}`;
 
   return (
     <EuiFlyout maxWidth={480} onClose={close}>

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

@@ -352,7 +352,7 @@ export const EditPolicy: React.FunctionComponent<Props> = ({
               </EuiFlexItem>
 
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty onClick={togglePolicyJsonFlyout}>
+                <EuiButtonEmpty onClick={togglePolicyJsonFlyout} data-test-subj="requestButton">
                   {isShowingPolicyJsonFlyout ? (
                     <FormattedMessage
                       id="xpack.indexLifecycleMgmt.editPolicy.hidePolicyJsonButto"
@@ -371,6 +371,7 @@ export const EditPolicy: React.FunctionComponent<Props> = ({
             {isShowingPolicyJsonFlyout ? (
               <PolicyJsonFlyout
                 policyName={policy.name || ''}
+                existingPolicy={existingPolicy}
                 policy={policy}
                 close={() => setIsShowingPolicyJsonFlyout(false)}
               />