From 5eeb3f7c47a2a8f18ec08f36cbbd71ff8724eea6 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Tue, 22 Aug 2023 13:14:38 +0100
Subject: [PATCH] [ILM] Migrate all usages of EuiPage*_Deprecated (#163132)

---
 .../__snapshots__/policy_table.test.tsx.snap  | 91 ++++++++++---------
 .../edit_policy/edit_policy.container.tsx     | 76 +++++++---------
 .../policy_list/policy_list.container.tsx     | 76 +++++++---------
 .../sections/policy_list/policy_list.tsx      | 50 +++++-----
 4 files changed, 136 insertions(+), 157 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap
index 6c991799a115b..aeae7b28f0b88 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap
@@ -37,68 +37,71 @@ Array [
 `;
 
 exports[`policy table shows empty state when there are no policies 1`] = `
-<div
-  class="euiPanel euiPanel--subdued euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter emotion-euiPanel-grow-m-l-subdued"
-  role="main"
+<section
+  class="emotion-euiPageSection-grow-l-center-transparent"
 >
   <div
-    class="euiPanel euiPanel--transparent euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge emotion-euiPanel-m-transparent"
+    class="emotion-euiPageSection__content-l-center"
   >
     <div
-      class="euiEmptyPrompt__main"
+      class="euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge emotion-euiPanel-m-plain-hasShadow"
     >
       <div
-        class="euiEmptyPrompt__icon"
-      >
-        <span
-          color="subdued"
-          data-euiicon-type="managementApp"
-        />
-      </div>
-      <div
-        class="euiEmptyPrompt__content"
+        class="euiEmptyPrompt__main"
       >
         <div
-          class="euiEmptyPrompt__contentInner"
+          class="euiEmptyPrompt__icon"
         >
-          <h1
-            class="euiTitle emotion-euiTitle-m"
-          >
-            Create your first index lifecycle policy
-          </h1>
-          <div
-            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+          <span
+            color="subdued"
+            data-euiicon-type="managementApp"
           />
+        </div>
+        <div
+          class="euiEmptyPrompt__content"
+        >
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
-          >
-            <p>
-               An index lifecycle policy helps you manage your indices as they age.
-            </p>
-          </div>
-          <div
-            class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
-          />
-          <button
-            class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
-            data-test-subj="createPolicyButton"
-            type="button"
+            class="euiEmptyPrompt__contentInner"
           >
-            <span
-              class="emotion-euiButtonDisplayContent"
+            <h1
+              class="euiTitle emotion-euiTitle-m"
+            >
+              Create your first index lifecycle policy
+            </h1>
+            <div
+              class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+            />
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <p>
+                 An index lifecycle policy helps you manage your indices as they age.
+              </p>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
+            />
+            <button
+              class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
+              data-test-subj="createPolicyButton"
+              type="button"
             >
               <span
-                color="inherit"
-                data-euiicon-type="plusInCircle"
-              />
-              Create policy
-            </span>
-          </button>
+                class="emotion-euiButtonDisplayContent"
+              >
+                <span
+                  color="inherit"
+                  data-euiicon-type="plusInCircle"
+                />
+                Create policy
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</section>
 `;
 
 exports[`policy table sorts when linked index templates header is clicked 1`] = `
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx
index 1290304ef6165..2bad87b149e0f 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx
@@ -7,12 +7,7 @@
 
 import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import {
-  EuiButton,
-  EuiEmptyPrompt,
-  EuiLoadingSpinner,
-  EuiPageContent_Deprecated as EuiPageContent,
-} from '@elastic/eui';
+import { EuiButton, EuiLoadingSpinner, EuiPageTemplate } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import { MIN_SEARCHABLE_SNAPSHOT_LICENSE } from '../../../../common/constants';
@@ -45,47 +40,44 @@ export const EditPolicy: React.FunctionComponent<RouteComponentProps<RouterProps
 
   if (isLoading) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <EuiEmptyPrompt
-          title={<EuiLoadingSpinner size="xl" />}
-          body={
-            <FormattedMessage
-              id="xpack.indexLifecycleMgmt.editPolicy.policiesLoading"
-              defaultMessage="Loading policies..."
-            />
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        title={<EuiLoadingSpinner size="xl" />}
+        body={
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.policiesLoading"
+            defaultMessage="Loading policies..."
+          />
+        }
+      />
     );
   }
   if (error || !policies) {
     const { statusCode, message } = error ? error : { statusCode: '', message: '' };
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
-        <EuiEmptyPrompt
-          title={
-            <h2>
-              <FormattedMessage
-                id="xpack.indexLifecycleMgmt.editPolicy.lifecyclePoliciesLoadingFailedTitle"
-                defaultMessage="Unable to load existing lifecycle policies"
-              />
-            </h2>
-          }
-          body={
-            <p>
-              {message} ({statusCode})
-            </p>
-          }
-          actions={
-            <EuiButton onClick={resendRequest} iconType="refresh" color="danger">
-              <FormattedMessage
-                id="xpack.indexLifecycleMgmt.editPolicy.lifecyclePoliciesReloadButton"
-                defaultMessage="Try again"
-              />
-            </EuiButton>
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        color="danger"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.editPolicy.lifecyclePoliciesLoadingFailedTitle"
+              defaultMessage="Unable to load existing lifecycle policies"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            {message} ({statusCode})
+          </p>
+        }
+        actions={
+          <EuiButton onClick={resendRequest} iconType="refresh" color="danger">
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.editPolicy.lifecyclePoliciesReloadButton"
+              defaultMessage="Try again"
+            />
+          </EuiButton>
+        }
+      />
     );
   }
 
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.container.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.container.tsx
index 7113b00cf4ec2..669f22ccb9b3f 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.container.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_list/policy_list.container.tsx
@@ -6,12 +6,7 @@
  */
 
 import React, { useEffect } from 'react';
