From 8561d54197258abe3a534f401fd839f4b4d1c9f5 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Thu, 29 Aug 2024 17:17:40 +0100
Subject: [PATCH] [v11.2.x] Bookmarks: Add empty state to page (#92695)

---
 .../components/Bookmarks/BookmarksPage.tsx    | 52 ++++++++++++-------
 public/locales/en-US/grafana.json             |  6 +++
 public/locales/pseudo-LOCALE/grafana.json     |  6 +++
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/public/app/core/components/Bookmarks/BookmarksPage.tsx b/public/app/core/components/Bookmarks/BookmarksPage.tsx
index 8674b7a11c9..d7e48ac68bb 100644
--- a/public/app/core/components/Bookmarks/BookmarksPage.tsx
+++ b/public/app/core/components/Bookmarks/BookmarksPage.tsx
@@ -1,8 +1,9 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2, NavModelItem } from '@grafana/data';
+import { EmptyState, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
+import { t, Trans } from 'app/core/internationalization';
 import { useSelector } from 'app/types';
 
 import { usePinnedItems } from '../AppChrome/MegaMenu/hooks';
@@ -14,25 +15,40 @@ export function BookmarksPage() {
   const pinnedItems = usePinnedItems();
   const navTree = useSelector((state) => state.navBarTree);
 
+  const validItems = pinnedItems.reduce((acc: NavModelItem[], url) => {
+    const item = findByUrl(navTree, url);
+    if (item) {
+      acc.push(item);
+    }
+    return acc;
+  }, []);
+
   return (
     <Page navId="bookmarks">
       <Page.Contents>
-        <section className={styles.grid}>
-          {pinnedItems.map((url) => {
-            const item = findByUrl(navTree, url);
-            if (!item) {
-              return null;
-            }
-            return (
-              <NavLandingPageCard
-                key={item.id || item.url}
-                description={item.subTitle}
-                text={item.text}
-                url={item.url ?? ''}
-              />
-            );
-          })}
-        </section>
+        {validItems.length === 0 ? (
+          <EmptyState
+            variant="call-to-action"
+            message={t('bookmarks-page.empty.message', 'It looks like you haven’t created any bookmarks yet')}
+          >
+            <Trans i18nKey="bookmarks-page.empty.tip">
+              Hover over any item in the nav menu and click on the bookmark icon to add it here.
+            </Trans>
+          </EmptyState>
+        ) : (
+          <section className={styles.grid}>
+            {validItems.map((item) => {
+              return (
+                <NavLandingPageCard
+                  key={item.id || item.url}
+                  description={item.subTitle}
+                  text={item.text}
+                  url={item.url ?? ''}
+                />
+              );
+            })}
+          </section>
+        )}
       </Page.Contents>
     </Page>
   );
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 84a34e98efb..9cd2f6d1808 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -202,6 +202,12 @@
       "message": "No API keys found"
     }
   },
+  "bookmarks-page": {
+    "empty": {
+      "message": "It looks like you haven’t created any bookmarks yet",
+      "tip": "Hover over any item in the nav menu and click on the bookmark icon to add it here."
+    }
+  },
   "bouncing-loader": {
     "label": "Loading"
   },
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 067128ad03d..ad7a25d21db 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -202,6 +202,12 @@
       "message": "Ńő ÅPĨ ĸęyş ƒőūʼnđ"
     }
   },
+  "bookmarks-page": {
+    "empty": {
+      "message": "Ĩŧ ľőőĸş ľįĸę yőū ĥävęʼn’ŧ čřęäŧęđ äʼny þőőĸmäřĸş yęŧ",
+      "tip": "Ħővęř ővęř äʼny įŧęm įʼn ŧĥę ʼnäv męʼnū äʼnđ čľįčĸ őʼn ŧĥę þőőĸmäřĸ įčőʼn ŧő äđđ įŧ ĥęřę."
+    }
+  },
   "bouncing-loader": {
     "label": "Ŀőäđįʼnģ"
   },