mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
Upgrade EUI to v63.0.6 - updates to new EuiPageTemplate and deprecates old page components (#139524)
* Update all usages of EuiPageTemplate to EuiPageTemplate_Deprecated * EuiPageContent_Deprecated as EuiPageContent * EuiPageContentBody_Deprecated as EuiPageContentBody * EuiPageContentHeader_Deprecated as EuiPageContentHeader * EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection * EuiPageSideBar_Deprecated as EuiPageSideBar * EuiPageContent__Deprecated to EuiPageContent_Deprecated * Fix rogue semi-colons * WIP: NoDataConfigPage & NoDataPage converted to new template - `withSolutionNav` not yet handled * WIP: KibanaPageTemplateInner converted to use new template - Pushes existing `pageHeader` prompts onto created EuiPageTemplate.PageHeader - Uses `isEmptyState` to push `pageHeader` props to EuiPageTemplate.EmptyPrompt instead (if `children` are not supplied) * WIP: `withSolutionNav` now renders the sidebar content properly - Collapsing isn’t working (minWidth isn’t updating) * Fixing stickiness of sidebar * [Security] Fixed SecuritySolutionTemplateWrapper’s usage - Moved `bottomBar` to EuiPageTemplate.BottomBar (now contained in just the page contents) - Change EuiPanel children wrapper with EuiPageTemplate.Section * [O11y] Wrap `children` with EuiPageTemplate.Section * Fix getting_started usage * WIP: Fixing types * Removing `template` pass through * Set EUI to 63.0.0 * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * More import fixes * Sidebar component update * Expand `KibanaPageTemplate` to all namespaced EUI counterparts - Updated `docs/tutorials` mdx page - Fixed SolutionNav prop types * Updated the tutorial mdx page * [Stack Management] Updated app layout to new template - Some temporary props applied for BWC until all other pages can be converted - Converted `API Keys` page’s layout (and especially prompt usags) to new paradigm * Fix circular dep * Fix new circular dependency - copying and pasting types from KibanaPageTemplateProps, but ah well * [Security Solution] Remove `template` prop - no longer a prop on Kibana/EuiPageTemplate * [O11y] Allow customizing EuiPageTemplate.Section wrapper - converts pageBodyProps - fixes non-centered loading template * [Enterprise Search] Update page templates - fix layouts by auto-wrapping an EuiPageSection for padding, while adding a `customPageSections` prop for more custom sections/layouts - re-center 404 errors - update tests * Update KibanaPageTemplate tests * Update snapshots * Fix FTR test with removed EUI classNames * Fix FTR tests with changed kbn classNames * Update failing dashboard snapshots - drop shadow changed slightly in EUI * Fix failing Security Cypress test * [O11y] Fix Inventory page using deprecated CSS hooks * [O11y][Uptime] Fix missing bottom bars - Modifies ObservabilityPageTemplate to accept a `bottomBar` prop (a la the old EuiPageTemplate behavior) NOTE: This opinionated page layout structure is starting to feel like it could be potentially limiting / have all the same pitfalls the previous EuiPageTemplate did. If so, consider something closer to the Enterprise Search page template conversion (`customPageSections`). - Misc cleanup: Use `KibanaPageTemplate` over `EuiPageTemplate` * [O11y] Fix route template typing - Since theObservabilityPageTemplate is using the new Eui/KibanaPageTemplate, its child templates and types need to be updated accordingly * Fix broken minWidth behavior - was an EUI issue that required a patch release + update snapshots * [Security Solution] Type fixes, restore empty state - Fix empty state logic removed in a previous commit - bogarts KibanaPageTemplate's `isEmptyState` prop instead of using `template="noData"` - extend template wrappers to past ...rest to underlying Kibana/EuiPageTemplate + replace EuiPageTemplate with KibanaPageTemplate for consistency * Fix failing synthetics selector * Grab EUI v63.0.6 - for deprecation tags and section tag support * Fix Kibana Overview plugin layout - needs to use KibanaPageTemplate.Section to get padding back - use `bottomBorder` prop over horizontal rules - restore previous page color via panelled=false * Convert Home plugin to new KibanaPageTemplate - use KibanaPageTemplate.Section instead to preserve page width/paddings - use `bottomBorder` instead of `EuiHorizontalRule` - NOTE: This causes margins to decrease slightly from xxl to xl (largest padding available for EuiPageSection) - this can be restored by CSS overrides if desired - update CSS to preserve previous looks, + convert to logical properties * [O11y] Fix non-centered empty/loading states * [O11y] Restore subdued background on various empty state prompts * [O11y] Fix all instances of views that require a scrollable full-height child + restore comment for inventory view * [O11y][ux] Fix broken sidebar - The entire app was missing a wrapping EuiProvider, and as such breakpoint utils were not working, and the sidebar was missing + misc cleanup - remove unnecessary fragment - remove role="main" attr - now that EuiPageTemplate sets a `main` tag, they'll conflict - add isEmptyState to center loading component * [APM Cypress tests] harden flaky test * [APM Cypress tests] Fix failing Cypress test, again Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Constance
GitHub
parent
801600746d
commit
98f73d674a
325 changed files with 2198 additions and 1982 deletions
|
|
@ -2,20 +2,108 @@
|
|||
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.
|
||||
<DocCallOut color="warning" title="Multiple Packages">
|
||||
Be sure to import the `KibanaPageTemplate` from `@kbn/shared-ux-page-kibana-template`.
|
||||
</DocCallOut>
|
||||
|
||||
Refer to EUI's documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/layout/page) for constructing page layouts.
|
||||
`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.
|
||||
|
||||
**Refer to EUI's own documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/templates/page-template) for constructing page layouts and inherited props.**
|
||||
|
||||
The following props are Kibana-specific extensions.
|
||||
|
||||
## `solutionNav`
|
||||
|
||||
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).
|
||||
|
||||
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
|
||||
solutionNav={{
|
||||
name: 'Management',
|
||||
icon: 'managementApp',
|
||||
items: [
|
||||
{
|
||||
name: 'Root item',
|
||||
items: [
|
||||
{ name: 'Navigation item', href: '#' },
|
||||
{ name: 'Navigation item', href: '#' },
|
||||
]
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
{...}
|
||||
</KibanaPageTemplate>
|
||||
```
|
||||
|
||||
> When using `EuiSideNav`, root level items should not be linked but provide section labelling only.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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 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 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 [`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)_
|
||||
3. `logo?: string`: Optionally replace the auto-generated logo
|
||||
4. `pageTitle?: string`: Optionally replace the auto-generated page title (h1)
|
||||
5. `action: NoDataPageActions`: An object of `NoDataPageActions` configurations with a single primary key _(required)_
|
||||
|
||||
### `NoDataPageActions`
|
||||
|
||||
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
|
||||
const hasData = checkForData();
|
||||
|
||||
// No data configuration
|
||||
const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
|
||||
solution: 'Analytics',
|
||||
logo: 'logoKibana',
|
||||
docsLink: '#',
|
||||
action: {
|
||||
elasticAgent: {
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Conditionally apply the configuration if there is no data
|
||||
<KibanaPageTemplate
|
||||
solutionNav={/* Solution navigation still show if it exists and use the right template type */}
|
||||
pageHeader={/* Page header will be ignored */}
|
||||
noDataConfig={hasData ? undefined : noDataConfig}
|
||||
>
|
||||
{/* Children will be ignored */}
|
||||
</KibanaPageTemplate>;
|
||||
```
|
||||
|
||||
|
||||
|
||||
## `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.
|
||||
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.
|
||||
|
||||
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.
|
||||
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
|
||||
|
|
@ -40,13 +128,13 @@ The default empty state uses any `pageHeader` info provided to populate an [**Eu
|
|||
render blank. Make sure your empty state doesn't leave the user confused.
|
||||
</DocCallOut>
|
||||
|
||||
### Custom empty state
|
||||
### Custom empty states
|
||||
|
||||
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.
|
||||
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 isEmptyState={true}>
|
||||
<EuiEmptyPrompt
|
||||
<KibanaPageTemplate>
|
||||
<KibanaPageTemplate.EmptyPrompt
|
||||
title={<h1>No data</h1>}
|
||||
body="You have no data. Would you like some of ours?"
|
||||
actions={[
|
||||
|
|
@ -62,16 +150,15 @@ You can also provide a custom empty prompt to replace the pre-built one. You'll
|
|||
|
||||
### Empty states with a page header
|
||||
|
||||
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>`.
|
||||
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
|
||||
isEmptyState={true}
|
||||
pageHeader={{
|
||||
pageTitle: 'Dashboards',
|
||||
}}
|
||||
>
|
||||
<EuiEmptyPrompt
|
||||
<KibanaPageTemplate.EmptyPrompt
|
||||
title={<h2>No data</h2>}
|
||||
body="You have no data. Would you like some of ours?"
|
||||
actions={[
|
||||
|
|
@ -84,89 +171,3 @@ When passing both a `pageHeader` configuration and `isEmptyState`, the component
|
|||
```
|
||||
|
||||
|
||||
|
||||
## `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).
|
||||
|
||||
When using `EuiSideNav`, root level items should not be linked but provide section labelling only.
|
||||
|
||||
```tsx
|
||||
<KibanaPageTemplate
|
||||
solutionNav={{
|
||||
name: 'Management',
|
||||
icon: 'managementApp',
|
||||
items: [
|
||||
{
|
||||
name: 'Root item',
|
||||
items: [
|
||||
{ name: 'Navigation item', href: '#' },
|
||||
{ name: 'Navigation item', href: '#' },
|
||||
]
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
{...}
|
||||
</KibanaPageTemplate>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## `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.
|
||||
|
||||
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`.
|
||||
|
||||
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):
|
||||
|
||||
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)*
|
||||
|
||||
### `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`.
|
||||
|
||||
|
||||
```tsx
|
||||
// Perform your own check
|
||||
const hasData = checkForData();
|
||||
|
||||
// No data configuration
|
||||
const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = {
|
||||
solution: 'Analytics',
|
||||
logo: 'logoKibana',
|
||||
docsLink: '#',
|
||||
actions: {
|
||||
beats: {
|
||||
href: '#',
|
||||
},
|
||||
elasticAgent: {
|
||||
href: '#',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Conditionally apply the configuration if there is no data
|
||||
<KibanaPageTemplate
|
||||
solutionNav={/* Solution navigation still show if it exists and use the right template type */}
|
||||
pageHeader={/* Page header will be ignored */}
|
||||
noDataConfig={hasData ? undefined : noDataConfig}
|
||||
>
|
||||
{/* Children will be ignored */}
|
||||
</KibanaPageTemplate>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
...
|
||||
);
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
import * as React from 'react';
|
||||
import {
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiTitle,
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ import {
|
|||
EuiInMemoryTable,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiText,
|
||||
useGeneratedHtmlId,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiFormRow,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiFlexGroup,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiFlexGroup,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ import {
|
|||
EuiPage,
|
||||
EuiPageHeader,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiLink,
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiFlexGroup,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiFlexGroup,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ import {
|
|||
EuiLink,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiSpacer,
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import React from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
|
||||
import { EuiPageBody } from '@elastic/eui';
|
||||
import { EuiPageContent } from '@elastic/eui';
|
||||
import { EuiPageContentBody } from '@elastic/eui';
|
||||
import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
|
||||
import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
|
||||
import { Route, Switch, Redirect, Router, useLocation } from 'react-router-dom';
|
||||
import { createBrowserHistory } from 'history';
|
||||
import { EuiText } from '@elastic/eui';
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import ReactDOM from 'react-dom';
|
|||
import { EuiPage } from '@elastic/eui';
|
||||
import { EuiButton } from '@elastic/eui';
|
||||
import { EuiPageBody } from '@elastic/eui';
|
||||
import { EuiPageContent } from '@elastic/eui';
|
||||
import { EuiPageContentBody } from '@elastic/eui';
|
||||
import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
|
||||
import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
|
||||
import { EuiSpacer } from '@elastic/eui';
|
||||
import { EuiText } from '@elastic/eui';
|
||||
import { EuiFieldText } from '@elastic/eui';
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import React from 'react';
|
|||
|
||||
import {
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiTitle,
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ import {
|
|||
EuiCodeBlock,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiSpacer,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {
|
|||
EuiFieldText,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPageTemplate,
|
||||
EuiPageTemplate_Deprecated as EuiPageTemplate,
|
||||
EuiPanel,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import * as React from 'react';
|
|||
|
||||
import {
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiTitle,
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ import { AppMountParameters } from '@kbn/core/public';
|
|||
import {
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiText,
|
||||
EuiHorizontalRule,
|
||||
EuiPageContentHeader,
|
||||
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
|
||||
EuiListGroup,
|
||||
} from '@elastic/eui';
|
||||
import { RandomNumberRouteExample } from './random_number_example';
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
|
|||
import {
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContentHeader,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
|
||||
EuiPageHeader,
|
||||
EuiTitle,
|
||||
EuiText,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui';
|
||||
import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
|
||||
import { IBasePath } from '@kbn/core/public';
|
||||
import { PLUGIN_ID } from '../../common';
|
||||
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ import {
|
|||
EuiFormLabel,
|
||||
EuiHorizontalRule,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiProgress,
|
||||
EuiSpacer,
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ import {
|
|||
EuiFormLabel,
|
||||
EuiLoadingSpinner,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiSpacer,
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiForm,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPanel,
|
||||
EuiSuperUpdateButton,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui';
|
||||
import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
|
||||
import { CoreStart } from '@kbn/core/public';
|
||||
|
||||
export interface ExampleLink {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ import {
|
|||
EuiCheckbox,
|
||||
EuiFieldText,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiSpacer,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { Router } from 'react-router-dom';
|
|||
import {
|
||||
EuiFieldText,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageHeader,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ import { EuiPage } from '@elastic/eui';
|
|||
|
||||
import { EuiButton } from '@elastic/eui';
|
||||
import { EuiPageBody } from '@elastic/eui';
|
||||
import { EuiPageContent } from '@elastic/eui';
|
||||
import { EuiPageContentBody } from '@elastic/eui';
|
||||
import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
|
||||
import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
|
||||
import { EuiSpacer } from '@elastic/eui';
|
||||
import { EuiText } from '@elastic/eui';
|
||||
import { EuiFieldText } from '@elastic/eui';
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import React from 'react';
|
|||
|
||||
import {
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiTitle,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
|
|||
import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
|
||||
import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
|
||||
import { SecurityPluginSetup, SecurityPluginStart } from '@kbn/security-plugin/public';
|
||||
import { EuiPageTemplate } from '@elastic/eui';
|
||||
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||
import { AvatarDemo } from './avatar_demo';
|
||||
import { PopoverDemo } from './popover_demo';
|
||||
import { SelectableDemo } from './selectable_demo';
|
||||
|
|
@ -38,7 +38,7 @@ export class UserProfilesPlugin implements Plugin<void, void, SetupDeps, StartDe
|
|||
// });
|
||||
|
||||
ReactDOM.render(
|
||||
<EuiPageTemplate
|
||||
<KibanaPageTemplate
|
||||
pageHeader={{
|
||||
pageTitle: 'User profile components',
|
||||
}}
|
||||
|
|
@ -46,7 +46,7 @@ export class UserProfilesPlugin implements Plugin<void, void, SetupDeps, StartDe
|
|||
<AvatarDemo />
|
||||
<SelectableDemo />
|
||||
<PopoverDemo />
|
||||
</EuiPageTemplate>,
|
||||
</KibanaPageTemplate>,
|
||||
element
|
||||
);
|
||||
return () => ReactDOM.unmountComponentAtNode(element);
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
"@elastic/datemath": "5.0.3",
|
||||
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.3.0-canary.1",
|
||||
"@elastic/ems-client": "8.3.3",
|
||||
"@elastic/eui": "62.2.4",
|
||||
"@elastic/eui": "63.0.6",
|
||||
"@elastic/filesaver": "1.1.2",
|
||||
"@elastic/node-crypto": "1.2.1",
|
||||
"@elastic/numeral": "^2.5.1",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
|
||||
import {
|
||||
EuiEmptyPrompt,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
} from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ exports[`FatalErrorsScreen rendering render matches snapshot 1`] = `
|
|||
}
|
||||
>
|
||||
<EuiPageBody>
|
||||
<EuiPageContent
|
||||
<EuiPageContent_Deprecated
|
||||
horizontalPosition="center"
|
||||
verticalPosition="center"
|
||||
>
|
||||
|
|
@ -93,7 +93,7 @@ Error: bar
|
|||
stack...bar.js:1:1
|
||||
</EuiCodeBlock>
|
||||
</EuiCallOut>
|
||||
</EuiPageContent>
|
||||
</EuiPageContent_Deprecated>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {
|
|||
EuiEmptyPrompt,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
} from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { Observable, Subscription, merge, tap, fromEvent } from 'rxjs';
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ import {
|
|||
EuiHorizontalRule,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageContentHeader,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
|
||||
EuiPageHeader,
|
||||
EuiTitle,
|
||||
EuiText,
|
||||
|
|
|
|||
|
|
@ -2,21 +2,23 @@
|
|||
|
||||
exports[`KibanaPageTemplate render basic template 1`] = `
|
||||
<div
|
||||
class="euiPage euiPage--grow euiPageTemplate kbnPageTemplate"
|
||||
style="min-height:460px"
|
||||
class="euiPageTemplate kbnPageTemplate emotion-euiPageOuter-row-grow"
|
||||
style="min-block-size:max(0, 100vh);padding-block-start:0"
|
||||
>
|
||||
<div
|
||||
class="euiPageBody euiPageBody--borderRadiusNone"
|
||||
<main
|
||||
class="emotion-euiPageInner"
|
||||
id="EuiPageTemplateInner_generated-id"
|
||||
>
|
||||
<header
|
||||
class="euiPageHeader euiPageHeader--paddingLarge euiPageHeader--restrictWidth-default euiPageHeader--responsive euiPageHeader--center"
|
||||
class="euiPageHeader emotion-euiPageHeader-l-border"
|
||||
title="test"
|
||||
>
|
||||
<div
|
||||
class="euiPageHeaderContent"
|
||||
class="euiPageHeaderContent emotion-euiPageHeaderContent-l"
|
||||
style="max-width:1200px"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem"
|
||||
|
|
@ -33,7 +35,7 @@ exports[`KibanaPageTemplate render basic template 1`] = `
|
|||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--wrap euiPageHeaderContent__rightSideItems"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRowReverse euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
|
|
@ -45,19 +47,10 @@ exports[`KibanaPageTemplate render basic template 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
class="euiPanel euiPanel--plain euiPageContent euiPageContent--borderRadiusNone emotion-euiPanel-grow-none-plain"
|
||||
role="main"
|
||||
>
|
||||
<div
|
||||
class="euiPageContentBody euiPage--paddingLarge euiPage--restrictWidth-default"
|
||||
>
|
||||
<div>
|
||||
Child element
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,68 +1,44 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`KibanaPageTemplateInner custom template 1`] = `
|
||||
<EuiPageTemplate
|
||||
className="kbnPageTemplate kbnPageTemplate--centeredContent"
|
||||
template="centeredContent"
|
||||
>
|
||||
<EuiEmptyPrompt
|
||||
actions={
|
||||
Array [
|
||||
"test",
|
||||
]
|
||||
}
|
||||
body={
|
||||
<p>
|
||||
test
|
||||
</p>
|
||||
}
|
||||
iconColor=""
|
||||
iconType="test"
|
||||
title={
|
||||
<h1>
|
||||
test
|
||||
</h1>
|
||||
}
|
||||
/>
|
||||
</EuiPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`KibanaPageTemplateInner isEmpty no pageHeader 1`] = `
|
||||
<EuiPageTemplate
|
||||
className="kbnPageTemplate kbnPageTemplate--centeredBody"
|
||||
template="centeredBody"
|
||||
<_EuiPageTemplate
|
||||
className="kbnPageTemplate"
|
||||
minHeight={0}
|
||||
offset={0}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`KibanaPageTemplateInner isEmpty pageHeader & children 1`] = `
|
||||
<EuiPageTemplate
|
||||
className="kbnPageTemplate kbnPageTemplate--centeredContent"
|
||||
pageHeader={
|
||||
Object {
|
||||
"description": "test",
|
||||
"iconType": "test",
|
||||
"pageTitle": "test",
|
||||
"rightSideItems": Array [
|
||||
"test",
|
||||
],
|
||||
}
|
||||
}
|
||||
template="centeredContent"
|
||||
<_EuiPageTemplate
|
||||
className="kbnPageTemplate"
|
||||
minHeight={0}
|
||||
offset={0}
|
||||
>
|
||||
<_EuiPageHeader
|
||||
description="test"
|
||||
iconType="test"
|
||||
pageTitle="test"
|
||||
rightSideItems={
|
||||
Array [
|
||||
"test",
|
||||
]
|
||||
}
|
||||
/>
|
||||
<div
|
||||
data-test-subj="child"
|
||||
>
|
||||
Child element
|
||||
</div>
|
||||
</EuiPageTemplate>
|
||||
</_EuiPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`KibanaPageTemplateInner isEmpty pageHeader & no children 1`] = `
|
||||
<EuiPageTemplate
|
||||
className="kbnPageTemplate kbnPageTemplate--centeredBody"
|
||||
template="centeredBody"
|
||||
<_EuiPageTemplate
|
||||
className="kbnPageTemplate"
|
||||
minHeight={0}
|
||||
offset={0}
|
||||
>
|
||||
<EuiEmptyPrompt
|
||||
<_EuiPageEmptyPrompt
|
||||
actions={
|
||||
Array [
|
||||
"test",
|
||||
|
|
@ -81,5 +57,17 @@ exports[`KibanaPageTemplateInner isEmpty pageHeader & no children 1`] = `
|
|||
</h1>
|
||||
}
|
||||
/>
|
||||
</EuiPageTemplate>
|
||||
</_EuiPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`KibanaPageTemplateInner page sidebar 1`] = `
|
||||
<_EuiPageTemplate
|
||||
className="kbnPageTemplate"
|
||||
minHeight={0}
|
||||
offset={0}
|
||||
>
|
||||
<EuiPageSidebar>
|
||||
Test
|
||||
</EuiPageSidebar>
|
||||
</_EuiPageTemplate>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
*/
|
||||
|
||||
import React, { FC } from 'react';
|
||||
import { EuiPageTemplate } from '@elastic/eui';
|
||||
|
||||
import {
|
||||
NoDataConfigPage,
|
||||
|
|
@ -16,8 +17,7 @@ import { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template-typ
|
|||
|
||||
import { KibanaPageTemplateInner, KibanaPageTemplateWithSolutionNav } from './page_template_inner';
|
||||
|
||||
export const KibanaPageTemplate: FC<KibanaPageTemplateProps> = ({
|
||||
template,
|
||||
export const _KibanaPageTemplate: FC<KibanaPageTemplateProps> = ({
|
||||
className,
|
||||
children,
|
||||
solutionNav,
|
||||
|
|
@ -51,7 +51,6 @@ export const KibanaPageTemplate: FC<KibanaPageTemplateProps> = ({
|
|||
if (solutionNav) {
|
||||
return (
|
||||
<KibanaPageTemplateWithSolutionNav
|
||||
template={template}
|
||||
className={className}
|
||||
solutionNav={solutionNav}
|
||||
children={children}
|
||||
|
|
@ -60,12 +59,16 @@ export const KibanaPageTemplate: FC<KibanaPageTemplateProps> = ({
|
|||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<KibanaPageTemplateInner
|
||||
template={template}
|
||||
className={className}
|
||||
children={children}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
return <KibanaPageTemplateInner className={className} children={children} {...rest} />;
|
||||
};
|
||||
|
||||
/**
|
||||
* Kibana-specific wrapper of EuiPageTemplate and it's namespaced components
|
||||
*/
|
||||
export const KibanaPageTemplate = Object.assign(_KibanaPageTemplate, {
|
||||
Sidebar: EuiPageTemplate.Sidebar,
|
||||
Header: EuiPageTemplate.Header,
|
||||
Section: EuiPageTemplate.Section,
|
||||
BottomBar: EuiPageTemplate.BottomBar,
|
||||
EmptyPrompt: EuiPageTemplate.EmptyPrompt,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
// imports from elastic packages
|
||||
import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
|
||||
|
||||
// imports from immediate files
|
||||
import { KibanaPageTemplateInner } from './page_template_inner';
|
||||
|
||||
|
|
@ -42,7 +39,7 @@ describe('KibanaPageTemplateInner', () => {
|
|||
<KibanaPageTemplateInner isEmptyState={true} pageHeader={pageHeader} />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(component.find(EuiEmptyPrompt).length).toBe(1);
|
||||
expect(component.find('_EuiPageEmptyPrompt').length).toBe(1);
|
||||
});
|
||||
|
||||
test('no pageHeader', () => {
|
||||
|
|
@ -53,15 +50,9 @@ describe('KibanaPageTemplateInner', () => {
|
|||
});
|
||||
});
|
||||
|
||||
test('custom template', () => {
|
||||
const component = shallow(
|
||||
<KibanaPageTemplateInner
|
||||
isEmptyState={true}
|
||||
pageHeader={pageHeader}
|
||||
template={'centeredContent'}
|
||||
/>
|
||||
);
|
||||
test('page sidebar', () => {
|
||||
const component = shallow(<KibanaPageTemplateInner pageSideBar={<>Test</>} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(component.find(EuiPageTemplate).props().template).toEqual('centeredContent');
|
||||
expect(component.find('EuiPageSidebar')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
import React, { FC } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
|
||||
import { EuiPageTemplate } from '@elastic/eui';
|
||||
|
||||
import { withSolutionNav } from '@kbn/shared-ux-page-solution-nav';
|
||||
import { KibanaPageTemplateProps as Props } from '@kbn/shared-ux-page-kibana-template-types';
|
||||
|
|
@ -25,28 +25,22 @@ const getClasses = (template?: string, className?: string) => {
|
|||
* A thin wrapper around EuiPageTemplate with a few Kibana specific additions
|
||||
*/
|
||||
export const KibanaPageTemplateInner: FC<Props> = ({
|
||||
template,
|
||||
className,
|
||||
pageHeader,
|
||||
children,
|
||||
isEmptyState,
|
||||
pageSideBar,
|
||||
pageSideBarProps,
|
||||
...rest
|
||||
}) => {
|
||||
/**
|
||||
* An easy way to create the right content for empty pages
|
||||
*/
|
||||
const emptyStateDefaultTemplate = 'centeredBody';
|
||||
let header = pageHeader;
|
||||
let header;
|
||||
|
||||
if (isEmptyState) {
|
||||
if (pageHeader && !children) {
|
||||
template = template ?? emptyStateDefaultTemplate;
|
||||
if (isEmptyState && pageHeader && !children) {
|
||||
const { iconType, pageTitle, description, rightSideItems } = pageHeader;
|
||||
const title = pageTitle ? <h1>{pageTitle}</h1> : undefined;
|
||||
const body = description ? <p>{description}</p> : undefined;
|
||||
header = undefined;
|
||||
children = (
|
||||
<EuiEmptyPrompt
|
||||
<EuiPageTemplate.EmptyPrompt
|
||||
iconType={iconType}
|
||||
iconColor="" // This is likely a solution or app logo, so keep it multi-color
|
||||
title={title}
|
||||
|
|
@ -54,16 +48,37 @@ export const KibanaPageTemplateInner: FC<Props> = ({
|
|||
actions={rightSideItems}
|
||||
/>
|
||||
);
|
||||
} else if (pageHeader && children) {
|
||||
template = template ?? 'centeredContent';
|
||||
} else if (!pageHeader) {
|
||||
template = template ?? emptyStateDefaultTemplate;
|
||||
}
|
||||
} else if (pageHeader) {
|
||||
header = <EuiPageTemplate.Header {...pageHeader} />;
|
||||
}
|
||||
|
||||
const classes = getClasses(template, className);
|
||||
let sideBar;
|
||||
if (pageSideBar) {
|
||||
sideBar = (
|
||||
<EuiPageTemplate.Sidebar
|
||||
// TODO: Get `offset` from Kibana Chrome Header and pass directly to:
|
||||
// sticky={{ offset }}
|
||||
{...pageSideBarProps}
|
||||
>
|
||||
{pageSideBar}
|
||||
</EuiPageTemplate.Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
const classes = getClasses(undefined, className);
|
||||
|
||||
return (
|
||||
<EuiPageTemplate template={template} className={classes} pageHeader={header} {...rest}>
|
||||
<EuiPageTemplate
|
||||
className={classes}
|
||||
// Note: Once all pages have been converted to this new component,
|
||||
// the following props can be removed to allow the template to auto-handle
|
||||
// the fixed header and banner heights.
|
||||
offset={0}
|
||||
minHeight={0}
|
||||
{...rest}
|
||||
>
|
||||
{sideBar}
|
||||
{header}
|
||||
{children}
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { EuiPageTemplateProps } from '@elastic/eui';
|
||||
import { EuiPageTemplateProps, EuiPageSidebarProps, EuiPageHeaderProps } from '@elastic/eui';
|
||||
import { SolutionNavProps } from '@kbn/shared-ux-page-solution-nav';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import {
|
||||
NoDataConfig,
|
||||
|
|
@ -21,10 +22,7 @@ export type { NoDataConfig } from '@kbn/shared-ux-page-no-data-config-types';
|
|||
|
||||
export type KibanaPageTemplateProps = EuiPageTemplateProps & {
|
||||
/**
|
||||
* Changes the template type depending on other props provided.
|
||||
* With `pageHeader` only: Uses `centeredBody` and fills an EuiEmptyPrompt with `pageHeader` info.
|
||||
* With `children` only: Uses `centeredBody`
|
||||
* With `pageHeader` and `children`: Uses `centeredContent`
|
||||
* Converts the `pageHeader` contents into an EuiEmptyPrompt when no `children` are present
|
||||
*/
|
||||
isEmptyState?: boolean;
|
||||
/**
|
||||
|
|
@ -32,8 +30,14 @@ export type KibanaPageTemplateProps = EuiPageTemplateProps & {
|
|||
*/
|
||||
solutionNav?: SolutionNavProps;
|
||||
/**
|
||||
* Accepts a configuration object, that when provided, ignores pageHeader and children and instead
|
||||
* Accepts a configuration object, that when provided, ignores `pageHeader` and `children` and instead
|
||||
* displays Agent, Beats, and custom cards to direct users to the right ingest location
|
||||
*/
|
||||
noDataConfig?: NoDataConfig;
|
||||
/**
|
||||
* BWC Props from old EUI template
|
||||
*/
|
||||
pageHeader?: EuiPageHeaderProps;
|
||||
pageSideBar?: ReactNode;
|
||||
pageSideBarProps?: EuiPageSidebarProps;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui';
|
||||
import { EuiPageTemplate, EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
|
||||
|
|
@ -51,7 +51,12 @@ export const NoDataPage = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<div className={classNames('kbnNoDataPageContents', className)} data-test-subj="kbnNoDataPage">
|
||||
<EuiPageTemplate.Section
|
||||
alignment="center"
|
||||
grow
|
||||
className={classNames('kbnNoDataPageContents', className)}
|
||||
data-test-subj="kbnNoDataPage"
|
||||
>
|
||||
<EuiText textAlign="center">
|
||||
<KibanaSolutionAvatar name={solution} iconType={logo || `logo${solution}`} size="xxl" />
|
||||
<EuiSpacer size="l" />
|
||||
|
|
@ -62,6 +67,6 @@ export const NoDataPage = ({
|
|||
</EuiText>
|
||||
<EuiSpacer size="xxl" />
|
||||
<ActionCard {...{ action }} />
|
||||
</div>
|
||||
</EuiPageTemplate.Section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,16 +6,4 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import type { NoDataConfigPageProps } from '@kbn/shared-ux-page-no-data-config-types';
|
||||
|
||||
export const NO_DATA_PAGE_MAX_WIDTH = 950;
|
||||
|
||||
export const NO_DATA_PAGE_TEMPLATE_PROPS: NoDataConfigPageProps = {
|
||||
restrictWidth: NO_DATA_PAGE_MAX_WIDTH,
|
||||
template: 'centeredBody',
|
||||
pageContentProps: {
|
||||
hasShadow: false,
|
||||
color: 'transparent',
|
||||
paddingSize: 'none',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { withSolutionNav } from '@kbn/shared-ux-page-solution-nav';
|
|||
import { NoDataPage } from '@kbn/shared-ux-page-no-data';
|
||||
import type { NoDataConfigPageProps } from '@kbn/shared-ux-page-no-data-config-types';
|
||||
|
||||
import { NO_DATA_PAGE_TEMPLATE_PROPS } from './constants';
|
||||
import { NO_DATA_PAGE_MAX_WIDTH } from './constants';
|
||||
|
||||
const getClasses = (template?: string, className?: string) => {
|
||||
return classNames(
|
||||
|
|
@ -25,20 +25,34 @@ const getClasses = (template?: string, className?: string) => {
|
|||
};
|
||||
|
||||
export const NoDataConfigPage = (props: NoDataConfigPageProps) => {
|
||||
const { className: classNameProp, noDataConfig, ...rest } = props;
|
||||
const { className, noDataConfig, pageSideBar, pageSideBarProps, ...rest } = props;
|
||||
|
||||
if (!noDataConfig) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const className = getClasses(NO_DATA_PAGE_TEMPLATE_PROPS.template, classNameProp);
|
||||
let sideBar;
|
||||
if (pageSideBar) {
|
||||
sideBar = (
|
||||
<EuiPageTemplate.Sidebar {...pageSideBarProps}>{pageSideBar}</EuiPageTemplate.Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
const classes = getClasses(undefined, className);
|
||||
|
||||
return (
|
||||
<EuiPageTemplate
|
||||
data-test-subj={props['data-test-subj']}
|
||||
{...{ className, ...rest }}
|
||||
{...NO_DATA_PAGE_TEMPLATE_PROPS}
|
||||
className={classes}
|
||||
restrictWidth={NO_DATA_PAGE_MAX_WIDTH}
|
||||
panelled={false}
|
||||
// Note: Once all pages have been converted to this new component,
|
||||
// the following props can be removed to allow the template to auto-handle
|
||||
// the fixed header and banner heights.
|
||||
offset={0}
|
||||
minHeight={0}
|
||||
{...rest}
|
||||
>
|
||||
{sideBar}
|
||||
<NoDataPage {...noDataConfig} />
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { EuiPageTemplateProps } from '@elastic/eui';
|
||||
import { ReactNode } from 'react';
|
||||
import { EuiPageTemplateProps, EuiPageSidebarProps } from '@elastic/eui';
|
||||
|
||||
import type {
|
||||
NoDataPageProps,
|
||||
|
|
@ -20,8 +21,13 @@ export type NoDataConfig = NoDataPageProps;
|
|||
|
||||
export type NoDataConfigPageProps = EuiPageTemplateProps & {
|
||||
/**
|
||||
* Accepts a configuration object, that when provided, ignores pageHeader and children and instead
|
||||
* Accepts a configuration object, that when provided, ignores `pageHeader` and `children` and instead
|
||||
* displays Agent, Beats, and custom cards to direct users to the right ingest location
|
||||
*/
|
||||
noDataConfig?: NoDataConfig;
|
||||
/**
|
||||
* BWC Props from old EUI template
|
||||
*/
|
||||
pageSideBar?: ReactNode;
|
||||
pageSideBarProps?: EuiPageSidebarProps;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
|
|||
}
|
||||
pageSideBarProps={
|
||||
Object {
|
||||
"className": "kbnSolutionNav__sidebar",
|
||||
"className": "kbnSolutionNav__sidebar kbnStickyMenu",
|
||||
"minWidth": undefined,
|
||||
"paddingSize": "none",
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +112,8 @@ exports[`WithSolutionNav with children 1`] = `
|
|||
}
|
||||
pageSideBarProps={
|
||||
Object {
|
||||
"className": "kbnSolutionNav__sidebar",
|
||||
"className": "kbnSolutionNav__sidebar kbnStickyMenu",
|
||||
"minWidth": undefined,
|
||||
"paddingSize": "none",
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@
|
|||
opacity: 1 !important;
|
||||
transition-delay: 0s !important;
|
||||
left: 0 !important;
|
||||
right: 0;
|
||||
right: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: $euiSizeXXL;
|
||||
border-radius: 0;
|
||||
// Keep the icon at the top instead of it getting shifted to the center of the page
|
||||
padding-top: $euiSizeL + $euiSizeS;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,8 @@
|
|||
// TODO: Can now be converted to Emotion
|
||||
.kbnSolutionNav__sidebar {
|
||||
overflow: hidden;
|
||||
// Temporary hack till the sizing is changed directly in EUI
|
||||
min-width: 248px;
|
||||
|
||||
@include euiCanAnimate {
|
||||
transition: min-width $euiAnimSpeedFast $euiAnimSlightResistance;
|
||||
}
|
||||
|
||||
&.kbnSolutionNav__sidebar--shrink {
|
||||
min-width: $euiSizeXXL;
|
||||
}
|
||||
|
||||
.kbnPageTemplate--centeredBody & {
|
||||
border-right: $euiBorderThin;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { ComponentType, useState } from 'react';
|
||||
import React, { ComponentType, ReactNode, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useIsWithinBreakpoints, EuiPageTemplateProps } from '@elastic/eui';
|
||||
import { useIsWithinBreakpoints, useEuiTheme, EuiPageSidebarProps } from '@elastic/eui';
|
||||
import { SolutionNav, SolutionNavProps } from './solution_nav';
|
||||
|
||||
import './with_solution_nav.scss';
|
||||
|
|
@ -18,31 +18,30 @@ function getDisplayName(Component: ComponentType<any>) {
|
|||
return Component.displayName || Component.name || 'UnnamedComponent';
|
||||
}
|
||||
|
||||
type TemplateProps = Pick<
|
||||
EuiPageTemplateProps,
|
||||
'pageSideBar' | 'pageSideBarProps' | 'template' | 'children'
|
||||
>;
|
||||
|
||||
type ComponentProps = TemplateProps & {
|
||||
isEmptyState?: boolean;
|
||||
};
|
||||
// TODO: Would be nice to grab these from KibanaPageTemplate or vice-versa
|
||||
interface TemplateProps {
|
||||
pageSideBar?: ReactNode;
|
||||
pageSideBarProps?: Partial<EuiPageSidebarProps>;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
type Props<P> = P &
|
||||
ComponentProps & {
|
||||
TemplateProps & {
|
||||
solutionNav: SolutionNavProps;
|
||||
};
|
||||
|
||||
const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed';
|
||||
|
||||
export const withSolutionNav = <P extends ComponentProps>(WrappedComponent: ComponentType<P>) => {
|
||||
export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: ComponentType<P>) => {
|
||||
const WithSolutionNav = (props: Props<P>) => {
|
||||
const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
|
||||
const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
|
||||
const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(
|
||||
!JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY)))
|
||||
);
|
||||
const { solutionNav, ...propagatedProps } = props;
|
||||
const { children, isEmptyState, template } = propagatedProps;
|
||||
|
||||
const { solutionNav, children, ...propagatedProps } = props;
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const toggleOpenOnDesktop = () => {
|
||||
setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop);
|
||||
|
|
@ -52,17 +51,17 @@ export const withSolutionNav = <P extends ComponentProps>(WrappedComponent: Comp
|
|||
|
||||
// Default navigation to allow collapsing
|
||||
const { canBeCollapsed = true } = solutionNav;
|
||||
const isSidebarShrunk =
|
||||
isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop);
|
||||
const sideBarClasses = classNames(
|
||||
'kbnSolutionNav__sidebar',
|
||||
'kbnStickyMenu',
|
||||
{
|
||||
'kbnSolutionNav__sidebar--shrink':
|
||||
isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop),
|
||||
'kbnSolutionNav__sidebar--shrink': isSidebarShrunk,
|
||||
},
|
||||
props.pageSideBarProps?.className
|
||||
);
|
||||
|
||||
const templateToUse = isEmptyState && !template ? 'centeredContent' : template;
|
||||
|
||||
const pageSideBar = (
|
||||
<SolutionNav
|
||||
isOpenOnDesktop={isSideNavOpenOnDesktop}
|
||||
|
|
@ -71,9 +70,10 @@ export const withSolutionNav = <P extends ComponentProps>(WrappedComponent: Comp
|
|||
/>
|
||||
);
|
||||
|
||||
const pageSideBarProps = {
|
||||
const pageSideBarProps: TemplateProps['pageSideBarProps'] = {
|
||||
paddingSize: 'none' as 'none',
|
||||
...props.pageSideBarProps,
|
||||
minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,
|
||||
className: sideBarClasses,
|
||||
};
|
||||
|
||||
|
|
@ -83,7 +83,6 @@ export const withSolutionNav = <P extends ComponentProps>(WrappedComponent: Comp
|
|||
...(propagatedProps as P),
|
||||
pageSideBar,
|
||||
pageSideBarProps,
|
||||
template: templateToUse,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,12 @@ import type { History } from 'history';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { I18nProvider } from '@kbn/i18n-react';
|
||||
|
||||
import { EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
|
||||
import {
|
||||
EuiEmptyPrompt,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
} 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';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,13 @@
|
|||
*/
|
||||
|
||||
import React, { FC, useMemo } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiSpacer,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import { StatusTable } from './status_table';
|
||||
import { FormattedStatus, getHighestStatus } from '../lib';
|
||||
import { StatusBadge } from './status_badge';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
*/
|
||||
|
||||
import React, { FC } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiPageContent, EuiText } from '@elastic/eui';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import type { ServerVersion } from '../../../../types/status';
|
||||
|
||||
|
|
|
|||
|
|
@ -49,6 +49,12 @@
|
|||
max-height: calc(100vh - #{$headerHeight + $euiSize});
|
||||
top: $headerHeight + $euiSize;
|
||||
}
|
||||
|
||||
.kbnSolutionNav__sidebar {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - #{$headerHeight});
|
||||
top: $headerHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
|
|||
'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
|
||||
'@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
|
||||
'@elastic/ems-client@8.3.3': ['Elastic License 2.0'],
|
||||
'@elastic/eui@62.2.4': ['SSPL-1.0 OR Elastic License 2.0'],
|
||||
'@elastic/eui@63.0.6': ['SSPL-1.0 OR Elastic License 2.0'],
|
||||
'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { EuiLoadingContent, EuiPageContent } from '@elastic/eui';
|
||||
import { EuiLoadingContent, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
|
||||
|
||||
export const EditorContentSpinner: FunctionComponent = () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -8,7 +8,12 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiPageContent } from '@elastic/eui';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiTitle,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
} from '@elastic/eui';
|
||||
import { ConsoleHistory } from '../console_history';
|
||||
import { Editor } from '../editor';
|
||||
import { Settings } from '../settings';
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export const DashboardAppNoDataPage = ({
|
|||
};
|
||||
return (
|
||||
<AnalyticsNoDataPageKibanaProvider {...analyticsServices}>
|
||||
<AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} />;
|
||||
<AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} />
|
||||
</AnalyticsNoDataPageKibanaProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@ exports[`DashboardEmptyScreen renders correctly with edit mode 1`] = `
|
|||
|
||||
exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
|
||||
<div
|
||||
class="euiPage euiPage--paddingMedium euiPage--grow euiPage--restrictWidth-custom dshStartScreen"
|
||||
class="euiPage dshStartScreen emotion-euiPage-row-grow-restrictWidth"
|
||||
data-test-subj="dashboardEmptyReadOnly"
|
||||
style="max-width: 500px;"
|
||||
>
|
||||
<div
|
||||
class="euiPageBody euiPageBody--borderRadiusNone"
|
||||
class="euiPageBody emotion-euiPageBody"
|
||||
>
|
||||
<div
|
||||
class="euiPanel euiPanel--plain euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter dshStartScreen__pageContent emotion-euiPanel-grow-m-plain-hasShadow"
|
||||
|
|
@ -73,12 +73,12 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
|
|||
|
||||
exports[`DashboardEmptyScreen renders correctly with view mode 1`] = `
|
||||
<div
|
||||
class="euiPage euiPage--paddingMedium euiPage--grow euiPage--restrictWidth-custom dshStartScreen"
|
||||
class="euiPage dshStartScreen emotion-euiPage-row-grow-restrictWidth"
|
||||
data-test-subj="dashboardEmptyReadWrite"
|
||||
style="max-width: 500px;"
|
||||
>
|
||||
<div
|
||||
class="euiPageBody euiPageBody--borderRadiusNone"
|
||||
class="euiPageBody emotion-euiPageBody"
|
||||
>
|
||||
<div
|
||||
class="euiPanel euiPanel--plain euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter dshStartScreen__pageContent emotion-euiPanel-grow-m-plain-hasShadow"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { I18nProvider } from '@kbn/i18n-react';
|
|||
import {
|
||||
EuiIcon,
|
||||
EuiSpacer,
|
||||
EuiPageContent,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageBody,
|
||||
EuiPage,
|
||||
EuiImage,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`EmptyIndexListPrompt should render normally 1`] = `
|
||||
<Fragment>
|
||||
<EuiPageContent
|
||||
<EuiPageContent_Deprecated
|
||||
className="inpEmptyState"
|
||||
color="subdued"
|
||||
data-test-subj="indexPatternEmptyState"
|
||||
|
|
@ -10,8 +10,8 @@ exports[`EmptyIndexListPrompt should render normally 1`] = `
|
|||
horizontalPosition="center"
|
||||
verticalPosition="center"
|
||||
>
|
||||
<EuiPageContentHeader>
|
||||
<EuiPageContentHeaderSection>
|
||||
<EuiPageContentHeader_Deprecated>
|
||||
<EuiPageContentHeaderSection_Deprecated>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
|
|
@ -21,12 +21,12 @@ exports[`EmptyIndexListPrompt should render normally 1`] = `
|
|||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiPageContentHeaderSection>
|
||||
</EuiPageContentHeader>
|
||||
</EuiPageContentHeaderSection_Deprecated>
|
||||
</EuiPageContentHeader_Deprecated>
|
||||
<EuiSpacer
|
||||
size="m"
|
||||
/>
|
||||
<EuiPageContentBody>
|
||||
<EuiPageContentBody_Deprecated>
|
||||
<EuiFlexGrid
|
||||
className="inpEmptyState__cardGrid"
|
||||
columns={3}
|
||||
|
|
@ -212,7 +212,7 @@ exports[`EmptyIndexListPrompt should render normally 1`] = `
|
|||
/>
|
||||
</EuiText>
|
||||
</div>
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageContentBody_Deprecated>
|
||||
</EuiPageContent_Deprecated>
|
||||
</Fragment>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ import './empty_index_list_prompt.scss';
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import {
|
||||
EuiPageContentHeader,
|
||||
EuiPageContentHeaderSection,
|
||||
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
|
||||
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
|
||||
EuiTitle,
|
||||
EuiPageContentBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiIcon,
|
||||
EuiSpacer,
|
||||
EuiFlexItem,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,12 @@ import React, { Fragment, memo, useEffect, useRef, useMemo, useCallback } from '
|
|||
import './context_app.scss';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { EuiText, EuiPageContent, EuiPage, EuiSpacer } from '@elastic/eui';
|
||||
import {
|
||||
EuiText,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPage,
|
||||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
|
||||
import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
|
||||
|
|
|
|||
|
|
@ -8,7 +8,13 @@
|
|||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { EuiCallOut, EuiLink, EuiLoadingSpinner, EuiPageContent, EuiPage } from '@elastic/eui';
|
||||
import {
|
||||
EuiCallOut,
|
||||
EuiLink,
|
||||
EuiLoadingSpinner,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPage,
|
||||
} from '@elastic/eui';
|
||||
import type { DataView } from '@kbn/data-views-plugin/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { DocViewer } from '../../../services/doc_views/components/doc_viewer';
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {
|
|||
EuiHorizontalRule,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
EuiTitle,
|
||||
EuiSpacer,
|
||||
EuiNotificationBadge,
|
||||
EuiPageSideBar,
|
||||
EuiPageSideBar_Deprecated as EuiPageSideBar,
|
||||
useResizeObserver,
|
||||
EuiButton,
|
||||
} from '@elastic/eui';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { EuiSpacer, EuiEmptyPrompt, EuiPageContent } from '@elastic/eui';
|
||||
import {
|
||||
EuiSpacer,
|
||||
EuiEmptyPrompt,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
} from '@elastic/eui';
|
||||
import React from 'react';
|
||||
// eslint-disable-next-line @kbn/imports/no_boundary_crossing
|
||||
import { APP_WRAPPER_CLASS } from '@kbn/core/public';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { EuiEmptyPrompt, EuiLoadingSpinner, EuiText, EuiPageContent } from '@elastic/eui';
|
||||
import {
|
||||
EuiEmptyPrompt,
|
||||
EuiLoadingSpinner,
|
||||
EuiText,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
} from '@elastic/eui';
|
||||
|
||||
export const PageLoading: React.FunctionComponent = ({ children }) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -8,14 +8,9 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
EuiEmptyPrompt,
|
||||
EuiLoadingSpinner,
|
||||
EuiText,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiTextColor,
|
||||
} from '@elastic/eui';
|
||||
import { EuiLoadingSpinner, EuiText, EuiFlexGroup, EuiFlexItem, EuiTextColor } from '@elastic/eui';
|
||||
|
||||
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||
|
||||
interface Props {
|
||||
inline?: boolean;
|
||||
|
|
@ -40,7 +35,7 @@ export const SectionLoading: React.FunctionComponent<Props> = ({ inline, childre
|
|||
}
|
||||
|
||||
return (
|
||||
<EuiEmptyPrompt
|
||||
<KibanaPageTemplate.EmptyPrompt
|
||||
title={<EuiLoadingSpinner size="xl" />}
|
||||
body={<EuiText color="subdued">{children}</EuiText>}
|
||||
data-test-subj="sectionLoading"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`home change home route should render a link to change the default route in advanced settings if advanced settings is enabled 1`] = `
|
||||
<mockConstructor
|
||||
<_KibanaPageTemplate
|
||||
data-test-subj="homeApp"
|
||||
pageHeader={
|
||||
Object {
|
||||
|
|
@ -13,7 +13,7 @@ exports[`home change home route should render a link to change the default route
|
|||
/>,
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection
|
||||
addBasePath={[Function]}
|
||||
|
|
@ -51,11 +51,11 @@ exports[`home change home route should render a link to change the default route
|
|||
onSetDefaultRoute={[Function]}
|
||||
path="/app/home"
|
||||
/>
|
||||
</mockConstructor>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`home directories should not render directory entry when showOnHomePage is false 1`] = `
|
||||
<mockConstructor
|
||||
<_KibanaPageTemplate
|
||||
data-test-subj="homeApp"
|
||||
pageHeader={
|
||||
Object {
|
||||
|
|
@ -67,7 +67,7 @@ exports[`home directories should not render directory entry when showOnHomePage
|
|||
/>,
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection
|
||||
addBasePath={[Function]}
|
||||
|
|
@ -105,11 +105,11 @@ exports[`home directories should not render directory entry when showOnHomePage
|
|||
onSetDefaultRoute={[Function]}
|
||||
path="/app/home"
|
||||
/>
|
||||
</mockConstructor>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`home directories should render ADMIN directory entry in "Manage your data" panel 1`] = `
|
||||
<mockConstructor
|
||||
<_KibanaPageTemplate
|
||||
data-test-subj="homeApp"
|
||||
pageHeader={
|
||||
Object {
|
||||
|
|
@ -121,7 +121,7 @@ exports[`home directories should render ADMIN directory entry in "Manage your da
|
|||
/>,
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection
|
||||
addBasePath={[Function]}
|
||||
|
|
@ -171,11 +171,11 @@ exports[`home directories should render ADMIN directory entry in "Manage your da
|
|||
onSetDefaultRoute={[Function]}
|
||||
path="/app/home"
|
||||
/>
|
||||
</mockConstructor>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`home directories should render solutions in the "solution section" 1`] = `
|
||||
<mockConstructor
|
||||
<_KibanaPageTemplate
|
||||
data-test-subj="homeApp"
|
||||
pageHeader={
|
||||
Object {
|
||||
|
|
@ -187,7 +187,7 @@ exports[`home directories should render solutions in the "solution section" 1`]
|
|||
/>,
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection
|
||||
addBasePath={[Function]}
|
||||
|
|
@ -260,11 +260,11 @@ exports[`home directories should render solutions in the "solution section" 1`]
|
|||
onSetDefaultRoute={[Function]}
|
||||
path="/app/home"
|
||||
/>
|
||||
</mockConstructor>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`home isNewKibanaInstance should safely handle exceptions 1`] = `
|
||||
<mockConstructor
|
||||
<_KibanaPageTemplate
|
||||
data-test-subj="homeApp"
|
||||
pageHeader={
|
||||
Object {
|
||||
|
|
@ -276,7 +276,7 @@ exports[`home isNewKibanaInstance should safely handle exceptions 1`] = `
|
|||
/>,
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection
|
||||
addBasePath={[Function]}
|
||||
|
|
@ -314,11 +314,11 @@ exports[`home isNewKibanaInstance should safely handle exceptions 1`] = `
|
|||
onSetDefaultRoute={[Function]}
|
||||
path="/app/home"
|
||||
/>
|
||||
</mockConstructor>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = `
|
||||
<mockConstructor
|
||||
<_KibanaPageTemplate
|
||||
data-test-subj="homeApp"
|
||||
pageHeader={
|
||||
Object {
|
||||
|
|
@ -330,7 +330,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
|
|||
/>,
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection
|
||||
addBasePath={[Function]}
|
||||
|
|
@ -368,7 +368,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
|
|||
onSetDefaultRoute={[Function]}
|
||||
path="/app/home"
|
||||
/>
|
||||
</mockConstructor>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
||||
exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = `
|
||||
|
|
@ -379,7 +379,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
|
|||
`;
|
||||
|
||||
exports[`home should render home component 1`] = `
|
||||
<mockConstructor
|
||||
<_KibanaPageTemplate
|
||||
data-test-subj="homeApp"
|
||||
pageHeader={
|
||||
Object {
|
||||
|
|
@ -391,7 +391,7 @@ exports[`home should render home component 1`] = `
|
|||
/>,
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection
|
||||
addBasePath={[Function]}
|
||||
|
|
@ -429,5 +429,5 @@ exports[`home should render home component 1`] = `
|
|||
onSetDefaultRoute={[Function]}
|
||||
path="/app/home"
|
||||
/>
|
||||
</mockConstructor>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
.homDataAdd__illustration {
|
||||
display: block;
|
||||
margin: 0 auto #{-($euiSizeXXL + $euiSizeXS)} auto;
|
||||
margin-block: 0 #{-($euiSizeXL + $euiSizeXS)};
|
||||
margin-inline: auto;
|
||||
|
||||
@include euiBreakpoint('m', 'l', 'xl') {
|
||||
margin-bottom: -$euiSizeXXL;
|
||||
margin-block-end: -$euiSizeXL;
|
||||
}
|
||||
|
||||
@include euiBreakpoint('l', 'xl') {
|
||||
width: 80%;
|
||||
inline-size: 80%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,17 @@
|
|||
.homSolutions__content {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.homSolutions__item {
|
||||
@include euiBreakpoint('l', 'xl') {
|
||||
max-width: calc(33.33% - #{$euiSizeM * 2});
|
||||
max-inline-size: calc(33.33% - #{$euiSizeM * 2});
|
||||
}
|
||||
}
|
||||
|
||||
.homSolutionPanel {
|
||||
img {
|
||||
background-color: $euiColorPrimary;
|
||||
max-height: $euiSize * 10;
|
||||
max-block-size: $euiSize * 10;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AddData render 1`] = `
|
||||
<Fragment>
|
||||
<section
|
||||
<_EuiPageSection
|
||||
aria-labelledby="homDataAdd__title"
|
||||
bottomBorder={true}
|
||||
className="homDataAdd"
|
||||
>
|
||||
paddingSize="xl"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexEnd"
|
||||
>
|
||||
|
|
@ -108,9 +109,5 @@ exports[`AddData render 1`] = `
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
<EuiHorizontalRule
|
||||
margin="xxl"
|
||||
/>
|
||||
</Fragment>
|
||||
</_EuiPageSection>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ import {
|
|||
EuiButtonEmpty,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiHorizontalRule,
|
||||
EuiImage,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { METRIC_TYPE } from '@kbn/analytics';
|
||||
import { ApplicationStart } from '@kbn/core/public';
|
||||
|
|
@ -36,8 +36,12 @@ export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode }) =>
|
|||
const canAccessIntegrations = application.capabilities.navLinks.integrations;
|
||||
if (canAccessIntegrations) {
|
||||
return (
|
||||
<>
|
||||
<section className="homDataAdd" aria-labelledby="homDataAdd__title">
|
||||
<KibanaPageTemplate.Section
|
||||
bottomBorder
|
||||
paddingSize="xl"
|
||||
className="homDataAdd"
|
||||
aria-labelledby="homDataAdd__title"
|
||||
>
|
||||
<EuiFlexGroup alignItems="flexEnd">
|
||||
<EuiFlexItem>
|
||||
<EuiTitle size="s">
|
||||
|
|
@ -125,10 +129,7 @@ export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode }) =>
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
|
||||
<EuiHorizontalRule margin="xxl" />
|
||||
</>
|
||||
</KibanaPageTemplate.Section>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`getting started should render getting started component 1`] = `
|
||||
<KibanaPageTemplate
|
||||
template="centeredBody"
|
||||
<_KibanaPageTemplate
|
||||
grow={true}
|
||||
panelled={false}
|
||||
>
|
||||
<div
|
||||
<_EuiPageSection
|
||||
alignment="center"
|
||||
>
|
||||
<EuiPanel
|
||||
color="plain"
|
||||
css={
|
||||
Object {
|
||||
"map": undefined,
|
||||
|
|
@ -16,6 +21,7 @@ exports[`getting started should render getting started component 1`] = `
|
|||
"toString": [Function],
|
||||
}
|
||||
}
|
||||
hasShadow={true}
|
||||
>
|
||||
<EuiTitle
|
||||
className="eui-textCenter"
|
||||
|
|
@ -76,6 +82,7 @@ exports[`getting started should render getting started component 1`] = `
|
|||
No thanks, I’ll explore on my own.
|
||||
</EuiLink>
|
||||
</div>
|
||||
</div>
|
||||
</KibanaPageTemplate>
|
||||
</EuiPanel>
|
||||
</_EuiPageSection>
|
||||
</_KibanaPageTemplate>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiHorizontalRule,
|
||||
EuiLink,
|
||||
EuiPageTemplate,
|
||||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
|
|
@ -72,8 +74,9 @@ export const GettingStarted = () => {
|
|||
padding: calc(${euiTheme.size.base}*3) calc(${euiTheme.size.base}*4);
|
||||
`;
|
||||
return (
|
||||
<KibanaPageTemplate template="centeredBody">
|
||||
<div css={paddingCss}>
|
||||
<KibanaPageTemplate panelled={false} grow>
|
||||
<EuiPageTemplate.Section alignment="center">
|
||||
<EuiPanel color="plain" hasShadow css={paddingCss}>
|
||||
<EuiTitle size="l" className="eui-textCenter">
|
||||
<h1>{title}</h1>
|
||||
</EuiTitle>
|
||||
|
|
@ -103,7 +106,8 @@ export const GettingStarted = () => {
|
|||
{skipText}
|
||||
</EuiLink>
|
||||
</div>
|
||||
</div>
|
||||
</EuiPanel>
|
||||
</EuiPageTemplate.Section>
|
||||
</KibanaPageTemplate>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ import React, { Component } from 'react';
|
|||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { METRIC_TYPE } from '@kbn/analytics';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { KibanaPageTemplate, OverviewPageFooter } from '@kbn/kibana-react-plugin/public';
|
||||
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||
import { OverviewPageFooter } from '@kbn/kibana-react-plugin/public';
|
||||
import { HOME_APP_BASE_PATH } from '../../../common/constants';
|
||||
import type {
|
||||
FeatureCatalogueEntry,
|
||||
|
|
@ -143,7 +144,7 @@ export class Home extends Component<HomeProps, State> {
|
|||
bottomBorder: false,
|
||||
pageTitle: <FormattedMessage id="home.header.title" defaultMessage="Welcome home" />,
|
||||
}}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<SolutionsSection addBasePath={addBasePath} solutions={solutions} />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ManageData hide dev tools and stack management links if unavailable 1`] = `
|
||||
<Fragment>
|
||||
<section
|
||||
<_EuiPageSection
|
||||
aria-labelledby="homDataManage__title"
|
||||
bottomBorder={true}
|
||||
className="homDataManage"
|
||||
data-test-subj="homDataManage"
|
||||
>
|
||||
paddingSize="xl"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
>
|
||||
|
|
@ -89,20 +90,17 @@ exports[`ManageData hide dev tools and stack management links if unavailable 1`]
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
<EuiHorizontalRule
|
||||
margin="xxl"
|
||||
/>
|
||||
</Fragment>
|
||||
</_EuiPageSection>
|
||||
`;
|
||||
|
||||
exports[`ManageData render 1`] = `
|
||||
<Fragment>
|
||||
<section
|
||||
<_EuiPageSection
|
||||
aria-labelledby="homDataManage__title"
|
||||
bottomBorder={true}
|
||||
className="homDataManage"
|
||||
data-test-subj="homDataManage"
|
||||
>
|
||||
paddingSize="xl"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
>
|
||||
|
|
@ -256,11 +254,7 @@ exports[`ManageData render 1`] = `
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
<EuiHorizontalRule
|
||||
margin="xxl"
|
||||
/>
|
||||
</Fragment>
|
||||
</_EuiPageSection>
|
||||
`;
|
||||
|
||||
exports[`ManageData render null without any features 1`] = `""`;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,8 @@
|
|||
*/
|
||||
|
||||
import React, { FC, MouseEvent } from 'react';
|
||||
import {
|
||||
EuiButtonEmpty,
|
||||
EuiFlexGroup,
|
||||
EuiHorizontalRule,
|
||||
EuiSpacer,
|
||||
EuiTitle,
|
||||
EuiFlexItem,
|
||||
} from '@elastic/eui';
|
||||
import { EuiButtonEmpty, EuiFlexGroup, EuiSpacer, EuiTitle, EuiFlexItem } from '@elastic/eui';
|
||||
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { METRIC_TYPE } from '@kbn/analytics';
|
||||
import { ApplicationStart } from '@kbn/core/public';
|
||||
|
|
@ -43,8 +37,9 @@ export const ManageData: FC<Props> = ({ addBasePath, application, features }) =>
|
|||
application.capabilities.navLinks;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
<KibanaPageTemplate.Section
|
||||
bottomBorder
|
||||
paddingSize="xl"
|
||||
className="homDataManage"
|
||||
aria-labelledby="homDataManage__title"
|
||||
data-test-subj="homDataManage"
|
||||
|
|
@ -123,10 +118,7 @@ export const ManageData: FC<Props> = ({ addBasePath, application, features }) =>
|
|||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
|
||||
<EuiHorizontalRule margin="xxl" />
|
||||
</>
|
||||
</KibanaPageTemplate.Section>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SolutionsSection renders a single solution 1`] = `
|
||||
<Fragment>
|
||||
<section
|
||||
<_EuiPageSection
|
||||
aria-labelledby="homSolutions__title"
|
||||
bottomBorder={true}
|
||||
className="homSolutions"
|
||||
>
|
||||
contentProps={
|
||||
Object {
|
||||
"className": "homSolutions__content",
|
||||
}
|
||||
}
|
||||
paddingSize="xl"
|
||||
>
|
||||
<EuiScreenReaderOnly>
|
||||
<h2
|
||||
id="homSolutions__title"
|
||||
|
|
@ -35,19 +41,21 @@ exports[`SolutionsSection renders a single solution 1`] = `
|
|||
}
|
||||
/>
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
<EuiHorizontalRule
|
||||
margin="xxl"
|
||||
/>
|
||||
</Fragment>
|
||||
</_EuiPageSection>
|
||||
`;
|
||||
|
||||
exports[`SolutionsSection renders multiple solutions 1`] = `
|
||||
<Fragment>
|
||||
<section
|
||||
<_EuiPageSection
|
||||
aria-labelledby="homSolutions__title"
|
||||
bottomBorder={true}
|
||||
className="homSolutions"
|
||||
>
|
||||
contentProps={
|
||||
Object {
|
||||
"className": "homSolutions__content",
|
||||
}
|
||||
}
|
||||
paddingSize="xl"
|
||||
>
|
||||
<EuiScreenReaderOnly>
|
||||
<h2
|
||||
id="homSolutions__title"
|
||||
|
|
@ -119,11 +127,7 @@ exports[`SolutionsSection renders multiple solutions 1`] = `
|
|||
}
|
||||
/>
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
<EuiHorizontalRule
|
||||
margin="xxl"
|
||||
/>
|
||||
</Fragment>
|
||||
</_EuiPageSection>
|
||||
`;
|
||||
|
||||
exports[`SolutionsSection renders null if no solutions are available 1`] = `""`;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
*/
|
||||
|
||||
import React, { FC } from 'react';
|
||||
import { EuiFlexGroup, EuiHorizontalRule, EuiScreenReaderOnly } from '@elastic/eui';
|
||||
import { EuiFlexGroup, EuiScreenReaderOnly } from '@elastic/eui';
|
||||
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { SolutionPanel } from './solution_panel';
|
||||
import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../..';
|
||||
|
|
@ -27,8 +28,13 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions }) => {
|
|||
solutions = solutions.sort(sortByOrder);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section aria-labelledby="homSolutions__title" className="homSolutions">
|
||||
<KibanaPageTemplate.Section
|
||||
bottomBorder
|
||||
paddingSize="xl"
|
||||
aria-labelledby="homSolutions__title"
|
||||
className="homSolutions"
|
||||
contentProps={{ className: 'homSolutions__content' }}
|
||||
>
|
||||
<EuiScreenReaderOnly>
|
||||
<h2 id="homSolutions__title">
|
||||
<FormattedMessage
|
||||
|
|
@ -43,10 +49,7 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions }) => {
|
|||
<SolutionPanel addBasePath={addBasePath} key={solution.id} solution={solution} />
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</section>
|
||||
|
||||
<EuiHorizontalRule margin="xxl" />
|
||||
</>
|
||||
</KibanaPageTemplate.Section>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -214,6 +214,7 @@ exports[`Overview renders correctly 1`] = `
|
|||
<KibanaPageTemplate
|
||||
pageHeader={
|
||||
Object {
|
||||
"bottomBorder": true,
|
||||
"iconType": "logoKibana",
|
||||
"pageTitle": <FormattedMessage
|
||||
defaultMessage="Analytics"
|
||||
|
|
@ -223,7 +224,7 @@ exports[`Overview renders correctly 1`] = `
|
|||
"rightSideItems": Array [],
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<MockedKibanaPageTemplate />
|
||||
</KibanaPageTemplate>
|
||||
|
|
@ -914,6 +915,7 @@ exports[`Overview renders correctly without features 1`] = `
|
|||
<KibanaPageTemplate
|
||||
pageHeader={
|
||||
Object {
|
||||
"bottomBorder": true,
|
||||
"iconType": "logoKibana",
|
||||
"pageTitle": <FormattedMessage
|
||||
defaultMessage="Analytics"
|
||||
|
|
@ -923,7 +925,7 @@ exports[`Overview renders correctly without features 1`] = `
|
|||
"rightSideItems": Array [],
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<MockedKibanaPageTemplate />
|
||||
</KibanaPageTemplate>
|
||||
|
|
@ -1109,6 +1111,7 @@ exports[`Overview renders correctly without solutions 1`] = `
|
|||
<KibanaPageTemplate
|
||||
pageHeader={
|
||||
Object {
|
||||
"bottomBorder": true,
|
||||
"iconType": "logoKibana",
|
||||
"pageTitle": <FormattedMessage
|
||||
defaultMessage="Analytics"
|
||||
|
|
@ -1118,7 +1121,7 @@ exports[`Overview renders correctly without solutions 1`] = `
|
|||
"rightSideItems": Array [],
|
||||
}
|
||||
}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<MockedKibanaPageTemplate />
|
||||
</KibanaPageTemplate>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
EuiCard,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiHorizontalRule,
|
||||
EuiScreenReaderOnly,
|
||||
EuiSpacer,
|
||||
EuiTitle,
|
||||
|
|
@ -214,17 +213,18 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
|
|||
showDevToolsLink: !!devTools,
|
||||
showManagementLink: !!manageDataFeatures,
|
||||
}),
|
||||
bottomBorder: true,
|
||||
}}
|
||||
template="empty"
|
||||
panelled={false}
|
||||
>
|
||||
<KibanaPageTemplate.Section
|
||||
bottomBorder
|
||||
aria-labelledby="kbnOverviewApps__title"
|
||||
className="kbnOverviewApps"
|
||||
>
|
||||
<>
|
||||
<section aria-labelledby="kbnOverviewApps__title" className="kbnOverviewApps">
|
||||
<EuiScreenReaderOnly>
|
||||
<h2 id="kbnOverviewApps__title">
|
||||
<FormattedMessage
|
||||
id="kibanaOverview.apps.title"
|
||||
defaultMessage="Explore these apps"
|
||||
/>
|
||||
<FormattedMessage id="kibanaOverview.apps.title" defaultMessage="Explore these apps" />
|
||||
</h2>
|
||||
</EuiScreenReaderOnly>
|
||||
|
||||
|
|
@ -249,10 +249,9 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
|
|||
{remainingApps.map(renderAppCard)}
|
||||
</EuiFlexGroup>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<EuiHorizontalRule aria-hidden="true" margin="xl" />
|
||||
</KibanaPageTemplate.Section>
|
||||
|
||||
<KibanaPageTemplate.Section bottomBorder paddingSize="xl">
|
||||
<EuiFlexGroup
|
||||
alignItems="flexStart"
|
||||
className={`kbnOverviewSupplements ${
|
||||
|
|
@ -332,9 +331,7 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
|
|||
)}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
|
||||
<EuiHorizontalRule margin="xl" aria-hidden="true" />
|
||||
</KibanaPageTemplate.Section>
|
||||
|
||||
<OverviewPageFooter
|
||||
addBasePath={addBasePath}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`OverviewPageFooter render 1`] = `
|
||||
<footer
|
||||
<_EuiPageSection
|
||||
className="kbnOverviewPageFooter"
|
||||
component="footer"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
justifyContent="spaceBetween"
|
||||
|
|
@ -27,5 +28,5 @@ exports[`OverviewPageFooter render 1`] = `
|
|||
</div>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</footer>
|
||||
</_EuiPageSection>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import React, { FC, MouseEvent } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
|
||||
import { EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { CoreStart } from '@kbn/core/public';
|
||||
|
|
@ -90,12 +90,13 @@ export const OverviewPageFooter: FC<Props> = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<footer className="kbnOverviewPageFooter">
|
||||
// Note: Using KibanaPageTemplate.Section instead of EuiPageTemplate causes Jest failures and bundle size issues
|
||||
<EuiPageTemplate.Section component="footer" className="kbnOverviewPageFooter">
|
||||
<EuiFlexGroup justifyContent="spaceBetween">
|
||||
<EuiFlexItem grow={false}>
|
||||
<div>{defaultRouteButton}</div>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</footer>
|
||||
</EuiPageTemplate.Section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,21 +2,22 @@
|
|||
|
||||
exports[`KibanaPageTemplate render basic template 1`] = `
|
||||
<div
|
||||
class="euiPage euiPage--grow euiPageTemplate kbnPageTemplate"
|
||||
class="euiPage euiPageTemplate kbnPageTemplate emotion-euiPage-row-grow"
|
||||
style="min-height:460px"
|
||||
>
|
||||
<div
|
||||
class="euiPageBody euiPageBody--borderRadiusNone"
|
||||
class="euiPageBody emotion-euiPageBody"
|
||||
>
|
||||
<header
|
||||
class="euiPageHeader euiPageHeader--paddingLarge euiPageHeader--restrictWidth-default euiPageHeader--responsive euiPageHeader--center"
|
||||
class="euiPageHeader emotion-euiPageHeader-l-border"
|
||||
title="test"
|
||||
>
|
||||
<div
|
||||
class="euiPageHeaderContent"
|
||||
class="euiPageHeaderContent emotion-euiPageHeaderContent-l"
|
||||
style="max-width:1200px"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem"
|
||||
|
|
@ -33,7 +34,7 @@ exports[`KibanaPageTemplate render basic template 1`] = `
|
|||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--wrap euiPageHeaderContent__rightSideItems"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRowReverse euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
|
|
@ -50,7 +51,7 @@ exports[`KibanaPageTemplate render basic template 1`] = `
|
|||
role="main"
|
||||
>
|
||||
<div
|
||||
class="euiPageContentBody euiPage--paddingLarge euiPage--restrictWidth-default"
|
||||
class="euiPageContentBody euiPageContentBody--paddingLarge euiPageContentBody--restrictWidth-default"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,7 +188,7 @@ exports[`KibanaPageTemplate render noDataContent 1`] = `
|
|||
|
||||
exports[`KibanaPageTemplate render solutionNav 1`] = `
|
||||
<div
|
||||
class="euiPage euiPage--grow euiPageTemplate kbnPageTemplate"
|
||||
class="euiPage euiPageTemplate kbnPageTemplate emotion-euiPage-row-grow"
|
||||
style="min-height:460px"
|
||||
>
|
||||
<div
|
||||
|
|
@ -382,20 +383,21 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
|
|||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="euiPanel euiPanel--plain euiPageBody euiPageBody--borderRadiusNone emotion-euiPanel-grow-none-plain-hasShadow"
|
||||
class="euiPanel euiPanel--plain euiPageBody emotion-euiPanel-grow-none-plain-hasShadow-euiPageBody"
|
||||
>
|
||||
<div
|
||||
class="euiPageBody euiPageBody--borderRadiusNone euiPageBody--paddingLarge"
|
||||
class="euiPageBody emotion-euiPageBody-l"
|
||||
>
|
||||
<header
|
||||
class="euiPageHeader euiPageHeader--restrictWidth-default euiPageHeader--bottomBorder euiPageHeader--responsive euiPageHeader--center"
|
||||
class="euiPageHeader emotion-euiPageHeader-headerMargin"
|
||||
title="test"
|
||||
>
|
||||
<div
|
||||
class="euiPageHeaderContent"
|
||||
class="euiPageHeaderContent emotion-euiPageHeaderContent-border-l"
|
||||
style="max-width:1200px"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem"
|
||||
|
|
@ -412,7 +414,7 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
|
|||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--wrap euiPageHeaderContent__rightSideItems"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRowReverse euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
|
|
@ -429,7 +431,7 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
|
|||
role="main"
|
||||
>
|
||||
<div
|
||||
class="euiPageContentBody euiPage--restrictWidth-default"
|
||||
class="euiPageContentBody euiPageContentBody--restrictWidth-default"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
import { EuiPageTemplate } from '@elastic/eui';
|
||||
import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { NoDataPage } from '../no_data_page';
|
||||
import { withSolutionNav } from '../../with_solution_nav';
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
import './page_template.scss';
|
||||
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { EuiPageTemplateProps } from '@elastic/eui';
|
||||
import { EuiPageTemplateProps_Deprecated } from '@elastic/eui';
|
||||
import { KibanaPageTemplateSolutionNavProps } from './solution_nav';
|
||||
|
||||
import {
|
||||
|
|
@ -23,7 +23,7 @@ import { KibanaPageTemplateInner, KibanaPageTemplateWithSolutionNav } from './pa
|
|||
* A thin wrapper around EuiPageTemplate with a few Kibana specific additions
|
||||
* @deprecated Use `KibanaPageTemplateProps` from `@kbn/shared-ux-page-kibana-template-types`.
|
||||
*/
|
||||
export type KibanaPageTemplateProps = EuiPageTemplateProps & {
|
||||
export type KibanaPageTemplateProps = EuiPageTemplateProps_Deprecated & {
|
||||
/**
|
||||
* Changes the template type depending on other props provided.
|
||||
* With `pageHeader` only: Uses `centeredBody` and fills an EuiEmptyPrompt with `pageHeader` info.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
|
||||
import { EuiEmptyPrompt, EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
|
||||
import { withSolutionNav } from './with_solution_nav';
|
||||
import { KibanaPageTemplateProps } from './page_template';
|
||||
import { getClasses } from './util';
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
import React, { useEffect } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { EuiEmptyPrompt, EuiHorizontalRule, EuiPageContent } from '@elastic/eui';
|
||||
import { EuiHorizontalRule } from '@elastic/eui';
|
||||
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||
|
||||
interface ManagementLandingPageProps {
|
||||
version: string;
|
||||
|
|
@ -28,8 +29,7 @@ export const ManagementLandingPage = ({
|
|||
}, [onAppMounted]);
|
||||
|
||||
return (
|
||||
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
|
||||
<EuiEmptyPrompt
|
||||
<KibanaPageTemplate.EmptyPrompt
|
||||
data-test-subj="managementHome"
|
||||
iconType="managementApp"
|
||||
title={
|
||||
|
|
@ -59,6 +59,5 @@ export const ManagementLandingPage = ({
|
|||
</>
|
||||
}
|
||||
/>
|
||||
</EuiPageContent>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,12 +12,8 @@ import { I18nProvider } from '@kbn/i18n-react';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { AppMountParameters, ChromeBreadcrumb, ScopedHistory } from '@kbn/core/public';
|
||||
|
||||
import {
|
||||
KibanaPageTemplate,
|
||||
KibanaPageTemplateProps,
|
||||
reactRouterNavigate,
|
||||
KibanaThemeProvider,
|
||||
} from '@kbn/kibana-react-plugin/public';
|
||||
import { reactRouterNavigate, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
||||
import { KibanaPageTemplate, KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template';
|
||||
import {
|
||||
ManagementSection,
|
||||
MANAGEMENT_BREADCRUMB,
|
||||
|
|
@ -97,12 +93,10 @@ export const ManagementApp = ({ dependencies, history, theme$ }: ManagementAppPr
|
|||
<KibanaThemeProvider theme$={theme$}>
|
||||
<KibanaPageTemplate
|
||||
restrictWidth={false}
|
||||
// EUI TODO
|
||||
// The different template options need to be manually recreated by the individual pages.
|
||||
// These classes help enforce the layouts.
|
||||
pageContentProps={{ className: 'kbnAppWrapper' }}
|
||||
pageContentBodyProps={{ className: 'kbnAppWrapper' }}
|
||||
solutionNav={solution}
|
||||
// @ts-expect-error Techincally `paddingSize` isn't supported but it is passed through,
|
||||
// this is a stop-gap for Stack managmement specifically until page components can be converted to template components
|
||||
mainProps={{ paddingSize: 'l' }}
|
||||
>
|
||||
<ManagementRouter
|
||||
history={history}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
exports[`Intro component renders correctly 1`] = `
|
||||
<header
|
||||
class="euiPageHeader euiPageHeader--bottomBorder euiPageHeader--responsive euiPageHeader--center"
|
||||
class="euiPageHeader emotion-euiPageHeader"
|
||||
>
|
||||
<div
|
||||
class="euiPageHeaderContent"
|
||||
class="euiPageHeaderContent emotion-euiPageHeaderContent-border-l"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem"
|
||||
|
|
@ -23,7 +23,7 @@ exports[`Intro component renders correctly 1`] = `
|
|||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--wrap euiPageHeaderContent__rightSideItems"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRowReverse euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import useObservable from 'react-use/lib/useObservable';
|
||||
import { EuiPageTemplate } from '@elastic/eui';
|
||||
import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
|
||||
import { ThemeServiceSetup } from '@kbn/core/public';
|
||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
||||
import { Error } from './error';
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const NoDataComponent = ({
|
|||
};
|
||||
return (
|
||||
<AnalyticsNoDataPageKibanaProvider {...analyticsServices}>
|
||||
<AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} />;
|
||||
<AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} />
|
||||
</AnalyticsNoDataPageKibanaProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue