Skip to content

Commit

Permalink
Merge branch 'master' into implement/unified-kbn-test-import
Browse files Browse the repository at this point in the history
  • Loading branch information
kibanamachine authored May 6, 2021
2 parents 3bc7396 + d882cd6 commit dc31a14
Show file tree
Hide file tree
Showing 20 changed files with 1,050 additions and 657 deletions.
Binary file added dev_docs/assets/kibana_custom_empty_state.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dev_docs/assets/kibana_default_empty_state.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions dev_docs/building_blocks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,14 @@ Check out the Map Embeddable if you wish to embed a map in your application.

**Github labels**: `Team:Geo`

### KibanaPageTemplate

All Kibana pages should use KibanaPageTemplate to setup their pages. It's 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.

Check out <DocLink id="kibDevDocsKBTTutorial" text="the KibanaPageTemplate tutorial" /> for more implementation guidance.

**Github labels**: `EUI`

## Searching

### Index Patterns
Expand Down
86 changes: 86 additions & 0 deletions dev_docs/tutorials/kibana_page_template.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
---
id: kibDevDocsKBLTutorial
slug: /kibana-dev-docs/tutorials/kibana-page-layout
title: KibanaPageLayout component
summary: Learn how to create pages in Kibana
date: 2021-03-20
tags: ['kibana', 'dev', 'ui', 'tutorials']
---

`KibanaPageLayout` is a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns.

Refer to EUI's documentation on [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) for constructing page layouts.

## `isEmptyState`

Use the `isEmptyState` prop for when there is no page content to show. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met.

The default empty state uses any `pageHeader` info provided to populate an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) and uses the `centeredBody` template type.

```tsx
<KibanaPageLayout
isEmptyState={true}
pageHeader={{
iconType: 'dashboardApp',
pageTitle: 'Dashboards',
description: "You don't have any dashboards yet.",
rightSideItems: [
<EuiButton fill iconType="plusInCircleFilled">
Create new dashboard
</EuiButton>,
],
}}
/>
```

![Screenshot of demo empty state code. Shows the Kibana navigation bars and a centered empty state with the dashboard app icon, a level 1 heading "Dashboards", body text "You don't have any dashboards yet.", and a button that says "Create new dashboard".](../assets/kibana_default_empty_state.png)

<DocCallOut color="warning" title="Missing page header content can lead to an anemic empty state">
Because all properties of the page header are optional, the empty state has the potential to
render blank. Make sure your empty state doesn't leave the user confused.
</DocCallOut>

### Custom empty state

You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageLayout.

```tsx
<KibanaPageLayout isEmptyState={true}>
<EuiEmptyPrompt
title={<h1>No data</h1>}
body="You have no data. Would you like some of ours?"
actions={[
<EuiButton fill iconType="plusInCircleFilled">
Get sample data
</EuiButton>,
]}
/>
</KibanaPageLayout>
```

![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_custom_empty_state.png)

### Empty states with a page header

When passing both a `pageHeader` configuration and `isEmptyState`, the component will render the proper template (`centeredContent`). Be sure to reduce the heading level within your child empty prompt to `<h2>`.

```tsx
<KibanaPageLayout
isEmptyState={true}
pageHeader={{
pageTitle: 'Dashboards',
}}
>
<EuiEmptyPrompt
title={<h2>No data</h2>}
body="You have no data. Would you like some of ours?"
actions={[
<EuiButton fill iconType="plusInCircleFilled">
Get sample data
</EuiButton>,
]}
/>
</KibanaPageLayout>
```

![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_header_and_empty_state.png)
Loading

0 comments on commit dc31a14

Please sign in to comment.