From 962776545bf4b6ca9f2bcc8dc94f81379262b5d1 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Mon, 24 Jun 2024 18:59:47 +0200
Subject: [PATCH 01/17] [ILM] Add read only view

Squashed commits:
[ILM] Implement most actions

[ILM] Implemented rollover and force merge for the flyout

[Console] Fix jest integration tests

[ILM] Fix jest tests

[ILM] Fix unused variable, add timeline to the flyout, remove metadata

[ILM] Fix import

[ILM] Fix a11y tests

[ILM] Remove unused translations

[ILM] Phase descriptions as json code block

[ILM] Update action buttons and make modals work with the flyout

[ILM] Add read only access and a view flyout
---
 .../__jest__/policy_table.test.tsx            |   9 +-
 .../common/types/policies.ts                  |  70 +-----
 .../integration_tests/app/app.helpers.ts      |  15 +-
 .../integration_tests/app/app.test.ts         |  12 +-
 .../public/application/components/index.ts    |   8 +
 .../public/application/constants/ui_metric.ts |   1 +
 .../public/application/index.tsx              |   3 +-
 .../application/lib/use_is_read_only.ts       |  19 ++
 .../edit_policy/components/edit_warning.tsx   |   2 +-
 .../data_tier_allocation_field.tsx            |  10 +-
 .../phases/shared_fields/downsample_field.tsx |   9 +-
 .../min_age_field/min_age_field.tsx           |  30 +--
 .../phases/shared_fields/readonly_field.tsx   |  10 +-
 .../phases/shared_fields/replicas_field.tsx   |   9 +-
 .../searchable_snapshot_field.tsx             |   8 +-
 .../phases/shared_fields/shrink_field.tsx     |  11 +-
 .../shared_fields/snapshot_policies_field.tsx |  10 +-
 .../components/timeline/timeline.tsx          |  41 ++--
 .../sections/edit_policy/form/schema.ts       |  20 +-
 .../sections/edit_policy/i18n_texts.ts        |  69 +++++-
 .../components/deprecated_policy_badge.tsx    |  32 +++
 .../sections/policy_list/components/index.ts  |  13 ++
 .../components/list_action_handler.tsx        |  17 +-
 .../components/managed_policy_badge.tsx       |  33 +++
 .../policy_list/components/policy_table.tsx   | 168 +++++++------
 .../policy_list/policy_flyout/cold_phase.tsx  |  42 ++++
 .../policy_flyout/data_allocation.tsx         |  90 +++++++
 .../policy_flyout/delete_phase.tsx            |  27 +++
 .../policy_list/policy_flyout/downsample.tsx  |  32 +++
 .../policy_list/policy_flyout/forcemerge.tsx  |  50 ++++
 .../policy_flyout/frozen_phase.tsx            |  27 +++
 .../policy_list/policy_flyout/hot_phase.tsx   |  36 +++
 .../policy_list/policy_flyout/i18n_texts.ts   |  17 ++
 .../policy_list/policy_flyout/index.ts        |   8 +
 .../policy_flyout/index_priority.tsx          |  32 +++
 .../policy_list/policy_flyout/min_age.tsx     |  29 +++
 .../policy_list/policy_flyout/readonly.tsx    |  16 ++
 .../policy_list/policy_flyout/replicas.tsx    |  32 +++
 .../policy_list/policy_flyout/rollover.tsx    |  79 +++++++
 .../policy_flyout/searchable_snapshot.tsx     |  39 ++++
 .../policy_list/policy_flyout/shrink.tsx      |  43 ++++
 .../policy_list/policy_flyout/timeline.tsx    |  31 +++
 .../policy_flyout/view_policy_flyout.tsx      | 220 ++++++++++++++++++
 .../policy_flyout/wait_for_snapshot.tsx       |  35 +++
 .../policy_list/policy_flyout/warm_phase.tsx  |  44 ++++
 .../sections/policy_list/policy_list.tsx      |  37 ++-
 .../policy_list/policy_list_context.tsx       |   2 +-
 .../public/application/services/navigation.ts |   4 +
 .../public/types.ts                           |   1 +
 .../server/plugin.ts                          |   6 +-
 .../apps/group1/index_lifecycle_management.ts |  28 ++-
 51 files changed, 1327 insertions(+), 309 deletions(-)
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/components/index.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/lib/use_is_read_only.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/deprecated_policy_badge.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/index.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/managed_policy_badge.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/data_allocation.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/i18n_texts.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/timeline.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx
index 19c0078c7eb6a..8cfbec9ffd6c6 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx
@@ -21,6 +21,7 @@ import { init as initHttp } from '../public/application/services/http';
 import { init as initUiMetric } from '../public/application/services/ui_metric';
 import { KibanaContextProvider } from '../public/shared_imports';
 import { PolicyListContextProvider } from '../public/application/sections/policy_list/policy_list_context';
+import * as hooks from '../public/application/lib/use_is_read_only';
 
 initHttp(httpServiceMock.createSetupContract());
 initUiMetric(usageCollectionPluginMock.createSetupContract());
@@ -72,6 +73,9 @@ jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useHistory: () => ({
     createHref: jest.fn(),
+    location: {
+      search: '',
+    },
   }),
 }));
 
