[Discover] Replace deprecated page components (#162836)

- Closes https://github.com/elastic/kibana/issues/161426 ## Summary This PR updates usage of Eui page components for the following plugins. Also took this opportunity to make these pages a little nicer. ### src/plugins/data_view_management Before: <img width="600" alt="Screenshot 2023-07-31 at 20 09 28" src="5b52d31d-b759-40f9-8a8e-d428f6431f45"> After: <img width="600" alt="Screenshot 2023-07-31 at 20 09 37" src="dfd738d9-fa19-41d2-a55e-6157d9f2310a"> ### examples/search_examples Before: <img width="600" alt="Screenshot 2023-07-31 at 17 41 03" src="cc739f2d-bbaa-4cae-80d8-27599170a40a"> After: <img width="600" alt="Screenshot 2023-07-31 at 18 01 47" src="ab596aae-f9b4-48f0-8401-a507f4814624"> Before: <img width="600" alt="Screenshot 2023-07-31 at 20 30 19" src="40327fdd-7161-4d65-86ff-ff38455477fb"> After: <img width="600" alt="Screenshot 2023-07-31 at 20 30 39" src="8455c09f-6d84-4ad1-9e25-f8555a4f40db"> Before: <img width="600" alt="Screenshot 2023-07-31 at 18 20 47" src="68b05f4a-fcc0-4051-92b4-88a34bd22fb6"> After: <img width="600" alt="Screenshot 2023-07-31 at 18 44 32" src="1fd00e7e-3663-470f-927a-b7d7a0fe6c20"> ### examples/partial_results_example Before: <img width="600" alt="Screenshot 2023-07-31 at 17 29 32" src="589a2d93-c42a-4948-b805-0447e96f8ae4"> After: <img width="600" alt="Screenshot 2023-07-31 at 17 31 52" src="22df2b40-a9ec-4e11-b4dc-19da86c73059"> ### examples/field_formats_example Before: <img width="600" alt="Screenshot 2023-07-31 at 17 27 44" src="d3fa1fc3-e3e2-4f69-87e5-7187f8d3b000"> After: <img width="600" alt="Screenshot 2023-07-31 at 17 27 56" src="5633dba4-85ed-4767-bc8c-dee0c4da8798"> ### examples/data_view_field_editor_example Before: <img width="600" alt="Screenshot 2023-07-31 at 17 33 15" src="0be36a57-aef3-4679-ac77-9d5073b72fc2"> After: <img width="600" alt="Screenshot 2023-07-31 at 17 37 34" src="e43b0a1d-12fe-4d06-90b0-63cbc36e5ac2"> ### Checklist - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
2025-06-27 10:40:07 -04:00 · 2023-08-02 20:08:17 +02:00 · 2023-08-02 20:08:17 +02:00 · 148f9d757f
commit 148f9d757f
parent ffb716d8af
9 changed files with 975 additions and 1031 deletions
--- a/examples/data_view_field_editor_example/public/app.tsx
+++ b/examples/data_view_field_editor_example/public/app.tsx
@ -13,11 +13,8 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiInMemoryTable,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
+  EuiPageTemplate,
+  EuiSpacer,
  EuiText,
  useGeneratedHtmlId,
 } from '@elastic/eui';
@ -86,6 +83,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
  const content = dataView ? (
    <>
      <EuiText data-test-subj="dataViewTitle">Data view: {dataView.title}</EuiText>
+      <EuiSpacer />
      <EuiFlexGroup alignItems="center">
        <EuiFlexItem grow={false}>
          <EuiButton
@ -118,6 +116,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
          />
        </EuiFlexItem>
      </EuiFlexGroup>
+      <EuiSpacer size="s" />
      <EuiInMemoryTable<DataViewField>
        items={fields}
        columns={columns}
@ -136,14 +135,10 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
  );

  return (
-    <EuiPage>
-      <EuiPageBody>
-        <EuiPageHeader>Data view field editor demo</EuiPageHeader>
-        <EuiPageContent>
-          <EuiPageContentBody>{content}</EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+    <EuiPageTemplate offset={0}>
+      <EuiPageTemplate.Header pageTitle="Data view field editor demo" />
+      <EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>
+    </EuiPageTemplate>
  );
 };

