From 1ab6a4cb26f09d441a5954e0ef5ec2f4c88fe826 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Thu, 17 Aug 2023 18:40:18 +0100
Subject: [PATCH] [CCR] Migrate all usages of EuiPage*_Deprecated (#163135)

---
 .../auto_follow_pattern_add.test.js           |  4 +-
 .../follower_index_add.test.js                |  4 +-
 .../public/app/app.tsx                        | 66 +++++++--------
 .../auto_follow_pattern_add.js                | 28 ++-----
 .../auto_follow_pattern_edit.js               | 72 +++++++---------
 .../follower_index_add/follower_index_add.js  | 28 ++-----
 .../follower_index_edit.js                    | 71 +++++++---------
 .../auto_follow_pattern_list.js               | 83 ++++++++-----------
 .../follower_indices_list.js                  | 81 ++++++++----------
 9 files changed, 183 insertions(+), 254 deletions(-)

diff --git a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_add.test.js b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_add.test.js
index 7dee4fcac57f4..b2e04650f19af 100644
--- a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_add.test.js
+++ b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_add.test.js
@@ -31,8 +31,8 @@ describe('Create Auto-follow pattern', () => {
     });
 
     test('should display a "loading remote clusters" indicator', () => {
-      expect(exists('remoteClustersLoading')).toBe(true);
-      expect(find('remoteClustersLoading').text()).toBe('Loading remote clusters…');
+      expect(exists('sectionLoading')).toBe(true);
+      expect(find('sectionLoading').text()).toBe('Loading remote clusters…');
     });
   });
 
