IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

EmptyState: make "message" a required prop (#86029)

Browse Source 
* make "message" a required prop on EmptyState

* run i18n:extract
This commit is contained in:
Ashley Harrison
2024-04-12 13:13:28 +01:00
committed by GitHub
parent 2bedbcf344
commit b3401c802c
5 changed files with 6 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
View File

@@ -11,17 +11,17 @@ Use an empty state to communicate to the user that there is no data to display,
Use in place of a results table or list when a search query or filter returns no results. Use in place of a results table or list when a search query or filter returns no results.
There are sensible defaults for the image and message, so in most cases you can use it without any additional props. There are sensible defaults for the image, so in most cases all you need to provide is a message.
```jsx ```jsx
import { EmptyState } from '@grafana/ui'; import { EmptyState } from '@grafana/ui';
<EmptyState variant="not-found" />; <EmptyState variant="not-found" message="No playlists found" />;
``` ```
### Providing custom overrides ### Providing custom overrides
You can optionally override the message or image, and add additional information or a button (e.g. to clear the search query) You can optionally override or hide the image, add additional information or a button (e.g. to clear the search query)
```jsx ```jsx
import { Button, EmptyState } from '@grafana/ui'; import { Button, EmptyState } from '@grafana/ui';

1
packages/grafana-ui/src/components/EmptyState/EmptyState.story.tsx
View File

@@ -28,6 +28,7 @@ export const Basic: StoryFn<typeof EmptyState> = (args) => {
Basic.args = { Basic.args = {
children: 'Use this space to add any additional information', children: 'Use this space to add any additional information',
message: 'No results found',
variant: 'not-found', variant: 'not-found',
}; };

5
packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
View File

@@ -1,6 +1,5 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import { t } from '../../utils/i18n';
import { Box } from '../Layout/Box/Box'; import { Box } from '../Layout/Box/Box';
import { Stack } from '../Layout/Stack/Stack'; import { Stack } from '../Layout/Stack/Stack';
import { Text } from '../Text/Text'; import { Text } from '../Text/Text';
@@ -20,7 +19,7 @@ interface Props {
/** /**
* Message to display to the user * Message to display to the user
*/ */
message?: string; message: string;
/** /**
* Empty state variant. Possible values are 'search'. * Empty state variant. Possible values are 'search'.
*/ */
@@ -31,7 +30,7 @@ export const EmptyState = ({
button, button,
children, children,
image = <GrotNotFound width={300} />, image = <GrotNotFound width={300} />,
message = t('grafana-ui.empty-state.not-found-message', 'No results found'), message,
hideImage = false, hideImage = false,
}: React.PropsWithChildren<Props>) => { }: React.PropsWithChildren<Props>) => {
return ( return (

3
public/locales/en-US/grafana.json
View File

@@ -573,9 +573,6 @@
"drawer": { "drawer": {
"close": "Close" "close": "Close"
}, },
"empty-state": {
"not-found-message": "No results found"
},
"modal": { "modal": {
"close-tooltip": "Close" "close-tooltip": "Close"
}, },

3
public/locales/pseudo-LOCALE/grafana.json
View File

@@ -573,9 +573,6 @@
"drawer": { "drawer": {
"close": "Cľőşę" "close": "Cľőşę"
}, },
"empty-state": {
"not-found-message": "Ńő řęşūľŧş ƒőūʼnđ"
},
"modal": { "modal": {
"close-tooltip": "Cľőşę" "close-tooltip": "Cľőşę"
}, },