From 4a9e478a6bd9a7a1d48f367f4e22cb14b9623ffc Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 19 Apr 2024 13:46:03 +0100
Subject: [PATCH] EmptyState: Apply `completed` empty state in Notifications
 page (#86504)

* add 'completed' variant

* apply completed empty state to notifications page
---
 .../app/features/notifications/StoredNotifications.tsx | 10 +++++-----
 public/locales/en-US/grafana.json                      |  4 ++++
 public/locales/pseudo-LOCALE/grafana.json              |  4 ++++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/public/app/features/notifications/StoredNotifications.tsx b/public/app/features/notifications/StoredNotifications.tsx
index 37522586636..d9a49110c07 100644
--- a/public/app/features/notifications/StoredNotifications.tsx
+++ b/public/app/features/notifications/StoredNotifications.tsx
@@ -3,8 +3,9 @@ import React, { useRef, useState } from 'react';
 import { useEffectOnce } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Button, Checkbox, Icon, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Checkbox, EmptyState, useStyles2 } from '@grafana/ui';
 import { StoredNotificationItem } from 'app/core/components/AppNotifications/StoredNotificationItem';
+import { Trans, t } from 'app/core/internationalization';
 import {
   clearAllNotifications,
   clearNotification,
@@ -55,10 +56,9 @@ export function StoredNotifications() {
 
   if (notifications.length === 0) {
     return (
-      <div className={styles.noNotifsWrapper}>
-        <Icon name="bell" size="xxl" />
-        <span>Notifications you have received will appear here.</span>
-      </div>
+      <EmptyState variant="completed" message={t('notifications.empty-state.title', "You're all caught up!")}>
+        <Trans i18nKey="notifications.empty-state.description">Notifications you have received will appear here</Trans>
+      </EmptyState>
     );
   }
 
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 35105781c9c..1e02e4d8c1d 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1163,6 +1163,10 @@
     "title": "Latest from the blog"
   },
   "notifications": {
+    "empty-state": {
+      "description": "Notifications you have received will appear here",
+      "title": "You're all caught up!"
+    },
     "starred-dashboard": "Dashboard starred",
     "unstarred-dashboard": "Dashboard unstarred"
   },
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index f4b986ac938..07cb64d01df 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -1163,6 +1163,10 @@
     "title": "Ŀäŧęşŧ ƒřőm ŧĥę þľőģ"
   },
   "notifications": {
+    "empty-state": {
+      "description": "Ńőŧįƒįčäŧįőʼnş yőū ĥävę řęčęįvęđ ŵįľľ äppęäř ĥęřę",
+      "title": "Ÿőū'řę äľľ čäūģĥŧ ūp!"
+    },
     "starred-dashboard": "Đäşĥþőäřđ şŧäřřęđ",
     "unstarred-dashboard": "Đäşĥþőäřđ ūʼnşŧäřřęđ"
   },