Migrate from deprecated EUI components (#161548)

## Summary

Fix https://github.com/elastic/kibana/issues/161424

Migrate away from deprecated EUI components for Core-owned code.

Note: I only tested the production (and examples) pages properly, I
didn't make sure the test plugins where displayed correctly, as long as
the data structure was still here for the tests to pass.

### Screenshots

#### Status page

<img width="1388" alt="Screenshot 2023-07-10 at 17 14 24" 

src="d15adffa-d4fb-4dab-ad91-691a4c103541">

#### AppNotFound page

<img width="1352" alt="Screenshot 2023-07-10 at 17 14 40"
src="77dcc958-db53-4ec8-9a7f-af4ea0804a96">

#### Generated plugin landing page

<img width="1906" alt="Screenshot 2023-07-10 at 17 15 44"
src="7a45d1a3-181d-44c5-a4a1-d3bdb2ba6ee9">

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

examples/preboot_example/public/app.tsx

@@ -12,7 +12,7 @@ import {
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPageTemplate_Deprecated as EuiPageTemplate,
+  EuiPageTemplate,
   EuiPanel,
   EuiText,
 } from '@elastic/eui';
@@ -73,30 +73,21 @@ export const App = ({ http, token }: { http: HttpSetup; token?: string }) => {
 
   if (!isSetupModeActive) {
     return (
-      <EuiPageTemplate
-        restrictWidth={false}
-        template="empty"
-        pageHeader={{
-          iconType: 'logoElastic',
-          pageTitle: 'Welcome to Elastic',
-        }}
-      >
+      <EuiPageTemplate restrictWidth={false}>
+        <EuiPageTemplate.Header iconType="logoElastic" pageTitle="Welcome to Elastic" />
+        <EuiPageTemplate.Section>
           <EuiPanel>
             <EuiText>Kibana server is not ready yet.</EuiText>
           </EuiPanel>
+        </EuiPageTemplate.Section>
       </EuiPageTemplate>
     );
   }
 
   return (
-    <EuiPageTemplate
-      restrictWidth={false}
-      template="empty"
-      pageHeader={{
-        iconType: 'logoElastic',
-        pageTitle: 'Welcome to Elastic',
-      }}
-    >
+    <EuiPageTemplate restrictWidth={false}>
+      <EuiPageTemplate.Header iconType="logoElastic" pageTitle="Welcome to Elastic" />
+      <EuiPageTemplate.Section>
         <EuiPanel>
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
@@ -214,6 +205,7 @@ export const App = ({ http, token }: { http: HttpSetup; token?: string }) => {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPanel>
+      </EuiPageTemplate.Section>
     </EuiPageTemplate>
   );
 };

examples/routing_example/public/app.tsx

@@ -10,12 +10,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppMountParameters } from '@kbn/core/public';
 import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageTemplate,
+  EuiPageSection,
   EuiText,
   EuiHorizontalRule,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
   EuiListGroup,
 } from '@elastic/eui';
 import { RandomNumberRouteExample } from './random_number_example';
@@ -34,14 +32,14 @@ function RoutingExplorer({
   getMessageById,
 }: Props) {
   return (
-    <EuiPage>
-      <EuiPageBody>
-        <EuiPageContent>
-          <EuiPageContentHeader>
+    <EuiPageTemplate>
+      <EuiPageTemplate.Header>
         <EuiText>
           <h1>Routing examples</h1>
         </EuiText>
-          </EuiPageContentHeader>
+      </EuiPageTemplate.Header>
+      <EuiPageTemplate.Section>
+        <EuiPageSection>
           <EuiText>
             <EuiListGroup
               listItems={[
@@ -79,9 +77,9 @@ function RoutingExplorer({
 
           <EuiHorizontalRule />
           <GetMessageRouteExample getMessageById={getMessageById} />
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+        </EuiPageSection>
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
   );
 }
 

packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx

@@ -6,20 +6,13 @@
  * Side Public License, v 1.
  */
 
-import {
-  EuiEmptyPrompt,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-} from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 export const AppNotFound = () => (
-  <EuiPage style={{ minHeight: '100%' }} data-test-subj="appNotFoundPageContent">
-    <EuiPageBody>
-      <EuiPageContent verticalPosition="center" horizontalPosition="center">
-        <EuiEmptyPrompt
+  <EuiPageTemplate data-test-subj="appNotFoundPageContent">
+    <EuiPageTemplate.EmptyPrompt
       iconType="warning"
       iconColor="danger"
       title={
@@ -39,7 +32,5 @@ export const AppNotFound = () => (
         </p>
       }
     />
-      </EuiPageContent>
-    </EuiPageBody>
-  </EuiPage>
+  </EuiPageTemplate>
 );

packages/core/apps/core-apps-browser-internal/src/errors/error_application.tsx

@@ -12,12 +12,7 @@ import type { History } from 'history';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n-react';
 
-import {
-  EuiEmptyPrompt,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-} from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { CoreThemeProvider } from '@kbn/core-theme-browser-internal';
 import type { IBasePath } from '@kbn/core-http-browser';
 import type { AppMountParameters } from '@kbn/core-application-browser';
@@ -36,18 +31,14 @@ const ErrorPage: React.FC<Props> = ({ title, children }) => {
     });
 
   return (
-    <EuiPage style={{ minHeight: '100%' }} data-test-subj="appRenderErrorPageContent">
-      <EuiPageBody>
-        <EuiPageContent verticalPosition="center" horizontalPosition="center">
-          <EuiEmptyPrompt
+    <EuiPageTemplate data-test-subj="appRenderErrorPageContent">
+      <EuiPageTemplate.EmptyPrompt
         iconType="warning"
         iconColor="danger"
         title={<h2>{title}</h2>}
         body={children}
       />
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+    </EuiPageTemplate>
   );
 };
 

packages/core/apps/core-apps-browser-internal/src/status/components/status_section.tsx

@@ -7,13 +7,7 @@
  */
 
 import React, { FC, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiPanel } from '@elastic/eui';
 import { StatusTable } from './status_table';
 import { FormattedStatus, getHighestStatus } from '../lib';
 import { StatusBadge } from './status_badge';
@@ -28,7 +22,7 @@ export const StatusSection: FC<StatusSectionProps> = ({ id, title, statuses }) =
   const highestStatus = useMemo(() => getHighestStatus(statuses), [statuses]);
 
   return (
-    <EuiPageContent grow={false}>
+    <EuiPanel grow={false}>
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle size="s">
@@ -41,6 +35,6 @@ export const StatusSection: FC<StatusSectionProps> = ({ id, title, statuses }) =
       </EuiFlexGroup>
       <EuiSpacer />
       <StatusTable statuses={statuses} />
-    </EuiPageContent>
+    </EuiPanel>
   );
 };

packages/core/apps/core-apps-browser-internal/src/status/components/version_header.tsx

@@ -7,12 +7,7 @@
  */
 
 import React, { FC } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { ServerVersion } from '@kbn/core-status-common-internal';
 
@@ -23,7 +18,7 @@ interface VersionHeaderProps {
 export const VersionHeader: FC<VersionHeaderProps> = ({ version }) => {
   const { build_hash: buildHash, build_number: buildNumber, number } = version;
   return (
-    <EuiPageContent grow={false}>
+    <EuiPanel grow={false}>
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiText size="s">
@@ -65,6 +60,6 @@ export const VersionHeader: FC<VersionHeaderProps> = ({ version }) => {
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiPageContent>
+    </EuiPanel>
   );
 };

packages/core/fatal-errors/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap

@@ -4,14 +4,14 @@ exports[`FatalErrorsScreen rendering render matches snapshot 1`] = `
 <EuiPage
   style={
     Object {
+      "alignItems": "center",
       "minHeight": "100vh",
     }
   }
 >
   <EuiPageBody>
-    <EuiPageContent_Deprecated
-      horizontalPosition="center"
-      verticalPosition="center"
+    <EuiPageSection
+      alignment="center"
     >
       <EuiEmptyPrompt
         actions={
@@ -94,7 +94,7 @@ Error: bar
   stack...bar.js:1:1
         </EuiCodeBlock>
       </EuiCallOut>
-    </EuiPageContent_Deprecated>
+    </EuiPageSection>
   </EuiPageBody>
 </EuiPage>
 `;

packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx

@@ -14,7 +14,7 @@ import {
   EuiEmptyPrompt,
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageSection,
 } from '@elastic/eui';
 import React from 'react';
 import { Observable, Subscription, merge, tap, fromEvent } from 'rxjs';
@@ -75,9 +75,9 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
 
   public render() {
     return (
-      <EuiPage style={{ minHeight: '100vh' }}>
+      <EuiPage style={{ minHeight: '100vh', alignItems: 'center' }}>
         <EuiPageBody>
-          <EuiPageContent verticalPosition="center" horizontalPosition="center">
+          <EuiPageSection alignment="center">
             <EuiEmptyPrompt
               iconType="warning"
               iconColor="danger"
@@ -129,7 +129,7 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
                 </EuiCodeBlock>
               </EuiCallOut>
             ))}
-          </EuiPageContent>
+          </EuiPageSection>
         </EuiPageBody>
       </EuiPage>
     );

packages/kbn-plugin-generator/template/public/components/app.tsx.ejs

@@ -2,23 +2,15 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 import { BrowserRouter as Router } from '@kbn/shared-ux-router';
-
-
 import {
   EuiButton,
   EuiHorizontalRule,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageHeader,
+  EuiPageTemplate,
   EuiTitle,
   EuiText,
 } from '@elastic/eui';
-
-import { CoreStart } from '<%= importFromRoot('src/core/public') %>';
-import { NavigationPublicPluginStart } from '<%= importFromRoot('src/plugins/navigation/public') %>';
+import type { CoreStart } from '@kbn/core/public';
+import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
 
 import { PLUGIN_ID, PLUGIN_NAME } from '../../common';
 
@@ -56,9 +48,8 @@ export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http,
       <I18nProvider>
         <>
           <navigation.ui.TopNavMenu appName={ PLUGIN_ID } showSearchBar={true} useDefaultBehaviors={true}/>
-          <EuiPage restrictWidth="1000px">
-            <EuiPageBody>
-              <EuiPageHeader>
+          <EuiPageTemplate restrictWidth="1000px">
+            <EuiPageTemplate.Header>
               <EuiTitle size="l">
                 <h1>
                   <FormattedMessage
@@ -68,9 +59,8 @@ export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http,
                   />
                 </h1>
               </EuiTitle>
-              </EuiPageHeader>
-              <EuiPageContent>
-                <EuiPageContentHeader>
+            </EuiPageTemplate.Header>
+            <EuiPageTemplate.Section>
               <EuiTitle>
                 <h2>
                   <FormattedMessage
@@ -79,8 +69,6 @@ export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http,
                   />
                 </h2>
               </EuiTitle>
-                </EuiPageContentHeader>
-                <EuiPageContentBody>
               <EuiText>
                 <p>
                   <FormattedMessage
@@ -103,10 +91,8 @@ export const <%= upperCamelCase(name) %>App = ({ basename, notifications, http,
                   />
                 </EuiButton>
               </EuiText>
-                </EuiPageContentBody>
-              </EuiPageContent>
-            </EuiPageBody>
-          </EuiPage>
+            </EuiPageTemplate.Section>
+          </EuiPageTemplate>
         </>
       </I18nProvider>
     </Router>

test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app/components/main.tsx

@@ -8,12 +8,7 @@
 import './main.scss';
 
 import React from 'react';
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-} from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageSection, EuiPageHeader } from '@elastic/eui';
 import { first, pluck } from 'rxjs/operators';
 import { IInterpreterRenderHandlers, ExpressionValue } from '@kbn/expressions-plugin/public';
 import { ExpressionRenderHandler } from '../../types';
@@ -89,11 +84,11 @@ class Main extends React.Component<{}, State> {
     return (
       <EuiPage>
         <EuiPageBody>
-          <EuiPageContent data-test-subj="pluginContent">
-            <EuiPageContentHeader>runPipeline tests are running ...</EuiPageContentHeader>
+          <EuiPageSection data-test-subj="pluginContent">
+            <EuiPageHeader>runPipeline tests are running ...</EuiPageHeader>
             <div data-test-subj="pluginChart" ref={this.chartRef} style={pStyle} />
             <div>{this.state.expression}</div>
-          </EuiPageContent>
+          </EuiPageSection>
         </EuiPageBody>
       </EuiPage>
     );

test/plugin_functional/plugins/core_app_status/public/application.tsx

@@ -11,10 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import {
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
@@ -32,16 +29,14 @@ const AppStatusApp = ({ appId }: { appId: string }) => (
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
+      <EuiPageSection>
+        <EuiPageHeader>
           <EuiTitle>
             <h2>{appId} Test App home page section title</h2>
           </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiPageContentBody>{appId} Test App content</EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageHeader>
+        <EuiPageSection>{appId} Test App content</EuiPageSection>
+      </EuiPageSection>
     </EuiPageBody>
   </EuiPage>
 );

test/plugin_functional/plugins/core_plugin_a/public/application.tsx

@@ -15,13 +15,10 @@ import { Router, Route } from '@kbn/shared-ux-router';
 import {
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiPageSideBar_Deprecated as EuiPageSideBar,
+  EuiPageSidebar,
   EuiTitle,
   EuiSideNav,
 } from '@elastic/eui';
@@ -37,16 +34,14 @@ const Home = () => (
         </EuiTitle>
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
+    <EuiPageSection>
+      <EuiPageHeader>
         <EuiTitle>
           <h2>Bar home page section title</h2>
         </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>Wow what a home page this is!</EuiPageContentBody>
-    </EuiPageContent>
+      </EuiPageHeader>
+      <EuiPageSection>Wow what a home page this is!</EuiPageSection>
+    </EuiPageSection>
   </EuiPageBody>
 );
 
@@ -59,16 +54,14 @@ const PageA = () => (
         </EuiTitle>
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
+    <EuiPageSection>
+      <EuiPageHeader>
         <EuiTitle>
           <h2>Page A section title</h2>
         </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>Page A&apos;s content goes here</EuiPageContentBody>
-    </EuiPageContent>
+      </EuiPageHeader>
+      <EuiPageSection>Page A&apos;s content goes here</EuiPageSection>
+    </EuiPageSection>
   </EuiPageBody>
 );
 
@@ -109,9 +102,9 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
 const FooApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => (
   <Router history={history}>
     <EuiPage>
-      <EuiPageSideBar>
+      <EuiPageSidebar>
         <Nav navigateToApp={coreStart.application.navigateToApp} />
-      </EuiPageSideBar>
+      </EuiPageSidebar>
       <Route path="/" exact render={() => <Redirect to="/home" />} />
       <Route path="/home" exact component={Home} />
       <Route path="/page-a" component={PageA} />

test/plugin_functional/plugins/core_plugin_appleave/public/application.tsx

@@ -11,10 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import {
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
@@ -32,16 +29,14 @@ const App = ({ appName }: { appName: string }) => (
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
+      <EuiPageSection>
+        <EuiPageHeader>
           <EuiTitle>
             <h2>{appName} home page section title</h2>
           </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiPageContentBody>{appName} page content</EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageHeader>
+        <EuiPageSection>{appName} page content</EuiPageSection>
+      </EuiPageSection>
     </EuiPageBody>
   </EuiPage>
 );

test/plugin_functional/plugins/core_plugin_b/public/application.tsx

@@ -15,13 +15,10 @@ import { Router, Route } from '@kbn/shared-ux-router';
 import {
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiPageSideBar_Deprecated as EuiPageSideBar,
+  EuiPageSidebar,
   EuiTitle,
   EuiSideNav,
 } from '@elastic/eui';
@@ -37,16 +34,14 @@ const Home = () => (
         </EuiTitle>
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
+    <EuiPageSection>
+      <EuiPageHeader>
         <EuiTitle>
-            <h2>Bar home page sction</h2>
+          <h2>Bar home page section</h2>
         </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>It feels so homey!</EuiPageContentBody>
-    </EuiPageContent>
+      </EuiPageHeader>
+      <EuiPageSection>It feels so homey!</EuiPageSection>
+    </EuiPageSection>
   </EuiPageBody>
 );
 
@@ -63,18 +58,16 @@ const PageB = ({ location }: RouteComponentProps) => {
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
+      <EuiPageSection>
+        <EuiPageHeader>
           <EuiTitle>
             <h2>
               Search params:{' '}
               <span data-test-subj="barAppPageBQuery">{JSON.stringify(searchParams)}</span>
             </h2>
           </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-      </EuiPageContent>
+        </EuiPageHeader>
+      </EuiPageSection>
     </EuiPageBody>
   );
 };
@@ -116,9 +109,9 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
 const BarApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => (
   <Router history={history}>
     <EuiPage>
-      <EuiPageSideBar>
+      <EuiPageSidebar>
         <Nav navigateToApp={coreStart.application.navigateToApp} />
-      </EuiPageSideBar>
+      </EuiPageSidebar>
       <Route path="/" exact component={Home} />
       <Route path="/page-b" component={PageB} />
     </EuiPage>

test/plugin_functional/plugins/core_plugin_chromeless/public/application.tsx

@@ -13,10 +13,7 @@ import { Route } from '@kbn/shared-ux-router';
 import {
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
@@ -33,16 +30,14 @@ const Home = () => (
         </EuiTitle>
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
+    <EuiPageSection>
+      <EuiPageHeader>
         <EuiTitle>
           <h2>Chromeless home page section title</h2>
         </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>Where did all the chrome go?</EuiPageContentBody>
-    </EuiPageContent>
+      </EuiPageHeader>
+      <EuiPageSection>Where did all the chrome go?</EuiPageSection>
+    </EuiPageSection>
   </EuiPageBody>
 );
 

test/plugin_functional/plugins/core_plugin_deep_links/public/application.tsx

@@ -14,14 +14,11 @@ import { Router, Route } from '@kbn/shared-ux-router';
 
 import {
   EuiPage,
+  EuiPageSidebar,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiPageSideBar_Deprecated as EuiPageSideBar,
   EuiTitle,
   EuiSideNav,
 } from '@elastic/eui';
@@ -37,16 +34,14 @@ const Home = () => (
         </EuiTitle>
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
+    <EuiPageSection>
+      <EuiPageHeader>
         <EuiTitle>
           <h2>DL home page section title</h2>
         </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>Wow this is the content!</EuiPageContentBody>
-    </EuiPageContent>
+      </EuiPageHeader>
+      <EuiPageSection>Wow this is the content!</EuiPageSection>
+    </EuiPageSection>
   </EuiPageBody>
 );
 
@@ -59,16 +54,14 @@ const PageA = () => (
         </EuiTitle>
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
+    <EuiPageSection>
+      <EuiPageHeader>
         <EuiTitle>
           <h2>DL Page A section title</h2>
         </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>DL Page A&apos;s content goes here</EuiPageContentBody>
-    </EuiPageContent>
+      </EuiPageHeader>
+      <EuiPageSection>DL Page A&apos;s content goes here</EuiPageSection>
+    </EuiPageSection>
   </EuiPageBody>
 );
 
@@ -81,16 +74,14 @@ const PageB = () => (
         </EuiTitle>
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
+    <EuiPageSection>
+      <EuiPageHeader>
         <EuiTitle>
           <h2>DL Page B section title</h2>
         </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>DL Page B&apos;s content goes here</EuiPageContentBody>
-    </EuiPageContent>
+      </EuiPageHeader>
+      <EuiPageSection>DL Page B&apos;s content goes here</EuiPageSection>
+    </EuiPageSection>
   </EuiPageBody>
 );
 
@@ -141,9 +132,9 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
 const DlApp = ({ history, coreStart }: { history: History; coreStart: CoreStart }) => (
   <Router history={history}>
     <EuiPage>
-      <EuiPageSideBar>
+      <EuiPageSidebar>
         <Nav navigateToApp={coreStart.application.navigateToApp} />
-      </EuiPageSideBar>
+      </EuiPageSidebar>
       <Route path="/" exact render={() => <Redirect to="/home" />} />
       <Route path="/home" exact component={Home} />
       <Route path="/page-a" component={PageA} />

test/plugin_functional/plugins/core_plugin_helpmenu/public/application.tsx

@@ -11,10 +11,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import {
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
@@ -32,16 +29,14 @@ const App = ({ appName }: { appName: string }) => (
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
+      <EuiPageSection>
+        <EuiPageHeader>
           <EuiTitle>
             <h2>{appName} home page section title</h2>
           </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiPageContentBody>{appName} page content</EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageHeader>
+        <EuiPageSection>{appName} page content</EuiPageSection>
+      </EuiPageSection>
     </EuiPageBody>
   </EuiPage>
 );