--- a/examples/field_formats_example/public/app.tsx
+++ b/examples/field_formats_example/public/app.tsx
@ -13,12 +13,7 @@ import {
  EuiCode,
  EuiCodeBlock,
  EuiLink,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
+  EuiPageTemplate,
  EuiSpacer,
  EuiText,
  EuiTitle,
@ -61,7 +56,7 @@ const UsingAnExistingFieldFormatExample: React.FC<{ deps: Deps }> = (props) => {
        </p>
      </EuiText>
      <EuiSpacer size={'s'} />
-      <EuiCodeBlock>{example1SampleCode}</EuiCodeBlock>
+      <EuiCodeBlock language="jsx">{example1SampleCode}</EuiCodeBlock>
      <EuiSpacer size={'s'} />
      <EuiBasicTable
        data-test-subj={'example1 sample table'}
@ -97,11 +92,11 @@ const CreatingCustomFieldFormat: React.FC<{ deps: Deps }> = (props) => {
        </p>
      </EuiText>
      <EuiSpacer size={'s'} />
-      <EuiCodeBlock>{example2SampleCodePart1}</EuiCodeBlock>
+      <EuiCodeBlock language="jsx">{example2SampleCodePart1}</EuiCodeBlock>
      <EuiSpacer size={'xs'} />
-      <EuiCodeBlock>{example2SampleCodePart2}</EuiCodeBlock>
+      <EuiCodeBlock language="jsx">{example2SampleCodePart2}</EuiCodeBlock>
      <EuiSpacer size={'xs'} />
-      <EuiCodeBlock>{example2SampleCodePart3}</EuiCodeBlock>
+      <EuiCodeBlock language="jsx">{example2SampleCodePart3}</EuiCodeBlock>
      <EuiSpacer size={'s'} />
      <EuiBasicTable
        items={sample}
@ -151,7 +146,7 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
        </p>
      </EuiText>
      <EuiSpacer size={'s'} />
-      <EuiCodeBlock>{example3SampleCode}</EuiCodeBlock>
+      <EuiCodeBlock language="jsx">{example3SampleCode}</EuiCodeBlock>
      <EuiSpacer size={'s'} />

      <EuiCallOut
@ -173,45 +168,29 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {

 export const App: React.FC<{ deps: Deps }> = (props) => {
  return (
-    <EuiPage>
-      <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
-        <EuiPageHeader>
-          <EuiPageHeaderSection>
-            <EuiTitle size="l">
-              <h1>Field formats examples</h1>
-            </EuiTitle>
-          </EuiPageHeaderSection>
-        </EuiPageHeader>
-        <EuiPageContent>
-          <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
-            <section>
+    <EuiPageTemplate offset={0}>
+      <EuiPageTemplate.Header pageTitle="Field formats examples" />
+      <EuiPageTemplate.Section grow={false}>
        <EuiTitle size="m">
          <h2>Using an existing field format</h2>
        </EuiTitle>
        <EuiSpacer />
        <UsingAnExistingFieldFormatExample deps={props.deps} />
-            </section>
-            <EuiSpacer />
-            <EuiSpacer />
-            <section>
+      </EuiPageTemplate.Section>
+      <EuiPageTemplate.Section grow={false}>
        <EuiTitle size="m">
          <h2>Creating a custom field format</h2>
        </EuiTitle>
        <EuiSpacer />
        <CreatingCustomFieldFormat deps={props.deps} />
-            </section>
-            <EuiSpacer />
-            <EuiSpacer />
-            <section>
+      </EuiPageTemplate.Section>
+      <EuiPageTemplate.Section grow={false}>
        <EuiTitle size="m">
          <h2>Creating a custom field format editor</h2>
        </EuiTitle>
        <EuiSpacer />
        <CreatingCustomFieldFormatEditor deps={props.deps} />
-            </section>
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
  );
 };
--- a/examples/partial_results_example/public/app/app.tsx
+++ b/examples/partial_results_example/public/app/app.tsx
@ -12,15 +12,9 @@ import {
  EuiBasicTable,
  EuiCallOut,
  EuiCodeBlock,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
+  EuiPageTemplate,
  EuiSpacer,
  EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import type { Datatable } from '@kbn/expressions-plugin/common';
 import { ExpressionsContext } from './expressions_context';
@ -46,17 +40,9 @@ export function App() {
  }, [expressions]);

  return (
-    <EuiPage>
-      <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
-        <EuiPageHeader>
-          <EuiPageHeaderSection>
-            <EuiTitle size="l">
-              <h1>Partial Results Demo</h1>
-            </EuiTitle>
-          </EuiPageHeaderSection>
-        </EuiPageHeader>
-        <EuiPageContent>
-          <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
+    <EuiPageTemplate offset={0}>
+      <EuiPageTemplate.Header pageTitle="Partial Results Demo" />
+      <EuiPageTemplate.Section>
        <EuiText data-test-subj="example-help">
          <p>
            This example listens for the window events and adds them to the table along with a
@ -82,9 +68,7 @@ export function App() {
            <p>Click or press any key.</p>
          </EuiCallOut>
        )}
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
  );
 }
--- a/examples/search_examples/public/common/example_page.tsx
+++ b/examples/search_examples/public/common/example_page.tsx
@ -7,7 +7,7 @@
 */

 import React, { PropsWithChildren } from 'react';
-import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiPageTemplate, EuiSideNav } from '@elastic/eui';
 import { IBasePath } from '@kbn/core/public';
 import { PLUGIN_ID } from '../../common';

@ -55,11 +55,11 @@ export const SearchExamplePage: React.FC<Props> = ({
  basePath,
 }: PropsWithChildren<Props>) => {
  return (
-    <EuiPage>
-      <EuiPageSideBar>
+    <EuiPageTemplate offset={0}>
+      <EuiPageTemplate.Sidebar>
        <SideNav exampleLinks={exampleLinks} basePath={basePath} />
-      </EuiPageSideBar>
+      </EuiPageTemplate.Sidebar>
      {children}
-    </EuiPage>
+    </EuiPageTemplate>
  );
 };
--- a/examples/search_examples/public/search/app.tsx
+++ b/examples/search_examples/public/search/app.tsx
@ -16,11 +16,7 @@ import {
  EuiFlexGrid,
  EuiFlexItem,
  EuiFormLabel,
-  EuiHorizontalRule,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
+  EuiPageTemplate,
  EuiProgress,
  EuiSpacer,
  EuiTabbedContent,
@ -531,20 +527,14 @@ export const SearchExamplesApp = ({
  ];

  return (
-    <EuiPageBody>
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>
-            <FormattedMessage
-              id="searchExamples.helloWorldText"
-              defaultMessage="{name}"
-              values={{ name: PLUGIN_NAME }}
+    <>
+      <EuiPageTemplate.Header
+        pageTitle={i18n.translate('searchExamples.helloWorldText', {
+          defaultMessage: '{name}',
+          values: { name: PLUGIN_NAME },
+        })}
      />
-          </h1>
-        </EuiTitle>
-      </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody>
+      <EuiPageTemplate.Section grow={false}>
        <navigation.ui.TopNavMenu
          appName={PLUGIN_ID}
          showSearchBar={true}
@ -624,11 +614,10 @@ export const SearchExamplesApp = ({
          </EuiFlexItem>
        </EuiFlexGrid>

-          <EuiHorizontalRule />
+        <EuiSpacer size="xl" />

        <EuiFlexGrid columns={2}>
-            <EuiFlexItem style={{ width: '40%' }}>
-              <EuiSpacer />
+          <EuiFlexItem>
            <EuiTitle size="s">
              <h3>
                Searching Elasticsearch using <EuiCode>data.search</EuiCode>
@ -754,9 +743,9 @@ export const SearchExamplesApp = ({
              <h3>Writing a custom search strategy</h3>
            </EuiTitle>
            <EuiText>
-                If you want to do some pre or post processing on the server, you might want to
-                create a custom search strategy. This example uses such a strategy, passing in
-                custom input and receiving custom output back.
+              If you want to do some pre or post processing on the server, you might want to create
+              a custom search strategy. This example uses such a strategy, passing in custom input
+              and receiving custom output back.
              <EuiSpacer />
              <EuiCheckbox
                id="GetCool"
@ -798,10 +787,7 @@ export const SearchExamplesApp = ({
                iconType="warning"
                data-test-subj="searchExamplesClearSession"
              >
-                  <FormattedMessage
-                    id="searchExamples.clearSession"
-                    defaultMessage="Clear session"
-                  />
+                <FormattedMessage id="searchExamples.clearSession" defaultMessage="Clear session" />
              </EuiButtonEmpty>
              <EuiButtonEmpty
                size="xs"
@ -826,9 +812,9 @@ export const SearchExamplesApp = ({
              server as well.
              <br />
              When executing search on the server, make sure to cancel the search in case user
-                cancels corresponding network request. This could happen in case user re-runs a
-                query or leaves the page without waiting for the result. Cancellation API is similar
-                on client and server and use `AbortController`.
+              cancels corresponding network request. This could happen in case user re-runs a query
+              or leaves the page without waiting for the result. Cancellation API is similar on
+              client and server and use `AbortController`.
              <EuiSpacer />
              <EuiButtonEmpty size="xs" onClick={onServerClickHandler} iconType="play">
                <FormattedMessage
@ -856,8 +842,7 @@ export const SearchExamplesApp = ({
            )}
          </EuiFlexItem>
        </EuiFlexGrid>
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
+      </EuiPageTemplate.Section>
+    </>
  );
 };
--- a/examples/search_examples/public/search_sessions/app.tsx
+++ b/examples/search_examples/public/search_sessions/app.tsx
@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n';
 import useObservable from 'react-use/lib/useObservable';
 import {
  EuiAccordion,
+  EuiButton,
  EuiButtonEmpty,
  EuiCallOut,
  EuiCode,
@ -20,11 +21,7 @@ import {
  EuiFlexItem,
  EuiFormLabel,
  EuiLoadingSpinner,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
+  EuiPageTemplate,
  EuiSpacer,
  EuiText,
  EuiTitle,
@ -228,13 +225,9 @@ export const SearchSessionsExampleApp = ({
  }, [search, state.restoreSessionId]);

  return (
-    <EuiPageBody>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Search session example</h1>
-          </EuiTitle>
-          <EuiSpacer />
+    <>
+      <EuiPageTemplate.Header pageTitle="Search session example" />
+      <EuiPageTemplate.Section grow={false}>
        {!isShardDelayEnabled(data) && (
          <>
            <NoShardDelayCallout />
@ -258,19 +251,17 @@ export const SearchSessionsExampleApp = ({
            Follow this demo step-by-step:{' '}
            <b>configure the query, start the search and then save your session.</b> You can save
            your session both when search is still in progress or when it is completed. After you
-              save the session and when initial search is completed you can{' '}
-              <b>restore the session</b>: the search will re-run reusing previous results. It will
-              finish a lot faster then the initial search. You can also{' '}
-              <b>go to search sessions management</b> and <b>get back to the stored results</b> from
-              there.
+            save the session and when initial search is completed you can <b>restore the session</b>
+            : the search will re-run reusing previous results. It will finish a lot faster then the
+            initial search. You can also <b>go to search sessions management</b> and{' '}
+            <b>get back to the stored results</b> from there.
          </p>
        </EuiText>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody>
+      </EuiPageTemplate.Section>
+      <>
        {!isRestoring && (
          <>
+            <EuiPageTemplate.Section grow={false}>
              <EuiTitle size="s">
                <h2>1. Configure the search query (OK to leave defaults)</h2>
              </EuiTitle>
@ -313,22 +304,24 @@ export const SearchSessionsExampleApp = ({
                  />
                </EuiFlexItem>
              </EuiFlexGroup>
-              <EuiSpacer size={'xl'} />
+            </EuiPageTemplate.Section>
+
+            <EuiPageTemplate.Section grow={false}>
              <EuiTitle size="s">
                <h2>
                  2. Start the search using <EuiCode>data.search</EuiCode> service
                </h2>
              </EuiTitle>
-              <EuiText style={{ maxWidth: 600 }}>
+              <EuiSpacer size="s" />
+              <EuiText>
                In this example each search creates a new session by calling{' '}
                <EuiCode>data.search.session.start()</EuiCode> that returns a{' '}
                <EuiCode>searchSessionId</EuiCode>. Then this <EuiCode>searchSessionId</EuiCode> is
                passed into a search request.
-                <EuiSpacer />
                <div>
                  {demoStep === DemoStep.ConfigureQuery && (
                    <EuiButtonEmpty
-                      size="xs"
+                      flush="both"
                      onClick={() => search()}
                      iconType="play"
                      disabled={isSearching || !dataView || !numericFieldName}
@ -337,33 +330,43 @@ export const SearchSessionsExampleApp = ({
                      Start the search from low-level client (data.search.search)
                    </EuiButtonEmpty>
                  )}
-                  {isSearching && <EuiLoadingSpinner />}
+
+                  {isSearching && (
+                    <>
+                      <EuiSpacer />
+                      <EuiLoadingSpinner />
+                    </>
+                  )}

                  {response && request && (
+                    <>
+                      <EuiSpacer />
                      <SearchInspector
                        accordionId={'1'}
                        request={request}
                        response={response}
                        tookMs={tookMs}
                      />
+                    </>
                  )}
                </div>
              </EuiText>
-              <EuiSpacer size={'xl'} />
+            </EuiPageTemplate.Section>
+
            {(demoStep === DemoStep.RunSession ||
              demoStep === DemoStep.RestoreSessionOnScreen ||
              demoStep === DemoStep.SaveSession) && (
-                <>
+              <EuiPageTemplate.Section grow={false}>
                <EuiTitle size="s">
                  <h2>3. Save your session</h2>
                </EuiTitle>
-                  <EuiText style={{ maxWidth: 600 }}>
-                    Use the search session indicator in the Kibana header to save the search
-                    session.
+                <EuiSpacer size="s" />
+                <EuiText>
+                  Use the search session indicator in the Kibana header to save the search session.
                  <div>
                    <EuiButtonEmpty
-                        size="xs"
-                        iconType={'save'}
+                      flush="both"
+                      iconType="save"
                      onClick={() => {
                        // hack for demo purposes:
                        document
@ -380,24 +383,24 @@ export const SearchSessionsExampleApp = ({
                    </EuiButtonEmpty>
                  </div>
                </EuiText>
-                </>
+              </EuiPageTemplate.Section>
            )}
+
            {(demoStep === DemoStep.RestoreSessionOnScreen ||
              demoStep === DemoStep.SaveSession) && (
-                <>
-                  <EuiSpacer size={'xl'} />
+              <EuiPageTemplate.Section grow={false}>
                <EuiTitle size="s">
                  <h2>4. Restore the session</h2>
                </EuiTitle>
-                  <EuiText style={{ maxWidth: 600 }}>
+                <EuiSpacer size="s" />
+                <EuiText>
                  Now you can restore your saved session. The same search request completes
                  significantly faster because it reuses stored results.
-                    <EuiSpacer />
                  <div>
                    {!isSearching && !restoreResponse && (
                      <EuiButtonEmpty
-                          size="xs"
-                          iconType={'refresh'}
+                        flush="both"
+                        iconType="refresh"
                        onClick={() => {
                          search(data.search.session.getSessionId());
                        }}
@ -406,31 +409,42 @@ export const SearchSessionsExampleApp = ({
                        Restore the search session
                      </EuiButtonEmpty>
                    )}
-                      {isSearching && <EuiLoadingSpinner />}
+
+                    {isSearching && (
+                      <>
+                        <EuiSpacer />
+                        <EuiLoadingSpinner />
+                      </>
+                    )}

                    {restoreRequest && restoreResponse && (
+                      <>
+                        <EuiSpacer />
                        <SearchInspector
                          accordionId={'2'}
                          request={restoreRequest}
                          response={restoreResponse}
                          tookMs={restoreTookMs}
                        />
+                      </>
                    )}
                  </div>
                </EuiText>
-                </>
+              </EuiPageTemplate.Section>
            )}
+
            {demoStep === DemoStep.RestoreSessionOnScreen && (
-                <>
-                  <EuiSpacer size={'xl'} />
+              <EuiPageTemplate.Section grow={false}>
                <EuiTitle size="s">
                  <h2>5. Restore from Management</h2>
                </EuiTitle>
-                  <EuiText style={{ maxWidth: 600 }}>
+                <EuiSpacer size="s" />
+                <EuiText>
                  You can also get back to your session from the Search Session Management.
                  <div>
                    <EuiButtonEmpty
-                        size="xs"
+                      flush="both"
+                      iconType="refresh"
                      onClick={() => {
                        // hack for demo purposes:
                        document
@ -443,17 +457,18 @@ export const SearchSessionsExampleApp = ({
                    </EuiButtonEmpty>
                  </div>
                </EuiText>
-                </>
+              </EuiPageTemplate.Section>
            )}
          </>
        )}
+
        {isRestoring && (
-            <>
+          <EuiPageTemplate.Section grow={false}>
            <EuiTitle size="s">
              <h2>You restored the search session!</h2>
            </EuiTitle>
-              <EuiSpacer />
-              <EuiText style={{ maxWidth: 600 }}>
+            <EuiSpacer size="s" />
+            <EuiText>
              {isSearching && <EuiLoadingSpinner />}

              {restoreRequest && restoreResponse && (
@ -465,20 +480,20 @@ export const SearchSessionsExampleApp = ({
                />
              )}
            </EuiText>
-            </>
+          </EuiPageTemplate.Section>
        )}
-          <EuiSpacer size={'xl'} />
-          <EuiButtonEmpty
+        <EuiPageTemplate.Section>
+          <EuiButton
            onClick={() => {
              // hack to quickly reset all the state and remove state stuff from the URL
              window.location.assign(window.location.href.split('?')[0]);
            }}
          >
            Start again
-          </EuiButtonEmpty>
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
+          </EuiButton>
+        </EuiPageTemplate.Section>
+      </>
+    </>
  );
 };

@ -770,7 +785,9 @@ function NoShardDelayCallout() {
        queries. <br />
        We recommend to enable it in your <EuiCode>kibana.dev.yml</EuiCode>:
      </p>
-      <EuiCodeBlock isCopyable={true}>data.search.aggs.shardDelay.enabled: true</EuiCodeBlock>
+      <EuiCodeBlock isCopyable={true} language="yaml">
+        data.search.aggs.shardDelay.enabled: true
+      </EuiCodeBlock>
    </EuiCallOut>
  );
 }
--- a/examples/search_examples/public/sql_search/app.tsx
+++ b/examples/search_examples/public/sql_search/app.tsx
@ -13,15 +13,12 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiForm,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
+  EuiPageTemplate,
  EuiPanel,
  EuiSuperUpdateButton,
  EuiText,
  EuiTextArea,
-  EuiTitle,
+  EuiSpacer,
 } from '@elastic/eui';

 import { CoreStart } from '@kbn/core/public';
@ -87,14 +84,9 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
  };

  return (
-    <EuiPageBody>
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>SQL search example</h1>
-        </EuiTitle>
-      </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody>
+    <>
+      <EuiPageTemplate.Header pageTitle="SQL search example" />
+      <EuiPageTemplate.Section grow={false}>
        <EuiForm>
          <EuiFlexGroup>
            <EuiFlexItem grow>
@ -119,9 +111,11 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
          </EuiFlexGroup>
        </EuiForm>

+        <EuiSpacer />
+
        <EuiFlexGroup gutterSize="l">
          <EuiFlexItem grow style={{ minWidth: 0 }}>
-              <EuiPanel grow>
+            <EuiPanel grow hasShadow={false} hasBorder>
              <EuiText>
                <h3>Request</h3>
              </EuiText>
@ -139,7 +133,7 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
            </EuiPanel>
          </EuiFlexItem>
          <EuiFlexItem grow style={{ minWidth: 0 }}>
-              <EuiPanel grow>
+            <EuiPanel grow hasShadow={false} hasBorder>
              <EuiText>
                <h3>Response</h3>
              </EuiText>
@ -157,8 +151,7 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
            </EuiPanel>
          </EuiFlexItem>
        </EuiFlexGroup>
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
+      </EuiPageTemplate.Section>
+    </>
  );
 };
--- a/src/plugins/data_view_management/public/components/empty_index_list_prompt/snapshots/empty_index_list_prompt.test.tsx.snap
+++ b/src/plugins/data_view_management/public/components/empty_index_list_prompt/snapshots/empty_index_list_prompt.test.tsx.snap
@ -1,17 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`EmptyIndexListPrompt should render normally 1`] = `
-<Fragment>
-  <EuiPageContent_Deprecated
+<EuiPanel
  className="inpEmptyState"
  color="subdued"
  data-test-subj="indexPatternEmptyState"
-    grow={false}
-    horizontalPosition="center"
-    verticalPosition="center"
-  >
-    <EuiPageContentHeader_Deprecated>
-      <EuiPageContentHeaderSection_Deprecated>
+  hasShadow={false}
+  paddingSize="xl"
+>
+  <EuiPageHeader>
    <EuiTitle>
      <h2>
        <FormattedMessage
@ -21,12 +18,11 @@ exports[`EmptyIndexListPrompt should render normally 1`] = `
        />
      </h2>
    </EuiTitle>
-      </EuiPageContentHeaderSection_Deprecated>
-    </EuiPageContentHeader_Deprecated>
+  </EuiPageHeader>
  <EuiSpacer
-      size="m"
+    size="xl"
  />
-    <EuiPageContentBody_Deprecated>
+  <div>
    <EuiFlexGrid
      className="inpEmptyState__cardGrid"
      columns={3}
@ -212,7 +208,6 @@ exports[`EmptyIndexListPrompt should render normally 1`] = `
        />
      </EuiText>
    </div>
-    </EuiPageContentBody_Deprecated>
-  </EuiPageContent_Deprecated>
-</Fragment>
+  </div>
+</EuiPanel>
 `;
--- a/src/plugins/data_view_management/public/components/empty_index_list_prompt/empty_index_list_prompt.tsx
+++ b/src/plugins/data_view_management/public/components/empty_index_list_prompt/empty_index_list_prompt.tsx
@ -8,13 +8,12 @@

 import './empty_index_list_prompt.scss';
 import React from 'react';
+import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPanel,
+  EuiPageHeader,
  EuiTitle,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContent_Deprecated as EuiPageContent,
  EuiIcon,
  EuiSpacer,
  EuiFlexItem,
@ -25,7 +24,6 @@ import {
  EuiText,
  EuiFlexGroup,
 } from '@elastic/eui';
-
 import { ApplicationStart } from '@kbn/core/public';

 export const EmptyIndexListPrompt = ({
@ -61,17 +59,17 @@ export const EmptyIndexListPrompt = ({
  );

  return (
-    <>
-      <EuiPageContent
+    <EuiPanel
      className="inpEmptyState"
-        grow={false}
      data-test-subj="indexPatternEmptyState"
-        verticalPosition="center"
-        horizontalPosition="center"
      color="subdued"
+      hasShadow={false}
+      paddingSize="xl"
+      css={css`
+        margin: auto;
+      `}
    >
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
+      <EuiPageHeader>
        <EuiTitle>
          <h2>
            <FormattedMessage
@ -80,10 +78,9 @@ export const EmptyIndexListPrompt = ({
            />
          </h2>
        </EuiTitle>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiSpacer size="m" />
-        <EuiPageContentBody>
+      </EuiPageHeader>
+      <EuiSpacer size="xl" />
+      <div>
        <EuiFlexGrid className="inpEmptyState__cardGrid" columns={3} responsive={true}>
          <EuiFlexItem>
            <EuiCard
@ -199,8 +196,7 @@ export const EmptyIndexListPrompt = ({
          <EuiSpacer />
          {canSaveIndexPattern && createAnywayLink}
        </div>
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </>
+      </div>
+    </EuiPanel>
  );
 };