[v11.0.x] EmptyState: make "message" a required prop (#86046)

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

* make "message" a required prop on EmptyState

* run i18n:extract

(cherry picked from commit b3401c802c)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

packages/grafana-ui/src/components/EmptyState/EmptyState.mdx

@@ -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.
 
-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
 import { EmptyState } from '@grafana/ui';
 
-<EmptyState variant="not-found" />;
+<EmptyState variant="not-found" message="No playlists found" />;
 ```
 
 ### 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
 import { Button, EmptyState } from '@grafana/ui';

packages/grafana-ui/src/components/EmptyState/EmptyState.story.tsx

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

packages/grafana-ui/src/components/EmptyState/EmptyState.tsx

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

public/locales/en-US/grafana.json

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

public/locales/pseudo-LOCALE/grafana.json

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