github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Fix] fix broken story in Prompt Custom Actions (#149992)

Browse source
This commit is contained in:
Rachel Shen 2023-02-06 09:21:48 -07:00 • committed by GitHub
parent daf1304fa6
commit 212d57c476
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/shared-ux/prompt/not_found/README.mdx
View file

@ -10,3 +10,27 @@ date: 2022-02-09
Sometimes the user tries to go to a page that doesn't exist, because the URL is broken or because they try to load a resource that does not exist. For those cases we want to show a standard 404 error.
The default call to action is a "Go back" button that simulates the browser's "Back" behaviour. Consumers can specify their own CTA's with the `actions` prop.
The NotFoundPrompt component also has the prop `actions` that takes in an array of components.
For example:
```jsx
<EuiPageTemplate>
<EuiPageTemplate.Section alignment="center">
<NotFoundPrompt
actions={
[
<EuiButton fill color="primary" onClick={onClickHandler}>
Go home
</EuiButton>,
<EuiButton iconType="search">
Go to discover
</EuiButton>
]
}
title="Customizable Title"
body="Customizable Body"
/>
</EuiPageTemplate.Section>
</EuiPageTemplate>
```

22
packages/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import { EuiButton, EuiButtonEmpty, EuiPageTemplate } from '@elastic/eui';
import { EuiButton, EuiPageTemplate } from '@elastic/eui';
import React from 'react';
import { Meta, Story } from '@storybook/react';
import mdx from '../README.mdx';
@ -51,14 +51,18 @@ export const CustomActions: Story = (args) => {
<EuiPageTemplate>
<EuiPageTemplate.Section alignment="center">
<NotFoundPrompt
actions={[
<EuiButton fill color="primary" onClick={args.onClick}>
Go home
</EuiButton>,
<EuiButtonEmpty iconType="search" onClick={args.onClick}>
Go to discover
</EuiButtonEmpty>,
]}
actions={
<>
<EuiButton fill color="primary" onClick={args.onClick}>
Go home
</EuiButton>
<EuiButton iconType="search" onClick={args.onClick}>
Go to discover
</EuiButton>
</>
}
title="Customizable Title"
body="Customizable Body"
/>
</EuiPageTemplate.Section>
</EuiPageTemplate>

7
packages/shared-ux/prompt/not_found/src/not_found_prompt.test.tsx
View file

@ -36,4 +36,11 @@ describe('<NotFoundPrompt />', () => {
const component = render(<NotFoundPrompt actions={actions} />);
expect(component.text()).toContain('I am a button');
});
it('Renders custom actions with an array with multiple buttons', () => {
const actions = [<button>I am a button</button>, <button>I am a second button</button>];
const component = render(<NotFoundPrompt actions={actions} />);
expect(component.text()).toContain('I am a button');
expect(component.text()).toContain('I am a second button');
});
});