Bookmarks: Create Bookmarks landing page (#91538)

public/app/core/components/AppChrome/MegaMenu/utils.ts

@@ -130,3 +130,17 @@ export function getEditionAndUpdateLinks(): NavModelItem[] {
 
   return links;
 }
+
+export function findByUrl(nodes: NavModelItem[], url: string): NavModelItem | null {
+  for (const item of nodes) {
+    if (item.url === url) {
+      return item;
+    } else if (item.children?.length) {
+      const found = findByUrl(item.children, url);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}

public/app/core/components/Bookmarks/BookmarksPage.tsx

@@ -0,0 +1,49 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { Page } from 'app/core/components/Page/Page';
+import { useSelector } from 'app/types';
+
+import { usePinnedItems } from '../AppChrome/MegaMenu/hooks';
+import { findByUrl } from '../AppChrome/MegaMenu/utils';
+import { NavLandingPageCard } from '../NavLandingPage/NavLandingPageCard';
+
+export function BookmarksPage() {
+  const styles = useStyles2(getStyles);
+  const pinnedItems = usePinnedItems();
+  const navTree = useSelector((state) => state.navBarTree);
+
+  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>
+      </Page.Contents>
+    </Page>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  grid: css({
+    display: 'grid',
+    gap: theme.spacing(3),
+    gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+    gridAutoRows: '138px',
+    padding: theme.spacing(2, 0),
+  }),
+});

public/app/routes/routes.tsx

@@ -20,6 +20,7 @@ import { getAppPluginRoutes } from 'app/features/plugins/routes';
 import { getProfileRoutes } from 'app/features/profile/routes';
 import { AccessControlAction, DashboardRoutes } from 'app/types';
 
+import { BookmarksPage } from '../core/components/Bookmarks/BookmarksPage';
 import { SafeDynamicImport } from '../core/components/DynamicImports/SafeDynamicImport';
 import { RouteDescriptor } from '../core/navigation/types';
 import { getPublicDashboardRoutes } from '../features/dashboard/routes';
@@ -513,7 +514,7 @@ export function getAppRoutes(): RouteDescriptor[] {
     },
     {
       path: '/bookmarks',
-      component: () => <NavLandingPage navId="bookmarks" />,
+      component: () => <BookmarksPage />,
     },
     ...getPluginCatalogRoutes(),
     ...getSupportBundleRoutes(),