Upgrade EUI to v63.0.6 - updates to new EuiPageTemplate and deprecates old page components

dev_docs/tutorials/kibana_page_template.mdx

@@ -2,96 +2,26 @@
 id: kibDevDocsKPTTutorial
 slug: /kibana-dev-docs/tutorials/kibana-page-template
 title: Kibana Page Template
-description: Learn how to create pages in Kibana
+description: Learn how to create page layouts in Kibana
 date: 2021-03-20
-tags: ['kibana', 'dev', 'ui', 'tutorials']
+tags: ['kibana', 'dev', 'ui', 'tutorials', 'pages', 'layout']
 ---
 
-`KibanaPageTemplate` is a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns.
-
-Refer to EUI's documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/layout/page) for constructing page layouts.
-
-## `isEmptyState`
-
-Use the `isEmptyState` prop for when there is no page content to show. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met.
-
-The default empty state uses any `pageHeader` info provided to populate an [**EuiEmptyPrompt**](https://elastic.github.io/eui/#/display/empty-prompt) and uses the `centeredBody` template type.
-
-```tsx
-<KibanaPageTemplate
-  isEmptyState={true}
-  pageHeader={{
-    iconType: 'dashboardApp',
-    pageTitle: 'Dashboards',
-    description: "You don't have any dashboards yet.",
-    rightSideItems: [
-      <EuiButton fill iconType="plusInCircleFilled">
-        Create new dashboard
-      </EuiButton>,
-    ],
-  }}
-/>
-```
-
-![Screenshot of demo empty state code. Shows the Kibana navigation bars and a centered empty state with the dashboard app icon, a level 1 heading "Dashboards", body text "You don't have any dashboards yet.", and a button that says "Create new dashboard".](../assets/kibana_default_empty_state.png)
-
-<DocCallOut color="warning" title="Missing page header content can lead to an anemic empty state">
-  Because all properties of the page header are optional, the empty state has the potential to
-  render blank. Make sure your empty state doesn't leave the user confused.
+<DocCallOut color="warning" title="Multiple Packages">
+  Be sure to import the `KibanaPageTemplate` from `@kbn/shared-ux-page-kibana-template`.
 </DocCallOut>
 
-### Custom empty state
-
-You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageTemplate.
-
-```tsx
-<KibanaPageTemplate isEmptyState={true}>
-  <EuiEmptyPrompt
-    title={<h1>No data</h1>}
-    body="You have no data. Would you like some of ours?"
-    actions={[
-      <EuiButton fill iconType="plusInCircleFilled">
-        Get sample data
-      </EuiButton>,
-    ]}
-  />
-</KibanaPageTemplate>
-```
-
-![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_custom_empty_state.png)
+`KibanaPageTemplate` is a Kibana-specific wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/templates/page-template) and it's namespaced components such as `KibanaPageTemplate.Header`. This component makes setting up common types of Kibana pages quicker and easier while also adhering to certain Kibana-specific requirements and patterns.
 
-### Empty states with a page header
+**Refer to EUI's own documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/templates/page-template) for constructing page layouts and inherited props.**
 
-When passing both a `pageHeader` configuration and `isEmptyState`, the component will render the proper template (`centeredContent`). Be sure to reduce the heading level within your child empty prompt to `<h2>`.
-
-```tsx
-<KibanaPageTemplate
-  isEmptyState={true}
-  pageHeader={{
-    pageTitle: 'Dashboards',
-  }}
->
-  <EuiEmptyPrompt
-    title={<h2>No data</h2>}
-    body="You have no data. Would you like some of ours?"
-    actions={[
-      <EuiButton fill iconType="plusInCircleFilled">
-        Get sample data
-      </EuiButton>,
-    ]}
-  />
-</KibanaPageTemplate>
-```
-
-![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_header_and_empty_state.png)
+The following props are Kibana-specific extensions.
 
 ## `solutionNav`
 
