Bookmarks: Add empty state to page (#92693)

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>
   );

public/locales/en-US/grafana.json

@@ -233,6 +233,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"
   },

public/locales/pseudo-LOCALE/grafana.json

@@ -233,6 +233,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ģ"
   },