-import {
-  EuiButton,
-  EuiEmptyPrompt,
-  EuiLoadingSpinner,
-  EuiPageContent_Deprecated as EuiPageContent,
-} from '@elastic/eui';
+import { EuiButton, EuiLoadingSpinner, EuiPageTemplate } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { PolicyList as PresentationComponent } from './policy_list';
 import { useKibana } from '../../../shared_imports';
@@ -30,47 +25,44 @@ export const PolicyList: React.FunctionComponent = () => {
 
   if (isLoading) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <EuiEmptyPrompt
-          title={<EuiLoadingSpinner size="xl" />}
-          body={
-            <FormattedMessage
-              id="xpack.indexLifecycleMgmt.policyTable.policiesLoading"
-              defaultMessage="Loading policies..."
-            />
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        title={<EuiLoadingSpinner size="xl" />}
+        body={
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.policyTable.policiesLoading"
+            defaultMessage="Loading policies..."
+          />
+        }
+      />
     );
   }
   if (error) {
     const { statusCode, message } = error ? error : { statusCode: '', message: '' };
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
-        <EuiEmptyPrompt
-          title={
-            <h2>
-              <FormattedMessage
-                id="xpack.indexLifecycleMgmt.policyTable.policiesLoadingFailedTitle"
-                defaultMessage="Unable to load existing lifecycle policies"
-              />
-            </h2>
-          }
-          body={
-            <p>
-              {message} ({statusCode})
-            </p>
-          }
-          actions={
-            <EuiButton onClick={resendRequest} iconType="refresh" color="danger">
-              <FormattedMessage
-                id="xpack.indexLifecycleMgmt.policyTable.policiesReloadButton"
-                defaultMessage="Try again"
-              />
-            </EuiButton>
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        color="danger"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.policyTable.policiesLoadingFailedTitle"
+              defaultMessage="Unable to load existing lifecycle policies"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            {message} ({statusCode})
+          </p>
+        }
+        actions={
+          <EuiButton onClick={resendRequest} iconType="refresh" color="danger">
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.policyTable.policiesReloadButton"
+              defaultMessage="Try again"
+            />
+          </EuiButton>
+        }
+      />
     );
   }
 
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 09fbc2d1c41c6..0a81f6b16bf43 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
@@ -8,13 +8,7 @@
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import {
-  EuiButton,
-  EuiEmptyPrompt,
-  EuiSpacer,
-  EuiPageHeader,
-  EuiPageContent_Deprecated as EuiPageContent,
-} from '@elastic/eui';
+import { EuiButton, EuiSpacer, EuiPageHeader, EuiPageTemplate } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { PolicyFromES } from '../../../../common/types';
@@ -46,30 +40,28 @@ export const PolicyList: React.FunctionComponent<Props> = ({ policies, updatePol
 
   if (policies.length === 0) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <EuiEmptyPrompt
-          iconType="managementApp"
-          title={
-            <h1>
+      <EuiPageTemplate.EmptyPrompt
+        iconType="managementApp"
+        title={
+          <h1>
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.policyTable.emptyPromptTitle"
+              defaultMessage="Create your first index lifecycle policy"
+            />
+          </h1>
+        }
+        body={
+          <Fragment>
+            <p>
               <FormattedMessage
-                id="xpack.indexLifecycleMgmt.policyTable.emptyPromptTitle"
-                defaultMessage="Create your first index lifecycle policy"
+                id="xpack.indexLifecycleMgmt.policyTable.emptyPromptDescription"
+                defaultMessage=" An index lifecycle policy helps you manage your indices as they age."
               />
-            </h1>
-          }
-          body={
-            <Fragment>
-              <p>
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.policyTable.emptyPromptDescription"
-                  defaultMessage=" An index lifecycle policy helps you manage your indices as they age."
-                />
-              </p>
-            </Fragment>
-          }
-          actions={createPolicyButton}
-        />
-      </EuiPageContent>
+            </p>
+          </Fragment>
+        }
+        actions={createPolicyButton}
+      />
     );
   }