[Upgrade Assistant] Migrate all usages of EuiPage*_Deprecated (#163127)

elastic · Aug 21, 2023 · b5af8c8 · b5af8c8
1 parent 9c17de6
commit b5af8c8
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 154 deletions.
diff --git a/..._ui_shared/__packages_do_not_import__/authorization/components/not_authorized_section.tsx b/..._ui_shared/__packages_do_not_import__/authorization/components/not_authorized_section.tsx
@@ -12,8 +12,14 @@ import { EuiEmptyPrompt } from '@elastic/eui';
 interface Props {
   title: React.ReactNode;
   message: React.ReactNode | string;
+  dataTestSubj?: string;
 }
 
-export const NotAuthorizedSection = ({ title, message }: Props) => (
-  <EuiEmptyPrompt iconType="securityApp" title={<h2>{title}</h2>} body={<p>{message}</p>} />
+export const NotAuthorizedSection = ({ title, message, dataTestSubj }: Props) => (
+  <EuiEmptyPrompt
+    iconType="securityApp"
+    data-test-subj={dataTestSubj ? dataTestSubj : 'notAuthorizedSection'}
+    title={<h2>{title}</h2>}
+    body={<p>{message}</p>}
+  />
 );
diff --git a/x-pack/plugins/upgrade_assistant/public/application/app.tsx b/x-pack/plugins/upgrade_assistant/public/application/app.tsx
@@ -11,11 +11,7 @@ import { Redirect } from 'react-router-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 
 import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiEmptyPrompt,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiLoadingSpinner,
-} from '@elastic/eui';
+import { EuiLoadingSpinner, EuiPageTemplate } from '@elastic/eui';
 import { ScopedHistory } from '@kbn/core/public';
 
 import { API_BASE_PATH } from '../../common/constants';
@@ -52,94 +48,72 @@ const AppHandlingClusterUpgradeState: React.FunctionComponent = () => {
 
   if (missingManageSpacesPrivilege) {
     return (
-      <EuiPageContent
-        verticalPosition="center"
-        horizontalPosition="center"
-        color="subdued"
-        data-test-subj="missingKibanaPrivilegesMessage"
-      >
-        <NotAuthorizedSection
-          title={
-            <FormattedMessage
-              id="xpack.upgradeAssistant.app.deniedPrivilegeTitle"
-              defaultMessage="Kibana admin role required"
-            />
-          }
-          message={
-            <FormattedMessage
-              id="xpack.upgradeAssistant.app.deniedPrivilegeDescription"
-              defaultMessage="To use Upgrade Assistant and resolve deprecation issues, you must have access to manage all Kibana spaces."
-            />
-          }
-        />
-      </EuiPageContent>
+      <NotAuthorizedSection
+        dataTestSubj="missingKibanaPrivilegesMessage"
+        title={
+          <FormattedMessage
+            id="xpack.upgradeAssistant.app.deniedPrivilegeTitle"
+            defaultMessage="Kibana admin role required"
+          />
+        }
+        message={
+          <FormattedMessage
+            id="xpack.upgradeAssistant.app.deniedPrivilegeDescription"
+            defaultMessage="To use Upgrade Assistant and resolve deprecation issues, you must have access to manage all Kibana spaces."
+          />
+        }
+      />
     );
   }
 
   if (clusterUpgradeState === 'isUpgrading') {
     return (
-      <EuiPageContent
-        hasShadow={false}
-        paddingSize="none"
-        verticalPosition="center"
-        horizontalPosition="center"
-        data-test-subj="isUpgradingMessage"
-      >
-        <EuiEmptyPrompt
-          iconType="logoElasticsearch"
-          title={
-            <h1>
-              <FormattedMessage
-                id="xpack.upgradeAssistant.upgradingTitle"
-                defaultMessage="Your cluster is upgrading"
-              />
-            </h1>
-          }
-          body={
-            <p>
-              <FormattedMessage
-                id="xpack.upgradeAssistant.upgradingDescription"
-                defaultMessage="One or more Elasticsearch nodes have a newer version of
+      <EuiPageTemplate.EmptyPrompt
+        iconType="logoElasticsearch"
+        title={
+          <h1>
+            <FormattedMessage
+              id="xpack.upgradeAssistant.upgradingTitle"
+              defaultMessage="Your cluster is upgrading"
+            />
+          </h1>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.upgradeAssistant.upgradingDescription"
+              defaultMessage="One or more Elasticsearch nodes have a newer version of
                 Elasticsearch than Kibana. Once all your nodes are upgraded, upgrade Kibana."
-              />
-            </p>
-          }
-          data-test-subj="emptyPrompt"
-        />
-      </EuiPageContent>
+            />
+          </p>
+        }
+        data-test-subj="isUpgradingMessage"
+      />
     );
   }
 
   if (clusterUpgradeState === 'isUpgradeComplete') {
     return (
-      <EuiPageContent
-        hasShadow={false}
-        paddingSize="none"
-        verticalPosition="center"
-        horizontalPosition="center"
+      <EuiPageTemplate.EmptyPrompt
+        iconType="logoElasticsearch"
+        title={
+          <h1>
+            <FormattedMessage
+              id="xpack.upgradeAssistant.upgradedTitle"
+              defaultMessage="Your cluster has been upgraded"
+            />
+          </h1>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.upgradeAssistant.upgradedDescription"
+              defaultMessage="All Elasticsearch nodes have been upgraded. You may now upgrade Kibana."
+            />
+          </p>
+        }
         data-test-subj="isUpgradeCompleteMessage"
-      >
-        <EuiEmptyPrompt
-          iconType="logoElasticsearch"
-          title={
-            <h1>
-              <FormattedMessage
-                id="xpack.upgradeAssistant.upgradedTitle"
-                defaultMessage="Your cluster has been upgraded"
-              />
-            </h1>
-          }
-          body={
-            <p>
-              <FormattedMessage
-                id="xpack.upgradeAssistant.upgradedDescription"
-                defaultMessage="All Elasticsearch nodes have been upgraded. You may now upgrade Kibana."
-              />
-            </p>
-          }
-          data-test-subj="emptyPrompt"
-        />
-      </EuiPageContent>
+      />
     );
   }
 
@@ -170,16 +144,7 @@ export const App = ({ history }: { history: ScopedHistory }) => {
 
   // Prevent flicker of the underlying UI while we wait for the status to fetch.
   if (isLoading && isInitialRequest) {
-    return (
-      <EuiPageContent
-        hasShadow={false}
-        paddingSize="none"
-        verticalPosition="center"
-        horizontalPosition="center"
-      >
-        <EuiEmptyPrompt body={<EuiLoadingSpinner size="l" />} />
-      </EuiPageContent>
-    );
+    return <EuiPageTemplate.EmptyPrompt body={<EuiLoadingSpinner size="l" />} />;
   }
 
   return (

diff --git a/...grade_assistant/public/application/components/es_deprecation_logs/es_deprecation_logs.tsx b/...grade_assistant/public/application/components/es_deprecation_logs/es_deprecation_logs.tsx
@@ -12,7 +12,7 @@ import {
   EuiButtonEmpty,
   EuiSpacer,
   EuiPageBody,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -40,7 +40,7 @@ export const EsDeprecationLogs: FunctionComponent = () => {
 
   return (
     <EuiPageBody restrictWidth={true} data-test-subj="esDeprecationLogs">
-      <EuiPageContentBody color="transparent" paddingSize="none">
+      <EuiPageSection color="transparent" paddingSize="none">
         <EuiPageHeader
           bottomBorder
           pageTitle={i18n.translate('xpack.upgradeAssistant.esDeprecationLogs.pageTitle', {
@@ -68,7 +68,7 @@ export const EsDeprecationLogs: FunctionComponent = () => {
         <EuiSpacer size="l" />
 
         <FixDeprecationLogs />
-      </EuiPageContentBody>
+      </EuiPageSection>
     </EuiPageBody>
   );
 };
diff --git a/...ugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations.tsx b/...ugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations.tsx
@@ -8,13 +8,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import {
-  EuiPageHeader,
-  EuiSpacer,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiLink,
-  EuiCallOut,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer, EuiLink, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DocLinksStart } from '@kbn/core/public';
@@ -155,21 +149,15 @@ export const EsDeprecations = withRouter(({ history }: RouteComponentProps) => {
   }
 
   if (isLoading) {
-    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <SectionLoading>{i18nTexts.isLoading}</SectionLoading>
-      </EuiPageContent>
-    );
+    return <SectionLoading>{i18nTexts.isLoading}</SectionLoading>;
   }
 
   if (esDeprecations?.deprecations?.length === 0) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <NoDeprecationsPrompt
-          deprecationType="Elasticsearch"
-          navigateToOverviewPage={() => history.push('/overview')}
-        />
-      </EuiPageContent>
+      <NoDeprecationsPrompt
+        deprecationType="Elasticsearch"
+        navigateToOverviewPage={() => history.push('/overview')}
+      />
     );
   }
 

diff --git a/...grade_assistant/public/application/components/kibana_deprecations/kibana_deprecations.tsx b/...grade_assistant/public/application/components/kibana_deprecations/kibana_deprecations.tsx
@@ -8,12 +8,7 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import {
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageHeader,
-  EuiSpacer,
-  EuiCallOut,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
 
@@ -234,21 +229,15 @@ export const KibanaDeprecations = withRouter(({ history }: RouteComponentProps)
   }
 
   if (isLoading) {
-    return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <SectionLoading>{i18nTexts.isLoading}</SectionLoading>
-      </EuiPageContent>
-    );
+    return <SectionLoading>{i18nTexts.isLoading}</SectionLoading>;
   }
 
   if (kibanaDeprecations?.length === 0) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <NoDeprecationsPrompt
-          deprecationType={i18nTexts.deprecationLabel}
-          navigateToOverviewPage={() => history.push('/overview')}
-        />
-      </EuiPageContent>
+      <NoDeprecationsPrompt
+        deprecationType={i18nTexts.deprecationLabel}
+        navigateToOverviewPage={() => history.push('/overview')}
+      />
     );
   }
 

diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx
@@ -15,7 +15,7 @@ import {
   EuiSpacer,
   EuiLink,
   EuiPageBody,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
 } from '@elastic/eui';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 
@@ -69,7 +69,7 @@ export const Overview = withRouter(({ history }: RouteComponentProps) => {
 
   return (
     <EuiPageBody restrictWidth={true} data-test-subj="overview">
-      <EuiPageContentBody color="transparent" paddingSize="none">
+      <EuiPageSection color="transparent" paddingSize="none">
         <EuiPageHeader
           bottomBorder
           pageTitle={i18n.translate('xpack.upgradeAssistant.overview.pageTitle', {
@@ -135,7 +135,7 @@ export const Overview = withRouter(({ history }: RouteComponentProps) => {
             ].filter(Boolean) as EuiStepProps[]
           }
         />
-      </EuiPageContentBody>
+      </EuiPageSection>
     </EuiPageBody>
   );
 });
diff --git a/...pgrade_assistant/public/application/components/shared/deprecations_page_loading_error.tsx b/...pgrade_assistant/public/application/components/shared/deprecations_page_loading_error.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiPageContent_Deprecated as EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { DeprecationSource } from '../../../../common/types';
@@ -20,23 +20,18 @@ export const DeprecationsPageLoadingError: FunctionComponent<Props> = ({
   deprecationSource,
   message,
 }) => (
-  <EuiPageContent
-    verticalPosition="center"
-    horizontalPosition="center"
+  <EuiPageTemplate.EmptyPrompt
     color="danger"
+    iconType="warning"
     data-test-subj="deprecationsPageLoadingError"
-  >
-    <EuiEmptyPrompt
-      iconType="warning"
-      title={
-        <h2>
-          {i18n.translate('xpack.upgradeAssistant.deprecationsPageLoadingError.title', {
-            defaultMessage: 'Could not retrieve {deprecationSource} deprecation issues',
-            values: { deprecationSource },
-          })}
-        </h2>
-      }
-      body={message}
-    />
-  </EuiPageContent>
+    title={
+      <h2>
+        {i18n.translate('xpack.upgradeAssistant.deprecationsPageLoadingError.title', {
+          defaultMessage: 'Could not retrieve {deprecationSource} deprecation issues',
+          values: { deprecationSource },
+        })}
+      </h2>
+    }
+    body={message}
+  />
 );
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/no_deprecations.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/shared/no_deprecations.tsx
@@ -7,7 +7,7 @@
 
 import React, { FunctionComponent } from 'react';
 
-import { EuiLink, EuiEmptyPrompt } from '@elastic/eui';
+import { EuiLink, EuiPageTemplate } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
@@ -46,7 +46,7 @@ export const NoDeprecationsPrompt: FunctionComponent<Props> = ({
   navigateToOverviewPage,
 }) => {
   return (
-    <EuiEmptyPrompt
+    <EuiPageTemplate.EmptyPrompt
       iconType="check"
       data-test-subj="noDeprecationsPrompt"
       title={<h2>{i18nTexts.getEmptyPromptTitle(deprecationType)}</h2>}