-To add left side navigation for your solution, we recommend passing [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav) props to the `solutionNav` prop. The template component will then handle the mobile views and add the solution nav embellishments. On top of the EUI props, you'll need to pass your solution `name` and an optional `icon`.
-
-If you need to custom side bar content, you will need to pass you own navigation component to `pageSideBar`. We still recommend using [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav).
+To add left side navigation for your solution, we recommend using the provided `solutionNav` prop which is an object that extends [**EuiSideNavProps**](https://elastic.github.io/eui/#/navigation/side-nav).
 
-When using `EuiSideNav`, root level items should not be linked but provide section labelling only.
+Simply pass your array of `solutionNav.items` and the required `solution.name` and the template component will then handle the mobile views and collapsibility. For solutions and larger applications, we recommend also passing an `solutionNav.icon`.
 
 ```tsx
 <KibanaPageTemplate
@@ -113,31 +43,33 @@ When using `EuiSideNav`, root level items should not be linked but provide secti
 </KibanaPageTemplate>
 ```
 
+> When using `EuiSideNav`, root level items should not be linked but provide section labelling only.
 
 ![Screenshot of Stack Management empty state with a provided solution navigation shown on the left, outlined in pink.](../assets/kibana_template_solution_nav.png)
 
 ![Screenshots of Stack Management page in mobile view. Menu closed on the left, menu open on the right.](../assets/kibana_template_solution_nav_mobile.png)
 
+If you need custom solution navigation **content**, you can pass your own `solutionNav.children` instead of the items or supply your own componen with `<KibanaPageTemplate.Sidebar>` We still recommend using [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav).
+
 ## `noDataConfig`
 
-Increases the consistency in messaging across all the solutions during the getting started process when no data exists. Each solution/template instance decides when is the most appropriate time to show this configuration, but is messaged specifically towards having no indices or index patterns at all or that match the particular solution.
+Increases the consistency in messaging across all the solutions during the getting started process when no data exists. Each solution/template instance decides when is the most appropriate time to show this configuration, but is messaged specifically towards having **no indices and/or data views at all or that match the particular solution**.
 
-This is a built-in configuration that displays a very specific UI and requires very specific keys. It will also ignore all other configurations of the template including `pageHeader` and `children`, with the exception of continuing to show `solutionNav`.
+This is a built-in configuration that displays a very specific UI and requires very specific object keys. It will also ignore all other configurations of the template including `pageHeader` and `children`, with the exception of continuing to show `solutionNav`.
 
-The `noDataConfig` is of type [`NoDataPagProps`](https://github.com/elastic/kibana/blob/main/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.tsx):
+The `noDataConfig` is of type [`NoDataPageProps`](https://github.com/elastic/kibana/blob/main/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts):
 
-1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, and description *(required)*
-2. `docsLink: string`: Required to set the docs link for the whole solution *(required)*
+1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, and description _(required)_
+2. `docsLink: string`: Required to set the docs link for the whole solution _(required)_
 3. `logo?: string`: Optionally replace the auto-generated logo
 4. `pageTitle?: string`: Optionally replace the auto-generated page title (h1)
-5. `actions: NoDataPageActionsProps`: An object of `NoDataPageActions` configurations with unique primary keys *(required)*
+5. `action: NoDataPageActions`: An object of `NoDataPageActions` configurations with a single primary key _(required)_
 
 ### `NoDataPageActions`
 
-There are two main actions for adding data that we promote throughout Kibana, Elastic Agent and Beats. They are added to the cards that are displayed by using the keys `elasticAgent` and `beats` respectively. For consistent messaging, these two cards are pre-configured but require specific `href`s and/or `onClick` handlers for directing the user to the right location for that solution.
-
-It also accepts a `recommended` prop as a boolean to promote one or more of the cards through visuals added to the UI. It will also place the `recommended` ones first in the list. Optionally you can also replace the `button` label by passing a string, or the whole component by passing a `ReactNode`.
+There is currently only one promotoed path to ingesting data and that is through the Fleet / Ingest UI. This gets presented to the user by rendering a card that provides consistent messaging. It is mostly pre-configured but require specific `href`s and/or `onClick` handlers for directing the user to the right location for that solution.
 
+Optionally you can also replace the `button` label by passing a string, or the whole button component by passing a `ReactNode`.
 
 ```tsx
 // Perform your own check
@@ -148,10 +80,7 @@ const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
   solution: 'Analytics',
   logo: 'logoKibana',
   docsLink: '#',
-  actions: {
-    beats: {
-      href: '#',
-    },
+  action: {
     elasticAgent: {
       href: '#',
     },
@@ -165,8 +94,80 @@ const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
   noDataConfig={hasData ? undefined : noDataConfig}
 >
   {/* Children will be ignored */}
+</KibanaPageTemplate>;
+```
+
+![Screenshot of and example in Analytics using the no data configuration and using the corresponding list numbers to point out the UI elements that they adjust.](../assets/kibana_template_no_data_config.png)
+
+## `isEmptyState`
+
+Use the `isEmptyState` prop for when there is no page **content** to show. This is for when the user **has data** but has not created the thing that the page displays. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met.
+
+This prop is a simple boolean uses any `pageHeader` info provided to populate an centered [**EuiPageTemplate.EmptyPrompt**](https://elastic.github.io/eui/#/templates/page-template#empty-pages-or-content).
+
+```tsx
+<KibanaPageTemplate
+  isEmptyState={true}
+  pageHeader={{
+    iconType: 'dashboardApp',
+    pageTitle: 'Dashboards',
+    description: "You don't have any dashboards yet.",
+    rightSideItems: [
+      <EuiButton fill iconType="plusInCircleFilled">
+        Create new dashboard
+      </EuiButton>,
+    ],
+  }}
+/>
+```
+
+![Screenshot of demo empty state code. Shows the Kibana navigation bars and a centered empty state with the dashboard app icon, a level 1 heading "Dashboards", body text "You don't have any dashboards yet.", and a button that says "Create new dashboard".](../assets/kibana_default_empty_state.png)
+
+<DocCallOut color="warning" title="Missing page header content can lead to an anemic empty state">
+  Because all properties of the page header are optional, the empty state has the potential to
+  render blank. Make sure your empty state doesn't leave the user confused.
+</DocCallOut>
+
+### Custom empty states
+
+You can also provide a custom empty prompt to replace the pre-built one using [`KibanaPageTemplate.EmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) as a child of KibanaPageTemplate.
+
+```tsx
+<KibanaPageTemplate>
+  <KibanaPageTemplate.EmptyPrompt
+    title={<h1>No data</h1>}
+    body="You have no data. Would you like some of ours?"
+    actions={[
+      <EuiButton fill iconType="plusInCircleFilled">
+        Get sample data
+      </EuiButton>,
+    ]}
+  />
 </KibanaPageTemplate>
 ```
 
+![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_custom_empty_state.png)
+
+### Empty states with a page header
+
+When passing both a `pageHeader` configuration and rendering a `KibanaPageTemplate.EmptyPrompt`, be sure to reduce the heading level within your child empty prompt to `<h2>`.
+
+```tsx
+<KibanaPageTemplate
+  pageHeader={{
+    pageTitle: 'Dashboards',
+  }}
+>
+  <KibanaPageTemplate.EmptyPrompt
+    title={<h2>No data</h2>}
+    body="You have no data. Would you like some of ours?"
+    actions={[
+      <EuiButton fill iconType="plusInCircleFilled">
+        Get sample data
+      </EuiButton>,
+    ]}
+  />
+</KibanaPageTemplate>
+```
 
-![Screenshot of and example in Observability using the no data configuration and using the corresponding list numbers to point out the UI elements that they adjust.](../assets/kibana_template_no_data_config.png)
+![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_header_and_empty_state.png)

docs/developer/advanced/sharing-saved-objects.asciidoc

@@ -284,10 +284,10 @@ const getLegacyUrlConflictCallout = () => {
 return (
   <EuiPage>
     <EuiPageBody>
-      <EuiPageContent>
+      <EuiPageSection>
         {/* If we have a legacy URL conflict callout to display, show it at the top of the page */}
         {getLegacyUrlConflictCallout()}
-        <EuiPageContentHeader>
+        <EuiPageHeader>
 ...
 );
 ```

examples/bfetch_explorer/public/components/page/index.tsx

@@ -9,8 +9,8 @@
 import * as React from 'react';
 import {
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,

examples/bfetch_explorer/public/containers/app/sidebar/index.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { routes } from '../../../routes';
 

examples/dashboard_embeddable_examples/public/app.tsx

@@ -12,9 +12,9 @@ import { BrowserRouter as Router, Route, RouteComponentProps, withRouter } from
 
 import {
   EuiPage,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiPageSideBar,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSideBar_Deprecated as EuiPageSideBar,
   EuiSideNav,
 } from '@elastic/eui';
 import 'brace/mode/json';

examples/data_view_field_editor_example/public/app.tsx

@@ -15,8 +15,8 @@ import {
   EuiInMemoryTable,
   EuiPage,
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiText,
   useGeneratedHtmlId,

examples/developer_examples/public/app.tsx

@@ -11,9 +11,9 @@ import ReactDOM from 'react-dom';
 
 import {
   EuiText,
-  EuiPageContent,
+  EuiPageContent_Deprecated as EuiPageContent,
   EuiCard,
-  EuiPageContentHeader,
+  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFieldSearch,

examples/embeddable_explorer/public/app.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
 
 import { EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';

examples/embeddable_explorer/public/embeddable_panel_example.tsx

@@ -10,8 +10,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import {
   EuiPanel,
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,

examples/embeddable_explorer/public/hello_world_embeddable_example.tsx

@@ -9,8 +9,8 @@
 import React from 'react';
 import {
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,

examples/embeddable_explorer/public/list_container_example.tsx

@@ -9,8 +9,8 @@
 import React from 'react';
 import {
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,

examples/embeddable_explorer/public/todo_embeddable_example.tsx

@@ -14,8 +14,8 @@ import {
   EuiFlexItem,
   EuiFormRow,
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,

examples/expressions_explorer/public/actions_and_expressions.tsx

@@ -11,8 +11,8 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,

examples/expressions_explorer/public/actions_and_expressions2.tsx

@@ -11,8 +11,8 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,

examples/expressions_explorer/public/app.tsx

@@ -12,8 +12,8 @@ import {
   EuiPage,
   EuiPageHeader,
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiSpacer,
   EuiText,
   EuiLink,