@@ -128,6 +132,7 @@ const TestComponent = ({ testPolicies }: { testPolicies: PolicyFromES[] }) => {
   );
 };
 describe('policy table', () => {
+  jest.spyOn(hooks, 'useIsReadOnly').mockReturnValue(false);
   beforeEach(() => {
     component = <TestComponent testPolicies={policies} />;
     window.localStorage.removeItem('ILM_SHOW_MANAGED_POLICIES_BY_DEFAULT');
@@ -296,7 +301,9 @@ describe('policy table', () => {
   test('add index template modal shows when add policy to index template button is pressed', () => {
     const rendered = mountWithIntl(component);
     const policyRow = findTestSubject(rendered, `policyTableRow-${testPolicy.name}`);
-    const addPolicyToTemplateButton = findTestSubject(policyRow, 'addPolicyToTemplate');
+    const actionsButton = findTestSubject(policyRow, 'euiCollapsedItemActionsButton');
+    actionsButton.simulate('click');
+    const addPolicyToTemplateButton = findTestSubject(rendered, 'addPolicyToTemplate');
     addPolicyToTemplateButton.simulate('click');
     rendered.update();
     expect(findTestSubject(rendered, 'addPolicyToTemplateModal').exists()).toBeTruthy();
diff --git a/x-pack/plugins/index_lifecycle_management/common/types/policies.ts b/x-pack/plugins/index_lifecycle_management/common/types/policies.ts
index 236dfa85118eb..7ebb789f62e54 100644
--- a/x-pack/plugins/index_lifecycle_management/common/types/policies.ts
+++ b/x-pack/plugins/index_lifecycle_management/common/types/policies.ts
@@ -60,8 +60,6 @@ export interface SerializedActionWithAllocation {
   migrate?: MigrateAction;
 }
 
-export type SearchableSnapshotStorage = 'full_copy' | 'shared_cache';
-
 export interface SearchableSnapshotAction {
   snapshot_repository: string;
   /**
@@ -69,12 +67,6 @@ export interface SearchableSnapshotAction {
    * not suit the vast majority of cases.
    */
   force_merge_index?: boolean;
-  /**
-   * This configuration lets the user create full or partial searchable snapshots.
-   * Full searchable snapshots store primary data locally and store replica data in the snapshot.
-   * Partial searchable snapshots store no data locally.
-   */
-  storage?: SearchableSnapshotStorage;
 }
 
 export interface RolloverAction {
@@ -96,9 +88,7 @@ export interface SerializedHotPhase extends SerializedPhase {
     shrink?: ShrinkAction;
     downsample?: DownsampleAction;
 
-    set_priority?: {
-      priority: number | null;
-    };
+    set_priority?: SetPriorityAction;
     /**
      * Only available on enterprise license
      */
@@ -113,9 +103,7 @@ export interface SerializedWarmPhase extends SerializedPhase {
     forcemerge?: ForcemergeAction;
     readonly?: {};
     downsample?: DownsampleAction;
-    set_priority?: {
-      priority: number | null;
-    };
+    set_priority?: SetPriorityAction;
     migrate?: MigrateAction;
   };
 }
@@ -126,9 +114,7 @@ export interface SerializedColdPhase extends SerializedPhase {
     readonly?: {};
     downsample?: DownsampleAction;
     allocate?: AllocateAction;
-    set_priority?: {
-      priority: number | null;
-    };
+    set_priority?: SetPriorityAction;
     migrate?: MigrateAction;
     /**
      * Only available on enterprise license
@@ -139,11 +125,6 @@ export interface SerializedColdPhase extends SerializedPhase {
 
 export interface SerializedFrozenPhase extends SerializedPhase {
   actions: {
-    allocate?: AllocateAction;
-    set_priority?: {
-      priority: number | null;
-    };
-    migrate?: MigrateAction;
     /**
      * Only available on enterprise license
      */
@@ -187,11 +168,8 @@ export interface DownsampleAction {
   fixed_interval: string;
 }
 
-export interface LegacyPolicy {
-  name: string;
-  phases: {
-    delete: DeletePhase;
-  };
+export interface SetPriorityAction {
+  priority: number | null;
 }
 
 export interface CommonPhaseSettings {
@@ -203,44 +181,6 @@ export interface PhaseWithMinAge {
   selectedMinimumAgeUnits: string;
 }
 
-export interface PhaseWithIndexPriority {
-  phaseIndexPriority: string;
-}
-
-export interface PhaseWithForcemergeAction {
-  forceMergeEnabled: boolean;
-  selectedForceMergeSegments: string;
-  bestCompressionEnabled: boolean;
-}
-
 export interface DeletePhase extends CommonPhaseSettings, PhaseWithMinAge {
   waitForSnapshotPolicy: string;
 }
-
-export interface IndexLifecyclePolicy {
-  index: string;
-  managed: boolean;
-  action?: string;
-  action_time_millis?: number;
-  age?: string;
-  failed_step?: string;
-  failed_step_retry_count?: number;
-  is_auto_retryable_error?: boolean;
-  lifecycle_date_millis?: number;
-  phase?: string;
-  phase_execution?: {
-    policy: string;
-    modified_date_in_millis: number;
-    version: number;
-    phase_definition: SerializedPhase;
-  };
-  phase_time_millis?: number;
-  policy?: string;
-  step?: string;
-  step_info?: {
-    reason?: string;
-    type?: string;
-    message?: string;
-  };
-  step_time_millis?: number;
-}
diff --git a/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.helpers.ts b/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.helpers.ts
index 66810ebb1e546..5f148bc89c551 100644
--- a/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.helpers.ts
+++ b/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.helpers.ts
@@ -22,8 +22,9 @@ const getTestBedConfig = (initialEntries: string[]): TestBedConfig => ({
 
 export interface AppTestBed extends TestBed {
   actions: {
-    clickPolicyNameLink: () => void;
-    clickCreatePolicyButton: () => void;
+    clickPolicyNameLink: () => Promise<void>;
+    clickCreatePolicyButton: () => Promise<void>;
+    clickEditPolicyButton: () => Promise<void>;
   };
 }
 
@@ -53,9 +54,17 @@ export const setup = async (
     component.update();
   };
 
+  const clickEditPolicyButton = async () => {
+    const { component, find } = testBed;
+    await act(async () => {
+      find('editPolicy').simulate('click', { button: 0 });
+    });
+    component.update();
+  };
+
   return {
     ...testBed,
-    actions: { clickPolicyNameLink, clickCreatePolicyButton },
+    actions: { clickPolicyNameLink, clickCreatePolicyButton, clickEditPolicyButton },
   };
 };
 
diff --git a/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.test.ts b/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.test.ts
index 1aaec089724b6..c2db9a4fc571b 100644
--- a/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.test.ts
+++ b/x-pack/plugins/index_lifecycle_management/integration_tests/app/app.test.ts
@@ -7,6 +7,7 @@
 
 import { act } from 'react-dom/test-utils';
 
+import * as hooks from '../../public/application/lib/use_is_read_only';
 import { getDefaultHotPhasePolicy } from '../edit_policy/constants';
 import { setupEnvironment } from '../helpers';
 
@@ -41,6 +42,7 @@ jest.mock('@elastic/eui', () => {
 describe('<App />', () => {
   let testBed: AppTestBed;
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
+  jest.spyOn(hooks, 'useIsReadOnly').mockReturnValue(false);
 
   describe('new policy creation', () => {
     test('when there are no policies', async () => {
@@ -92,7 +94,7 @@ describe('<App />', () => {
       await actions.clickPolicyNameLink();
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(`${editPolicyTitle} ${SPECIAL_CHARS_NAME}`);
+      expect(testBed.find('policyFlyoutTitle').text()).toBe(SPECIAL_CHARS_NAME);
     });
 
     test('loading edit policy page url works', async () => {
@@ -166,9 +168,7 @@ describe('<App />', () => {
       await actions.clickPolicyNameLink();
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(
-        `${editPolicyTitle} ${PERCENT_SIGN_WITH_OTHER_CHARS_NAME}`
-      );
+      expect(testBed.find('policyFlyoutTitle').text()).toBe(PERCENT_SIGN_WITH_OTHER_CHARS_NAME);
     });
 
     test("loading edit policy page url doesn't work", async () => {
@@ -221,9 +221,7 @@ describe('<App />', () => {
       await actions.clickPolicyNameLink();
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(
-        `${editPolicyTitle} ${PERCENT_SIGN_25_SEQUENCE}`
-      );
+      expect(testBed.find('policyFlyoutTitle').text()).toBe(PERCENT_SIGN_25_SEQUENCE);
     });
 
     test("loading edit policy page url doesn't work", async () => {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/components/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/components/index.ts
new file mode 100644
index 0000000000000..31a46d57abc66
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/components/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { IndexTemplatesFlyout } from './index_templates_flyout';
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/constants/ui_metric.ts b/x-pack/plugins/index_lifecycle_management/public/application/constants/ui_metric.ts
index e1a316eda594f..f87cc94dee091 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/constants/ui_metric.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/constants/ui_metric.ts
@@ -19,3 +19,4 @@ export const UIM_CONFIG_WARM_PHASE: string = 'config_warm_phase';
 export const UIM_CONFIG_SET_PRIORITY: string = 'config_set_priority';
 export const UIM_INDEX_RETRY_STEP: string = 'index_retry_step';
 export const UIM_EDIT_CLICK: string = 'edit_click';
+export const UIM_VIEW_CLICK: string = 'view_click';
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/index.tsx b/x-pack/plugins/index_lifecycle_management/public/application/index.tsx
index bb004766d89f7..bc5f93334f67f 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/index.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/index.tsx
@@ -32,7 +32,7 @@ export const renderApp = (
   executionContext: ExecutionContextStart,
   cloud?: CloudSetup
 ): UnmountCallback => {
-  const { navigateToUrl, getUrlForApp } = application;
+  const { navigateToUrl, getUrlForApp, capabilities } = application;
   const { overlays, http } = startServices;
 
   render(
@@ -55,6 +55,7 @@ export const renderApp = (
               overlays,
               http,
               history,
+              capabilities,
             }}
           >
             <App history={history} />
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/lib/use_is_read_only.ts b/x-pack/plugins/index_lifecycle_management/public/application/lib/use_is_read_only.ts
new file mode 100644
index 0000000000000..518dbc69e34b4
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/lib/use_is_read_only.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { PLUGIN } from '../../../common/constants';
+import { useKibana } from '../../shared_imports';
+
+export const useIsReadOnly = () => {
+  const {
+    services: { capabilities },
+  } = useKibana();
+  const ilmCaps = capabilities[PLUGIN.ID];
+  const savePermission = Boolean(ilmCaps.save);
+  const showPermission = Boolean(ilmCaps.show);
+  return !savePermission && showPermission;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/edit_warning.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/edit_warning.tsx
index 1690676cd28d7..c9e87ac137aed 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/edit_warning.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/edit_warning.tsx
@@ -11,7 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { useEditPolicyContext } from '../edit_policy_context';
 import { getIndicesListPath } from '../../../services/navigation';
 import { useKibana } from '../../../../shared_imports';
-import { IndexTemplatesFlyout } from '../../../components/index_templates_flyout';
+import { IndexTemplatesFlyout } from '../../../components';
 
 export const EditWarning: FunctionComponent = () => {
   const { isNewPolicy, indices, indexTemplates, policyName, policy } = useEditPolicyContext();
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/data_tier_allocation_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/data_tier_allocation_field.tsx
index c45e172868938..50856c71ad9aa 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/data_tier_allocation_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/data_tier_allocation_field.tsx
@@ -7,13 +7,13 @@
 
 import { get } from 'lodash';
 import React, { FunctionComponent } from 'react';
-import { i18n } from '@kbn/i18n';
 import { EuiDescribedFormGroup, EuiSpacer, EuiLoadingSpinner } from '@elastic/eui';
 
 import { useKibana, useFormData } from '../../../../../../../shared_imports';
 import { PhaseWithAllocation, DataTierRole } from '../../../../../../../../common/types';
 import { getAvailableNodeRoleForPhase, isNodeRoleFirstPreference } from '../../../../../../lib';
 import { useLoadNodes } from '../../../../../../services/api';
+import { i18nTexts } from '../../../../i18n_texts';
 import { DataTierAllocationType } from '../../../../types';
 
 import {
@@ -30,12 +30,6 @@ import {
 
 import './_data_tier_allocation.scss';
 
-const i18nTexts = {
-  title: i18n.translate('xpack.indexLifecycleMgmt.common.dataTier.title', {
-    defaultMessage: 'Data allocation',
-  }),
-};
-
 interface Props {
   phase: PhaseWithAllocation;
   description: React.ReactNode;
@@ -188,7 +182,7 @@ export const DataTierAllocationField: FunctionComponent<Props> = ({ phase, descr
 
   return (
     <EuiDescribedFormGroup
-      title={<h3>{i18nTexts.title}</h3>}
+      title={<h3>{i18nTexts.editPolicy.dataAllocationLabel}</h3>}
       description={
         <>
           {description}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/downsample_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/downsample_field.tsx
index f846a033ce44a..4b7b55213ab38 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/downsample_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/downsample_field.tsx
@@ -30,14 +30,7 @@ export const DownsampleField: React.FunctionComponent<Props> = ({ phase }) => {
 
   return (
     <ToggleFieldWithDescribedFormRow
-      title={
-        <h3>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.downsampleTitle"
-            defaultMessage="Downsample"
-          />
-        </h3>
-      }
+      title={<h3>{i18nTexts.editPolicy.downsampleLabel}</h3>}
       description={
         <EuiTextColor color="subdued">
           <FormattedMessage
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx
index 979150a8d267b..9d0572ffb0589 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx
@@ -5,9 +5,7 @@
  * 2.0.
  */
 
-import { i18n } from '@kbn/i18n';
 import React, { FunctionComponent, useEffect } from 'react';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { get } from 'lodash';
 
 import {
@@ -27,20 +25,7 @@ import { UseField, useConfiguration, useGlobalFields } from '../../../../form';
 import { getPhaseMinAgeInMilliseconds } from '../../../../lib';
 import { timeUnits } from '../../../../constants';
 import { getUnitsAriaLabelForPhase, getTimingLabelForPhase } from './util';
-
-const i18nTexts = {
-  rolloverToolTipDescription: i18n.translate(
-    'xpack.indexLifecycleMgmt.editPolicy.minimumAge.rolloverToolTipDescription',
-    {
-      defaultMessage:
-        'Data age is calculated from rollover. Rollover is configured in the hot phase.',
-    }
-  ),
-  minAgeUnitFieldSuffix: i18n.translate(
-    'xpack.indexLifecycleMgmt.editPolicy.minimumAge.minimumAgeFieldSuffixLabel',
-    { defaultMessage: 'old' }
-  ),
-};
+import { i18nTexts } from '../../../../i18n_texts';
 
 interface Props {
   phase: PhaseWithTiming;
@@ -95,10 +80,7 @@ export const MinAgeField: FunctionComponent<Props> = ({ phase }): React.ReactEle
             >
               <EuiFlexItem grow={false}>
                 <EuiText className={'eui-textNoWrap'} size={'xs'}>
-                  <FormattedMessage
-                    id="xpack.indexLifecycleMgmt.editPolicy.minimumAge.minimumAgeFieldLabel"
-                    defaultMessage="Move data into phase when:"
-                  />
+                  {i18nTexts.editPolicy.minAgeLabel}
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={true}>
@@ -127,15 +109,15 @@ export const MinAgeField: FunctionComponent<Props> = ({ phase }): React.ReactEle
                             <div data-test-subj={`${phase}-rolloverMinAgeInputIconTip`} />
                             <EuiIconTip
                               type="iInCircle"
-                              aria-label={i18nTexts.rolloverToolTipDescription}
-                              content={i18nTexts.rolloverToolTipDescription}
+                              aria-label={i18nTexts.editPolicy.rolloverToolTipDescription}
+                              content={i18nTexts.editPolicy.rolloverToolTipDescription}
                             />
                           </>
                         );
                         const selectAppendValue: Array<string | React.ReactElement> =
                           isUsingRollover
-                            ? [i18nTexts.minAgeUnitFieldSuffix, icon]
-                            : [i18nTexts.minAgeUnitFieldSuffix];
+                            ? [i18nTexts.editPolicy.minAgeUnitFieldSuffix, icon]
+                            : [i18nTexts.editPolicy.minAgeUnitFieldSuffix];
                         const unitValue = unitField.value as string;
 
                         let unitOptions = timeUnits;
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/readonly_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/readonly_field.tsx
index 4283f357bff88..11cea37f67bba 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/readonly_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/readonly_field.tsx
@@ -11,6 +11,7 @@ import { EuiTextColor } from '@elastic/eui';
 import { LearnMoreLink } from '../../learn_more_link';
 import { ToggleFieldWithDescribedFormRow } from '../../described_form_row';
 import { useKibana } from '../../../../../../shared_imports';
+import { i18nTexts } from '../../../i18n_texts';
 interface Props {
   phase: 'hot' | 'warm' | 'cold';
 }
@@ -19,14 +20,7 @@ export const ReadonlyField: React.FunctionComponent<Props> = ({ phase }) => {
   const { docLinks } = useKibana().services;
   return (
     <ToggleFieldWithDescribedFormRow
-      title={
-        <h3>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.readonlyTitle"
-            defaultMessage="Read only"
-          />
-        </h3>
-      }
+      title={<h3>{i18nTexts.editPolicy.readonlyLabel}</h3>}
       description={
         <EuiTextColor color="subdued">
           <FormattedMessage
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx
index ea05e401822ce..ee59deed0041c 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx
@@ -12,6 +12,7 @@ import { NumericField } from '../../../../../../shared_imports';
 
 import { useEditPolicyContext } from '../../../edit_policy_context';
 import { UseField } from '../../../form';
+import { i18nTexts } from '../../../i18n_texts';
 
 import { DescribedFormRow } from '../../described_form_row';
 
@@ -24,13 +25,7 @@ export const ReplicasField: FunctionComponent<Props> = ({ phase }) => {
   const initialValue = policy.phases[phase]?.actions?.allocate?.number_of_replicas != null;
   return (
     <DescribedFormRow
-      title={
-        <h3>
-          {i18n.translate('xpack.indexLifecycleMgmt.numberOfReplicas.formRowTitle', {
-            defaultMessage: 'Replicas',
-          })}
-        </h3>
-      }
+      title={<h3>{i18nTexts.editPolicy.replicasLabel}</h3>}
       description={i18n.translate(
         'xpack.indexLifecycleMgmt.editPolicy.numberOfReplicas.formRowDescription',
         {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx
index f36067923e1b7..e98d1f1c2c55a 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx
@@ -19,6 +19,7 @@ import { SearchableSnapshotDataProvider } from './searchable_snapshot_data_provi
 import { RepositoryComboBoxField } from './repository_combobox_field';
 
 import './_searchable_snapshot_field.scss';
+import { i18nTexts as i18nTextsEdit } from '../../../../i18n_texts';
 
 export interface Props {
   phase: 'hot' | 'cold' | 'frozen';
@@ -35,12 +36,7 @@ const geti18nTexts = (
     case 'hot':
     case 'cold':
       return {
-        title: i18n.translate(
-          'xpack.indexLifecycleMgmt.editPolicy.fullyMountedSearchableSnapshotField.title',
-          {
-            defaultMessage: 'Searchable snapshot',
-          }
-        ),
+        title: i18nTextsEdit.editPolicy.searchableSnapshotLabel,
         description: (
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.fullyMountedSearchableSnapshotField.description"
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/shrink_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/shrink_field.tsx
index 26dd1edd8c43e..6e85166fc55c3 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/shrink_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/shrink_field.tsx
@@ -39,14 +39,7 @@ export const ShrinkField: FunctionComponent<Props> = ({ phase }) => {
   const { docLinks } = useKibana().services;
   return (
     <DescribedFormRow
-      title={
-        <h3>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.shrinkText"
-            defaultMessage="Shrink"
-          />
-        </h3>
-      }
+      title={<h3>{i18nTexts.editPolicy.shrinkActionLabel}</h3>}
       description={
         <EuiTextColor color="subdued">
           <FormattedMessage
@@ -59,7 +52,7 @@ export const ShrinkField: FunctionComponent<Props> = ({ phase }) => {
       titleSize="xs"
       switchProps={{
         'data-test-subj': `${phase}-shrinkSwitch`,
-        label: i18nTexts.editPolicy.shrinkLabel,
+        label: i18nTexts.editPolicy.shrinkToggleLabel,
         initialValue: Boolean(policy.phases[phase]?.actions?.shrink),
       }}
       fullWidth
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/snapshot_policies_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/snapshot_policies_field.tsx
index e89189df7667b..f072db6b10b11 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/snapshot_policies_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/snapshot_policies_field.tsx
@@ -24,6 +24,7 @@ import { useLoadSnapshotPolicies } from '../../../../../services/api';
 import { UseField } from '../../../form';
 
 import { FieldLoadingError, LearnMoreLink, OptionalLabel } from '../..';
+import { i18nTexts } from '../../../i18n_texts';
 
 const waitForSnapshotFormField = 'phases.delete.actions.wait_for_snapshot.policy';
 
@@ -145,14 +146,7 @@ export const SnapshotPoliciesField: React.FunctionComponent = () => {
 
   return (
     <EuiDescribedFormGroup
-      title={
-        <h3>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.waitForSnapshotTitle"
-            defaultMessage="Wait for snapshot policy"
-          />
-        </h3>
-      }
+      title={<h3>{i18nTexts.editPolicy.waitForSnapshotLabel}</h3>}
       description={
         <>
           <FormattedMessage
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
index d56f69248e2c1..b2ee9c2520831 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
@@ -114,6 +114,7 @@ interface Props {
   coldPhaseMinAge?: string;
   frozenPhaseMinAge?: string;
   deletePhaseMinAge?: string;
+  showTitle?: boolean;
 }
 
 /**
@@ -121,7 +122,7 @@ interface Props {
  * and should not rely directly on any application-specific context.
  */
 export const Timeline: FunctionComponent<Props> = memo(
-  ({ hasDeletePhase, isUsingRollover, ...phasesMinAge }) => {
+  ({ hasDeletePhase, isUsingRollover, showTitle = true, ...phasesMinAge }) => {
     const absoluteTimings: AbsoluteTimings = {
       hot: { min_age: phasesMinAge.hotPhaseMinAge },
       warm: phasesMinAge.warmPhaseMinAge ? { min_age: phasesMinAge.warmPhaseMinAge } : undefined,
@@ -147,24 +148,26 @@ export const Timeline: FunctionComponent<Props> = memo(
 
     return (
       <EuiFlexGroup gutterSize="s" direction="column" responsive={false}>
-        <EuiFlexItem>
-          <EuiTitle size="s">
-            <h2>{i18nTexts.title}</h2>
-          </EuiTitle>
-          <EuiText size="s" color="subdued">
-            {i18nTexts.description}
-            &nbsp;
-            <LearnMoreLink
-              docPath={docLinks.links.elasticsearch.ilmPhaseTransitions}
-              text={
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.editPolicy.learnAboutTimingText"
-                  defaultMessage="Learn about timing"
-                />
-              }
-            />
-          </EuiText>
-        </EuiFlexItem>
+        {showTitle && (
+          <EuiFlexItem>
+            <EuiTitle size="s">
+              <h2>{i18nTexts.title}</h2>
+            </EuiTitle>
+            <EuiText size="s" color="subdued">
+              {i18nTexts.description}
+              &nbsp;
+              <LearnMoreLink
+                docPath={docLinks.links.elasticsearch.ilmPhaseTransitions}
+                text={
+                  <FormattedMessage
+                    id="xpack.indexLifecycleMgmt.editPolicy.learnAboutTimingText"
+                    defaultMessage="Learn about timing"
+                  />
+                }
+              />
+            </EuiText>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem>
           <div
             className="ilmTimeline"
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
index 6851f8725ceb7..bc365eba61b39 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
@@ -80,9 +80,7 @@ export const searchableSnapshotFields = {
 };
 
 const numberOfReplicasField = {
-  label: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.numberOfReplicasLabel', {
-    defaultMessage: 'Number of replicas',
-  }),
+  label: i18nTexts.editPolicy.numberOfReplicasLabel,
   validations: [
     {
       validator: emptyField(i18nTexts.editPolicy.errors.numberRequired),
@@ -95,9 +93,7 @@ const numberOfReplicasField = {
 };
 
 const numberOfShardsField = {
-  label: i18n.translate('xpack.indexLifecycleMgmt.shrink.numberOfPrimaryShardsLabel', {
-    defaultMessage: 'Number of primary shards',
-  }),
+  label: i18nTexts.editPolicy.shrinkNumberOfShardsLabel,
   defaultValue: 1,
   validations: [
     {
@@ -380,9 +376,7 @@ export const getSchema = (isCloudEnabled: boolean): FormSchema => ({
       actions: {
         rollover: {
           max_age: {
-            label: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumAgeLabel', {
-              defaultMessage: 'Maximum age',
-            }),
+            label: i18nTexts.editPolicy.maxAgeLabel,
             validations: [
               {
                 validator: rolloverThresholdsValidator,
@@ -397,9 +391,7 @@ export const getSchema = (isCloudEnabled: boolean): FormSchema => ({
             fieldsToValidateOnChange: rolloverFormPaths,
           },
           max_docs: {
-            label: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumDocumentsLabel', {
-              defaultMessage: 'Maximum documents',
-            }),
+            label: i18nTexts.editPolicy.maxDocsLabel,
             validations: [
               {
                 validator: rolloverThresholdsValidator,
@@ -443,9 +435,7 @@ export const getSchema = (isCloudEnabled: boolean): FormSchema => ({
             fieldsToValidateOnChange: rolloverFormPaths,
           },
           max_size: {
-            label: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumIndexSizeLabel', {
-              defaultMessage: 'Maximum index size',
-            }),
+            label: i18nTexts.editPolicy.maxSizeLabel,
             validations: [
               {
                 validator: rolloverThresholdsValidator,
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
index 9c48efd6c2afa..85e56812b4b92 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
@@ -9,7 +9,10 @@ import { i18n } from '@kbn/i18n';
 
 export const i18nTexts = {
   editPolicy: {
-    shrinkLabel: i18n.translate('xpack.indexLifecycleMgmt.shrink.enableShrinkLabel', {
+    shrinkActionLabel: i18n.translate('xpack.indexLifecycleMgmt.shrink.actionLabel', {
+      defaultMessage: 'Shrink',
+    }),
+    shrinkToggleLabel: i18n.translate('xpack.indexLifecycleMgmt.shrink.enableShrinkLabel', {
       defaultMessage: 'Shrink index',
     }),
     shrinkCountLabel: i18n.translate(
@@ -18,6 +21,12 @@ export const i18nTexts = {
         defaultMessage: 'Configure shard count',
       }
     ),
+    shrinkNumberOfShardsLabel: i18n.translate(
+      'xpack.indexLifecycleMgmt.shrink.numberOfPrimaryShardsLabel',
+      {
+        defaultMessage: 'Number of primary shards',
+      }
+    ),
     shrinkSizeLabel: i18n.translate(
       'xpack.indexLifecycleMgmt.editPolicy.shrink.configureShardSizeLabel',
       {
@@ -60,6 +69,9 @@ export const i18nTexts = {
     readonlyEnabledFieldLabel: i18n.translate('xpack.indexLifecycleMgmt.readonlyFieldLabel', {
       defaultMessage: 'Make index read only',
     }),
+    readonlyLabel: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.readonlyTitle', {
+      defaultMessage: 'Read only',
+    }),
     downsampleEnabledFieldLabel: i18n.translate('xpack.indexLifecycleMgmt.downsampleFieldLabel', {
       defaultMessage: 'Enable downsampling',
     }),
@@ -116,12 +128,6 @@ export const i18nTexts = {
         defaultMessage: 'Snapshot repository',
       }
     ),
-    searchableSnapshotsStorageFieldLabel: i18n.translate(
-      'xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotStorageFieldLabel',
-      {
-        defaultMessage: 'Searchable snapshot storage',
-      }
-    ),
     maxPrimaryShardSizeLabel: i18n.translate(
       'xpack.indexLifecycleMgmt.hotPhase.maximumPrimaryShardSizeLabel',
       {
@@ -140,6 +146,55 @@ export const i18nTexts = {
         defaultMessage: 'Maximum shard size units',
       }
     ),
+    maxAgeLabel: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumAgeLabel', {
+      defaultMessage: 'Maximum age',
+    }),
+    maxDocsLabel: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumDocumentsLabel', {
+      defaultMessage: 'Maximum documents',
+    }),
+    maxSizeLabel: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumIndexSizeLabel', {
+      defaultMessage: 'Maximum index size',
+    }),
+    downsampleLabel: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.downsampleTitle', {
+      defaultMessage: 'Downsample',
+    }),
+    minAgeLabel: i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.minimumAge.minimumAgeFieldLabel',
+      { defaultMessage: 'Move data into phase when:' }
+    ),
+    rolloverToolTipDescription: i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.minimumAge.rolloverToolTipDescription',
+      {
+        defaultMessage:
+          'Data age is calculated from rollover. Rollover is configured in the hot phase.',
+      }
+    ),
+    minAgeUnitFieldSuffix: i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.minimumAge.minimumAgeFieldSuffixLabel',
+      { defaultMessage: 'old' }
+    ),
+    replicasLabel: i18n.translate('xpack.indexLifecycleMgmt.numberOfReplicas.formRowTitle', {
+      defaultMessage: 'Replicas',
+    }),
+    numberOfReplicasLabel: i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.numberOfReplicasLabel',
+      {
+        defaultMessage: 'Number of replicas',
+      }
+    ),
+    dataAllocationLabel: i18n.translate('xpack.indexLifecycleMgmt.common.dataTier.title', {
+      defaultMessage: 'Data allocation',
+    }),
+    searchableSnapshotLabel: i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.fullyMountedSearchableSnapshotField.title',
+      {
+        defaultMessage: 'Searchable snapshot',
+      }
+    ),
+    waitForSnapshotLabel: i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.deletePhase.waitForSnapshotTitle',
+      { defaultMessage: 'Wait for snapshot policy' }
+    ),
     errors: {
       numberRequired: i18n.translate(
         'xpack.indexLifecycleMgmt.editPolicy.errors.numberRequiredErrorMessage',
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/deprecated_policy_badge.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/deprecated_policy_badge.tsx
new file mode 100644
index 0000000000000..f48e6d5c4a639
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/deprecated_policy_badge.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const deprecatedPolicyTooltips = {
+  badge: i18n.translate('xpack.indexLifecycleMgmt.policyTable.templateBadgeType.deprecatedLabel', {
+    defaultMessage: 'Deprecated',
+  }),
+  badgeTooltip: i18n.translate(
+    'xpack.indexLifecycleMgmt.policyTable.templateBadgeType.deprecatedDescription',
+    {
+      defaultMessage:
+        'This policy is no longer supported and might be removed in a future release. Instead, use one of the other policies available or create a new one.',
+    }
+  ),
+};
+export const DeprecatedPolicyBadge = () => {
+  return (
+    <EuiToolTip content={deprecatedPolicyTooltips.badgeTooltip}>
+      <EuiBadge color="warning" data-test-subj="deprecatedPolicyBadge">
+        {deprecatedPolicyTooltips.badge}
+      </EuiBadge>
+    </EuiToolTip>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/index.ts
new file mode 100644
index 0000000000000..0ff6731e542c4
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { AddPolicyToTemplateConfirmModal } from './add_policy_to_template_confirm_modal';
+export { ConfirmDelete } from './confirm_delete';
+export { DeprecatedPolicyBadge } from './deprecated_policy_badge';
+export { ListActionHandler } from './list_action_handler';
+export { ManagedPolicyBadge } from './managed_policy_badge';
+export { PolicyTable } from './policy_table';
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/list_action_handler.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/list_action_handler.tsx
index c7d2183ec9481..9dd3eba08769a 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/list_action_handler.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/list_action_handler.tsx
@@ -7,14 +7,14 @@
 
 import React from 'react';
 import { usePolicyListContext } from '../policy_list_context';
-import { IndexTemplatesFlyout } from '../../../components/index_templates_flyout';
-import { ConfirmDelete } from './confirm_delete';
-import { AddPolicyToTemplateConfirmModal } from './add_policy_to_template_confirm_modal';
+import { IndexTemplatesFlyout } from '../../../components';
+import { ViewPolicyFlyout } from '../policy_flyout';
+import { ConfirmDelete, AddPolicyToTemplateConfirmModal } from '.';
 
 interface Props {
-  updatePolicies: () => void;
+  deletePolicyCallback: () => void;
 }
-export const ListActionHandler: React.FunctionComponent<Props> = ({ updatePolicies }) => {
+export const ListActionHandler: React.FunctionComponent<Props> = ({ deletePolicyCallback }) => {
   const { listAction, setListAction } = usePolicyListContext();
   if (listAction?.actionType === 'viewIndexTemplates') {
     return (
@@ -32,7 +32,7 @@ export const ListActionHandler: React.FunctionComponent<Props> = ({ updatePolici
       <ConfirmDelete
         policyToDelete={listAction.selectedPolicy}
         callback={() => {
-          updatePolicies();
+          deletePolicyCallback();
           setListAction(null);
         }}
         onCancel={() => {
@@ -58,5 +58,10 @@ export const ListActionHandler: React.FunctionComponent<Props> = ({ updatePolici
       />
     );
   }
+
+  if (listAction?.actionType === 'viewPolicy') {
+    return <ViewPolicyFlyout policy={listAction.selectedPolicy} />;
+  }
+
   return null;
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/managed_policy_badge.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/managed_policy_badge.tsx
new file mode 100644
index 0000000000000..f8124fcd70474
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/managed_policy_badge.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const managedPolicyTooltips = {
+  badge: i18n.translate('xpack.indexLifecycleMgmt.policyTable.templateBadgeType.managedLabel', {
+    defaultMessage: 'Managed',
+  }),
+  badgeTooltip: i18n.translate(
+    'xpack.indexLifecycleMgmt.policyTable.templateBadgeType.managedDescription',
+    {
+      defaultMessage:
+        'This policy is preconfigured and managed by Elastic; editing or deleting this policy might break Kibana.',
+    }
+  ),
+};
+
+export const ManagedPolicyBadge = () => {
+  return (
+    <EuiToolTip content={managedPolicyTooltips.badgeTooltip}>
+      <EuiBadge color="hollow" data-test-subj="managedPolicyBadge">
+        {managedPolicyTooltips.badge}
+      </EuiBadge>
+    </EuiToolTip>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx
index 0133c5034bb72..b7f77c6d1c77a 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/components/policy_table.tsx
@@ -11,8 +11,6 @@ import {
   EuiLink,
   EuiInMemoryTable,
   EuiToolTip,
-  EuiButtonIcon,
-  EuiBadge,
   EuiFlexItem,
   EuiSwitch,
   EuiSearchBarProps,
@@ -28,59 +26,30 @@ import { EuiBasicTableColumn } from '@elastic/eui/src/components/basic_table/bas
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useEuiTablePersist } from '@kbn/shared-ux-table-persist';
+import { hasLinkedIndices } from '../../../lib/policies';
 import { useStateWithLocalStorage } from '../../../lib/settings_local_storage';
 import { PolicyFromES } from '../../../../../common/types';
 import { useKibana } from '../../../../shared_imports';
-import { getIndicesListPath, getPolicyEditPath } from '../../../services/navigation';
+import {
+  getIndicesListPath,
+  getPolicyEditPath,
+  getPolicyViewPath,
+} from '../../../services/navigation';
 import { trackUiMetric } from '../../../services/ui_metric';
+import { UIM_VIEW_CLICK } from '../../../constants';
 
-import { UIM_EDIT_CLICK } from '../../../constants';
-import { hasLinkedIndices } from '../../../lib/policies';
 import { usePolicyListContext } from '../policy_list_context';
+import { ManagedPolicyBadge, DeprecatedPolicyBadge } from '.';
+import { useIsReadOnly } from '../../../lib/use_is_read_only';
 
 const actionTooltips = {
-  deleteEnabled: i18n.translate('xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonText', {
-    defaultMessage: 'Delete policy',
-  }),
-  deleteDisabled: i18n.translate(
-    'xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonDisabledTooltip',
-    {
-      defaultMessage: 'You cannot delete a policy that is being used by an index',
-    }
-  ),
   viewIndices: i18n.translate('xpack.indexLifecycleMgmt.policyTable.viewIndicesButtonText', {
     defaultMessage: 'View indices linked to policy',
   }),
-  addIndexTemplate: i18n.translate(
-    'xpack.indexLifecycleMgmt.policyTable.addPolicyToTemplateButtonText',
-    {
-      defaultMessage: 'Add policy to index template',
-    }
-  ),
-};
-
-const managedPolicyTooltips = {
-  badge: i18n.translate('xpack.indexLifecycleMgmt.policyTable.templateBadgeType.managedLabel', {
-    defaultMessage: 'Managed',
-  }),
-  badgeTooltip: i18n.translate(
-    'xpack.indexLifecycleMgmt.policyTable.templateBadgeType.managedDescription',
+  viewIndexTemplates: i18n.translate(
+    'xpack.indexLifecycleMgmt.policyTable.viewIndexTemplatesButtonText',
     {
-      defaultMessage:
-        'This policy is preconfigured and managed by Elastic; editing or deleting this policy might break Kibana.',
-    }
-  ),
-};
-
-const deprecatedPolicyTooltips = {
-  badge: i18n.translate('xpack.indexLifecycleMgmt.policyTable.templateBadgeType.deprecatedLabel', {
-    defaultMessage: 'Deprecated',
-  }),
-  badgeTooltip: i18n.translate(
-    'xpack.indexLifecycleMgmt.policyTable.templateBadgeType.deprecatedDescription',
-    {
-      defaultMessage:
-        'This policy is no longer supported and might be removed in a future release. Instead, use one of the other policies available or create a new one.',
+      defaultMessage: 'View index templates linked to policy',
     }
   ),
 };
@@ -94,7 +63,7 @@ const PAGE_SIZE_OPTIONS = [10, 25, 50];
 
 export const PolicyTable: React.FunctionComponent<Props> = ({ policies }) => {
   const [query, setQuery] = useState('');
-
+  const isReadOnly = useIsReadOnly();
   const history = useHistory();
   const {
     services: { getUrlForApp },
@@ -188,8 +157,8 @@ export const PolicyTable: React.FunctionComponent<Props> = ({ policies }) => {
             <EuiLink
               className="eui-textBreakAll"
               data-test-subj="policyTablePolicyNameLink"
-              {...reactRouterNavigate(history, getPolicyEditPath(value), () =>
-                trackUiMetric(METRIC_TYPE.CLICK, UIM_EDIT_CLICK)
+              {...reactRouterNavigate(history, getPolicyViewPath(value), () =>
+                trackUiMetric(METRIC_TYPE.CLICK, UIM_VIEW_CLICK)
               )}
             >
               {value}
@@ -198,22 +167,14 @@ export const PolicyTable: React.FunctionComponent<Props> = ({ policies }) => {
             {isDeprecated && (
               <>
                 &nbsp;
-                <EuiToolTip content={deprecatedPolicyTooltips.badgeTooltip}>
-                  <EuiBadge color="warning" data-test-subj="deprecatedPolicyBadge">
-                    {deprecatedPolicyTooltips.badge}
-                  </EuiBadge>
-                </EuiToolTip>
+                <DeprecatedPolicyBadge />
               </>
             )}
 
             {isManaged && (
               <>
                 &nbsp;
-                <EuiToolTip content={managedPolicyTooltips.badgeTooltip}>
-                  <EuiBadge color="hollow" data-test-subj="managedPolicyBadge">
-                    {managedPolicyTooltips.badge}
-                  </EuiBadge>
-                </EuiToolTip>
+                <ManagedPolicyBadge />
               </>
             )}
           </>
@@ -229,7 +190,7 @@ export const PolicyTable: React.FunctionComponent<Props> = ({ policies }) => {
       sortable: ({ indexTemplates }) => (indexTemplates ?? []).length,
       render: (value: string[], policy: PolicyFromES) => {
         return value && value.length > 0 ? (
-          <EuiToolTip content={actionTooltips.viewIndices} position="left">
+          <EuiToolTip content={actionTooltips.viewIndexTemplates} position="left">
             <EuiButtonEmpty
               flush="both"
               data-test-subj="viewIndexTemplates"
@@ -273,50 +234,77 @@ export const PolicyTable: React.FunctionComponent<Props> = ({ policies }) => {
         return value ? moment(value).format('MMM D, YYYY') : value;
       },
     },
-    {
+  ];
+  if (!isReadOnly) {
+    columns.push({
       actions: [
         {
-          render: (policy: PolicyFromES) => {
-            return (
-              <EuiToolTip content={actionTooltips.addIndexTemplate}>
-                <EuiButtonIcon
-                  data-test-subj="addPolicyToTemplate"
-                  onClick={() =>
-                    setListAction({ selectedPolicy: policy, actionType: 'addIndexTemplate' })
-                  }
-                  iconType="plusInCircle"
-                  aria-label={actionTooltips.addIndexTemplate}
-                />
-              </EuiToolTip>
-            );
-          },
+          isPrimary: true,
+          name: i18n.translate('xpack.indexLifecycleMgmt.policyTable.editActionLabel', {
+            defaultMessage: 'Edit',
+          }),
+          description: i18n.translate(
+            'xpack.indexLifecycleMgmt.policyTable.editActionDescription',
+            {
+              defaultMessage: 'Edit this policy',
+            }
+          ),
+          type: 'icon',
+          icon: 'pencil',
+          onClick: ({ name }) => history.push(getPolicyEditPath(name)),
+          'data-test-subj': 'editPolicy',
         },
+
+        {
+          name: i18n.translate(
+            'xpack.indexLifecycleMgmt.policyTable.addToIndexTemplateActionLabel',
+            {
+              defaultMessage: 'Add to index template',
+            }
+          ),
+          description: i18n.translate(
+            'xpack.indexLifecycleMgmt.policyTable.addToIndexTemplateActionDescription',
+            { defaultMessage: 'Add policy to index template' }
+          ),
+          type: 'icon',
+          icon: 'plusInCircle',
+          onClick: (policy) =>
+            setListAction({ selectedPolicy: policy, actionType: 'addIndexTemplate' }),
+          'data-test-subj': 'addPolicyToTemplate',
+        },
+
         {
-          render: (policy: PolicyFromES, enabled: boolean) => {
-            return (
-              <EuiToolTip
-                content={enabled ? actionTooltips.deleteEnabled : actionTooltips.deleteDisabled}
-              >
-                <EuiButtonIcon
-                  data-test-subj="deletePolicy"
-                  onClick={() =>
-                    setListAction({ selectedPolicy: policy, actionType: 'deletePolicy' })
+          isPrimary: true,
+          name: i18n.translate('xpack.indexLifecycleMgmt.policyTable.deleteActionLabel', {
+            defaultMessage: 'Delete',
+          }),
+          description: (policy) => {
+            return hasLinkedIndices(policy)
+              ? i18n.translate(
+                  'xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonDisabledTooltip',
+                  {
+                    defaultMessage: 'You cannot delete a policy that is being used by an index',
                   }
-                  iconType="trash"
-                  aria-label={actionTooltips.deleteEnabled}
-                  disabled={!enabled}
-                />
-              </EuiToolTip>
-            );
+                )
+              : i18n.translate('xpack.indexLifecycleMgmt.policyTable.deleteActionDescription', {
+                  defaultMessage: 'Delete this policy',
+                });
           },
-          enabled: (policy: PolicyFromES) => !hasLinkedIndices(policy),
+          type: 'icon',
+          icon: 'trash',
+          color: 'danger',
+          onClick: (policy) =>
+            setListAction({ selectedPolicy: policy, actionType: 'deletePolicy' }),
+          enabled: (policy) => !hasLinkedIndices(policy),
+          'data-test-subj': 'deletePolicy',
         },
       ],
       name: i18n.translate('xpack.indexLifecycleMgmt.policyTable.headers.actionsHeader', {
         defaultMessage: 'Actions',
       }),
-    },
-  ];
+      'data-test-subj': 'policyActionsCollapsedButton',
+    });
+  }
 
   return (
     <EuiInMemoryTable
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx
new file mode 100644
index 0000000000000..55f8b0e13f617
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { SearchableSnapshot } from './searchable_snapshot';
+import { Readonly } from './readonly';
+import { SerializedColdPhase } from '../../../../../common/types';
+
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+import { MinAge } from './min_age';
+import { Downsample } from './downsample';
+import { IndexPriority } from './index_priority';
+import { Replicas } from './replicas';
+import { DataAllocation } from './data_allocation';
+
+export const ColdPhase = ({ phase }: { phase: SerializedColdPhase }) => {
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>{i18nTexts.editPolicy.titles.cold}</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <MinAge minAge={phase.min_age} />
+
+      <SearchableSnapshot searchableSnapshot={phase.actions.searchable_snapshot} />
+      <Replicas allocate={phase.actions.allocate} />
+      <Downsample downsample={phase.actions.downsample} />
+      <Readonly readonly={phase.actions.readonly} />
+      <DataAllocation
+        phase={'warm'}
+        allocate={phase.actions.allocate}
+        migrate={phase.actions.migrate}
+      />
+      <IndexPriority indexPriority={phase.actions.set_priority} />
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/data_allocation.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/data_allocation.tsx
new file mode 100644
index 0000000000000..2c185af2280d3
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/data_allocation.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiBadge,
+  EuiCode,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { determineDataTierAllocationType } from '../../../lib';
+import { AllocateAction, MigrateAction, PhaseWithAllocation } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+const getAllocationDescription = (
+  type: ReturnType<typeof determineDataTierAllocationType>,
+  phase: PhaseWithAllocation,
+  allocate?: AllocateAction
+) => {
+  if (type === 'none') {
+    return (
+      <EuiText color="subdued">
+        <EuiSpacer size="s" />
+        {i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.dataAllocationDisabledLabel', {
+          defaultMessage: 'Disabled',
+        })}
+      </EuiText>
+    );
+  }
+  if (type === 'node_roles') {
+    const label =
+      phase === 'warm'
+        ? i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.dataAllocationWarmNodesLabel', {
+            defaultMessage: 'Using warm nodes',
+          })
+        : i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.dataAllocationColdNodesdLabel', {
+            defaultMessage: 'Using cold nodes',
+          });
+    return (
+      <EuiText color="subdued">
+        <EuiSpacer size="s" />
+        {label}{' '}
+        <EuiBadge color="success">
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.policyFlyout.recommendedDataAllocationLabel"
+            defaultMessage="Recommended"
+          />
+        </EuiBadge>
+      </EuiText>
+    );
+  }
+  if (type === 'node_attrs') {
+    return (
+      <EuiText color="subdued">
+        <EuiSpacer size="s" />
+        {i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.dataAllocationAttributtesLabel', {
+          defaultMessage: 'Node attributes',
+        })}
+        {': '}
+        <EuiCode>{JSON.stringify(allocate?.require)}</EuiCode>
+      </EuiText>
+    );
+  }
+};
+export const DataAllocation = ({
+  allocate,
+  migrate,
+  phase,
+}: {
+  allocate?: AllocateAction;
+  migrate?: MigrateAction;
+  phase: PhaseWithAllocation;
+}) => {
+  const allocationType = determineDataTierAllocationType({ allocate, migrate });
+  const allocationDescription = getAllocationDescription(allocationType, phase, allocate);
+  return (
+    <>
+      <EuiDescriptionListTitle>{i18nTexts.editPolicy.dataAllocationLabel}</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>{allocationDescription}</EuiDescriptionListDescription>
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx
new file mode 100644
index 0000000000000..dfe935753ed25
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { SerializedDeletePhase } from '../../../../../common/types';
+
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+import { MinAge } from './min_age';
+import { WaitForSnapshot } from './wait_for_snapshot';
+
+export const DeletePhase = ({ phase }: { phase: SerializedDeletePhase }) => {
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>{i18nTexts.editPolicy.titles.delete}</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <MinAge minAge={phase.min_age} />
+      <WaitForSnapshot waitForSnapshot={phase.actions.wait_for_snapshot} />
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx
new file mode 100644
index 0000000000000..b1faf885d331e
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { DownsampleAction } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const Downsample = ({ downsample }: { downsample?: DownsampleAction }) => {
+  return downsample ? (
+    <>
+      <EuiDescriptionListTitle>{i18nTexts.editPolicy.downsampleLabel}</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          {i18nTexts.editPolicy.downsampleIntervalFieldLabel}
+          {': '}
+          <strong>{downsample.fixed_interval}</strong>
+        </EuiText>
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx
new file mode 100644
index 0000000000000..87bca08e49ae5
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { ForcemergeAction } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+import { i18nTexts as i18nTextsFlyout } from './i18n_texts';
+
+export const Forcemerge = ({ forcemerge }: { forcemerge?: ForcemergeAction }) => {
+  return forcemerge ? (
+    <>
+      <EuiDescriptionListTitle>
+        <FormattedMessage
+          id="xpack.indexLifecycleMgmt.policyFlyout.forcemergeLabel"
+          defaultMessage="Forcemerge"
+        />
+      </EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          {i18nTexts.editPolicy.maxNumSegmentsFieldLabel}
+          {': '}
+          <strong>{forcemerge.max_num_segments}</strong>
+        </EuiText>
+
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          {i18nTexts.editPolicy.bestCompressionFieldLabel}
+          {': '}
+          <strong>
+            {forcemerge.index_codec === 'best_compression'
+              ? i18nTextsFlyout.yes
+              : i18nTextsFlyout.no}
+          </strong>
+        </EuiText>
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx
new file mode 100644
index 0000000000000..288d36bc2e0e0
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { SearchableSnapshot } from './searchable_snapshot';
+import { SerializedFrozenPhase } from '../../../../../common/types';
+
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+import { MinAge } from './min_age';
+
+export const FrozenPhase = ({ phase }: { phase: SerializedFrozenPhase }) => {
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>{i18nTexts.editPolicy.titles.frozen}</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <MinAge minAge={phase.min_age} />
+      <SearchableSnapshot searchableSnapshot={phase.actions.searchable_snapshot} />
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx
new file mode 100644
index 0000000000000..be00fc86209fd
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { SerializedHotPhase } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+import { Rollover } from './rollover';
+import { Forcemerge } from './forcemerge';
+import { Shrink } from './shrink';
+import { Downsample } from './downsample';
+import { IndexPriority } from './index_priority';
+import { Readonly } from './readonly';
+import { SearchableSnapshot } from './searchable_snapshot';
+
+export const HotPhase = ({ phase }: { phase: SerializedHotPhase }) => {
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>{i18nTexts.editPolicy.titles.hot}</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <Rollover rollover={phase.actions.rollover} />
+      <Forcemerge forcemerge={phase.actions.forcemerge} />
+      <Shrink shrink={phase.actions.shrink} />
+      <SearchableSnapshot searchableSnapshot={phase.actions.searchable_snapshot} />
+      <Downsample downsample={phase.actions.downsample} />
+      <Readonly readonly={phase.actions.readonly} />
+      <IndexPriority indexPriority={phase.actions.set_priority} />
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/i18n_texts.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/i18n_texts.ts
new file mode 100644
index 0000000000000..b5a00bac82bf7
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/i18n_texts.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const i18nTexts = {
+  yes: i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.yesLabel', {
+    defaultMessage: 'Yes',
+  }),
+  no: i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.noLabel', {
+    defaultMessage: 'No',
+  }),
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index.ts
new file mode 100644
index 0000000000000..9e0738710860c
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { ViewPolicyFlyout } from './view_policy_flyout';
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx
new file mode 100644
index 0000000000000..b9bbb910cb6c5
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { SetPriorityAction } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const IndexPriority = ({ indexPriority }: { indexPriority?: SetPriorityAction }) => {
+  return indexPriority ? (
+    <>
+      <EuiDescriptionListTitle>
+        {i18nTexts.editPolicy.indexPriorityFieldLabel}
+      </EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          {indexPriority.priority}
+        </EuiText>
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx
new file mode 100644
index 0000000000000..04e5cbb0a9770
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const MinAge = ({ minAge }: { minAge?: string }) => {
+  return minAge ? (
+    <>
+      <EuiDescriptionListTitle>{i18nTexts.editPolicy.minAgeLabel}</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          {`${minAge} ${i18nTexts.editPolicy.minAgeUnitFieldSuffix}`}
+        </EuiText>
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx
new file mode 100644
index 0000000000000..83b03b7057858
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiDescriptionListTitle } from '@elastic/eui';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const Readonly = ({ readonly }: { readonly?: {} }) => {
+  return readonly ? (
+    <EuiDescriptionListTitle>{i18nTexts.editPolicy.readonlyLabel}</EuiDescriptionListTitle>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx
new file mode 100644
index 0000000000000..e95c7b1cd41fc
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { AllocateAction } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const Replicas = ({ allocate }: { allocate?: AllocateAction }) => {
+  return allocate?.number_of_replicas !== undefined ? (
+    <>
+      <EuiDescriptionListTitle>{i18nTexts.editPolicy.replicasLabel}</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          {i18nTexts.editPolicy.numberOfReplicasLabel}
+          {': '}
+          <strong>{allocate.number_of_replicas}</strong>
+        </EuiText>
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx
new file mode 100644
index 0000000000000..6d6948c59d4c6
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiBadge,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { RolloverAction } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const Rollover = ({ rollover }: { rollover?: RolloverAction }) => {
+  return rollover ? (
+    <>
+      <EuiDescriptionListTitle>
+        <FormattedMessage
+          id="xpack.indexLifecycleMgmt.policyFlyout.rolloverTitle"
+          defaultMessage="Rollover"
+        />
+      </EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        {rollover.max_primary_shard_size && (
+          <EuiText color="subdued">
+            <EuiSpacer size="s" />
+            {i18nTexts.editPolicy.maxPrimaryShardSizeLabel}
+            {': '}
+            <strong>{rollover.max_primary_shard_size}</strong>
+          </EuiText>
+        )}
+        {rollover.max_primary_shard_docs && (
+          <EuiText color="subdued">
+            <EuiSpacer size="s" />
+            {i18nTexts.editPolicy.maxPrimaryShardDocsLabel}
+            {': '}
+            <strong>{rollover.max_primary_shard_docs}</strong>
+          </EuiText>
+        )}
+        {rollover.max_age && (
+          <EuiText color="subdued">
+            <EuiSpacer size="s" />
+            {i18nTexts.editPolicy.maxAgeLabel}
+            {': '}
+            <strong>{rollover.max_age}</strong>
+          </EuiText>
+        )}
+        {rollover.max_docs && (
+          <EuiText color="subdued">
+            <EuiSpacer size="s" />
+            {i18nTexts.editPolicy.maxDocsLabel}
+            {': '}
+            <strong>{rollover.max_docs}</strong>
+          </EuiText>
+        )}
+        {rollover.max_size && (
+          <EuiText color="subdued">
+            <EuiSpacer size="s" />
+            {i18nTexts.editPolicy.maxSizeLabel}
+            {': '}
+            <strong>{rollover.max_size}</strong>{' '}
+            <EuiBadge color="warning">
+              <FormattedMessage
+                id="xpack.indexLifecycleMgmt.policyFlyout.deprecatedLabel"
+                defaultMessage="Deprecated"
+              />
+            </EuiBadge>
+          </EuiText>
+        )}
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx
new file mode 100644
index 0000000000000..a1285456383af
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiCode,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { SearchableSnapshotAction } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const SearchableSnapshot = ({
+  searchableSnapshot,
+}: {
+  searchableSnapshot?: SearchableSnapshotAction;
+}) => {
+  return searchableSnapshot ? (
+    <>
+      <EuiDescriptionListTitle>
+        {i18nTexts.editPolicy.searchableSnapshotLabel}
+      </EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          {i18nTexts.editPolicy.searchableSnapshotsRepoFieldLabel}
+          {': '}
+          <EuiCode>{searchableSnapshot.snapshot_repository}</EuiCode>
+        </EuiText>
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx
new file mode 100644
index 0000000000000..750b934d19bd2
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { ShrinkAction } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const Shrink = ({ shrink }: { shrink?: ShrinkAction }) => {
+  return shrink ? (
+    <>
+      <EuiDescriptionListTitle>{i18nTexts.editPolicy.shrinkActionLabel}</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        {shrink.number_of_shards && (
+          <EuiText color="subdued">
+            <EuiSpacer size="s" />
+            {i18nTexts.editPolicy.shrinkNumberOfShardsLabel}
+            {': '}
+            <strong>{shrink.number_of_shards}</strong>
+          </EuiText>
+        )}
+
+        {shrink.max_primary_shard_size && (
+          <EuiText color="subdued">
+            <EuiSpacer size="s" />
+            {i18nTexts.editPolicy.maxPrimaryShardSizeLabel}
+            {': '}
+            <strong>{shrink.max_primary_shard_size}</strong>
+          </EuiText>
+        )}
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/timeline.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/timeline.tsx
new file mode 100644
index 0000000000000..1db8da207f490
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/timeline.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { PolicyFromES } from '../../../../../common/types';
+import { Timeline as ViewComponent } from '../../edit_policy/components/timeline/timeline';
+
+export const Timeline = ({ policy }: { policy: PolicyFromES }) => {
+  const hasDeletePhase = Boolean(policy.policy.phases.delete);
+  const isUsingRollover = Boolean(policy.policy.phases.hot?.actions.rollover);
+  const warmPhaseMinAge = policy.policy.phases.warm?.min_age;
+  const coldPhaseMinAge = policy.policy.phases.cold?.min_age;
+  const frozenPhaseMinAge = policy.policy.phases.frozen?.min_age;
+  const deletePhaseMinAge = policy.policy.phases.delete?.min_age;
+  return (
+    <ViewComponent
+      showTitle={false}
+      hasDeletePhase={hasDeletePhase}
+      isUsingRollover={isUsingRollover}
+      hotPhaseMinAge={undefined}
+      warmPhaseMinAge={warmPhaseMinAge}
+      coldPhaseMinAge={coldPhaseMinAge}
+      frozenPhaseMinAge={frozenPhaseMinAge}
+      deletePhaseMinAge={deletePhaseMinAge}
+    />
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
new file mode 100644
index 0000000000000..048c0ac2d8e88
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
@@ -0,0 +1,220 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiContextMenu,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiIcon,
+  EuiPopover,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { METRIC_TYPE } from '@kbn/analytics';
+import { PolicyFromES } from '../../../../../common/types';
+import { trackUiMetric } from '../../../services/ui_metric';
+import { hasLinkedIndices } from '../../../lib/policies';
+import { getPoliciesListPath, getPolicyEditPath } from '../../../services/navigation';
+import { UIM_EDIT_CLICK } from '../../../constants';
+import { useIsReadOnly } from '../../../lib/use_is_read_only';
+import { usePolicyListContext } from '../policy_list_context';
+import { DeprecatedPolicyBadge, ManagedPolicyBadge } from '../components';
+import { HotPhase } from './hot_phase';
+import { WarmPhase } from './warm_phase';
+import { Timeline } from './timeline';
+import { ColdPhase } from './cold_phase';
+import { FrozenPhase } from './frozen_phase';
+import { DeletePhase } from './delete_phase';
+
+export const ViewPolicyFlyout = ({ policy }: { policy: PolicyFromES }) => {
+  const isReadOnly = useIsReadOnly();
+  const { setListAction } = usePolicyListContext();
+  const history = useHistory();
+  const onClose = () => {
+    history.push(getPoliciesListPath());
+  };
+  const onEdit = (policyName: string) => {
+    trackUiMetric(METRIC_TYPE.CLICK, UIM_EDIT_CLICK);
+    history.push(getPolicyEditPath(policyName));
+  };
+  const [showPopover, setShowPopover] = useState(false);
+  const actionMenuItems = [
+    /**
+     * Edit policy
+     */
+    {
+      name: i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.editActionLabel', {
+        defaultMessage: 'Edit',
+      }),
+      icon: <EuiIcon type="pencil" />,
+      onClick: () => onEdit(policy.name),
+    },
+    /**
+     * Add policy to index template
+     */
+    {
+      name: i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.addToIndexTemplate', {
+        defaultMessage: 'Add to index template',
+      }),
+      icon: <EuiIcon type="plusInCircle" />,
+      onClick: () => setListAction({ selectedPolicy: policy, actionType: 'addIndexTemplate' }),
+    },
+  ];
+  /**
+   * Delete policy
+   */
+  if (!hasLinkedIndices(policy)) {
+    actionMenuItems.push({
+      name: i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.deleteActionLabel', {
+        defaultMessage: 'Delete',
+      }),
+      icon: <EuiIcon type="trash" />,
+      onClick: () => {
+        setShowPopover(false);
+        setListAction({ selectedPolicy: policy, actionType: 'deletePolicy' });
+      },
+    });
+  }
+
+  const managePolicyButton = (
+    <EuiButton
+      aria-label={i18n.translate(
+        'xpack.indexLifecycleMgmt.policyFlyout.managePolicyActionsAriaLabel',
+        {
+          defaultMessage: 'Manage policy',
+        }
+      )}
+      onClick={() => setShowPopover((previousBool) => !previousBool)}
+      iconType="arrowUp"
+      iconSide="right"
+      fill
+    >
+      {i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.managePolicyButtonLabel', {
+        defaultMessage: 'Manage',
+      })}
+    </EuiButton>
+  );
+
+  return (
+    <EuiFlyout onClose={onClose}>
+      <EuiFlyoutHeader hasBorder>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiTitle data-test-subj="policyFlyoutTitle">
+              <h1>{policy.name}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          {policy.policy.deprecated ? (
+            <EuiFlexItem grow={false}>
+              {' '}
+              <DeprecatedPolicyBadge />
+            </EuiFlexItem>
+          ) : null}
+          {policy.policy?._meta?.managed ? (
+            <EuiFlexItem grow={false}>
+              {' '}
+              <ManagedPolicyBadge />
+            </EuiFlexItem>
+          ) : null}
+        </EuiFlexGroup>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        {/* Timeline */}
+        <Timeline policy={policy} />
+
+        <EuiSpacer />
+        {/* Hot phase */}
+        {policy.policy.phases.hot && <HotPhase phase={policy.policy.phases.hot} />}
+
+        {/* Warm phase */}
+        {policy.policy.phases.warm && (
+          <>
+            <EuiSpacer size="m" />
+            <WarmPhase phase={policy.policy.phases.warm} />
+          </>
+        )}
+
+        {/* Cold phase */}
+        {policy.policy.phases.cold && (
+          <>
+            <>
+              <EuiSpacer size="m" />
+              <ColdPhase phase={policy.policy.phases.cold} />
+            </>
+          </>
+        )}
+
+        {/* Frozen phase */}
+        {policy.policy.phases.frozen && (
+          <>
+            <EuiSpacer size="m" />
+            <FrozenPhase phase={policy.policy.phases.frozen} />
+          </>
+        )}
+
+        {/* Delete phase */}
+        {policy.policy.phases.delete && (
+          <>
+            <EuiSpacer size="m" />
+            <DeletePhase phase={policy.policy.phases.delete} />
+          </>
+        )}
+      </EuiFlyoutBody>
+
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+              {i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.closeButtonLabel', {
+                defaultMessage: 'Close',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          {!isReadOnly && (
+            <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                <EuiPopover
+                  isOpen={showPopover}
+                  closePopover={() => setShowPopover(false)}
+                  button={managePolicyButton}
+                  panelPaddingSize="none"
+                  repositionOnScroll
+                >
+                  <EuiContextMenu
+                    initialPanelId={0}
+                    panels={[
+                      {
+                        id: 0,
+                        title: i18n.translate(
+                          'xpack.indexLifecycleMgmt.policyFlyout.managePolicyTitle',
+                          {
+                            defaultMessage: 'Options',
+                          }
+                        ),
+                        items: actionMenuItems,
+                      },
+                    ]}
+                  />
+                </EuiPopover>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx
new file mode 100644
index 0000000000000..d89290bee45e9
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiCode,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { SerializedDeletePhase } from '../../../../../common/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const WaitForSnapshot = ({
+  waitForSnapshot,
+}: {
+  waitForSnapshot?: SerializedDeletePhase['actions']['wait_for_snapshot'];
+}) => {
+  return waitForSnapshot ? (
+    <>
+      <EuiDescriptionListTitle>{i18nTexts.editPolicy.waitForSnapshotLabel}</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        <EuiText color="subdued">
+          <EuiSpacer size="s" />
+          <EuiCode>{waitForSnapshot.policy}</EuiCode>
+        </EuiText>
+      </EuiDescriptionListDescription>
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx
new file mode 100644
index 0000000000000..3881bc1a639c1
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { Readonly } from './readonly';
+import { SerializedWarmPhase } from '../../../../../common/types';
+
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+import { MinAge } from './min_age';
+import { Shrink } from './shrink';
+import { Downsample } from './downsample';
+import { IndexPriority } from './index_priority';
+import { Forcemerge } from './forcemerge';
+import { Replicas } from './replicas';
+import { DataAllocation } from './data_allocation';
+
+export const WarmPhase = ({ phase }: { phase: SerializedWarmPhase }) => {
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>{i18nTexts.editPolicy.titles.warm}</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <MinAge minAge={phase.min_age} />
+
+      <Replicas allocate={phase.actions.allocate} />
+      <Shrink shrink={phase.actions.shrink} />
+      <Forcemerge forcemerge={phase.actions.forcemerge} />
+      <Downsample downsample={phase.actions.downsample} />
+      <Readonly readonly={phase.actions.readonly} />
+      <DataAllocation
+        phase={'warm'}
+        allocate={phase.actions.allocate}
+        migrate={phase.actions.migrate}
+      />
+      <IndexPriority indexPriority={phase.actions.set_priority} />
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.tsx
index 0a81f6b16bf43..8894e4e63928c 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.tsx
@@ -5,16 +5,18 @@
  * 2.0.
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import { EuiButton, EuiSpacer, EuiPageHeader, EuiPageTemplate } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
+import { usePolicyListContext } from './policy_list_context';
+import { useIsReadOnly } from '../../lib/use_is_read_only';
 import { PolicyFromES } from '../../../../common/types';
-import { PolicyTable } from './components/policy_table';
-import { getPolicyCreatePath } from '../../services/navigation';
-import { ListActionHandler } from './components/list_action_handler';
+import { getPoliciesListPath, getPolicyCreatePath } from '../../services/navigation';
+import { PolicyTable, ListActionHandler } from './components';
+import { ViewPolicyFlyout } from './policy_flyout';
 
 interface Props {
   policies: PolicyFromES[];
@@ -23,6 +25,19 @@ interface Props {
 
 export const PolicyList: React.FunctionComponent<Props> = ({ policies, updatePolicies }) => {
   const history = useHistory();
+  const isReadOnly = useIsReadOnly();
+  const { setListAction } = usePolicyListContext();
+  const [flyoutPolicy, setFlyoutPolicy] = useState<PolicyFromES | null>(null);
+  useEffect(() => {
+    const params = new URLSearchParams(history.location.search);
+    const policyParam = decodeURIComponent(params.get('policy') ?? '');
+    const policyFromParam = policies.find((policy) => policy.name === policyParam);
+    if (policyFromParam) {
+      setFlyoutPolicy(policyFromParam);
+    } else {
+      setFlyoutPolicy(null);
+    }
+  }, [history.location.search, policies, setListAction]);
 
   const createPolicyButton = (
     <EuiButton
@@ -65,9 +80,17 @@ export const PolicyList: React.FunctionComponent<Props> = ({ policies, updatePol
     );
   }
 
+  const rightSideItems = isReadOnly ? [] : [createPolicyButton];
   return (
     <>
-      <ListActionHandler updatePolicies={updatePolicies} />
+      <ListActionHandler
+        deletePolicyCallback={() => {
+          // if a flyout was open, then close it
+          history.push(getPoliciesListPath());
+          // update the policies in the list after 1 was deleted
+          updatePolicies();
+        }}
+      />
 
       <EuiPageHeader
         pageTitle={
@@ -86,12 +109,14 @@ export const PolicyList: React.FunctionComponent<Props> = ({ policies, updatePol
           />
         }
         bottomBorder
-        rightSideItems={[createPolicyButton]}
+        rightSideItems={rightSideItems}
       />
 
       <EuiSpacer size="l" />
 
       <PolicyTable policies={policies} />
+
+      {flyoutPolicy && <ViewPolicyFlyout policy={flyoutPolicy} />}
     </>
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list_context.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list_context.tsx
index a77aac9ad2f11..bf20ac66b3e07 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list_context.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list_context.tsx
@@ -9,7 +9,7 @@ import React, { createContext, ReactChild, useContext, useState } from 'react';
 import { PolicyFromES } from '../../../../common/types';
 
 interface ListAction {
-  actionType: 'viewIndexTemplates' | 'addIndexTemplate' | 'deletePolicy';
+  actionType: 'viewIndexTemplates' | 'addIndexTemplate' | 'deletePolicy' | 'viewPolicy';
   selectedPolicy: PolicyFromES;
 }
 
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/navigation.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/navigation.ts
index f967f503a79a7..bab80c67cbf8e 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/services/navigation.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/services/navigation.ts
@@ -18,6 +18,10 @@ export const getPolicyEditPath = (policyName: string): string => {
   return encodeURI(`/policies/edit/${encodeURIComponent(policyName)}`);
 };
 
+export const getPolicyViewPath = (policyName: string): string => {
+  return encodeURI(`/policies?policy=${encodeURIComponent(policyName)}`);
+};
+
 export const getPolicyCreatePath = () => {
   return ROUTES.create;
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/types.ts b/x-pack/plugins/index_lifecycle_management/public/types.ts
index 6ea4c4d2b18ae..a1a58e80d8301 100644
--- a/x-pack/plugins/index_lifecycle_management/public/types.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/types.ts
@@ -46,4 +46,5 @@ export interface AppServicesContext {
   overlays: OverlayStart;
   http: HttpSetup;
   history: ScopedHistory;
+  capabilities: ApplicationStart['capabilities'];
 }
diff --git a/x-pack/plugins/index_lifecycle_management/server/plugin.ts b/x-pack/plugins/index_lifecycle_management/server/plugin.ts
index 8c72c3408268f..0d88acbaaa4ff 100644
--- a/x-pack/plugins/index_lifecycle_management/server/plugin.ts
+++ b/x-pack/plugins/index_lifecycle_management/server/plugin.ts
@@ -75,7 +75,11 @@ export class IndexLifecycleManagementServerPlugin implements Plugin<void, void,
       privileges: [
         {
           requiredClusterPrivileges: ['manage_ilm'],
-          ui: [],
+          ui: ['save'],
+        },
+        {
+          requiredClusterPrivileges: ['read_ilm'],
+          ui: ['show'],
         },
       ],
     });
diff --git a/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts b/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
index d6b84aeee8760..ed2cc41ed06c1 100644
--- a/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
+++ b/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
@@ -63,7 +63,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     throw new Error(`Could not find ${policyName} in policy table`);
   };
 
-  describe('Index Lifecycle Management Accessibility', () => {
+  describe('Index Lifecycle Management Accessibility', async () => {
     before(async () => {
       await esClient.snapshot.createRepository({
         name: REPO_NAME,
@@ -132,8 +132,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('Edit policy', async () => {
-        const link = await findPolicyLinkInListView(POLICY_NAME);
-        await link.click();
+        const policyRow = await testSubjects.find(`policyTableRow-${POLICY_NAME}`);
+
+        const editPolicyButton = await policyRow.findByTestSubject('editPolicy');
+        await editPolicyButton.click();
+
         await retry.waitFor('ILM edit form', async () => {
           return (
             (await testSubjects.getVisibleText('policyTitle')) === `Edit policy ${POLICY_NAME}`
@@ -143,8 +146,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('Request flyout', async () => {
-        const link = await findPolicyLinkInListView(POLICY_NAME);
-        await link.click();
+        const policyRow = await testSubjects.find(`policyTableRow-${POLICY_NAME}`);
+
+        const editPolicyButton = await policyRow.findByTestSubject('editPolicy');
+        await editPolicyButton.click();
+
         await retry.waitFor('ILM request button', async () => {
           return testSubjects.exists('requestButton');
         });
@@ -163,8 +169,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('Add policy to index template modal', async () => {
       await filterByPolicyName(POLICY_NAME);
       const policyRow = await testSubjects.find(`policyTableRow-${POLICY_NAME}`);
-      const addPolicyButton = await policyRow.findByTestSubject('addPolicyToTemplate');
 
+      const actionsButton = await policyRow.findByTestSubject('euiCollapsedItemActionsButton');
+      await actionsButton.click();
+
+      const addPolicyButton = await testSubjects.find('addPolicyToTemplate');
       await addPolicyButton.click();
 
       await retry.waitFor('ILM add policy to index template modal to be present', async () => {
@@ -177,8 +186,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('Delete policy modal', async () => {
       await filterByPolicyName(POLICY_NAME);
       const policyRow = await testSubjects.find(`policyTableRow-${POLICY_NAME}`);
-      const deleteButton = await policyRow.findByTestSubject('deletePolicy');
 
+      const deleteButton = await policyRow.findByTestSubject('deletePolicy');
       await deleteButton.click();
 
       await retry.waitFor('ILM delete policy modal to be present', async () => {
@@ -191,10 +200,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('Index templates flyout', async () => {
       await filterByPolicyName(POLICY_NAME);
       const policyRow = await testSubjects.find(`policyTableRow-${POLICY_NAME}`);
-      const actionsButton = await policyRow.findByTestSubject('viewIndexTemplates');
 
+      const actionsButton = await policyRow.findByTestSubject('euiCollapsedItemActionsButton');
       await actionsButton.click();
 
+      const templatesButton = await testSubjects.find('viewIndexTemplates');
+      await templatesButton.click();
+
       const flyoutTitleSelector = 'indexTemplatesFlyoutHeader';
       await retry.waitFor('Index templates flyout', async () => {
         return testSubjects.isDisplayed(flyoutTitleSelector);

From 7fc7e36046cc2c1a58951e093ed09135be5eb618 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Thu, 5 Sep 2024 23:12:56 +0200
Subject: [PATCH 02/17] Refactor actions and phases into reusable description
 components

---
 .../delete_searchable_snapshot_field.tsx      | 12 +--
 .../components/phases/hot_phase/hot_phase.tsx |  8 +-
 .../phases/shared_fields/forcemerge_field.tsx |  9 +--
 .../sections/edit_policy/i18n_texts.ts        | 12 +++
 .../policy_list/policy_flyout/cold_phase.tsx  | 55 ++++++-------
 .../components/action_description.tsx         | 39 +++++++++
 .../{ => components}/data_allocation.tsx      | 73 ++++++++---------
 .../components/delete_searchable_snapshot.tsx | 21 +++++
 .../policy_flyout/components/downsample.tsx   | 27 +++++++
 .../policy_flyout/components/forcemerge.tsx   | 38 +++++++++
 .../{ => components}/i18n_texts.ts            |  0
 .../policy_flyout/components/index.ts         | 19 +++++
 .../components/index_priority.tsx             | 29 +++++++
 .../policy_flyout/components/min_age.tsx      | 21 +++++
 .../policy_flyout/components/readonly.tsx     | 23 ++++++
 .../policy_flyout/components/replicas.tsx     | 28 +++++++
 .../policy_flyout/components/rollover.tsx     | 76 ++++++++++++++++++
 .../components/searchable_snapshot.tsx        | 35 ++++++++
 .../policy_flyout/components/shrink.tsx       | 41 ++++++++++
 .../policy_flyout/components/types.ts         | 13 +++
 .../components/wait_for_snapshot.tsx          | 24 ++++++
 .../policy_flyout/delete_phase.tsx            | 31 ++++----
 .../policy_list/policy_flyout/downsample.tsx  | 32 --------
 .../policy_list/policy_flyout/forcemerge.tsx  | 50 ------------
 .../policy_flyout/frozen_phase.tsx            | 27 +++----
 .../policy_list/policy_flyout/hot_phase.tsx   | 49 ++++++------
 .../policy_flyout/index_priority.tsx          | 32 --------
 .../policy_list/policy_flyout/min_age.tsx     | 29 -------
 .../policy_flyout/phase_description.tsx       | 33 ++++++++
 .../policy_list/policy_flyout/readonly.tsx    | 16 ----
 .../policy_list/policy_flyout/replicas.tsx    | 32 --------
 .../policy_list/policy_flyout/rollover.tsx    | 79 -------------------
 .../policy_flyout/searchable_snapshot.tsx     | 39 ---------
 .../policy_list/policy_flyout/shrink.tsx      | 43 ----------
 .../policy_flyout/view_policy_flyout.tsx      | 36 ++-------
 .../policy_flyout/wait_for_snapshot.tsx       | 35 --------
 .../policy_list/policy_flyout/warm_phase.tsx  | 59 +++++++-------
 37 files changed, 630 insertions(+), 595 deletions(-)
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx
 rename x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/{ => components}/data_allocation.tsx (57%)
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/downsample.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/forcemerge.tsx
 rename x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/{ => components}/i18n_texts.ts (100%)
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index_priority.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/min_age.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/readonly.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/replicas.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/rollover.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/searchable_snapshot.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/types.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/wait_for_snapshot.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx
 delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_searchable_snapshot_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_searchable_snapshot_field.tsx
index 5e19894843ff6..1aaab5c6657cf 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_searchable_snapshot_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_searchable_snapshot_field.tsx
@@ -8,22 +8,16 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiTextColor } from '@elastic/eui';
+import { useKibana } from '../../../../../../shared_imports';
+import { i18nTexts } from '../../../i18n_texts';
 import { LearnMoreLink } from '../../learn_more_link';
 import { ToggleFieldWithDescribedFormRow } from '../../described_form_row';
-import { useKibana } from '../../../../../../shared_imports';
 
 export const DeleteSearchableSnapshotField: React.FunctionComponent = () => {
   const { docLinks } = useKibana().services;
   return (
     <ToggleFieldWithDescribedFormRow
-      title={
-        <h3>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.deleteSearchableSnapshotTitle"
-            defaultMessage="Delete searchable snapshot"
-          />
-        </h3>
-      }
+      title={<h3>{i18nTexts.editPolicy.deleteSearchableSnapshotLabel}</h3>}
       description={
         <EuiTextColor color="subdued">
           <FormattedMessage
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
index e636d4a298e4f..8865b2b27d044 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
@@ -59,13 +59,7 @@ export const HotPhase: FunctionComponent = () => {
   return (
     <Phase phase="hot">
       <DescribedFormRow
-        title={
-          <h3>
-            {i18n.translate('xpack.indexLifecycleMgmt.hotPhase.rolloverFieldTitle', {
-              defaultMessage: 'Rollover',
-            })}
-          </h3>
-        }
+        title={<h3>{i18nTexts.editPolicy.rolloverLabel}</h3>}
         description={
           <>
             <EuiTextColor color="subdued">
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx
index 9f8735b9f2916..eba3ca8f22126 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx
@@ -34,14 +34,7 @@ export const ForcemergeField: React.FunctionComponent<Props> = ({ phase }) => {
 
   return (
     <DescribedFormRow
-      title={
-        <h3>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.forceMerge.enableText"
-            defaultMessage="Force merge"
-          />
-        </h3>
-      }
+      title={<h3>{i18nTexts.editPolicy.forceMergeLabel}</h3>}
       description={
         <>
           <FormattedMessage
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
index 85e56812b4b92..cd1c19dc5d500 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
@@ -63,6 +63,9 @@ export const i18nTexts = {
         ),
       },
     },
+    forceMergeLabel: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.forceMerge.enableText', {
+      defaultMessage: 'Force merge',
+    }),
     forceMergeEnabledFieldLabel: i18n.translate('xpack.indexLifecycleMgmt.forcemerge.enableLabel', {
       defaultMessage: 'Force merge data',
     }),
@@ -162,6 +165,9 @@ export const i18nTexts = {
       'xpack.indexLifecycleMgmt.editPolicy.minimumAge.minimumAgeFieldLabel',
       { defaultMessage: 'Move data into phase when:' }
     ),
+    rolloverLabel: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.rolloverFieldTitle', {
+      defaultMessage: 'Rollover',
+    }),
     rolloverToolTipDescription: i18n.translate(
       'xpack.indexLifecycleMgmt.editPolicy.minimumAge.rolloverToolTipDescription',
       {
@@ -195,6 +201,12 @@ export const i18nTexts = {
       'xpack.indexLifecycleMgmt.editPolicy.deletePhase.waitForSnapshotTitle',
       { defaultMessage: 'Wait for snapshot policy' }
     ),
+    deleteSearchableSnapshotLabel: i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.deletePhase.deleteSearchableSnapshotTitle',
+      {
+        defaultMessage: 'Delete searchable snapshot',
+      }
+    ),
     errors: {
       numberRequired: i18n.translate(
         'xpack.indexLifecycleMgmt.editPolicy.errors.numberRequiredErrorMessage',
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx
index 55f8b0e13f617..a9122da328190 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/cold_phase.tsx
@@ -6,37 +6,32 @@
  */
 
 import React from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import { SearchableSnapshot } from './searchable_snapshot';
-import { Readonly } from './readonly';
-import { SerializedColdPhase } from '../../../../../common/types';
+import { PhaseDescription } from './phase_description';
+import { Phases } from '../../../../../common/types';
+import {
+  MinAge,
+  Replicas,
+  Downsample,
+  Readonly,
+  IndexPriority,
+  DataAllocation,
+  SearchableSnapshot,
+} from './components';
 
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-import { MinAge } from './min_age';
-import { Downsample } from './downsample';
-import { IndexPriority } from './index_priority';
-import { Replicas } from './replicas';
-import { DataAllocation } from './data_allocation';
-
-export const ColdPhase = ({ phase }: { phase: SerializedColdPhase }) => {
+export const ColdPhase = ({ phases }: { phases: Phases }) => {
   return (
-    <>
-      <EuiTitle size="s">
-        <h2>{i18nTexts.editPolicy.titles.cold}</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <MinAge minAge={phase.min_age} />
-
-      <SearchableSnapshot searchableSnapshot={phase.actions.searchable_snapshot} />
-      <Replicas allocate={phase.actions.allocate} />
-      <Downsample downsample={phase.actions.downsample} />
-      <Readonly readonly={phase.actions.readonly} />
-      <DataAllocation
-        phase={'warm'}
-        allocate={phase.actions.allocate}
-        migrate={phase.actions.migrate}
-      />
-      <IndexPriority indexPriority={phase.actions.set_priority} />
-    </>
+    <PhaseDescription
+      phase={'cold'}
+      phases={phases}
+      components={[
+        MinAge,
+        SearchableSnapshot,
+        Replicas,
+        Downsample,
+        Readonly,
+        DataAllocation,
+        IndexPriority,
+      ]}
+    />
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx
new file mode 100644
index 0000000000000..a17a7b4a976bd
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ReactNode } from 'react';
+import {
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+export const ActionDescription = ({
+  title,
+  descriptionItems,
+}: {
+  title: string;
+  descriptionItems?: string[] | ReactNode[];
+}) => {
+  return (
+    <>
+      <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
+      {descriptionItems && (
+        <EuiDescriptionListDescription>
+          {descriptionItems.map((descriptionItem) => (
+            <EuiText color="subdued">
+              <EuiSpacer size="s" />
+              {descriptionItem}
+            </EuiText>
+          ))}
+        </EuiDescriptionListDescription>
+      )}
+      <EuiSpacer size="m" />
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/data_allocation.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/data_allocation.tsx
similarity index 57%
rename from x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/data_allocation.tsx
rename to x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/data_allocation.tsx
index 2c185af2280d3..1970b78eaac50 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/data_allocation.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/data_allocation.tsx
@@ -6,19 +6,20 @@
  */
 
 import React from 'react';
-import {
-  EuiBadge,
-  EuiCode,
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+
+import { EuiBadge, EuiCode } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { determineDataTierAllocationType } from '../../../lib';
-import { AllocateAction, MigrateAction, PhaseWithAllocation } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
+import {
+  AllocateAction,
+  PhaseWithAllocation,
+  SerializedColdPhase,
+  SerializedWarmPhase,
+} from '../../../../../../common/types';
+import { determineDataTierAllocationType } from '../../../../lib';
+import type { ActionComponentProps } from './types';
+import { ActionDescription } from './action_description';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
 
 const getAllocationDescription = (
   type: ReturnType<typeof determineDataTierAllocationType>,
@@ -26,14 +27,9 @@ const getAllocationDescription = (
   allocate?: AllocateAction
 ) => {
   if (type === 'none') {
-    return (
-      <EuiText color="subdued">
-        <EuiSpacer size="s" />
-        {i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.dataAllocationDisabledLabel', {
-          defaultMessage: 'Disabled',
-        })}
-      </EuiText>
-    );
+    return i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.dataAllocationDisabledLabel', {
+      defaultMessage: 'Disabled',
+    });
   }
   if (type === 'node_roles') {
     const label =
@@ -45,8 +41,7 @@ const getAllocationDescription = (
             defaultMessage: 'Using cold nodes',
           });
     return (
-      <EuiText color="subdued">
-        <EuiSpacer size="s" />
+      <>
         {label}{' '}
         <EuiBadge color="success">
           <FormattedMessage
@@ -54,37 +49,37 @@ const getAllocationDescription = (
             defaultMessage="Recommended"
           />
         </EuiBadge>
-      </EuiText>
+      </>
     );
   }
   if (type === 'node_attrs') {
     return (
-      <EuiText color="subdued">
-        <EuiSpacer size="s" />
+      <>
         {i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.dataAllocationAttributtesLabel', {
           defaultMessage: 'Node attributes',
         })}
         {': '}
         <EuiCode>{JSON.stringify(allocate?.require)}</EuiCode>
-      </EuiText>
+      </>
     );
   }
 };
-export const DataAllocation = ({
-  allocate,
-  migrate,
-  phase,
-}: {
-  allocate?: AllocateAction;
-  migrate?: MigrateAction;
-  phase: PhaseWithAllocation;
-}) => {
+
+export const DataAllocation = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const allocate = (phaseConfig as SerializedWarmPhase | SerializedColdPhase)?.actions.allocate;
+  const migrate = (phaseConfig as SerializedWarmPhase | SerializedColdPhase)?.actions.migrate;
   const allocationType = determineDataTierAllocationType({ allocate, migrate });
-  const allocationDescription = getAllocationDescription(allocationType, phase, allocate);
+  const allocationDescription = getAllocationDescription(
+    allocationType,
+    phase as PhaseWithAllocation,
+    allocate
+  );
+
   return (
-    <>
-      <EuiDescriptionListTitle>{i18nTexts.editPolicy.dataAllocationLabel}</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>{allocationDescription}</EuiDescriptionListDescription>
-    </>
+    <ActionDescription
+      title={i18nTexts.editPolicy.dataAllocationLabel}
+      descriptionItems={allocationDescription ? [allocationDescription] : []}
+    />
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx
new file mode 100644
index 0000000000000..68b1fc234532b
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { SerializedDeletePhase } from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const DeleteSearchableSnapshot = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const deleteSearchableSnapshot = (phaseConfig as SerializedDeletePhase)?.actions.delete
+    ?.delete_searchable_snapshot;
+  return deleteSearchableSnapshot ? (
+    <ActionDescription title={i18nTexts.editPolicy.deleteSearchableSnapshotLabel} />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/downsample.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/downsample.tsx
new file mode 100644
index 0000000000000..f3d4780b48906
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/downsample.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { PhaseWithDownsample } from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const Downsample = ({ phase, phases }: ActionComponentProps) => {
+  const downsample = phases[phase as PhaseWithDownsample]?.actions.downsample;
+  return downsample ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.downsampleLabel}
+      descriptionItems={[
+        <>
+          {`${i18nTexts.editPolicy.downsampleIntervalFieldLabel}: `}
+          <strong>{downsample.fixed_interval}</strong>
+        </>,
+      ]}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/forcemerge.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/forcemerge.tsx
new file mode 100644
index 0000000000000..9bb1fa1e3dd60
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/forcemerge.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { SerializedHotPhase, SerializedWarmPhase } from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+
+import { i18nTexts as i18nTextsFlyout } from './i18n_texts';
+import type { ActionComponentProps } from './types';
+import { ActionDescription } from './action_description';
+
+export const Forcemerge = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const forcemerge = (phaseConfig as SerializedHotPhase | SerializedWarmPhase)?.actions.forcemerge;
+  return forcemerge ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.forceMergeLabel}
+      descriptionItems={[
+        <>
+          {`${i18nTexts.editPolicy.maxNumSegmentsFieldLabel}: `}
+          <strong>{forcemerge.max_num_segments}</strong>
+        </>,
+        <>
+          {`${i18nTexts.editPolicy.bestCompressionFieldLabel}: `}
+          <strong>
+            {forcemerge.index_codec === 'best_compression'
+              ? i18nTextsFlyout.yes
+              : i18nTextsFlyout.no}
+          </strong>
+        </>,
+      ]}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/i18n_texts.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/i18n_texts.ts
similarity index 100%
rename from x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/i18n_texts.ts
rename to x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/i18n_texts.ts
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index.ts
new file mode 100644
index 0000000000000..5166b62f8e579
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { Rollover } from './rollover';
+export { MinAge } from './min_age';
+export { Forcemerge } from './forcemerge';
+export { Shrink } from './shrink';
+export { SearchableSnapshot } from './searchable_snapshot';
+export { Downsample } from './downsample';
+export { Readonly } from './readonly';
+export { IndexPriority } from './index_priority';
+export { Replicas } from './replicas';
+export { DataAllocation } from './data_allocation';
+export { WaitForSnapshot } from './wait_for_snapshot';
+export { DeleteSearchableSnapshot } from './delete_searchable_snapshot';
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index_priority.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index_priority.tsx
new file mode 100644
index 0000000000000..e470fc1c968d6
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/index_priority.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  SerializedHotPhase,
+  SerializedWarmPhase,
+  SerializedColdPhase,
+} from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const IndexPriority = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const indexPriority = (
+    phaseConfig as SerializedHotPhase | SerializedWarmPhase | SerializedColdPhase
+  )?.actions.set_priority;
+  return indexPriority ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.indexPriorityFieldLabel}
+      descriptionItems={[indexPriority.priority]}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/min_age.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/min_age.tsx
new file mode 100644
index 0000000000000..e6c568ecdebe6
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/min_age.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const MinAge = ({ phase, phases }: ActionComponentProps) => {
+  const minAge = phases[phase]?.min_age;
+  return minAge ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.minAgeLabel}
+      descriptionItems={[`${minAge} ${i18nTexts.editPolicy.minAgeUnitFieldSuffix}`]}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/readonly.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/readonly.tsx
new file mode 100644
index 0000000000000..3d7163be382a0
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/readonly.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  SerializedColdPhase,
+  SerializedHotPhase,
+  SerializedWarmPhase,
+} from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const Readonly = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const readonly = (phaseConfig as SerializedHotPhase | SerializedWarmPhase | SerializedColdPhase)
+    ?.actions.readonly;
+  return readonly ? <ActionDescription title={i18nTexts.editPolicy.readonlyLabel} /> : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/replicas.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/replicas.tsx
new file mode 100644
index 0000000000000..de2dee8f1aa89
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/replicas.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { PhaseWithAllocation } from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+
+import type { ActionComponentProps } from './types';
+import { ActionDescription } from './action_description';
+
+export const Replicas = ({ phase, phases }: ActionComponentProps) => {
+  const allocate = phases[phase as PhaseWithAllocation]?.actions.allocate;
+  return allocate?.number_of_replicas !== undefined ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.replicasLabel}
+      descriptionItems={[
+        <>
+          {`${i18nTexts.editPolicy.numberOfReplicasLabel}: `}
+          <strong>{allocate.number_of_replicas}</strong>
+        </>,
+      ]}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/rollover.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/rollover.tsx
new file mode 100644
index 0000000000000..d691a99728a6b
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/rollover.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { SerializedHotPhase } from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const Rollover = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const rollover = (phaseConfig as SerializedHotPhase)?.actions.rollover;
+  const descriptionItems = [];
+  if (rollover?.max_primary_shard_size) {
+    descriptionItems.push(
+      <>
+        {`${i18nTexts.editPolicy.maxPrimaryShardSizeLabel}: `}
+        <strong>{rollover.max_primary_shard_size}</strong>
+      </>
+    );
+  }
+  if (rollover?.max_primary_shard_docs) {
+    descriptionItems.push(
+      <>
+        {`${i18nTexts.editPolicy.maxPrimaryShardDocsLabel}: `}
+        <strong>{rollover.max_primary_shard_docs}</strong>
+      </>
+    );
+  }
+
+  if (rollover?.max_age) {
+    descriptionItems.push(
+      <>
+        {`${i18nTexts.editPolicy.maxAgeLabel}: `}
+        <strong>{rollover.max_age}</strong>
+      </>
+    );
+  }
+
+  if (rollover?.max_docs) {
+    descriptionItems.push(
+      <>
+        {`${i18nTexts.editPolicy.maxDocsLabel}: `}
+        <strong>{rollover.max_docs}</strong>
+      </>
+    );
+  }
+
+  if (rollover?.max_size) {
+    descriptionItems.push(
+      <>
+        {`${i18nTexts.editPolicy.maxSizeLabel}: `}
+        <strong>{rollover.max_size}</strong>{' '}
+        <EuiBadge color="warning">
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.policyFlyout.deprecatedLabel"
+            defaultMessage="Deprecated"
+          />
+        </EuiBadge>
+      </>
+    );
+  }
+
+  return rollover ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.rolloverLabel}
+      descriptionItems={descriptionItems}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/searchable_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/searchable_snapshot.tsx
new file mode 100644
index 0000000000000..4b30783f4c7fd
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/searchable_snapshot.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCode } from '@elastic/eui';
+import {
+  SerializedColdPhase,
+  SerializedFrozenPhase,
+  SerializedHotPhase,
+} from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const SearchableSnapshot = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const searchableSnapshot = (
+    phaseConfig as SerializedHotPhase | SerializedColdPhase | SerializedFrozenPhase
+  ).actions?.searchable_snapshot;
+  return searchableSnapshot ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.searchableSnapshotLabel}
+      descriptionItems={[
+        <>
+          {`${i18nTexts.editPolicy.searchableSnapshotsRepoFieldLabel}: `}
+          <EuiCode>{searchableSnapshot.snapshot_repository}</EuiCode>
+        </>,
+      ]}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx
new file mode 100644
index 0000000000000..3cb9f9ad5b82c
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { SerializedHotPhase, SerializedWarmPhase } from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import type { ActionComponentProps } from './types';
+import { ActionDescription } from './action_description';
+
+export const Shrink = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const shrink = (phaseConfig as SerializedHotPhase | SerializedWarmPhase)?.actions.shrink;
+  const descriptionItems = [];
+  if (shrink?.number_of_shards) {
+    descriptionItems.push(
+      <>
+        {`${i18nTexts.editPolicy.shrinkNumberOfShardsLabel}: `}
+        <strong>{shrink.number_of_shards}</strong>
+      </>
+    );
+  }
+  if (shrink?.max_primary_shard_size) {
+    descriptionItems.push(
+      <>
+        {`${i18nTexts.editPolicy.maxPrimaryShardSizeLabel}: `}
+        <strong>{shrink.max_primary_shard_size}</strong>
+      </>
+    );
+  }
+
+  return shrink ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.shrinkActionLabel}
+      descriptionItems={descriptionItems}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/types.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/types.ts
new file mode 100644
index 0000000000000..5407836972f55
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/types.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Phase, Phases } from '../../../../../../common/types';
+
+export interface ActionComponentProps {
+  phase: Phase;
+  phases: Phases;
+}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/wait_for_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/wait_for_snapshot.tsx
new file mode 100644
index 0000000000000..216a0f08ed932
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/wait_for_snapshot.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCode } from '@elastic/eui';
+import { SerializedDeletePhase } from '../../../../../../common/types';
+import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { ActionDescription } from './action_description';
+import type { ActionComponentProps } from './types';
+
+export const WaitForSnapshot = ({ phase, phases }: ActionComponentProps) => {
+  const phaseConfig = phases[phase];
+  const waitForSnapshot = (phaseConfig as SerializedDeletePhase).actions?.wait_for_snapshot;
+  return waitForSnapshot ? (
+    <ActionDescription
+      title={i18nTexts.editPolicy.waitForSnapshotLabel}
+      descriptionItems={[<EuiCode>{waitForSnapshot.policy}</EuiCode>]}
+    />
+  ) : null;
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx
index dfe935753ed25..cf4b05bc7504a 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/delete_phase.tsx
@@ -5,23 +5,24 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import { SerializedDeletePhase } from '../../../../../common/types';
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
 
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-import { MinAge } from './min_age';
-import { WaitForSnapshot } from './wait_for_snapshot';
+import React from 'react';
+import { PhaseDescription } from './phase_description';
+import { Phases } from '../../../../../common/types';
+import { MinAge, WaitForSnapshot, DeleteSearchableSnapshot } from './components';
 
-export const DeletePhase = ({ phase }: { phase: SerializedDeletePhase }) => {
+export const DeletePhase = ({ phases }: { phases: Phases }) => {
   return (
-    <>
-      <EuiTitle size="s">
-        <h2>{i18nTexts.editPolicy.titles.delete}</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <MinAge minAge={phase.min_age} />
-      <WaitForSnapshot waitForSnapshot={phase.actions.wait_for_snapshot} />
-    </>
+    <PhaseDescription
+      phase={'delete'}
+      phases={phases}
+      components={[MinAge, WaitForSnapshot, DeleteSearchableSnapshot]}
+    />
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx
deleted file mode 100644
index b1faf885d331e..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/downsample.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { DownsampleAction } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const Downsample = ({ downsample }: { downsample?: DownsampleAction }) => {
-  return downsample ? (
-    <>
-      <EuiDescriptionListTitle>{i18nTexts.editPolicy.downsampleLabel}</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          {i18nTexts.editPolicy.downsampleIntervalFieldLabel}
-          {': '}
-          <strong>{downsample.fixed_interval}</strong>
-        </EuiText>
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx
deleted file mode 100644
index 87bca08e49ae5..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/forcemerge.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { ForcemergeAction } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-import { i18nTexts as i18nTextsFlyout } from './i18n_texts';
-
-export const Forcemerge = ({ forcemerge }: { forcemerge?: ForcemergeAction }) => {
-  return forcemerge ? (
-    <>
-      <EuiDescriptionListTitle>
-        <FormattedMessage
-          id="xpack.indexLifecycleMgmt.policyFlyout.forcemergeLabel"
-          defaultMessage="Forcemerge"
-        />
-      </EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          {i18nTexts.editPolicy.maxNumSegmentsFieldLabel}
-          {': '}
-          <strong>{forcemerge.max_num_segments}</strong>
-        </EuiText>
-
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          {i18nTexts.editPolicy.bestCompressionFieldLabel}
-          {': '}
-          <strong>
-            {forcemerge.index_codec === 'best_compression'
-              ? i18nTextsFlyout.yes
-              : i18nTextsFlyout.no}
-          </strong>
-        </EuiText>
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx
index 288d36bc2e0e0..597d62274f912 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/frozen_phase.tsx
@@ -5,23 +5,20 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import { SearchableSnapshot } from './searchable_snapshot';
-import { SerializedFrozenPhase } from '../../../../../common/types';
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
 
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-import { MinAge } from './min_age';
+import React from 'react';
+import { PhaseDescription } from './phase_description';
+import { Phases } from '../../../../../common/types';
+import { MinAge, SearchableSnapshot } from './components';
 
-export const FrozenPhase = ({ phase }: { phase: SerializedFrozenPhase }) => {
+export const FrozenPhase = ({ phases }: { phases: Phases }) => {
   return (
-    <>
-      <EuiTitle size="s">
-        <h2>{i18nTexts.editPolicy.titles.frozen}</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <MinAge minAge={phase.min_age} />
-      <SearchableSnapshot searchableSnapshot={phase.actions.searchable_snapshot} />
-    </>
+    <PhaseDescription phase={'frozen'} phases={phases} components={[MinAge, SearchableSnapshot]} />
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx
index be00fc86209fd..57b5b595a65ab 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/hot_phase.tsx
@@ -6,31 +6,32 @@
  */
 
 import React from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import { SerializedHotPhase } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-import { Rollover } from './rollover';
-import { Forcemerge } from './forcemerge';
-import { Shrink } from './shrink';
-import { Downsample } from './downsample';
-import { IndexPriority } from './index_priority';
-import { Readonly } from './readonly';
-import { SearchableSnapshot } from './searchable_snapshot';
+import { PhaseDescription } from './phase_description';
+import { Phases } from '../../../../../common/types';
+import {
+  Rollover,
+  Forcemerge,
+  Shrink,
+  SearchableSnapshot,
+  Downsample,
+  Readonly,
+  IndexPriority,
+} from './components';
 
-export const HotPhase = ({ phase }: { phase: SerializedHotPhase }) => {
+export const HotPhase = ({ phases }: { phases: Phases }) => {
   return (
-    <>
-      <EuiTitle size="s">
-        <h2>{i18nTexts.editPolicy.titles.hot}</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <Rollover rollover={phase.actions.rollover} />
-      <Forcemerge forcemerge={phase.actions.forcemerge} />
-      <Shrink shrink={phase.actions.shrink} />
-      <SearchableSnapshot searchableSnapshot={phase.actions.searchable_snapshot} />
-      <Downsample downsample={phase.actions.downsample} />
-      <Readonly readonly={phase.actions.readonly} />
-      <IndexPriority indexPriority={phase.actions.set_priority} />
-    </>
+    <PhaseDescription
+      phase={'hot'}
+      phases={phases}
+      components={[
+        Rollover,
+        Forcemerge,
+        Shrink,
+        SearchableSnapshot,
+        Downsample,
+        Readonly,
+        IndexPriority,
+      ]}
+    />
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx
deleted file mode 100644
index b9bbb910cb6c5..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/index_priority.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { SetPriorityAction } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const IndexPriority = ({ indexPriority }: { indexPriority?: SetPriorityAction }) => {
-  return indexPriority ? (
-    <>
-      <EuiDescriptionListTitle>
-        {i18nTexts.editPolicy.indexPriorityFieldLabel}
-      </EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          {indexPriority.priority}
-        </EuiText>
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx
deleted file mode 100644
index 04e5cbb0a9770..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/min_age.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const MinAge = ({ minAge }: { minAge?: string }) => {
-  return minAge ? (
-    <>
-      <EuiDescriptionListTitle>{i18nTexts.editPolicy.minAgeLabel}</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          {`${minAge} ${i18nTexts.editPolicy.minAgeUnitFieldSuffix}`}
-        </EuiText>
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
new file mode 100644
index 0000000000000..2cda5254fefa6
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ComponentType } from 'react';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { ActionComponentProps } from './components/types';
+import { i18nTexts } from '../../edit_policy/i18n_texts';
+
+export const PhaseDescription = ({
+  phase,
+  phases,
+  components,
+}: ActionComponentProps & {
+  components: Array<ComponentType<ActionComponentProps>>;
+}) => {
+  const title = i18nTexts.editPolicy.titles[phase];
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>{title}</h2>
+      </EuiTitle>
+      <EuiSpacer size="l" />
+      {components.map((Component) => (
+        <Component phase={phase} phases={phases} />
+      ))}
+      <EuiSpacer size="l" />
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx
deleted file mode 100644
index 83b03b7057858..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/readonly.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiDescriptionListTitle } from '@elastic/eui';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const Readonly = ({ readonly }: { readonly?: {} }) => {
-  return readonly ? (
-    <EuiDescriptionListTitle>{i18nTexts.editPolicy.readonlyLabel}</EuiDescriptionListTitle>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx
deleted file mode 100644
index e95c7b1cd41fc..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/replicas.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { AllocateAction } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const Replicas = ({ allocate }: { allocate?: AllocateAction }) => {
-  return allocate?.number_of_replicas !== undefined ? (
-    <>
-      <EuiDescriptionListTitle>{i18nTexts.editPolicy.replicasLabel}</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          {i18nTexts.editPolicy.numberOfReplicasLabel}
-          {': '}
-          <strong>{allocate.number_of_replicas}</strong>
-        </EuiText>
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx
deleted file mode 100644
index 6d6948c59d4c6..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/rollover.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiBadge,
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { RolloverAction } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const Rollover = ({ rollover }: { rollover?: RolloverAction }) => {
-  return rollover ? (
-    <>
-      <EuiDescriptionListTitle>
-        <FormattedMessage
-          id="xpack.indexLifecycleMgmt.policyFlyout.rolloverTitle"
-          defaultMessage="Rollover"
-        />
-      </EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        {rollover.max_primary_shard_size && (
-          <EuiText color="subdued">
-            <EuiSpacer size="s" />
-            {i18nTexts.editPolicy.maxPrimaryShardSizeLabel}
-            {': '}
-            <strong>{rollover.max_primary_shard_size}</strong>
-          </EuiText>
-        )}
-        {rollover.max_primary_shard_docs && (
-          <EuiText color="subdued">
-            <EuiSpacer size="s" />
-            {i18nTexts.editPolicy.maxPrimaryShardDocsLabel}
-            {': '}
-            <strong>{rollover.max_primary_shard_docs}</strong>
-          </EuiText>
-        )}
-        {rollover.max_age && (
-          <EuiText color="subdued">
-            <EuiSpacer size="s" />
-            {i18nTexts.editPolicy.maxAgeLabel}
-            {': '}
-            <strong>{rollover.max_age}</strong>
-          </EuiText>
-        )}
-        {rollover.max_docs && (
-          <EuiText color="subdued">
-            <EuiSpacer size="s" />
-            {i18nTexts.editPolicy.maxDocsLabel}
-            {': '}
-            <strong>{rollover.max_docs}</strong>
-          </EuiText>
-        )}
-        {rollover.max_size && (
-          <EuiText color="subdued">
-            <EuiSpacer size="s" />
-            {i18nTexts.editPolicy.maxSizeLabel}
-            {': '}
-            <strong>{rollover.max_size}</strong>{' '}
-            <EuiBadge color="warning">
-              <FormattedMessage
-                id="xpack.indexLifecycleMgmt.policyFlyout.deprecatedLabel"
-                defaultMessage="Deprecated"
-              />
-            </EuiBadge>
-          </EuiText>
-        )}
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx
deleted file mode 100644
index a1285456383af..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/searchable_snapshot.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiCode,
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { SearchableSnapshotAction } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const SearchableSnapshot = ({
-  searchableSnapshot,
-}: {
-  searchableSnapshot?: SearchableSnapshotAction;
-}) => {
-  return searchableSnapshot ? (
-    <>
-      <EuiDescriptionListTitle>
-        {i18nTexts.editPolicy.searchableSnapshotLabel}
-      </EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          {i18nTexts.editPolicy.searchableSnapshotsRepoFieldLabel}
-          {': '}
-          <EuiCode>{searchableSnapshot.snapshot_repository}</EuiCode>
-        </EuiText>
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx
deleted file mode 100644
index 750b934d19bd2..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/shrink.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { ShrinkAction } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const Shrink = ({ shrink }: { shrink?: ShrinkAction }) => {
-  return shrink ? (
-    <>
-      <EuiDescriptionListTitle>{i18nTexts.editPolicy.shrinkActionLabel}</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        {shrink.number_of_shards && (
-          <EuiText color="subdued">
-            <EuiSpacer size="s" />
-            {i18nTexts.editPolicy.shrinkNumberOfShardsLabel}
-            {': '}
-            <strong>{shrink.number_of_shards}</strong>
-          </EuiText>
-        )}
-
-        {shrink.max_primary_shard_size && (
-          <EuiText color="subdued">
-            <EuiSpacer size="s" />
-            {i18nTexts.editPolicy.maxPrimaryShardSizeLabel}
-            {': '}
-            <strong>{shrink.max_primary_shard_size}</strong>
-          </EuiText>
-        )}
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
index 048c0ac2d8e88..bac097a3957a6 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
@@ -36,8 +36,8 @@ import { HotPhase } from './hot_phase';
 import { WarmPhase } from './warm_phase';
 import { Timeline } from './timeline';
 import { ColdPhase } from './cold_phase';
-import { FrozenPhase } from './frozen_phase';
 import { DeletePhase } from './delete_phase';
+import { FrozenPhase } from './frozen_phase';
 
 export const ViewPolicyFlyout = ({ policy }: { policy: PolicyFromES }) => {
   const isReadOnly = useIsReadOnly();
@@ -136,43 +136,21 @@ export const ViewPolicyFlyout = ({ policy }: { policy: PolicyFromES }) => {
         {/* Timeline */}
         <Timeline policy={policy} />
 
-        <EuiSpacer />
+        <EuiSpacer size="xxl" />
         {/* Hot phase */}
-        {policy.policy.phases.hot && <HotPhase phase={policy.policy.phases.hot} />}
+        {policy.policy.phases.hot && <HotPhase phases={policy.policy.phases} />}
 
         {/* Warm phase */}
-        {policy.policy.phases.warm && (
-          <>
-            <EuiSpacer size="m" />
-            <WarmPhase phase={policy.policy.phases.warm} />
-          </>
-        )}
+        {policy.policy.phases.warm && <WarmPhase phases={policy.policy.phases} />}
 
         {/* Cold phase */}
-        {policy.policy.phases.cold && (
-          <>
-            <>
-              <EuiSpacer size="m" />
-              <ColdPhase phase={policy.policy.phases.cold} />
-            </>
-          </>
-        )}
+        {policy.policy.phases.cold && <ColdPhase phases={policy.policy.phases} />}
 
         {/* Frozen phase */}
-        {policy.policy.phases.frozen && (
-          <>
-            <EuiSpacer size="m" />
-            <FrozenPhase phase={policy.policy.phases.frozen} />
-          </>
-        )}
+        {policy.policy.phases.frozen && <FrozenPhase phases={policy.policy.phases} />}
 
         {/* Delete phase */}
-        {policy.policy.phases.delete && (
-          <>
-            <EuiSpacer size="m" />
-            <DeletePhase phase={policy.policy.phases.delete} />
-          </>
-        )}
+        {policy.policy.phases.delete && <DeletePhase phases={policy.policy.phases} />}
       </EuiFlyoutBody>
 
       <EuiFlyoutFooter>
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx
deleted file mode 100644
index d89290bee45e9..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/wait_for_snapshot.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import {
-  EuiCode,
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { SerializedDeletePhase } from '../../../../../common/types';
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-
-export const WaitForSnapshot = ({
-  waitForSnapshot,
-}: {
-  waitForSnapshot?: SerializedDeletePhase['actions']['wait_for_snapshot'];
-}) => {
-  return waitForSnapshot ? (
-    <>
-      <EuiDescriptionListTitle>{i18nTexts.editPolicy.waitForSnapshotLabel}</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        <EuiText color="subdued">
-          <EuiSpacer size="s" />
-          <EuiCode>{waitForSnapshot.policy}</EuiCode>
-        </EuiText>
-      </EuiDescriptionListDescription>
-    </>
-  ) : null;
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx
index 3881bc1a639c1..70bc15e4da4f4 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/warm_phase.tsx
@@ -6,39 +6,34 @@
  */
 
 import React from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import { Readonly } from './readonly';
-import { SerializedWarmPhase } from '../../../../../common/types';
+import { PhaseDescription } from './phase_description';
+import { Phases } from '../../../../../common/types';
+import {
+  MinAge,
+  Replicas,
+  Forcemerge,
+  Shrink,
+  Downsample,
+  Readonly,
+  IndexPriority,
+  DataAllocation,
+} from './components';
 
-import { i18nTexts } from '../../edit_policy/i18n_texts';
-import { MinAge } from './min_age';
-import { Shrink } from './shrink';
-import { Downsample } from './downsample';
-import { IndexPriority } from './index_priority';
-import { Forcemerge } from './forcemerge';
-import { Replicas } from './replicas';
-import { DataAllocation } from './data_allocation';
-
-export const WarmPhase = ({ phase }: { phase: SerializedWarmPhase }) => {
+export const WarmPhase = ({ phases }: { phases: Phases }) => {
   return (
-    <>
-      <EuiTitle size="s">
-        <h2>{i18nTexts.editPolicy.titles.warm}</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <MinAge minAge={phase.min_age} />
-
-      <Replicas allocate={phase.actions.allocate} />
-      <Shrink shrink={phase.actions.shrink} />
-      <Forcemerge forcemerge={phase.actions.forcemerge} />
-      <Downsample downsample={phase.actions.downsample} />
-      <Readonly readonly={phase.actions.readonly} />
-      <DataAllocation
-        phase={'warm'}
-        allocate={phase.actions.allocate}
-        migrate={phase.actions.migrate}
-      />
-      <IndexPriority indexPriority={phase.actions.set_priority} />
-    </>
+    <PhaseDescription
+      phase={'warm'}
+      phases={phases}
+      components={[
+        MinAge,
+        Replicas,
+        Shrink,
+        Forcemerge,
+        Downsample,
+        Readonly,
+        DataAllocation,
+        IndexPriority,
+      ]}
+    />
   );
 };

From bde6e90e95b06cf12e2855cdaf597b950ec40189 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Fri, 6 Sep 2024 11:01:49 +0200
Subject: [PATCH 03/17] Fix i18n texts

---
 x-pack/plugins/translations/translations/fr-FR.json | 4 ----
 x-pack/plugins/translations/translations/ja-JP.json | 4 ----
 x-pack/plugins/translations/translations/zh-CN.json | 4 ----
 3 files changed, 12 deletions(-)

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index 760d745ebe0c8..f71cd3b3594c5 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -22768,12 +22768,10 @@
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotLicenseCalloutTitle": "Licence Enterprise requise",
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotRepoFieldLabel": "Référentiel de snapshot",
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotRepoRequiredError": "Nom de référentiel de snapshot obligatoire.",
-    "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotStorageFieldLabel": "Stockage de snapshots qu’il est possible de rechercher",
     "xpack.indexLifecycleMgmt.editPolicy.showPolicyJsonButton": "Afficher la requête",
     "xpack.indexLifecycleMgmt.editPolicy.shrink.configureShardCountLabel": "Configurer le nombre de partitions",
     "xpack.indexLifecycleMgmt.editPolicy.shrink.configureShardSizeLabel": "Configurer la taille des partitions",
     "xpack.indexLifecycleMgmt.editPolicy.shrinkIndexExplanationText": "Réduisez l'index en un nouvel index contenant moins de partitions principales.",
-    "xpack.indexLifecycleMgmt.editPolicy.shrinkText": "Réduire",
     "xpack.indexLifecycleMgmt.editPolicy.successfulSaveMessage": "{verb} la politique de cycle de vie \"{lifecycleName}\"",
     "xpack.indexLifecycleMgmt.editPolicy.timeUnits.daysLabel": "jours",
     "xpack.indexLifecycleMgmt.editPolicy.timeUnits.hoursLabel": "heures",
@@ -22884,10 +22882,8 @@
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.successMessage": "La politique {policyName} a été ajoutée au modèle d'index {templateName}",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.templateHasPolicyWarningTitle": "Le modèle a déjà une stratégie",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.title": "Ajouter la politique \"{name}\" au modèle d'index",
-    "xpack.indexLifecycleMgmt.policyTable.addPolicyToTemplateButtonText": "Ajouter la stratégie au modèle d'index",
     "xpack.indexLifecycleMgmt.policyTable.captionText": "Le tableau ci-dessous contient {count, plural, one {# politique de cycle de vie des index} other {# politiques de cycle de vie des index}}.",
     "xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonDisabledTooltip": "Vous ne pouvez pas supprimer une stratégie utilisée par un index",
-    "xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonText": "Supprimer la stratégie",
     "xpack.indexLifecycleMgmt.policyTable.emptyPrompt.createButtonLabel": "Créer une stratégie",
     "xpack.indexLifecycleMgmt.policyTable.emptyPromptDescription": " Une stratégie de cycle de vie des index permet de gérer vos index à mesure qu'ils vieillissent.",
     "xpack.indexLifecycleMgmt.policyTable.emptyPromptTitle": "Créez votre première stratégie de cycle de vie des index",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 366d85478acda..08702aab0fbde 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -22758,12 +22758,10 @@
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotLicenseCalloutTitle": "エンタープライズライセンスが必要です",
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotRepoFieldLabel": "スナップショットリポジトリ",
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotRepoRequiredError": "スナップショットリポジトリ名が必要です。",
-    "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotStorageFieldLabel": "検索可能スナップショットストレージ",
     "xpack.indexLifecycleMgmt.editPolicy.showPolicyJsonButton": "リクエストを表示",
     "xpack.indexLifecycleMgmt.editPolicy.shrink.configureShardCountLabel": "シャード数を構成",
     "xpack.indexLifecycleMgmt.editPolicy.shrink.configureShardSizeLabel": "シャードサイズを構成",
     "xpack.indexLifecycleMgmt.editPolicy.shrinkIndexExplanationText": "インデックス情報をプライマリシャードの少ない新規インデックスに縮小します。",
-    "xpack.indexLifecycleMgmt.editPolicy.shrinkText": "縮小",
     "xpack.indexLifecycleMgmt.editPolicy.successfulSaveMessage": "ライフサイクルポリシー「{lifecycleName}」を{verb}",
     "xpack.indexLifecycleMgmt.editPolicy.timeUnits.daysLabel": "日",
     "xpack.indexLifecycleMgmt.editPolicy.timeUnits.hoursLabel": "時間",
@@ -22874,10 +22872,8 @@
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.successMessage": "インデックステンプレート {templateName} にポリシー {policyName} を追加しました",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.templateHasPolicyWarningTitle": "テンプレートにすでにポリシーがあります",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.title": "インデックステンプレートにポリシー「{name}」 を追加",
-    "xpack.indexLifecycleMgmt.policyTable.addPolicyToTemplateButtonText": "インデックステンプレートにポリシーを追加",
     "xpack.indexLifecycleMgmt.policyTable.captionText": "次の表には{count, plural, other  {# 個のインデックスライフサイクルポリシー}}が含まれています。",
     "xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonDisabledTooltip": "インデックスが使用中のポリシーは削除できません",
-    "xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonText": "ポリシーを削除",
     "xpack.indexLifecycleMgmt.policyTable.emptyPrompt.createButtonLabel": "ポリシーを作成",
     "xpack.indexLifecycleMgmt.policyTable.emptyPromptDescription": " ライフサイクルポリシーは、インデックスが古くなるにつれ管理しやすくなります。",
     "xpack.indexLifecycleMgmt.policyTable.emptyPromptTitle": "初めのインデックスライフサイクルポリシーの作成",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 455314827fd7e..fc628064a92de 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -22786,12 +22786,10 @@
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotLicenseCalloutTitle": "需要企业许可证",
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotRepoFieldLabel": "快照存储库",
     "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotRepoRequiredError": "快照存储库名称必填。",
-    "xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotStorageFieldLabel": "可搜索快照存储",
     "xpack.indexLifecycleMgmt.editPolicy.showPolicyJsonButton": "显示请求",
     "xpack.indexLifecycleMgmt.editPolicy.shrink.configureShardCountLabel": "配置分片计数",
     "xpack.indexLifecycleMgmt.editPolicy.shrink.configureShardSizeLabel": "配置分片大小",
     "xpack.indexLifecycleMgmt.editPolicy.shrinkIndexExplanationText": "将索引缩小成具有较少主分片的新索引。",
-    "xpack.indexLifecycleMgmt.editPolicy.shrinkText": "缩小",
     "xpack.indexLifecycleMgmt.editPolicy.successfulSaveMessage": "{verb}生命周期策略“{lifecycleName}”",
     "xpack.indexLifecycleMgmt.editPolicy.timeUnits.daysLabel": "天",
     "xpack.indexLifecycleMgmt.editPolicy.timeUnits.hoursLabel": "小时",
@@ -22902,10 +22900,8 @@
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.successMessage": "已将策略“{policyName}”添加到索引模板“{templateName}”。",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.templateHasPolicyWarningTitle": "模板已有策略",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.title": "将策略 “{name}” 添加到索引模板",
-    "xpack.indexLifecycleMgmt.policyTable.addPolicyToTemplateButtonText": "将策略添加到索引模板",
     "xpack.indexLifecycleMgmt.policyTable.captionText": "下表包含 {count, plural, other {# 个索引生命周期策略}}。",
     "xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonDisabledTooltip": "您无法删除索引正在使用的策略",
-    "xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonText": "删除策略",
     "xpack.indexLifecycleMgmt.policyTable.emptyPrompt.createButtonLabel": "创建策略",
     "xpack.indexLifecycleMgmt.policyTable.emptyPromptDescription": " 索引生命周期策略帮助您管理变旧的索引。",
     "xpack.indexLifecycleMgmt.policyTable.emptyPromptTitle": "创建您的首个索引生命周期索引",

From 6909966fd6d10c7d9625a1af4ecec7696761df7c Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 6 Sep 2024 09:58:47 +0000
Subject: [PATCH 04/17] [CI] Auto-commit changed files from 'node
 scripts/eslint --no-cache --fix'

---
 .../accessibility/apps/group1/index_lifecycle_management.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts b/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
index ed2cc41ed06c1..46e287eb09038 100644
--- a/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
+++ b/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
@@ -63,7 +63,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     throw new Error(`Could not find ${policyName} in policy table`);
   };
 
-  describe('Index Lifecycle Management Accessibility', async () => {
+  describe('Index Lifecycle Management Accessibility', () => {
     before(async () => {
       await esClient.snapshot.createRepository({
         name: REPO_NAME,

From 8517c5501dc0e19ae51758bea3de719c9dba6dbd Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Fri, 6 Sep 2024 17:45:15 +0200
Subject: [PATCH 05/17] Fixes

---
 .../min_age_field/min_age_field.tsx           |  2 +-
 .../sections/edit_policy/edit_policy.tsx      | 16 +++++++---
 .../sections/edit_policy/i18n_texts.ts        |  2 +-
 .../policy_flyout/components/shrink.tsx       |  8 +++++
 .../policy_flyout/phase_description.tsx       | 16 +++++++---
 .../policy_flyout/phase_indicator.tsx         | 32 +++++++++++++++++++
 6 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx
index 9d0572ffb0589..8fe75aadd49d9 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx
@@ -80,7 +80,7 @@ export const MinAgeField: FunctionComponent<Props> = ({ phase }): React.ReactEle
             >
               <EuiFlexItem grow={false}>
                 <EuiText className={'eui-textNoWrap'} size={'xs'}>
-                  {i18nTexts.editPolicy.minAgeLabel}
+                  {`${i18nTexts.editPolicy.minAgeLabel}:`}
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={true}>
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
index 83faaa3bf28f7..f254c7d525759 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
@@ -34,6 +34,7 @@ import {
   useFormIsModified,
 } from '../../../shared_imports';
 import { toasts } from '../../services/notification';
+import { getPoliciesListPath, getPolicyViewPath } from '../../services/navigation';
 import { UseField } from './form';
 import { savePolicy } from './save_policy';
 import {
@@ -127,8 +128,9 @@ export const EditPolicy: React.FunctionComponent = () => {
     [originalPolicyName, existingPolicies, isClonedPolicy]
   );
 
-  const backToPolicyList = () => {
-    history.push('/policies');
+  const backToPolicyList = (name?: string) => {
+    const url = name ? getPolicyViewPath(name) : getPoliciesListPath();
+    history.push(url);
   };
 
   const submit = async () => {
@@ -141,17 +143,18 @@ export const EditPolicy: React.FunctionComponent = () => {
         })
       );
     } else {
+      const name = getPolicyName();
       setHasSubmittedForm(true);
       const success = await savePolicy(
         {
           ...policy,
-          name: getPolicyName(),
+          name,
         },
         isNewPolicy || isClonedPolicy
       );
 
       if (success) {
-        backToPolicyList();
+        backToPolicyList(name);
       }
     }
   };
@@ -305,7 +308,10 @@ export const EditPolicy: React.FunctionComponent = () => {
               </EuiFlexItem>
 
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty data-test-subj="cancelTestPolicy" onClick={backToPolicyList}>
+                <EuiButtonEmpty
+                  data-test-subj="cancelTestPolicy"
+                  onClick={() => backToPolicyList()}
+                >
                   <FormattedMessage
                     id="xpack.indexLifecycleMgmt.editPolicy.cancelButton"
                     defaultMessage="Cancel"
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
index cd1c19dc5d500..4304168d1bb0e 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts
@@ -163,7 +163,7 @@ export const i18nTexts = {
     }),
     minAgeLabel: i18n.translate(
       'xpack.indexLifecycleMgmt.editPolicy.minimumAge.minimumAgeFieldLabel',
-      { defaultMessage: 'Move data into phase when:' }
+      { defaultMessage: 'Move data into phase when' }
     ),
     rolloverLabel: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.rolloverFieldTitle', {
       defaultMessage: 'Rollover',
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx
index 3cb9f9ad5b82c..2155a380ee1cd 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/shrink.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 import { SerializedHotPhase, SerializedWarmPhase } from '../../../../../../common/types';
 import { i18nTexts } from '../../../edit_policy/i18n_texts';
+import { i18nTexts as i18nTextsFlyout } from './i18n_texts';
 import type { ActionComponentProps } from './types';
 import { ActionDescription } from './action_description';
 
@@ -32,6 +33,13 @@ export const Shrink = ({ phase, phases }: ActionComponentProps) => {
     );
   }
 
+  descriptionItems.push(
+    <>
+      {`${i18nTexts.editPolicy.allowWriteAfterShrinkLabel}: `}
+      <strong>{shrink?.allow_write_after_shrink ? i18nTextsFlyout.yes : i18nTextsFlyout.no}</strong>
+    </>
+  );
+
   return shrink ? (
     <ActionDescription
       title={i18nTexts.editPolicy.shrinkActionLabel}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
index 2cda5254fefa6..eab9ee017b30c 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
@@ -6,7 +6,8 @@
  */
 
 import React, { ComponentType } from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { PhaseIndicator } from './phase_indicator';
 import { ActionComponentProps } from './components/types';
 import { i18nTexts } from '../../edit_policy/i18n_texts';
 
@@ -20,9 +21,16 @@ export const PhaseDescription = ({
   const title = i18nTexts.editPolicy.titles[phase];
   return (
     <>
-      <EuiTitle size="s">
-        <h2>{title}</h2>
-      </EuiTitle>
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <PhaseIndicator phase={phase} />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h2>{title}</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       <EuiSpacer size="l" />
       {components.map((Component) => (
         <Component phase={phase} phases={phases} />
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx
new file mode 100644
index 0000000000000..6c5fd35dcdcfd
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import type { Phase } from '../../../../../common/types';
+
+const phaseToIndicatorColors = {
+  hot: euiThemeVars.euiColorVis9,
+  warm: euiThemeVars.euiColorVis5,
+  cold: euiThemeVars.euiColorVis1,
+  frozen: euiThemeVars.euiColorVis4,
+  delete: euiThemeVars.euiColorLightShade,
+};
+export const PhaseIndicator = ({ phase }: { phase: Phase }) => {
+  return (
+    <div
+      css={css`
+        width: 16px;
+        height: 8px;
+        display: inline-block;
+        border-radius: 4px;
+        background-color: ${phaseToIndicatorColors[phase]};
+      `}
+    />
+  );
+};

From 3561b166e03e9053e7e529c76e36382eba996ab4 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Tue, 10 Sep 2024 15:52:46 +0200
Subject: [PATCH 06/17] Add tests

---
 .../components/action_description.tsx           |  4 ++--
 .../policy_flyout/phase_description.tsx         |  4 ++--
 .../policy_flyout/view_policy_flyout.tsx        |  7 ++++++-
 .../index_lifecycle_management/home_page.ts     |  6 ++++++
 .../apps/index_lifecycle_management/index.ts    |  1 +
 x-pack/test/functional/config.base.js           | 14 ++++++++++++++
 .../index_lifecycle_management_page.ts          | 17 +++++++++++++++++
 7 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx
index a17a7b4a976bd..5a4f6905fe796 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/action_description.tsx
@@ -25,8 +25,8 @@ export const ActionDescription = ({
       <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
       {descriptionItems && (
         <EuiDescriptionListDescription>
-          {descriptionItems.map((descriptionItem) => (
-            <EuiText color="subdued">
+          {descriptionItems.map((descriptionItem, index) => (
+            <EuiText color="subdued" key={index}>
               <EuiSpacer size="s" />
               {descriptionItem}
             </EuiText>
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
index eab9ee017b30c..0b26fb341a4f8 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
@@ -32,8 +32,8 @@ export const PhaseDescription = ({
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="l" />
-      {components.map((Component) => (
-        <Component phase={phase} phases={phases} />
+      {components.map((Component, index) => (
+        <Component phase={phase} phases={phases} key={index} />
       ))}
       <EuiSpacer size="l" />
     </>
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
index bac097a3957a6..8f16537a8a234 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
@@ -109,7 +109,12 @@ export const ViewPolicyFlyout = ({ policy }: { policy: PolicyFromES }) => {
   );
 
   return (
-    <EuiFlyout onClose={onClose}>
+    <EuiFlyout
+      onClose={onClose}
+      closeButtonProps={{
+        'data-test-subj': 'policyFlyoutCloseButton',
+      }}
+    >
       <EuiFlyoutHeader hasBorder>
         <EuiFlexGroup alignItems="center" gutterSize="s">
           <EuiFlexItem grow={false}>
diff --git a/x-pack/test/functional/apps/index_lifecycle_management/home_page.ts b/x-pack/test/functional/apps/index_lifecycle_management/home_page.ts
index 8d32181210fcd..c7dd3acaaf7eb 100644
--- a/x-pack/test/functional/apps/index_lifecycle_management/home_page.ts
+++ b/x-pack/test/functional/apps/index_lifecycle_management/home_page.ts
@@ -68,6 +68,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         snapshotRepository: repoName,
       });
 
+      await retry.waitFor('policy flyout', async () => {
+        return (await pageObjects.indexLifecycleManagement.flyoutHeaderText()) === policyName;
+      });
+
+      await pageObjects.indexLifecycleManagement.closePolicyFlyout();
+
       await retry.waitFor('navigation back to home page.', async () => {
         return (
           (await pageObjects.indexLifecycleManagement.pageHeaderText()) ===
diff --git a/x-pack/test/functional/apps/index_lifecycle_management/index.ts b/x-pack/test/functional/apps/index_lifecycle_management/index.ts
index 38b5803bd77ef..193d4a026829f 100644
--- a/x-pack/test/functional/apps/index_lifecycle_management/index.ts
+++ b/x-pack/test/functional/apps/index_lifecycle_management/index.ts
@@ -11,5 +11,6 @@ export default ({ loadTestFile }: FtrProviderContext) => {
   describe('Index Lifecycle Management app', function () {
     loadTestFile(require.resolve('./feature_controls'));
     loadTestFile(require.resolve('./home_page'));
+    loadTestFile(require.resolve('./read_only_view'));
   });
 };
diff --git a/x-pack/test/functional/config.base.js b/x-pack/test/functional/config.base.js
index 4fdb988fef098..303cd7355386f 100644
--- a/x-pack/test/functional/config.base.js
+++ b/x-pack/test/functional/config.base.js
@@ -571,6 +571,20 @@ export default async function ({ readConfigFile }) {
           ],
         },
 
+        read_ilm: {
+          elasticsearch: {
+            cluster: ['read_ilm'],
+          },
+          kibana: [
+            {
+              feature: {
+                advancedSettings: ['read'],
+              },
+              spaces: ['default'],
+            },
+          ],
+        },
+
         index_management_user: {
           elasticsearch: {
             cluster: ['monitor', 'manage_index_templates', 'manage_enrich'],
diff --git a/x-pack/test/functional/page_objects/index_lifecycle_management_page.ts b/x-pack/test/functional/page_objects/index_lifecycle_management_page.ts
index a0061dff067d1..f9c743e8855cf 100644
--- a/x-pack/test/functional/page_objects/index_lifecycle_management_page.ts
+++ b/x-pack/test/functional/page_objects/index_lifecycle_management_page.ts
@@ -30,6 +30,9 @@ export function IndexLifecycleManagementPageProvider({ getService }: FtrProvider
     async clickCreatePolicyButton() {
       return await testSubjects.click('createPolicyButton');
     },
+    async createPolicyButtonExists() {
+      return await testSubjects.exists('createPolicyButton');
+    },
     async fillNewPolicyForm(policy: Policy) {
       const {
         policyName,
@@ -88,5 +91,19 @@ export function IndexLifecycleManagementPageProvider({ getService }: FtrProvider
     async getPolicyRow(name: string) {
       return await testSubjects.findAll(`policyTableRow-${name}`);
     },
+
+    async flyoutHeaderText() {
+      return await testSubjects.getVisibleText('policyFlyoutTitle');
+    },
+    async closePolicyFlyout() {
+      await testSubjects.click('policyFlyoutCloseButton');
+    },
+    async flyoutHeader() {
+      return await testSubjects.find('policyFlyoutTitle');
+    },
+    async clickPolicyNameLink(index: number) {
+      const links = await testSubjects.findAll('policyTablePolicyNameLink');
+      await links[index].click();
+    },
   };
 }

From 648a6c298e190df856ef55bff402f9b251c97f5b Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Fri, 13 Sep 2024 17:14:47 +0200
Subject: [PATCH 07/17] Add tests

---
 .../__snapshots__/policy_flyout.test.tsx.snap | 982 ++++++++++++++++++
 .../__jest__/mocks.ts                         |  97 ++
 .../__jest__/policy_flyout.test.tsx           |  55 +
 .../__jest__/policy_table.test.tsx            |  35 +-
 .../policy_flyout/view_policy_flyout.tsx      |   1 +
 .../read_only_view.ts                         |  48 +
 6 files changed, 1215 insertions(+), 3 deletions(-)
 create mode 100644 x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
 create mode 100644 x-pack/plugins/index_lifecycle_management/__jest__/mocks.ts
 create mode 100644 x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx
 create mode 100644 x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
new file mode 100644
index 0000000000000..8b44e278a12ef
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
@@ -0,0 +1,982 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View policy flyout shows all phases 1`] = `
+<div
+  data-eui="EuiFlyout"
+  role="dialog"
+>
+  <button
+    aria-label="Close this dialog"
+    data-test-subj="euiFlyoutCloseButton"
+    type="button"
+  />
+  <div
+    class="euiFlyoutHeader emotion-euiFlyoutHeader-hasBorder"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <h1
+          class="euiTitle emotion-euiTitle-m"
+          data-test-subj="policyFlyoutTitle"
+        >
+          test
+        </h1>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFlyoutBody emotion-euiFlyoutBody"
+  >
+    <div
+      class="euiFlyoutBody__overflow emotion-euiFlyoutBody__overflow-noBanner"
+      tabindex="0"
+    >
+      <div
+        class="euiFlyoutBody__overflowContent"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-column"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="ilmTimeline"
+              style="--ilm-timeline-hot-phase-width: 16.680244399185337%; --ilm-timeline-warm-phase-width: 16.902014030323603%; --ilm-timeline-cold-phase-width: 18.929622086444898%; --ilm-timeline-frozen-phase-width: 47.488119484046166%;"
+            >
+              <div
+                class="euiFlexGroup emotion-euiFlexGroup-none-flexStart-flexStart-row"
+              >
+                <div
+                  class="euiFlexItem emotion-euiFlexItem-grow-1"
+                >
+                  <div
+                    class="ilmTimeline__phasesContainer"
+                  >
+                    <div
+                      class="ilmTimeline__phasesContainer__phase ilmTimeline__hotPhase"
+                      data-test-subj="ilmTimelinePhase-hot"
+                    >
+                      <div
+                        class="ilmTimeline__colorBar ilmTimeline__hotPhase__colorBar"
+                      />
+                      <div
+                        class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
+                      >
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        >
+                          <div
+                            class="euiText emotion-euiText-s"
+                          >
+                            <strong>
+                              Hot phase
+                            </strong>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="ilmTimeline__phasesContainer__phase ilmTimeline__warmPhase"
+                      data-test-subj="ilmTimelinePhase-warm"
+                    >
+                      <div
+                        class="ilmTimeline__colorBar ilmTimeline__warmPhase__colorBar"
+                      />
+                      <div
+                        class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
+                      >
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        >
+                          <div
+                            class="euiText emotion-euiText-s"
+                          >
+                            <strong>
+                              Warm phase
+                            </strong>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="ilmTimeline__phasesContainer__phase ilmTimeline__coldPhase"
+                      data-test-subj="ilmTimelinePhase-cold"
+                    >
+                      <div
+                        class="ilmTimeline__colorBar ilmTimeline__coldPhase__colorBar"
+                      />
+                      <div
+                        class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
+                      >
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        >
+                          <div
+                            class="euiText emotion-euiText-s"
+                          >
+                            <strong>
+                              Cold phase
+                            </strong>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="ilmTimeline__phasesContainer__phase ilmTimeline__frozenPhase"
+                      data-test-subj="ilmTimelinePhase-frozen"
+                    >
+                      <div
+                        class="ilmTimeline__colorBar ilmTimeline__frozenPhase__colorBar"
+                      />
+                      <div
+                        class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
+                      >
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        >
+                          <div
+                            class="euiText emotion-euiText-s"
+                          >
+                            <strong>
+                              Frozen phase
+                            </strong>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem emotion-euiFlexItem-growZero"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
+                >
+                  <div
+                    class="ilmTimeline__deleteIconContainer"
+                    data-test-subj="ilmTimelinePhase-delete"
+                  >
+                    <span
+                      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+                    >
+                      <span
+                        data-euiicon-type="trash"
+                        tabindex="0"
+                      >
+                        Info
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--xxl emotion-euiSpacer-xxl"
+        />
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+            />
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <h2
+              class="euiTitle emotion-euiTitle-s"
+            >
+              Hot phase
+            </h2>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Rollover
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Maximum primary shard size: 
+            <strong>
+              50gb
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Maximum docs in the primary shard: 
+            <strong>
+              25
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Maximum age: 
+            <strong>
+              30d
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Maximum documents: 
+            <strong>
+              235
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Maximum index size: 
+            <strong>
+              2gb
+            </strong>
+             
+            <span
+              class="euiBadge emotion-euiBadge-warning"
+              title="Deprecated"
+            >
+              <span
+                class="euiBadge__content emotion-euiBadge__content"
+              >
+                <span
+                  class="euiBadge__text emotion-euiBadge__text"
+                >
+                  Deprecated
+                </span>
+              </span>
+            </span>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Force merge
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Number of segments: 
+            <strong>
+              3
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Compress stored fields: 
+            <strong>
+              Yes
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Shrink
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Number of primary shards: 
+            <strong>
+              1
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Allow writes after shrink: 
+            <strong>
+              No
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Read only
+        </dt>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Index priority
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            100
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+            />
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <h2
+              class="euiTitle emotion-euiTitle-s"
+            >
+              Warm phase
+            </h2>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Move data into phase when
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            3d old
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Replicas
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Number of replicas: 
+            <strong>
+              3
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Shrink
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Maximum primary shard size: 
+            <strong>
+              4gb
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Allow writes after shrink: 
+            <strong>
+              No
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Force merge
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Number of segments: 
+            <strong>
+              44
+            </strong>
+          </div>
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Compress stored fields: 
+            <strong>
+              Yes
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Downsample
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Downsampling interval: 
+            <strong>
+              1d
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Data allocation
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Using warm nodes 
+            <span
+              class="euiBadge emotion-euiBadge-success"
+              title="Recommended"
+            >
+              <span
+                class="euiBadge__content emotion-euiBadge__content"
+              >
+                <span
+                  class="euiBadge__text emotion-euiBadge__text"
+                >
+                  Recommended
+                </span>
+              </span>
+            </span>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Index priority
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            50
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+            />
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <h2
+              class="euiTitle emotion-euiTitle-s"
+            >
+              Cold phase
+            </h2>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Move data into phase when
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            55d old
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Searchable snapshot
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Snapshot repository: 
+            <code>
+              found-snapshots
+            </code>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Replicas
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Number of replicas: 
+            <strong>
+              3
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Downsample
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Downsampling interval: 
+            <strong>
+              4d
+            </strong>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Data allocation
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Using cold nodes 
+            <span
+              class="euiBadge emotion-euiBadge-success"
+              title="Recommended"
+            >
+              <span
+                class="euiBadge__content emotion-euiBadge__content"
+              >
+                <span
+                  class="euiBadge__text emotion-euiBadge__text"
+                >
+                  Recommended
+                </span>
+              </span>
+            </span>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Index priority
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            0
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+            />
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <h2
+              class="euiTitle emotion-euiTitle-s"
+            >
+              Frozen phase
+            </h2>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Move data into phase when
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            555d old
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Searchable snapshot
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            Snapshot repository: 
+            <code>
+              found-snapshots
+            </code>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+            />
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <h2
+              class="euiTitle emotion-euiTitle-s"
+            >
+              Delete phase
+            </h2>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Move data into phase when
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            7365d old
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <dt
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        >
+          Wait for snapshot policy
+        </dt>
+        <dd
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        >
+          <div
+            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+            />
+            <code>
+              cloud-snapshot-policy
+            </code>
+          </div>
+        </dd>
+        <div
+          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+        />
+        <div
+          class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFlyoutFooter emotion-euiFlyoutFooter"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <button
+          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary-flush-left"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+          >
+            <span
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+            <span
+              class="eui-textTruncate euiButtonEmpty__text"
+            >
+              Close
+            </span>
+          </span>
+        </button>
+      </div>
+      <div
+        class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexEnd-center-row"
+      >
+        <div
+          class="euiFlexItem emotion-euiFlexItem-growZero"
+        >
+          <div
+            class="euiPopover emotion-euiPopover-inline-block"
+          >
+            <button
+              aria-label="Manage policy"
+              class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
+              data-test-subj="managePolicyButton"
+              type="button"
+            >
+              <span
+                class="emotion-euiButtonDisplayContent"
+              >
+                <span
+                  class="eui-textTruncate"
+                >
+                  Manage
+                </span>
+                <span
+                  color="inherit"
+                  data-euiicon-type="arrowUp"
+                />
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/mocks.ts b/x-pack/plugins/index_lifecycle_management/__jest__/mocks.ts
new file mode 100644
index 0000000000000..69363fdd660cf
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/mocks.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { PolicyFromES } from '../common/types';
+
+export const policyAllPhases: PolicyFromES = {
+  name: 'test',
+  modifiedDate: '2024-08-12T12:17:06.271Z',
+  version: 1,
+  policy: {
+    name: 'test',
+    phases: {
+      hot: {
+        actions: {
+          rollover: {
+            max_age: '30d',
+            max_primary_shard_size: '50gb',
+            max_primary_shard_docs: 25,
+            max_docs: 235,
+            max_size: '2gb',
+          },
+          set_priority: {
+            priority: 100,
+          },
+          forcemerge: {
+            max_num_segments: 3,
+            index_codec: 'best_compression',
+          },
+          shrink: {
+            number_of_shards: 1,
+          },
+          readonly: {},
+        },
+        min_age: '0ms',
+      },
+      warm: {
+        min_age: '3d',
+        actions: {
+          set_priority: {
+            priority: 50,
+          },
+          shrink: {
+            max_primary_shard_size: '4gb',
+          },
+          forcemerge: {
+            max_num_segments: 44,
+            index_codec: 'best_compression',
+          },
+          allocate: {
+            number_of_replicas: 3,
+          },
+          downsample: {
+            fixed_interval: '1d',
+          },
+        },
+      },
+      cold: {
+        min_age: '55d',
+        actions: {
+          searchable_snapshot: {
+            snapshot_repository: 'found-snapshots',
+          },
+          set_priority: {
+            priority: 0,
+          },
+          allocate: {
+            number_of_replicas: 3,
+          },
+          downsample: {
+            fixed_interval: '4d',
+          },
+        },
+      },
+      frozen: {
+        min_age: '555d',
+        actions: {
+          searchable_snapshot: {
+            snapshot_repository: 'found-snapshots',
+          },
+        },
+      },
+      delete: {
+        min_age: '7365d',
+        actions: {
+          wait_for_snapshot: {
+            policy: 'cloud-snapshot-policy',
+          },
+          delete: {},
+        },
+      },
+    },
+  },
+};
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx
new file mode 100644
index 0000000000000..9c4079821d15f
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { PolicyFromES } from '../common/types';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
+import { PolicyListContextProvider } from '../public/application/sections/policy_list/policy_list_context';
+import React, { ReactElement } from 'react';
+import { ViewPolicyFlyout } from '../public/application/sections/policy_list/policy_flyout';
+import * as readOnlyHook from '../public/application/lib/use_is_read_only';
+import { policyAllPhases } from './mocks';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test';
+
+let component: ReactElement;
+const TestComponent = ({ policy }: { policy: PolicyFromES }) => {
+  return (
+    <KibanaContextProvider
+      services={{ getUrlForApp: () => '', docLinks: docLinksServiceMock.createStartContract() }}
+    >
+      <PolicyListContextProvider>
+        <ViewPolicyFlyout policy={policy} />
+      </PolicyListContextProvider>
+    </KibanaContextProvider>
+  );
+};
+
+describe('View policy flyout', () => {
+  beforeAll(() => {
+    jest.spyOn(readOnlyHook, 'useIsReadOnly').mockReturnValue(false);
+    component = <TestComponent policy={policyAllPhases} />;
+  });
+  it('shows all phases', () => {
+    const rendered = mountWithIntl(component);
+    expect(takeMountedSnapshot(rendered)).toMatchSnapshot();
+  });
+
+  it('renders manage button', () => {
+    const rendered = mountWithIntl(component);
+    const button = findTestSubject(rendered, 'managePolicyButton');
+    expect(button.exists()).toBeTruthy();
+  });
+
+  it(`doesn't render manage button in read only view`, () => {
+    jest.spyOn(readOnlyHook, 'useIsReadOnly').mockReturnValue(true);
+    component = <TestComponent policy={policyAllPhases} />;
+    const rendered = mountWithIntl(component);
+    const button = findTestSubject(rendered, 'managePolicyButton');
+    expect(button.exists()).toBeFalsy();
+  });
+});
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx
index 8cfbec9ffd6c6..fe3b225499c33 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx
@@ -21,7 +21,7 @@ import { init as initHttp } from '../public/application/services/http';
 import { init as initUiMetric } from '../public/application/services/ui_metric';
 import { KibanaContextProvider } from '../public/shared_imports';
 import { PolicyListContextProvider } from '../public/application/sections/policy_list/policy_list_context';
-import * as hooks from '../public/application/lib/use_is_read_only';
+import * as readOnlyHook from '../public/application/lib/use_is_read_only';
 
 initHttp(httpServiceMock.createSetupContract());
 initUiMetric(usageCollectionPluginMock.createSetupContract());
@@ -78,7 +78,11 @@ jest.mock('react-router-dom', () => ({
     },
   }),
 }));
-
+const mockReactRouterNavigate = jest.fn();
+jest.mock('@kbn/kibana-react-plugin/public', () => ({
+  ...jest.requireActual('@kbn/kibana-react-plugin/public'),
+  reactRouterNavigate: () => mockReactRouterNavigate(),
+}));
 let component: ReactElement;
 
 const snapshot = (rendered: string[]) => {
@@ -132,8 +136,8 @@ const TestComponent = ({ testPolicies }: { testPolicies: PolicyFromES[] }) => {
   );
 };
 describe('policy table', () => {
-  jest.spyOn(hooks, 'useIsReadOnly').mockReturnValue(false);
   beforeEach(() => {
+    jest.spyOn(readOnlyHook, 'useIsReadOnly').mockReturnValue(false);
     component = <TestComponent testPolicies={policies} />;
     window.localStorage.removeItem('ILM_SHOW_MANAGED_POLICIES_BY_DEFAULT');
   });
@@ -319,6 +323,10 @@ describe('policy table', () => {
     expect(policyIndices).toBe(`${testPolicy.indices.length}`);
     const policyModifiedDate = findTestSubject(firstRow, 'policy-modifiedDate').text();
     expect(policyModifiedDate).toBe(`${testDateFormatted}`);
+
+    const cells = firstRow.find('td');
+    // columns are name, linked index templates, linked indices, modified date, actions
+    expect(cells.length).toBe(5);
   });
   test('opens a flyout with index templates', () => {
     const rendered = mountWithIntl(component);
@@ -330,4 +338,25 @@ describe('policy table', () => {
     const indexTemplatesLinks = findTestSubject(rendered, 'indexTemplateLink');
     expect(indexTemplatesLinks.length).toBe(testPolicy.indexTemplates.length);
   });
+  test('opens a flyout to view policy by calling reactRouterNavigate', async () => {
+    const rendered = mountWithIntl(component);
+    const policyNameLink = findTestSubject(rendered, 'policyTablePolicyNameLink').at(0);
+    policyNameLink.simulate('click');
+    rendered.update();
+    expect(mockReactRouterNavigate).toHaveBeenCalled();
+  });
+
+  describe('read only view', () => {
+    beforeEach(() => {
+      jest.spyOn(readOnlyHook, 'useIsReadOnly').mockReturnValue(true);
+      component = <TestComponent testPolicies={policies} />;
+    });
+    it(`doesn't show actions column in the table`, () => {
+      const rendered = mountWithIntl(component);
+      const policyRow = findTestSubject(rendered, `policyTableRow-testy0`);
+      const cells = policyRow.find('td');
+      // columns are name, linked index templates, linked indices, modified date
+      expect(cells.length).toBe(4);
+    });
+  });
 });
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
index 8f16537a8a234..e6576691c4af4 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/view_policy_flyout.tsx
@@ -101,6 +101,7 @@ export const ViewPolicyFlyout = ({ policy }: { policy: PolicyFromES }) => {
       iconType="arrowUp"
       iconSide="right"
       fill
+      data-test-subj="managePolicyButton"
     >
       {i18n.translate('xpack.indexLifecycleMgmt.policyFlyout.managePolicyButtonLabel', {
         defaultMessage: 'Manage',
diff --git a/x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts b/x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts
new file mode 100644
index 0000000000000..a24065a53e7fb
--- /dev/null
+++ b/x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+const policyName = 'testPolicy1';
+
+export default ({ getPageObjects, getService }: FtrProviderContext) => {
+  const pageObjects = getPageObjects(['common', 'indexLifecycleManagement']);
+  const log = getService('log');
+  const retry = getService('retry');
+  const esClient = getService('es');
+  const security = getService('security');
+  const deployment = getService('deployment');
+  const testSubjects = getService('testSubjects');
+
+  describe('Read only view', function () {
+    before(async () => {
+      await security.testUser.setRoles(['read_ilm']);
+
+      await pageObjects.common.navigateToApp('indexLifecycleManagement');
+    });
+    after(async () => {
+      await security.testUser.restoreDefaults();
+    });
+
+    it('Loads the app', async () => {
+      await log.debug('Checking for page header');
+      const headerText = await pageObjects.indexLifecycleManagement.pageHeaderText();
+      expect(headerText).to.be('Index Lifecycle Policies');
+
+      const createPolicyButtonExists =
+        await pageObjects.indexLifecycleManagement.createPolicyButtonExists();
+      expect(createPolicyButtonExists).to.be(false);
+
+      await pageObjects.indexLifecycleManagement.clickPolicyNameLink(0);
+      await retry.waitFor('flyout to be visible', async () => {
+        const flyoutHeader = await pageObjects.indexLifecycleManagement.flyoutHeader();
+        return await flyoutHeader.isDisplayed();
+      });
+    });
+  });
+};

From b7fd5fd47cd257d3ef542f279489c49f779f055f Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 13 Sep 2024 15:27:12 +0000
Subject: [PATCH 08/17] [CI] Auto-commit changed files from 'node
 scripts/yarn_deduplicate'

---
 x-pack/plugins/index_lifecycle_management/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/index_lifecycle_management/tsconfig.json b/x-pack/plugins/index_lifecycle_management/tsconfig.json
index a70e757e8a8e0..2a3855769f0d7 100644
--- a/x-pack/plugins/index_lifecycle_management/tsconfig.json
+++ b/x-pack/plugins/index_lifecycle_management/tsconfig.json
@@ -41,6 +41,7 @@
     "@kbn/react-kibana-context-render",
     "@kbn/unsaved-changes-prompt",
     "@kbn/shared-ux-table-persist",
+    "@kbn/core-doc-links-browser-mocks",
   ],
   "exclude": [
     "target/**/*",

From 3aedbf1e743151052d4fd0744de93ac55645d99c Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Fri, 13 Sep 2024 17:53:16 +0200
Subject: [PATCH 09/17] Fix checks

---
 x-pack/plugins/index_lifecycle_management/tsconfig.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/index_lifecycle_management/tsconfig.json b/x-pack/plugins/index_lifecycle_management/tsconfig.json
index 2a3855769f0d7..a70e757e8a8e0 100644
--- a/x-pack/plugins/index_lifecycle_management/tsconfig.json
+++ b/x-pack/plugins/index_lifecycle_management/tsconfig.json
@@ -41,7 +41,6 @@
     "@kbn/react-kibana-context-render",
     "@kbn/unsaved-changes-prompt",
     "@kbn/shared-ux-table-persist",
-    "@kbn/core-doc-links-browser-mocks",
   ],
   "exclude": [
     "target/**/*",

From 74de2cf6cbda18c88a46bb8b97c565ea8c69b5f6 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:06:54 +0000
Subject: [PATCH 10/17] [CI] Auto-commit changed files from 'node
 scripts/yarn_deduplicate'

---
 x-pack/plugins/index_lifecycle_management/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/index_lifecycle_management/tsconfig.json b/x-pack/plugins/index_lifecycle_management/tsconfig.json
index a70e757e8a8e0..2a3855769f0d7 100644
--- a/x-pack/plugins/index_lifecycle_management/tsconfig.json
+++ b/x-pack/plugins/index_lifecycle_management/tsconfig.json
@@ -41,6 +41,7 @@
     "@kbn/react-kibana-context-render",
     "@kbn/unsaved-changes-prompt",
     "@kbn/shared-ux-table-persist",
+    "@kbn/core-doc-links-browser-mocks",
   ],
   "exclude": [
     "target/**/*",

From 881c583f42184241f04cf0f0f12517e433f598e3 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Fri, 13 Sep 2024 18:25:09 +0200
Subject: [PATCH 11/17] Fixes

---
 .../__jest__/policy_flyout.test.tsx                | 14 ++++++++------
 .../index_lifecycle_management/tsconfig.json       |  1 -
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx
index 9c4079821d15f..75b26d98ddc9f 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/policy_flyout.test.tsx
@@ -5,16 +5,18 @@
  * 2.0.
  */
 
-import { PolicyFromES } from '../common/types';
-import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
-import { PolicyListContextProvider } from '../public/application/sections/policy_list/policy_list_context';
 import React, { ReactElement } from 'react';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test';
+
+import { docLinksServiceMock } from '@kbn/core/public/mocks';
+
+import type { PolicyFromES } from '../common/types';
+import { KibanaContextProvider } from '../public/shared_imports';
+import { PolicyListContextProvider } from '../public/application/sections/policy_list/policy_list_context';
 import { ViewPolicyFlyout } from '../public/application/sections/policy_list/policy_flyout';
 import * as readOnlyHook from '../public/application/lib/use_is_read_only';
 import { policyAllPhases } from './mocks';
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test';
 
 let component: ReactElement;
 const TestComponent = ({ policy }: { policy: PolicyFromES }) => {
diff --git a/x-pack/plugins/index_lifecycle_management/tsconfig.json b/x-pack/plugins/index_lifecycle_management/tsconfig.json
index 0a8f1ed8e1cd2..7c3913fcae1bd 100644
--- a/x-pack/plugins/index_lifecycle_management/tsconfig.json
+++ b/x-pack/plugins/index_lifecycle_management/tsconfig.json
@@ -41,7 +41,6 @@
     "@kbn/react-kibana-context-render",
     "@kbn/unsaved-changes-prompt",
     "@kbn/shared-ux-table-persist",
-    "@kbn/core-doc-links-browser-mocks",
   ],
   "exclude": [
     "target/**/*",

From ac13f1467470c6ec8c4d3bd6a3724c484440cfe6 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Tue, 17 Sep 2024 17:53:37 +0200
Subject: [PATCH 12/17] [ILM] Fix type check issues

---
 .../public/application/constants/policy.ts               | 1 -
 .../phases/shared_fields/index_priority_field.tsx        | 4 +---
 .../components/phases/shared_fields/replicas_field.tsx   | 2 +-
 .../sections/edit_policy/form/deserializer.ts            | 1 -
 .../application/sections/edit_policy/form/schema.ts      | 9 +--------
 .../public/application/sections/edit_policy/types.ts     | 2 +-
 6 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/constants/policy.ts b/x-pack/plugins/index_lifecycle_management/public/application/constants/policy.ts
index 293e232e349df..2c025761fd940 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/constants/policy.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/constants/policy.ts
@@ -11,7 +11,6 @@ export const defaultIndexPriority = {
   hot: '100',
   warm: '50',
   cold: '0',
-  frozen: '0',
 };
 
 export const defaultRolloverAction: RolloverAction = {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/index_priority_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/index_priority_field.tsx
index e0989adf44e4f..55f559de3ba89 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/index_priority_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/index_priority_field.tsx
@@ -10,8 +10,6 @@ import React, { FunctionComponent, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiSpacer, EuiTextColor } from '@elastic/eui';
 
-import { PhaseExceptDelete } from '../../../../../../../common/types';
-
 import { NumericField } from '../../../../../../shared_imports';
 import { useEditPolicyContext } from '../../../edit_policy_context';
 
@@ -20,7 +18,7 @@ import { LearnMoreLink, DescribedFormRow } from '../..';
 import { useKibana } from '../../../../../../shared_imports';
 
 interface Props {
-  phase: PhaseExceptDelete;
+  phase: 'hot' | 'warm' | 'cold';
 }
 
 export const IndexPriorityField: FunctionComponent<Props> = ({ phase }) => {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx
index ee59deed0041c..94e44a433e0e8 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/replicas_field.tsx
@@ -17,7 +17,7 @@ import { i18nTexts } from '../../../i18n_texts';
 import { DescribedFormRow } from '../../described_form_row';
 
 interface Props {
-  phase: 'warm' | 'cold' | 'frozen';
+  phase: 'warm' | 'cold';
 }
 
 export const ReplicasField: FunctionComponent<Props> = ({ phase }) => {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/deserializer.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/deserializer.ts
index 6a0dae8d3deaf..dec1dce0eaffe 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/deserializer.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/deserializer.ts
@@ -67,7 +67,6 @@ export const createDeserializer =
       },
       frozen: {
         enabled: Boolean(frozen),
-        dataTierAllocationType: determineDataTierAllocationType(frozen?.actions),
         minAgeToMilliSeconds: -1,
       },
       delete: {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
index bc365eba61b39..5d13f4f2bd29b 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
@@ -8,7 +8,6 @@
 import { i18n } from '@kbn/i18n';
 
 import {
-  PhaseExceptDelete,
   PhaseWithDownsample,
   PhaseWithTiming,
 } from '../../../../../common/types';
@@ -129,7 +128,7 @@ const allowWriteAfterShrinkField = {
   defaultValue: false,
 };
 
-const getPriorityField = (phase: PhaseExceptDelete) => ({
+const getPriorityField = (phase: 'hot' | 'warm' | 'cold') => ({
   defaultValue: defaultIndexPriority[phase],
   label: i18nTexts.editPolicy.indexPriorityFieldLabel,
   validations: [
@@ -495,12 +494,6 @@ export const getSchema = (isCloudEnabled: boolean): FormSchema => ({
     frozen: {
       min_age: getMinAgeField('frozen'),
       actions: {
-        allocate: {
-          number_of_replicas: numberOfReplicasField,
-        },
-        set_priority: {
-          priority: getPriorityField('frozen'),
-        },
         searchable_snapshot: searchableSnapshotFields,
       },
     },
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/types.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/types.ts
index 5dd5477cae2c2..4d4d561eedb96 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/types.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/types.ts
@@ -78,7 +78,7 @@ interface ColdPhaseMetaFields extends DataAllocationMetaFields, MinAgeField, Dow
   readonlyEnabled: boolean;
 }
 
-interface FrozenPhaseMetaFields extends DataAllocationMetaFields, MinAgeField {
+interface FrozenPhaseMetaFields extends MinAgeField {
   enabled: boolean;
 }
 

From 0045c120b531f7bc09c29a9120ff82d280e3a69f Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Tue, 17 Sep 2024 22:29:16 +0200
Subject: [PATCH 13/17] [ILM] Fix linter issue

---
 .../public/application/sections/edit_policy/form/schema.ts   | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
index 5d13f4f2bd29b..a4f5f92acc086 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts
@@ -7,10 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import {
-  PhaseWithDownsample,
-  PhaseWithTiming,
-} from '../../../../../common/types';
+import { PhaseWithDownsample, PhaseWithTiming } from '../../../../../common/types';
 import { fieldValidators, FormSchema } from '../../../../shared_imports';
 import { defaultIndexPriority } from '../../../constants';
 import { CLOUD_DEFAULT_REPO, ROLLOVER_FORM_PATHS } from '../constants';

From 71ec3baa1f3987bf80a5deab322a1548a9726c49 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Wed, 18 Sep 2024 08:22:31 +0200
Subject: [PATCH 14/17] [ILM] Fix e2e tests

---
 .../apps/group1/index_lifecycle_management.ts         | 11 +++++++++++
 .../apps/index_lifecycle_management/read_only_view.ts |  5 -----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts b/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
index 46e287eb09038..c89f715afe1f3 100644
--- a/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
+++ b/x-pack/test/accessibility/apps/group1/index_lifecycle_management.ts
@@ -166,6 +166,17 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
+    it('View policy flyout', async () => {
+      const link = await findPolicyLinkInListView(POLICY_NAME);
+      await link.click();
+
+      await retry.waitFor('View policy flyout to be present', async () => {
+        return testSubjects.isDisplayed('policyFlyoutTitle');
+      });
+
+      await a11y.testAppSnapshot();
+    });
+
     it('Add policy to index template modal', async () => {
       await filterByPolicyName(POLICY_NAME);
       const policyRow = await testSubjects.find(`policyTableRow-${POLICY_NAME}`);
diff --git a/x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts b/x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts
index a24065a53e7fb..030074a97b4bd 100644
--- a/x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts
+++ b/x-pack/test/functional/apps/index_lifecycle_management/read_only_view.ts
@@ -8,16 +8,11 @@
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
-const policyName = 'testPolicy1';
-
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const pageObjects = getPageObjects(['common', 'indexLifecycleManagement']);
   const log = getService('log');
   const retry = getService('retry');
-  const esClient = getService('es');
   const security = getService('security');
-  const deployment = getService('deployment');
-  const testSubjects = getService('testSubjects');
 
   describe('Read only view', function () {
     before(async () => {

From e4c14ec90560729211617bebf1695b028ee90e23 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Wed, 18 Sep 2024 14:48:44 +0200
Subject: [PATCH 15/17] [ILM] Fix a11y tests

---
 .../policy_list/policy_flyout/phase_description.tsx    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
index 0b26fb341a4f8..16c4bf2d4ebbb 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_description.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiDescriptionList } from '@elastic/eui';
 import { PhaseIndicator } from './phase_indicator';
 import { ActionComponentProps } from './components/types';
 import { i18nTexts } from '../../edit_policy/i18n_texts';
@@ -32,9 +32,11 @@ export const PhaseDescription = ({
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="l" />
-      {components.map((Component, index) => (
-        <Component phase={phase} phases={phases} key={index} />
-      ))}
+      <EuiDescriptionList>
+        {components.map((Component, index) => (
+          <Component phase={phase} phases={phases} key={index} />
+        ))}
+      </EuiDescriptionList>
       <EuiSpacer size="l" />
     </>
   );

From c2a474785628d2a7313567e5666ea7445aa98f2c Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Wed, 18 Sep 2024 16:18:04 +0200
Subject: [PATCH 16/17] [ILM] Update jest snapshots

---
 .../__snapshots__/policy_flyout.test.tsx.snap | 1027 +++++++++--------
 1 file changed, 526 insertions(+), 501 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
index 8b44e278a12ef..73c4123b60b12 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
@@ -212,184 +212,189 @@ exports[`View policy flyout shows all phases 1`] = `
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        <dl
+          class="euiDescriptionList emotion-euiDescriptionList-row-left"
+          data-type="row"
         >
-          Rollover
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
           >
-            <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Maximum primary shard size: 
-            <strong>
-              50gb
-            </strong>
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            Rollover
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Maximum docs in the primary shard: 
-            <strong>
-              25
-            </strong>
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
-          >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Maximum primary shard size: 
+              <strong>
+                50gb
+              </strong>
+            </div>
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Maximum age: 
-            <strong>
-              30d
-            </strong>
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
-          >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Maximum docs in the primary shard: 
+              <strong>
+                25
+              </strong>
+            </div>
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Maximum documents: 
-            <strong>
-              235
-            </strong>
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
-          >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Maximum age: 
+              <strong>
+                30d
+              </strong>
+            </div>
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Maximum index size: 
-            <strong>
-              2gb
-            </strong>
-             
-            <span
-              class="euiBadge emotion-euiBadge-warning"
-              title="Deprecated"
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Maximum documents: 
+              <strong>
+                235
+              </strong>
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
             >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Maximum index size: 
+              <strong>
+                2gb
+              </strong>
+               
               <span
-                class="euiBadge__content emotion-euiBadge__content"
+                class="euiBadge emotion-euiBadge-warning"
+                title="Deprecated"
               >
                 <span
-                  class="euiBadge__text emotion-euiBadge__text"
+                  class="euiBadge__content emotion-euiBadge__content"
                 >
-                  Deprecated
+                  <span
+                    class="euiBadge__text emotion-euiBadge__text"
+                  >
+                    Deprecated
+                  </span>
                 </span>
               </span>
-            </span>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Force merge
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
           >
-            <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Number of segments: 
-            <strong>
-              3
-            </strong>
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            Force merge
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Compress stored fields: 
-            <strong>
-              Yes
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Shrink
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Number of segments: 
+              <strong>
+                3
+              </strong>
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Compress stored fields: 
+              <strong>
+                Yes
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Shrink
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Number of primary shards: 
-            <strong>
-              1
-            </strong>
-          </div>
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Number of primary shards: 
+              <strong>
+                1
+              </strong>
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Allow writes after shrink: 
+              <strong>
+                No
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
           >
-            <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Allow writes after shrink: 
-            <strong>
-              No
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Read only
-        </dt>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Index priority
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+            Read only
+          </dt>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Index priority
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            100
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              100
+            </div>
+          </dd>
+          <div
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+        </dl>
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
@@ -416,194 +421,199 @@ exports[`View policy flyout shows all phases 1`] = `
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        <dl
+          class="euiDescriptionList emotion-euiDescriptionList-row-left"
+          data-type="row"
         >
-          Move data into phase when
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
           >
-            <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            3d old
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Replicas
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            Move data into phase when
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Number of replicas: 
-            <strong>
-              3
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Shrink
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              3d old
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
           >
-            <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Maximum primary shard size: 
-            <strong>
-              4gb
-            </strong>
-          </div>
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            Replicas
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Allow writes after shrink: 
-            <strong>
-              No
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Force merge
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Number of replicas: 
+              <strong>
+                3
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Shrink
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Number of segments: 
-            <strong>
-              44
-            </strong>
-          </div>
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Maximum primary shard size: 
+              <strong>
+                4gb
+              </strong>
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Allow writes after shrink: 
+              <strong>
+                No
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Force merge
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Compress stored fields: 
-            <strong>
-              Yes
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Downsample
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Number of segments: 
+              <strong>
+                44
+              </strong>
+            </div>
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Compress stored fields: 
+              <strong>
+                Yes
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Downsample
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Downsampling interval: 
-            <strong>
-              1d
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Data allocation
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Downsampling interval: 
+              <strong>
+                1d
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Data allocation
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Using warm nodes 
-            <span
-              class="euiBadge emotion-euiBadge-success"
-              title="Recommended"
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
             >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Using warm nodes 
               <span
-                class="euiBadge__content emotion-euiBadge__content"
+                class="euiBadge emotion-euiBadge-success"
+                title="Recommended"
               >
                 <span
-                  class="euiBadge__text emotion-euiBadge__text"
+                  class="euiBadge__content emotion-euiBadge__content"
                 >
-                  Recommended
+                  <span
+                    class="euiBadge__text emotion-euiBadge__text"
+                  >
+                    Recommended
+                  </span>
                 </span>
               </span>
-            </span>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Index priority
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Index priority
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            50
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              50
+            </div>
+          </dd>
+          <div
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+        </dl>
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
@@ -630,149 +640,154 @@ exports[`View policy flyout shows all phases 1`] = `
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        <dl
+          class="euiDescriptionList emotion-euiDescriptionList-row-left"
+          data-type="row"
         >
-          Move data into phase when
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Move data into phase when
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            55d old
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Searchable snapshot
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              55d old
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Searchable snapshot
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Snapshot repository: 
-            <code>
-              found-snapshots
-            </code>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Replicas
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Snapshot repository: 
+              <code>
+                found-snapshots
+              </code>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Replicas
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Number of replicas: 
-            <strong>
-              3
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Downsample
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Number of replicas: 
+              <strong>
+                3
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Downsample
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Downsampling interval: 
-            <strong>
-              4d
-            </strong>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Data allocation
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Downsampling interval: 
+              <strong>
+                4d
+              </strong>
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Data allocation
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Using cold nodes 
-            <span
-              class="euiBadge emotion-euiBadge-success"
-              title="Recommended"
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
             >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Using cold nodes 
               <span
-                class="euiBadge__content emotion-euiBadge__content"
+                class="euiBadge emotion-euiBadge-success"
+                title="Recommended"
               >
                 <span
-                  class="euiBadge__text emotion-euiBadge__text"
+                  class="euiBadge__content emotion-euiBadge__content"
                 >
-                  Recommended
+                  <span
+                    class="euiBadge__text emotion-euiBadge__text"
+                  >
+                    Recommended
+                  </span>
                 </span>
               </span>
-            </span>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Index priority
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Index priority
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            0
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              0
+            </div>
+          </dd>
+          <div
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+        </dl>
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
@@ -799,49 +814,54 @@ exports[`View policy flyout shows all phases 1`] = `
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Move data into phase when
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+        <dl
+          class="euiDescriptionList emotion-euiDescriptionList-row-left"
+          data-type="row"
         >
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Move data into phase when
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            555d old
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Searchable snapshot
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              555d old
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Searchable snapshot
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            Snapshot repository: 
-            <code>
-              found-snapshots
-            </code>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              Snapshot repository: 
+              <code>
+                found-snapshots
+              </code>
+            </div>
+          </dd>
+          <div
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+        </dl>
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
@@ -868,48 +888,53 @@ exports[`View policy flyout shows all phases 1`] = `
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+        <dl
+          class="euiDescriptionList emotion-euiDescriptionList-row-left"
+          data-type="row"
         >
-          Move data into phase when
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
-          <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Move data into phase when
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            7365d old
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
-        <dt
-          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
-        >
-          Wait for snapshot policy
-        </dt>
-        <dd
-          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
-        >
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              7365d old
+            </div>
+          </dd>
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Wait for snapshot policy
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
-              class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-            />
-            <code>
-              cloud-snapshot-policy
-            </code>
-          </div>
-        </dd>
-        <div
-          class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
-        />
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              <code>
+                cloud-snapshot-policy
+              </code>
+            </div>
+          </dd>
+          <div
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
+        </dl>
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
         />

From ebde681943996596b08b38ba81e3ff7a1d1de4b7 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Thu, 19 Sep 2024 17:42:13 +0200
Subject: [PATCH 17/17] [ILM] Update delete phase description

---
 .../__snapshots__/policy_flyout.test.tsx.snap | 20 +++++++++++++++++++
 .../components/delete_searchable_snapshot.tsx | 12 ++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
index 73c4123b60b12..91a77cb2096f2 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
@@ -934,6 +934,26 @@ exports[`View policy flyout shows all phases 1`] = `
           <div
             class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
           />
+          <dt
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal-s"
+          >
+            Delete searchable snapshot
+          </dt>
+          <dd
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
+          >
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <div
+                class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
+              />
+              No
+            </div>
+          </dd>
+          <div
+            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          />
         </dl>
         <div
           class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx
index 68b1fc234532b..c5e22e9329733 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/components/delete_searchable_snapshot.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import { i18nTexts as i18nTextsFlyout } from './i18n_texts';
 import { SerializedDeletePhase } from '../../../../../../common/types';
 import { i18nTexts } from '../../../edit_policy/i18n_texts';
 import { ActionDescription } from './action_description';
@@ -15,7 +16,12 @@ export const DeleteSearchableSnapshot = ({ phase, phases }: ActionComponentProps
   const phaseConfig = phases[phase];
   const deleteSearchableSnapshot = (phaseConfig as SerializedDeletePhase)?.actions.delete
     ?.delete_searchable_snapshot;
-  return deleteSearchableSnapshot ? (
-    <ActionDescription title={i18nTexts.editPolicy.deleteSearchableSnapshotLabel} />
-  ) : null;
+  return (
+    <ActionDescription
+      title={i18nTexts.editPolicy.deleteSearchableSnapshotLabel}
+      descriptionItems={[
+        Boolean(deleteSearchableSnapshot) ? i18nTextsFlyout.yes : i18nTextsFlyout.no,
+      ]}
+    />
+  );
 };