diff --git a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_index_add.test.js b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_index_add.test.js
index b8566af668230..15aec9b1ececc 100644
--- a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_index_add.test.js
+++ b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_index_add.test.js
@@ -37,8 +37,8 @@ describe('Create Follower index', () => {
     });
 
     test('should display a "loading remote clusters" indicator', () => {
-      expect(exists('remoteClustersLoading')).toBe(true);
-      expect(find('remoteClustersLoading').text()).toBe('Loading remote clusters…');
+      expect(exists('sectionLoading')).toBe(true);
+      expect(find('sectionLoading').text()).toBe('Loading remote clusters…');
     });
   });
 
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/app.tsx b/x-pack/plugins/cross_cluster_replication/public/app/app.tsx
index accb15a31927e..dd46f772a3d55 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/app.tsx
+++ b/x-pack/plugins/cross_cluster_replication/public/app/app.tsx
@@ -13,7 +13,7 @@ import { ScopedHistory, ApplicationStart } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { EuiEmptyPrompt, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 
 import { getFatalErrors } from './services/notifications';
 import { routing } from './services/routing';
@@ -109,14 +109,12 @@ class AppComponent extends Component<AppProps, AppState> {
 
     if (isFetchingPermissions) {
       return (
-        <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-          <SectionLoading>
-            <FormattedMessage
-              id="xpack.crossClusterReplication.app.permissionCheckTitle"
-              defaultMessage="Checking permissions…"
-            />
-          </SectionLoading>
-        </EuiPageContent>
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.crossClusterReplication.app.permissionCheckTitle"
+            defaultMessage="Checking permissions…"
+          />
+        </SectionLoading>
       );
     }
 
@@ -136,32 +134,30 @@ class AppComponent extends Component<AppProps, AppState> {
 
     if (!hasPermission) {
       return (
-        <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-          <EuiEmptyPrompt
-            iconType="securityApp"
-            title={
-              <h2>
-                <FormattedMessage
-                  id="xpack.crossClusterReplication.app.deniedPermissionTitle"
-                  defaultMessage="You're missing cluster privileges"
-                />
-              </h2>
-            }
-            body={
-              <p>
-                <FormattedMessage
-                  id="xpack.crossClusterReplication.app.deniedPermissionDescription"
-                  defaultMessage="To use Cross-Cluster Replication, you must have {clusterPrivilegesCount,
-                    plural, one {this cluster privilege} other {these cluster privileges}}: {clusterPrivileges}."
-                  values={{
-                    clusterPrivileges: missingClusterPrivileges.join(', '),
-                    clusterPrivilegesCount: missingClusterPrivileges.length,
-                  }}
-                />
-              </p>
-            }
-          />
-        </EuiPageContent>
+        <EuiPageTemplate.EmptyPrompt
+          iconType="securityApp"
+          title={
+            <h2>
+              <FormattedMessage
+                id="xpack.crossClusterReplication.app.deniedPermissionTitle"
+                defaultMessage="You're missing cluster privileges"
+              />
+            </h2>
+          }
+          body={
+            <p>
+              <FormattedMessage
+                id="xpack.crossClusterReplication.app.deniedPermissionDescription"
+                defaultMessage="To use Cross-Cluster Replication, you must have {clusterPrivilegesCount,
+                  plural, one {this cluster privilege} other {these cluster privileges}}: {clusterPrivileges}."
+                values={{
+                  clusterPrivileges: missingClusterPrivileges.join(', '),
+                  clusterPrivilegesCount: missingClusterPrivileges.length,
+                }}
+              />
+            </p>
+          }
+        />
       );
     }
 
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
index 18658618b2bf4..a6ab123786c8e 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
@@ -8,10 +8,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-} from '@elastic/eui';
+import { EuiPageSection } from '@elastic/eui';
 
 import { listBreadcrumb, addBreadcrumb, setBreadcrumbs } from '../../services/breadcrumbs';
 import {
@@ -50,24 +47,17 @@ export class AutoFollowPatternAdd extends PureComponent {
         {({ isLoading, error, remoteClusters }) => {
           if (isLoading) {
             return (
-              <EuiPageContent
-                verticalPosition="center"
-                horizontalPosition="center"
-                color="subdued"
-                data-test-subj="remoteClustersLoading"
-              >
-                <SectionLoading>
-                  <FormattedMessage
-                    id="xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClustersMessage"
-                    defaultMessage="Loading remote clusters…"
-                  />
-                </SectionLoading>
-              </EuiPageContent>
+              <SectionLoading>
+                <FormattedMessage
+                  id="xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClustersMessage"
+                  defaultMessage="Loading remote clusters…"
+                />
+              </SectionLoading>
             );
           }
 
           return (
-            <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+            <EuiPageSection restrictWidth style={{ width: '100%' }}>
               <AutoFollowPatternPageTitle
                 title={
                   <FormattedMessage
@@ -90,7 +80,7 @@ export class AutoFollowPatternAdd extends PureComponent {
                   />
                 }
               />
-            </EuiPageContentBody>
+            </EuiPageSection>
           );
         }}
       </RemoteClustersProvider>
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js
index 483b8356c5ffb..deba7c063970f 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js
@@ -10,12 +10,7 @@ import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import {
-  EuiButton,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiEmptyPrompt,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-} from '@elastic/eui';
+import { EuiButton, EuiPageSection, EuiPageTemplate } from '@elastic/eui';
 
 import { listBreadcrumb, editBreadcrumb, setBreadcrumbs } from '../../services/breadcrumbs';
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
@@ -98,43 +93,38 @@ export class AutoFollowPatternEdit extends PureComponent {
         : error;
 
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
-        <EuiEmptyPrompt
-          iconType="warning"
-          title={
-            <h2>
-              <FormattedMessage
-                id="xpack.crossClusterReplication.autoFollowPatternEditForm.loadingErrorTitle"
-                defaultMessage="Error loading auto-follow pattern"
-              />
-            </h2>
-          }
-          body={<p>{errorMessage}</p>}
-          actions={
-            <EuiButton
-              {...reactRouterNavigate(this.props.history, `/auto_follow_patterns`)}
-              color="danger"
-              flush="left"
-              iconType="arrowLeft"
-              data-test-subj="viewAutoFollowPatternListButton"
-            >
-              <FormattedMessage
-                id="xpack.crossClusterReplication.autoFollowPatternEditForm.viewAutoFollowPatternsButtonLabel"
-                defaultMessage="View auto-follow patterns"
-              />
-            </EuiButton>
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        color="danger"
+        iconType="warning"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.crossClusterReplication.autoFollowPatternEditForm.loadingErrorTitle"
+              defaultMessage="Error loading auto-follow pattern"
+            />
+          </h2>
+        }
+        body={<p>{errorMessage}</p>}
+        actions={
+          <EuiButton
+            {...reactRouterNavigate(this.props.history, `/auto_follow_patterns`)}
+            color="danger"
+            flush="left"
+            iconType="arrowLeft"
+            data-test-subj="viewAutoFollowPatternListButton"
+          >
+            <FormattedMessage
+              id="xpack.crossClusterReplication.autoFollowPatternEditForm.viewAutoFollowPatternsButtonLabel"
+              defaultMessage="View auto-follow patterns"
+            />
+          </EuiButton>
+        }
+      />
     );
   }
 
   renderLoading(loadingTitle) {
-    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <SectionLoading>{loadingTitle}</SectionLoading>
-      </EuiPageContent>
-    );
+    return <SectionLoading>{loadingTitle}</SectionLoading>;
   }
 
   render() {
@@ -171,7 +161,7 @@ export class AutoFollowPatternEdit extends PureComponent {
           }
 
           return (
-            <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+            <EuiPageSection restrictWidth style={{ width: '100%' }}>
               <AutoFollowPatternPageTitle
                 title={
                   <FormattedMessage
@@ -195,7 +185,7 @@ export class AutoFollowPatternEdit extends PureComponent {
                   />
                 }
               />
-            </EuiPageContentBody>
+            </EuiPageSection>
           );
         }}
       </RemoteClustersProvider>
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js
index e1f49e8cdb60f..91e262fa84818 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js
@@ -8,10 +8,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-} from '@elastic/eui';
+import { EuiPageSection } from '@elastic/eui';
 
 import { setBreadcrumbs, listBreadcrumb, addBreadcrumb } from '../../services/breadcrumbs';
 import {
@@ -51,24 +48,17 @@ export class FollowerIndexAdd extends PureComponent {
         {({ isLoading, error, remoteClusters }) => {
           if (isLoading) {
             return (
-              <EuiPageContent
-                verticalPosition="center"
-                horizontalPosition="center"
-                color="subdued"
-                data-test-subj="remoteClustersLoading"
-              >
-                <SectionLoading>
-                  <FormattedMessage
-                    id="xpack.crossClusterReplication.followerIndexCreateForm.loadingRemoteClustersMessage"
-                    defaultMessage="Loading remote clusters…"
-                  />
-                </SectionLoading>
-              </EuiPageContent>
+              <SectionLoading>
+                <FormattedMessage
+                  id="xpack.crossClusterReplication.followerIndexCreateForm.loadingRemoteClustersMessage"
+                  defaultMessage="Loading remote clusters…"
+                />
+              </SectionLoading>
             );
           }
 
           return (
-            <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+            <EuiPageSection restrictWidth style={{ width: '100%' }}>
               <FollowerIndexPageTitle
                 title={
                   <FormattedMessage
@@ -91,7 +81,7 @@ export class FollowerIndexAdd extends PureComponent {
                   />
                 }
               />
-            </EuiPageContentBody>
+            </EuiPageSection>
           );
         }}
       </RemoteClustersProvider>
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js
index e2dc0bc2ff06c..25b9fd844d0b0 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js
@@ -10,13 +10,7 @@ import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import {
-  EuiButton,
-  EuiConfirmModal,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiEmptyPrompt,
-} from '@elastic/eui';
+import { EuiButton, EuiConfirmModal, EuiPageSection, EuiPageTemplate } from '@elastic/eui';
 
 import { setBreadcrumbs, listBreadcrumb, editBreadcrumb } from '../../services/breadcrumbs';
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
@@ -103,11 +97,7 @@ export class FollowerIndexEdit extends PureComponent {
   closeConfirmModal = () => this.setState({ showConfirmModal: false });
 
   renderLoading(loadingTitle) {
-    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <SectionLoading>{loadingTitle}</SectionLoading>
-      </EuiPageContent>
-    );
+    return <SectionLoading>{loadingTitle}</SectionLoading>;
   }
 
   renderGetFollowerIndexError(error) {
@@ -131,33 +121,32 @@ export class FollowerIndexEdit extends PureComponent {
         : error;
 
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
-        <EuiEmptyPrompt
-          iconType="warning"
-          title={
-            <h2>
-              <FormattedMessage
-                id="xpack.crossClusterReplication.followerIndexEditForm.loadingErrorTitle"
-                defaultMessage="Error loading follower index"
-              />
-            </h2>
-          }
-          body={<p>{errorMessage}</p>}
-          actions={
-            <EuiButton
-              {...reactRouterNavigate(this.props.history, `/follower_indices`)}
-              color="danger"
-              flush="left"
-              iconType="arrowLeft"
-            >
-              <FormattedMessage
-                id="xpack.crossClusterReplication.followerIndexEditForm.viewFollowerIndicesButtonLabel"
-                defaultMessage="View follower indices"
-              />
-            </EuiButton>
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        color="danger"
+        iconType="warning"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.crossClusterReplication.followerIndexEditForm.loadingErrorTitle"
+              defaultMessage="Error loading follower index"
+            />
+          </h2>
+        }
+        body={<p>{errorMessage}</p>}
+        actions={
+          <EuiButton
+            {...reactRouterNavigate(this.props.history, `/follower_indices`)}
+            color="danger"
+            flush="left"
+            iconType="arrowLeft"
+          >
+            <FormattedMessage
+              id="xpack.crossClusterReplication.followerIndexEditForm.viewFollowerIndicesButtonLabel"
+              defaultMessage="View follower indices"
+            />
+          </EuiButton>
+        }
+      />
     );
   }
 
@@ -257,7 +246,7 @@ export class FollowerIndexEdit extends PureComponent {
           }
 
           return (
-            <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+            <EuiPageSection restrictWidth style={{ width: '100%' }}>
               <FollowerIndexPageTitle
                 title={
                   <FormattedMessage
@@ -284,7 +273,7 @@ export class FollowerIndexEdit extends PureComponent {
               />
 
               {showConfirmModal && this.renderConfirmModal()}
-            </EuiPageContentBody>
+            </EuiPageSection>
           );
         }}
       </RemoteClustersProvider>
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js
index 2911cc6c65995..f7d944b56bdbf 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js
@@ -9,13 +9,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiButton,
-  EuiEmptyPrompt,
-  EuiText,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiButton, EuiText, EuiSpacer, EuiPageTemplate } from '@elastic/eui';
 
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { extractQueryParams, PageError, PageLoading } from '../../../../shared_imports';
@@ -99,47 +93,40 @@ export class AutoFollowPatternList extends PureComponent {
 
   renderEmpty() {
     return (
-      <EuiPageContent
-        hasShadow={false}
-        paddingSize="none"
-        verticalPosition="center"
-        horizontalPosition="center"
-      >
-        <EuiEmptyPrompt
-          iconType="managementApp"
-          data-test-subj="emptyPrompt"
-          title={
-            <h1>
-              <FormattedMessage
-                id="xpack.crossClusterReplication.autoFollowPatternList.emptyPromptTitle"
-                defaultMessage="Create your first auto-follow pattern"
-              />
-            </h1>
-          }
-          body={
-            <p>
-              <FormattedMessage
-                id="xpack.crossClusterReplication.autoFollowPatternList.emptyPromptDescription"
-                defaultMessage="Use an auto-follow pattern to automatically replicate indices from
-                a remote cluster."
-              />
-            </p>
-          }
-          actions={
-            <EuiButton
-              {...reactRouterNavigate(this.props.history, `/auto_follow_patterns/add`)}
-              fill
-              iconType="plusInCircle"
-              data-test-subj="createAutoFollowPatternButton"
-            >
-              <FormattedMessage
-                id="xpack.crossClusterReplication.addAutoFollowPatternButtonLabel"
-                defaultMessage="Create auto-follow pattern"
-              />
-            </EuiButton>
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        iconType="managementApp"
+        data-test-subj="emptyPrompt"
+        title={
+          <h1>
+            <FormattedMessage
+              id="xpack.crossClusterReplication.autoFollowPatternList.emptyPromptTitle"
+              defaultMessage="Create your first auto-follow pattern"
+            />
+          </h1>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.crossClusterReplication.autoFollowPatternList.emptyPromptDescription"
+              defaultMessage="Use an auto-follow pattern to automatically replicate indices from
+              a remote cluster."
+            />
+          </p>
+        }
+        actions={
+          <EuiButton
+            {...reactRouterNavigate(this.props.history, `/auto_follow_patterns/add`)}
+            fill
+            iconType="plusInCircle"
+            data-test-subj="createAutoFollowPatternButton"
+          >
+            <FormattedMessage
+              id="xpack.crossClusterReplication.addAutoFollowPatternButtonLabel"
+              defaultMessage="Create auto-follow pattern"
+            />
+          </EuiButton>
+        }
+      />
     );
   }
 
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js
index c3cc15e016168..ab89dce7e7247 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js
@@ -9,13 +9,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiButton,
-  EuiEmptyPrompt,
-  EuiText,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiButton, EuiText, EuiSpacer, EuiPageTemplate } from '@elastic/eui';
 
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { extractQueryParams, PageLoading, PageError } from '../../../../shared_imports';
@@ -94,46 +88,39 @@ export class FollowerIndicesList extends PureComponent {
 
   renderEmpty() {
     return (
-      <EuiPageContent
-        hasShadow={false}
-        paddingSize="none"
-        verticalPosition="center"
-        horizontalPosition="center"
-      >
-        <EuiEmptyPrompt
-          iconType="managementApp"
-          data-test-subj="emptyPrompt"
-          title={
-            <h1>
-              <FormattedMessage
-                id="xpack.crossClusterReplication.followerIndexList.emptyPromptTitle"
-                defaultMessage="Create your first follower index"
-              />
-            </h1>
-          }
-          body={
-            <p>
-              <FormattedMessage
-                id="xpack.crossClusterReplication.followerIndexList.emptyPromptDescription"
-                defaultMessage="Use a follower index to replicate a leader index on a remote cluster."
-              />
-            </p>
-          }
-          actions={
-            <EuiButton
-              {...reactRouterNavigate(this.props.history, `/follower_indices/add`)}
-              fill
-              iconType="plusInCircle"
-              data-test-subj="createFollowerIndexButton"
-            >
-              <FormattedMessage
-                id="xpack.crossClusterReplication.addFollowerButtonLabel"
-                defaultMessage="Create a follower index"
-              />
-            </EuiButton>
-          }
-        />
-      </EuiPageContent>
+      <EuiPageTemplate.EmptyPrompt
+        iconType="managementApp"
+        data-test-subj="emptyPrompt"
+        title={
+          <h1>
+            <FormattedMessage
+              id="xpack.crossClusterReplication.followerIndexList.emptyPromptTitle"
+              defaultMessage="Create your first follower index"
+            />
+          </h1>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.crossClusterReplication.followerIndexList.emptyPromptDescription"
+              defaultMessage="Use a follower index to replicate a leader index on a remote cluster."
+            />
+          </p>
+        }
+        actions={
+          <EuiButton
+            {...reactRouterNavigate(this.props.history, `/follower_indices/add`)}
+            fill
+            iconType="plusInCircle"
+            data-test-subj="createFollowerIndexButton"
+          >
+            <FormattedMessage
+              id="xpack.crossClusterReplication.addFollowerButtonLabel"
+              defaultMessage="Create a follower index"
+            />
+          </EuiButton>
+        }
+      />
     );
   }