[Upgrade Assistant] Migrate to new page layout (#101691)

x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana.test.ts

@@ -182,9 +182,7 @@ describe('Kibana deprecations', () => {
       component.update();
 
       expect(exists('kibanaRequestError')).toBe(true);
-      expect(find('kibanaRequestError').text()).toContain(
-        'Could not retrieve Kibana deprecations.'
-      );
+      expect(find('kibanaRequestError').text()).toContain('Could not retrieve Kibana deprecations');
     });
 
     test('handles deprecation service error', async () => {
@@ -217,7 +215,7 @@ describe('Kibana deprecations', () => {
       // Verify top-level callout renders
       expect(exists('kibanaPluginError')).toBe(true);
       expect(find('kibanaPluginError').text()).toContain(
-        'Not all Kibana deprecations were retrieved successfully.'
+        'Not all Kibana deprecations were retrieved successfully'
       );
 
       // Open all deprecations

x-pack/plugins/upgrade_assistant/public/application/components/coming_soon_prompt.tsx

@@ -16,7 +16,7 @@ export const ComingSoonPrompt: React.FunctionComponent = () => {
   const { ELASTIC_WEBSITE_URL } = docLinks;
 
   return (
-    <EuiPageContent>
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
       <EuiEmptyPrompt
         iconType="wrench"
         data-test-subj="comingSoonPrompt"

x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations.tsx

@@ -11,14 +11,12 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiPageBody,
   EuiPageHeader,
   EuiTabbedContent,
   EuiTabbedContentTab,
-  EuiPageContent,
-  EuiPageContentBody,
   EuiToolTip,
   EuiNotificationBadge,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -162,51 +160,49 @@ export const EsDeprecationsContent = withRouter(
     }, [api, tabName, isLoading]);
 
     return (
-      <EuiPageBody>
-        <EuiPageContent>
-          <EuiPageHeader
-            pageTitle={i18nTexts.pageTitle}
-            description={i18nTexts.pageDescription}
-            rightSideItems={[
-              <EuiButtonEmpty
-                href={docLinks.links.upgradeAssistant}
-                target="_blank"
-                iconType="help"
-                data-test-subj="documentationLink"
-              >
-                {i18nTexts.docLinkText}
-              </EuiButtonEmpty>,
-            ]}
-          >
-            <EuiToolTip position="bottom" content={i18nTexts.backupDataButton.tooltipText}>
-              <EuiButton
-                fill
-                href={getUrlForApp('management', {
-                  path: 'data/snapshot_restore',
-                })}
-                iconType="popout"
-                iconSide="right"
-                target="_blank"
-              >
-                {i18nTexts.backupDataButton.label}
-              </EuiButton>
-            </EuiToolTip>
-          </EuiPageHeader>
+      <>
+        <EuiPageHeader
+          pageTitle={i18nTexts.pageTitle}
+          description={i18nTexts.pageDescription}
+          rightSideItems={[
+            <EuiButtonEmpty
+              href={docLinks.links.upgradeAssistant}
+              target="_blank"
+              iconType="help"
+              data-test-subj="documentationLink"
+            >
+              {i18nTexts.docLinkText}
+            </EuiButtonEmpty>,
+          ]}
+        >
+          <EuiToolTip position="bottom" content={i18nTexts.backupDataButton.tooltipText}>
+            <EuiButton
+              fill
+              href={getUrlForApp('management', {
+                path: 'data/snapshot_restore',
+              })}
+              iconType="popout"
+              iconSide="right"
+              target="_blank"
+            >
+              {i18nTexts.backupDataButton.label}
+            </EuiButton>
+          </EuiToolTip>
+        </EuiPageHeader>
 
-          <EuiPageContentBody>
-            <EuiTabbedContent
-              data-test-subj={
-                telemetryState === TelemetryState.Running
-                  ? 'upgradeAssistantTelemetryRunning'
-                  : undefined
-              }
-              tabs={tabs}
-              onTabClick={onTabClick}
-              selectedTab={tabs.find((tab) => tab.id === tabName)}
-            />
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPageBody>
+        <EuiSpacer size="l" />
+
+        <EuiTabbedContent
+          data-test-subj={
+            telemetryState === TelemetryState.Running
+              ? 'upgradeAssistantTelemetryRunning'
+              : undefined
+          }
+          tabs={tabs}
+          onTabClick={onTabClick}
+          selectedTab={tabs.find((tab) => tab.id === tabName)}
+        />
+      </>
     );
   }
 );

x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecation_errors.tsx

@@ -7,44 +7,67 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiCallOut } from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
 
 interface Props {
   errorType: 'pluginError' | 'requestError';
 }
 
 const i18nTexts = {
-  pluginError: i18n.translate('xpack.upgradeAssistant.kibanaDeprecationErrors.pluginErrorMessage', {
-    defaultMessage:
-      'Not all Kibana deprecations were retrieved successfully. This list may be incomplete. Check the Kibana server logs for errors.',
-  }),
-  loadingError: i18n.translate(
-    'xpack.upgradeAssistant.kibanaDeprecationErrors.loadingErrorMessage',
-    {
-      defaultMessage:
-        'Could not retrieve Kibana deprecations. Check the Kibana server logs for errors.',
-    }
-  ),
+  pluginError: {
+    title: i18n.translate('xpack.upgradeAssistant.kibanaDeprecationErrors.pluginErrorTitle', {
+      defaultMessage: 'Not all Kibana deprecations were retrieved successfully',
+    }),
+    description: i18n.translate(
+      'xpack.upgradeAssistant.kibanaDeprecationErrors.pluginErrorDescription',
+      {
+        defaultMessage: 'Check the Kibana server logs for errors.',
+      }
+    ),
+  },
+  loadingError: {
+    title: i18n.translate('xpack.upgradeAssistant.kibanaDeprecationErrors.loadingErrorTitle', {
+      defaultMessage: 'Could not retrieve Kibana deprecations',
+    }),
+    description: i18n.translate(
+      'xpack.upgradeAssistant.kibanaDeprecationErrors.loadingErrorDescription',
+      {
+        defaultMessage: 'Check the Kibana server logs for errors.',
+      }
+    ),
+  },
 };
 
 export const KibanaDeprecationErrors: React.FunctionComponent<Props> = ({ errorType }) => {
   if (errorType === 'pluginError') {
     return (
-      <EuiCallOut
-        title={i18nTexts.pluginError}
-        color="warning"
-        iconType="alert"
+      <EuiPageContent
+        verticalPosition="center"
+        horizontalPosition="center"
+        color="danger"
         data-test-subj="kibanaPluginError"
-      />
+      >
+        <EuiEmptyPrompt
+          iconType="alert"
+          title={<h2>{i18nTexts.pluginError.title}</h2>}
+          body={<p>{i18nTexts.pluginError.description}</p>}
+        />
+      </EuiPageContent>
     );
   }
 
   return (
-    <EuiCallOut
-      title={i18nTexts.loadingError}
+    <EuiPageContent
+      verticalPosition="center"
+      horizontalPosition="center"
       color="danger"
-      iconType="alert"
       data-test-subj="kibanaRequestError"
-    />
+    >
+      <EuiEmptyPrompt
+        iconType="alert"
+        title={<h2>{i18nTexts.loadingError.title}</h2>}
+        body={<p>{i18nTexts.loadingError.description}</p>}
+      />
+    </EuiPageContent>
   );
 };

x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecations.tsx

@@ -8,14 +8,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import {
-  EuiButtonEmpty,
-  EuiPageBody,
-  EuiPageHeader,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiButtonEmpty, EuiPageContent, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import type { DomainDeprecationDetails } from 'kibana/public';
@@ -135,46 +128,28 @@ export const KibanaDeprecationsContent = withRouter(({ history }: RouteComponent
     getAllDeprecations();
   }, [deprecations, getAllDeprecations]);
 
-  const getPageContent = () => {
-    if (kibanaDeprecations && kibanaDeprecations.length === 0) {
-      return (
+  if (kibanaDeprecations && kibanaDeprecations.length === 0) {
+    return (
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
         <NoDeprecationsPrompt
           deprecationType={i18nTexts.deprecationLabel}
           navigateToOverviewPage={() => history.push('/overview')}
         />
-      );
-    }
-
-    let content: React.ReactNode;
-
-    if (isLoading) {
-      content = <SectionLoading>{i18nTexts.isLoading}</SectionLoading>;
-    } else if (kibanaDeprecations?.length) {
-      content = (
-        <KibanaDeprecationList
-          deprecations={kibanaDeprecations}
-          showStepsModal={toggleStepsModal}
-          showResolveModal={toggleResolveModal}
-          reloadDeprecations={getAllDeprecations}
-          isLoading={isLoading}
-        />
-      );
-    } else if (error) {
-      content = <KibanaDeprecationErrors errorType="requestError" />;
-    }
+      </EuiPageContent>
+    );
+  }
 
+  if (isLoading) {
+    return (
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>{i18nTexts.isLoading}</SectionLoading>
+      </EuiPageContent>
+    );
+  } else if (kibanaDeprecations?.length) {
     return (
       <div data-test-subj="kibanaDeprecationsContent">
-        <EuiSpacer />
-        {content}
-      </div>
-    );
-  };
-
-  return (
-    <EuiPageBody>
-      <EuiPageContent>
         <EuiPageHeader
+          bottomBorder
           pageTitle={i18nTexts.pageTitle}
           description={i18nTexts.pageDescription}
           rightSideItems={[
@@ -189,23 +164,33 @@ export const KibanaDeprecationsContent = withRouter(({ history }: RouteComponent
           ]}
         />
 
-        <EuiPageContentBody>
-          {getPageContent()}
+        <EuiSpacer size="l" />
 
-          {stepsModalContent && (
-            <StepsModal closeModal={() => toggleStepsModal()} modalContent={stepsModalContent} />
-          )}
+        <KibanaDeprecationList
+          deprecations={kibanaDeprecations}
+          showStepsModal={toggleStepsModal}
+          showResolveModal={toggleResolveModal}
+          reloadDeprecations={getAllDeprecations}
+          isLoading={isLoading}
+        />
 
-          {resolveModalContent && (
-            <ResolveDeprecationModal
-              closeModal={() => toggleResolveModal()}
-              resolveDeprecation={resolveDeprecation}
-              isResolvingDeprecation={isResolvingDeprecation}
-              deprecation={resolveModalContent}
-            />
-          )}
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
-  );
+        {stepsModalContent && (
+          <StepsModal closeModal={() => toggleStepsModal()} modalContent={stepsModalContent} />
+        )}
+
+        {resolveModalContent && (
+          <ResolveDeprecationModal
+            closeModal={() => toggleResolveModal()}
+            resolveDeprecation={resolveDeprecation}
+            isResolvingDeprecation={isResolvingDeprecation}
+            deprecation={resolveModalContent}
+          />
+        )}
+      </div>
+    );
+  } else if (error) {
+    return <KibanaDeprecationErrors errorType="requestError" />;
+  }
+
+  return null;
 });

x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx

@@ -8,11 +8,9 @@
 import React, { FunctionComponent, useEffect } from 'react';
 
 import {
-  EuiPageContent,
   EuiPageContentBody,
   EuiText,
   EuiPageHeader,
-  EuiPageBody,
   EuiButtonEmpty,
   EuiFlexItem,
   EuiFlexGroup,
@@ -91,72 +89,68 @@ export const DeprecationsOverview: FunctionComponent<Props> = ({ history }) => {
   }, [breadcrumbs]);
 
   return (
-    <EuiPageBody>
-      <EuiPageContent data-test-subj="overviewPageContent">
-        <EuiPageHeader
-          pageTitle={i18nTexts.pageTitle}
-          rightSideItems={[
-            <EuiButtonEmpty
-              href={docLinks.links.upgradeAssistant}
-              target="_blank"
-              iconType="help"
-              data-test-subj="documentationLink"
-            >
-              {i18nTexts.docLink}
-            </EuiButtonEmpty>,
-          ]}
-        />
+    <div data-test-subj="overviewPageContent">
+      <EuiPageHeader
+        bottomBorder
+        pageTitle={i18nTexts.pageTitle}
+        description={i18nTexts.pageDescription}
+        rightSideItems={[
+          <EuiButtonEmpty
+            href={docLinks.links.upgradeAssistant}
+            target="_blank"
+            iconType="help"
+            data-test-subj="documentationLink"
+          >
+            {i18nTexts.docLink}
+          </EuiButtonEmpty>,
+        ]}
+      />
 
-        <EuiPageContentBody>
-          <>
-            <EuiText data-test-subj="overviewDetail" grow={false}>
-              <p>{i18nTexts.pageDescription}</p>
-            </EuiText>
+      <EuiSpacer size="l" />
 
-            <EuiSpacer />
+      <EuiPageContentBody>
+        <>
+          {/* Remove this in last minor of the current major (e.g., 7.15) */}
+          <LatestMinorBanner />
 
-            {/* Remove this in last minor of the current major (e.g., 7.15) */}
-            <LatestMinorBanner />
+          <EuiSpacer size="xl" />
 
-            <EuiSpacer size="xl" />
+          {/* Deprecation stats */}
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <ESDeprecationStats history={history} />
+            </EuiFlexItem>
 
-            {/* Deprecation stats */}
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <ESDeprecationStats history={history} />
-              </EuiFlexItem>
+            <EuiFlexItem>
+              <KibanaDeprecationStats history={history} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
-              <EuiFlexItem>
-                <KibanaDeprecationStats history={history} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
+          <EuiSpacer />
 
-            <EuiSpacer />
+          {/* Deprecation logging */}
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiTitle size="s">
+                <h2>{i18nTexts.deprecationLoggingTitle}</h2>
+              </EuiTitle>
 
-            {/* Deprecation logging */}
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiTitle size="s">
-                  <h2>{i18nTexts.deprecationLoggingTitle}</h2>
-                </EuiTitle>
+              <EuiText>
+                <p>
+                  {i18nTexts.getDeprecationLoggingDescription(
+                    `${nextMajor}.x`,
+                    docLinks.links.elasticsearch.deprecationLogging
+                  )}
+                </p>
+              </EuiText>
 
-                <EuiText>
-                  <p>
-                    {i18nTexts.getDeprecationLoggingDescription(
-                      `${nextMajor}.x`,
-                      docLinks.links.elasticsearch.deprecationLogging
-                    )}
-                  </p>
-                </EuiText>
+              <EuiSpacer size="m" />
 
-                <EuiSpacer size="m" />
-
-                <DeprecationLoggingToggle />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </>
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
+              <DeprecationLoggingToggle />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      </EuiPageContentBody>
+    </div>
   );
 };