[v11.0.x] EmptyState: Add completed variant (#86503)

EmptyState: Add `completed` variant (#86497)

* add 'completed' variant

* add central text alignment

(cherry picked from commit 0704430)

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

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

@@ -66,6 +66,16 @@ import { EmptyState } from '@grafana/ui';
 <EmptyState variant="not-found" message="No playlists found" />;
 ```
 
+### `variant="completed"`
+
+For when a user has completed all tasks on a page, such as reading all their notifications.
+
+```jsx
+import { EmptyState } from '@grafana/ui';
+
+<EmptyState variant="completed" message="You're all caught up" />;
+```
+
 ## Customization
 
 For all variants you can:

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

@@ -1,11 +1,13 @@
 import React, { ReactNode } from 'react';
+import SVG from 'react-inlinesvg';
 
 import { Box } from '../Layout/Box/Box';
 import { Stack } from '../Layout/Stack/Stack';
 import { Text } from '../Text/Text';
 
 import { GrotCTA } from './GrotCTA/GrotCTA';
 import { GrotNotFound } from './GrotNotFound/GrotNotFound';
+import GrotCompleted from './grot-completed.svg';
 
 interface Props {
   /**
@@ -24,7 +26,7 @@ interface Props {
   /**
    * Which variant to use. Affects the default image shown.
    */
-  variant: 'call-to-action' | 'not-found';
+  variant: 'call-to-action' | 'not-found' | 'completed';
 }
 
 export const EmptyState = ({
@@ -41,8 +43,14 @@ export const EmptyState = ({
     <Box paddingY={4} gap={4} display="flex" direction="column" alignItems="center">
       {!hideImage && imageToShow}
       <Stack direction="column" alignItems="center">
-        <Text variant="h4">{message}</Text>
-        {children && <Text color="secondary">{children}</Text>}
+        <Text variant="h4" textAlignment="center">
+          {message}
+        </Text>
+        {children && (
+          <Text color="secondary" textAlignment="center">
+            {children}
+          </Text>
+        )}
       </Stack>
       {button}
     </Box>
@@ -57,6 +65,9 @@ function getDefaultImageForVariant(variant: Props['variant']) {
     case 'not-found': {
       return <GrotNotFound width={300} />;
     }
+    case 'completed': {
+      return <SVG src={GrotCompleted} width={300} />;
+    }
     default: {
       throw new Error(`Unknown variant: ${variant}`);
     }