From b6682cdcb9127801af480b5500a17a225a3a9568 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Mon, 21 Feb 2022 15:25:47 +0000
Subject: [PATCH] Navigation: Proof-of-concept for pinning navbar items
 (#44775)

---
 packages/grafana-data/src/types/navModel.ts   |    1 +
 packages/grafana-ui/src/types/icon.ts         |    1 +
 .../app/core/components/NavBar/NavBarItem.tsx |    4 +-
 .../components/NavBar/NavBarMenu.test.tsx     |    2 +-
 .../app/core/components/NavBar/NavBarMenu.tsx |   20 +-
 .../core/components/NavBar/NavBarMenuItem.tsx |   96 +-
 .../app/core/components/NavBar/NavBarNext.tsx |   29 +-
 public/app/core/reducers/navBarTree.ts        |   27 +-
 public/test/mocks/navModel.ts                 | 1423 +++++++++++++++++
 public/test/redux-rtl.tsx                     |   35 +
 10 files changed, 1596 insertions(+), 42 deletions(-)
 create mode 100644 public/test/mocks/navModel.ts
 create mode 100644 public/test/redux-rtl.tsx

diff --git a/packages/grafana-data/src/types/navModel.ts b/packages/grafana-data/src/types/navModel.ts
index 781a6610270..66b1fe81737 100644
--- a/packages/grafana-data/src/types/navModel.ts
+++ b/packages/grafana-data/src/types/navModel.ts
@@ -22,6 +22,7 @@ export interface NavModelItem {
   highlightText?: string;
   highlightId?: string;
   tabSuffix?: ComponentType<{ className?: string }>;
+  hideFromNavbar?: boolean;
 }
 
 export enum NavSection {
diff --git a/packages/grafana-ui/src/types/icon.ts b/packages/grafana-ui/src/types/icon.ts
index 3d55da853b3..0b7e64c937a 100644
--- a/packages/grafana-ui/src/types/icon.ts
+++ b/packages/grafana-ui/src/types/icon.ts
@@ -5,6 +5,7 @@ export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
 
 export const getAvailableIcons = () =>
   [
+    'anchor',
     'angle-double-down',
     'angle-double-right',
     'angle-double-up',
diff --git a/public/app/core/components/NavBar/NavBarItem.tsx b/public/app/core/components/NavBar/NavBarItem.tsx
index 67efefbf768..cf91ade17a4 100644
--- a/public/app/core/components/NavBar/NavBarItem.tsx
+++ b/public/app/core/components/NavBar/NavBarItem.tsx
@@ -33,7 +33,9 @@ const NavBarItem = ({
   const { i18n } = useLingui();
   const theme = useTheme2();
   const menuItems = link.children ?? [];
-  const menuItemsSorted = reverseMenuDirection ? menuItems.reverse() : menuItems;
+
+  // Spreading `menuItems` here as otherwise we'd be mutating props
+  const menuItemsSorted = reverseMenuDirection ? [...menuItems].reverse() : menuItems;
   const filteredItems = menuItemsSorted
     .filter((item) => !item.hideFromMenu)
     .map((i) => ({ ...i, menuItemType: NavMenuItemType.Item }));
diff --git a/public/app/core/components/NavBar/NavBarMenu.test.tsx b/public/app/core/components/NavBar/NavBarMenu.test.tsx
index 08f1acd6c39..0c65010c21d 100644
--- a/public/app/core/components/NavBar/NavBarMenu.test.tsx
+++ b/public/app/core/components/NavBar/NavBarMenu.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavModelItem } from '@grafana/data';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from 'test/redux-rtl';
 import userEvent from '@testing-library/user-event';
 import { NavBarMenu } from './NavBarMenu';
 
diff --git a/public/app/core/components/NavBar/NavBarMenu.tsx b/public/app/core/components/NavBar/NavBarMenu.tsx
index ae35bde4235..f4c6823f4c3 100644
--- a/public/app/core/components/NavBar/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/NavBarMenu.tsx
@@ -6,6 +6,9 @@ import { useDialog } from '@react-aria/dialog';
 import { useOverlay } from '@react-aria/overlays';
 import { css } from '@emotion/css';
 import { NavBarMenuItem } from './NavBarMenuItem';
+import { useDispatch } from 'react-redux';
+import { togglePin } from 'app/core/reducers/navBarTree';
+import { getConfig } from 'app/core/config';
 
 export interface Props {
   activeItem?: NavModelItem;
@@ -14,6 +17,11 @@ export interface Props {
 }
 
 export function NavBarMenu({ activeItem, navItems, onClose }: Props) {
+  const dispatch = useDispatch();
+  const toggleItemPin = (id: string) => {
+    dispatch(togglePin({ id }));
+  };
+
   const theme = useTheme2();
   const styles = getStyles(theme);
   const ref = useRef(null);
@@ -27,6 +35,7 @@ export function NavBarMenu({ activeItem, navItems, onClose }: Props) {
     ref
   );
 
+  const newNavigationEnabled = getConfig().featureToggles.newNavigation;
   return (
     <FocusScope contain restoreFocus autoFocus>
       <div data-testid="navbarmenu" className={styles.container} ref={ref} {...overlayProps} {...dialogProps}>
@@ -37,8 +46,8 @@ export function NavBarMenu({ activeItem, navItems, onClose }: Props) {
         <nav className={styles.content}>
           <CustomScrollbar>
             <ul>
-              {navItems.map((link, index) => (
-                <div className={styles.section} key={index}>
+              {navItems.map((link) => (
+                <div className={styles.section} key={link.text}>
                   <NavBarMenuItem
                     isActive={activeItem === link}
                     onClick={() => {
@@ -50,12 +59,15 @@ export function NavBarMenu({ activeItem, navItems, onClose }: Props) {
                     text={link.text}
                     url={link.url}
                     isMobile={true}
+                    pinned={!link.hideFromNavbar}
+                    canPin={newNavigationEnabled && link.id !== 'search'}
+                    onTogglePin={() => link.id && toggleItemPin(link.id)}
                   />
                   {link.children?.map(
-                    (childLink, childIndex) =>
+                    (childLink) =>
                       !childLink.divider && (
                         <NavBarMenuItem
-                          key={childIndex}
+                          key={childLink.text}
                           icon={childLink.icon as IconName}
                           isActive={activeItem === childLink}
                           isDivider={childLink.divider}
diff --git a/public/app/core/components/NavBar/NavBarMenuItem.tsx b/public/app/core/components/NavBar/NavBarMenuItem.tsx
index 68ef32d7b32..ac30798a96c 100644
--- a/public/app/core/components/NavBar/NavBarMenuItem.tsx
+++ b/public/app/core/components/NavBar/NavBarMenuItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, IconName, Link, useTheme2 } from '@grafana/ui';
-import { css } from '@emotion/css';
+import { Icon, IconButton, IconName, Link, useTheme2 } from '@grafana/ui';
+import { css, cx } from '@emotion/css';
 
 export interface Props {
   icon?: IconName;
@@ -14,6 +14,9 @@ export interface Props {
   url?: string;
   adjustHeightForBorder?: boolean;
   isMobile?: boolean;
+  canPin?: boolean;
+  pinned?: boolean;
+  onTogglePin?: () => void;
 }
 
 export function NavBarMenuItem({
@@ -26,10 +29,20 @@ export function NavBarMenuItem({
   text,
   url,
   isMobile = false,
+  canPin = false,
+  pinned = false,
+  onTogglePin,
 }: Props) {
   const theme = useTheme2();
   const styles = getStyles(theme, isActive, styleOverrides);
 
+  const onClickPin = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    onTogglePin?.();
+  };
+
   const linkContent = (
     <div className={styles.linkContent}>
       <div>
@@ -60,30 +73,77 @@ export function NavBarMenuItem({
         </a>
       );
   }
+
   if (isMobile) {
     return isDivider ? (
       <li data-testid="dropdown-child-divider" className={styles.divider} tabIndex={-1} aria-disabled />
     ) : (
-      <li>{element}</li>
+      <li className={styles.listItem}>
+        {element}
+        {canPin && (
+          <IconButton
+            name="anchor"
+            className={cx('pin-button', styles.pinButton, { [styles.visible]: pinned })}
+            onClick={onClickPin}
+            tooltip={`${pinned ? 'Unpin' : 'Pin'} menu item`}
+          />
+        )}
+      </li>
     );
   }
 
   return isDivider ? (
     <div data-testid="dropdown-child-divider" className={styles.divider} tabIndex={-1} aria-disabled />
   ) : (
-    <>{element}</>
+    <div style={{ position: 'relative' }}>{element}</div>
   );
 }
 
 NavBarMenuItem.displayName = 'NavBarMenuItem';
 
 const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], styleOverrides: Props['styleOverrides']) => ({
+  visible: css`
+    color: ${theme.colors.text.primary} !important;
+    opacity: 100% !important;
+  `,
   divider: css`
     border-bottom: 1px solid ${theme.colors.border.weak};
     height: 1px;
     margin: ${theme.spacing(1)} 0;
     overflow: hidden;
   `,
+  listItem: css`
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    &:hover,
+    &:focus-within {
+      color: ${theme.colors.text.primary};
+
+      > *:first-child::after {
+        background-color: ${theme.colors.action.hover};
+      }
+    }
+
+    > .pin-button {
+      opacity: 0;
+    }
+
+    &:hover > .pin-button,
+    &:focus-visible > .pin-button {
+      opacity: 100%;
+    }
+  `,
+  pinButton: css`
+    position: relative;
+    flex-shrink: 2;
+    color: ${theme.colors.text.secondary};
+
+    &:focus-visible {
+      opacity: 100%;
+    }
+  `,
   element: css`
     align-items: center;
     background: none;
@@ -93,22 +153,23 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], styleOverr
     font-size: inherit;
     height: 100%;
     padding: 5px 12px 5px 10px;
-    position: relative;
     text-align: left;
     white-space: nowrap;
-    width: 100%;
 
-    &:hover,
-    &:focus-visible {
-      background-color: ${theme.colors.action.hover};
-      color: ${theme.colors.text.primary};
+    &:focus-visible + .pin-button {
+      opacity: 100%;
     }
 
     &:focus-visible {
+      outline: none;
       box-shadow: none;
-      outline: 2px solid ${theme.colors.primary.main};
-      outline-offset: -2px;
-      transition: none;
+
+      &::after {
+        box-shadow: none;
+        outline: 2px solid ${theme.colors.primary.main};
+        outline-offset: -2px;
+        transition: none;
+      }
     }
 
     &::before {
@@ -123,6 +184,15 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], styleOverr
       background-image: ${theme.colors.gradients.brandVertical};
     }
 
+    &::after {
+      position: absolute;
+      content: '';
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+    }
+
     ${styleOverrides};
   `,
   externalLinkIcon: css`
diff --git a/public/app/core/components/NavBar/NavBarNext.tsx b/public/app/core/components/NavBar/NavBarNext.tsx
index 36e763d931d..b5ae4c16154 100644
--- a/public/app/core/components/NavBar/NavBarNext.tsx
+++ b/public/app/core/components/NavBar/NavBarNext.tsx
@@ -14,7 +14,7 @@ import { NavBarMenu } from './NavBarMenu';
 import NavBarItem from './NavBarItem';
 import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu';
 import { Branding } from '../Branding/Branding';
-import { connect, ConnectedProps } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 const onOpenSearch = () => {
   locationService.partial({ search: 'open' });
@@ -27,17 +27,9 @@ const searchItem: NavModelItem = {
   icon: 'search',
 };
 
-const mapStateToProps = (state: StoreState) => ({
-  navBarTree: state.navBarTree,
-});
-
-const mapDispatchToProps = {};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
+export const NavBarNext = React.memo(() => {
+  const navBarTree = useSelector((state: StoreState) => state.navBarTree);
 
-export interface Props extends ConnectedProps<typeof connector> {}
-
-export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
   const location = useLocation();
@@ -48,12 +40,15 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
   };
   const navTree = cloneDeep(navBarTree);
   const coreItems = navTree.filter((item) => item.section === NavSection.Core);
+  const pinnedCoreItems = coreItems.filter((item) => !item.hideFromNavbar);
   const pluginItems = navTree.filter((item) => item.section === NavSection.Plugin);
+  const pinnedPluginItems = pluginItems.filter((item) => !item.hideFromNavbar);
   const configItems = enrichConfigItems(
     navTree.filter((item) => item.section === NavSection.Config),
     location,
     toggleSwitcherModal
   );
+  const pinnedConfigItems = configItems.filter((item) => !item.hideFromNavbar);
   const activeItem = isSearchActive(location) ? searchItem : getActiveItem(navTree, location.pathname);
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -77,7 +72,7 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
       </NavBarSection>
 
       <NavBarSection>
-        {coreItems.map((link, index) => (
+        {pinnedCoreItems.map((link, index) => (
           <NavBarItem
             key={`${link.id}-${index}`}
             isActive={isMatchOrChildMatch(link, activeItem)}
@@ -89,9 +84,9 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
         ))}
       </NavBarSection>
 
-      {pluginItems.length > 0 && (
+      {pinnedPluginItems.length > 0 && (
         <NavBarSection>
-          {pluginItems.map((link, index) => (
+          {pinnedPluginItems.map((link, index) => (
             <NavBarItem key={`${link.id}-${index}`} isActive={isMatchOrChildMatch(link, activeItem)} link={link}>
               {link.icon && <Icon name={link.icon as IconName} size="xl" />}
               {link.img && <img src={link.img} alt={`${link.text} logo`} />}
@@ -103,7 +98,7 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
       <div className={styles.spacer} />
 
       <NavBarSection>
-        {configItems.map((link, index) => (
+        {pinnedConfigItems.map((link, index) => (
           <NavBarItem
             key={`${link.id}-${index}`}
             isActive={isMatchOrChildMatch(link, activeItem)}
@@ -128,9 +123,7 @@ export const NavBarNextUnconnected = React.memo(({ navBarTree }: Props) => {
   );
 });
 
-NavBarNextUnconnected.displayName = 'NavBarNext';
-
-export const NavBarNext = connector(NavBarNextUnconnected);
+NavBarNext.displayName = 'NavBarNext';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   search: css`
diff --git a/public/app/core/reducers/navBarTree.ts b/public/app/core/reducers/navBarTree.ts
index 538e7ab0570..eca2b349f93 100644
--- a/public/app/core/reducers/navBarTree.ts
+++ b/public/app/core/reducers/navBarTree.ts
@@ -1,15 +1,32 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { NavModelItem } from '@grafana/data';
 import config from 'app/core/config';
 
-export const initialState: NavModelItem[] = config.bootData.navTree;
+const defaultPins = ['home', 'dashboards', 'explore', 'alerting'].join(',');
+const storedPins = (window.localStorage.getItem('pinnedNavItems') ?? defaultPins).split(',');
+
+export const initialState: NavModelItem[] = (config.bootData.navTree as NavModelItem[]).map((n: NavModelItem) => ({
+  ...n,
+  hideFromNavbar: n.id === undefined || !storedPins.includes(n.id),
+}));
 
 const navTreeSlice = createSlice({
   name: 'navBarTree',
   initialState,
-  reducers: {},
+  reducers: {
+    togglePin: (state, action: PayloadAction<{ id: string }>) => {
+      const navItemIndex = state.findIndex((navItem) => navItem.id === action.payload.id);
+      state[navItemIndex].hideFromNavbar = !state[navItemIndex].hideFromNavbar;
+      window.localStorage.setItem(
+        'pinnedNavItems',
+        state
+          .filter((n) => !n.hideFromNavbar)
+          .map((n) => n.id)
+          .join(',')
+      );
+    },
+  },
 });
 
-export const {} = navTreeSlice.actions;
-
+export const { togglePin } = navTreeSlice.actions;
 export const navTreeReducer = navTreeSlice.reducer;
diff --git a/public/test/mocks/navModel.ts b/public/test/mocks/navModel.ts
new file mode 100644
index 00000000000..3469523b2cd
--- /dev/null
+++ b/public/test/mocks/navModel.ts
@@ -0,0 +1,1423 @@
+import { NavIndex, NavSection } from '@grafana/data';
+
+export const mockNavModel: NavIndex = {
+  home: {
+    id: 'home',
+    text: 'Home',
+    section: NavSection.Core,
+    icon: 'home-alt',
+    url: '/',
+  },
+  dashboards: {
+    id: 'dashboards',
+    text: 'Dashboards',
+    section: NavSection.Core,
+    subTitle: 'Manage dashboards and folders',
+    icon: 'apps',
+    url: '/dashboards',
+    children: [
+      {
+        id: 'manage-dashboards',
+        text: 'Browse',
+        icon: 'sitemap',
+        url: '/dashboards',
+      },
+      {
+        id: 'playlists',
+        text: 'Playlists',
+        icon: 'presentation-play',
+        url: '/playlists',
+      },
+      {
+        id: 'snapshots',
+        text: 'Snapshots',
+        icon: 'camera',
+        url: '/dashboard/snapshots',
+      },
+      {
+        id: 'library-panels',
+        text: 'Library panels',
+        icon: 'library-panel',
+        url: '/library-panels',
+      },
+      {
+        id: 'divider',
+        text: 'Divider',
+        divider: true,
+        hideFromTabs: true,
+      },
+      {
+        id: 'new-dashboard',
+        text: 'New dashboard',
+        icon: 'plus',
+        url: '/dashboard/new',
+        hideFromTabs: true,
+      },
+      {
+        id: 'new-folder',
+        text: 'New folder',
+        subTitle: 'Create a new folder to organize your dashboards',
+        icon: 'plus',
+        url: '/dashboards/folder/new',
+        hideFromTabs: true,
+      },
+      {
+        id: 'import',
+        text: 'Import',
+        subTitle: 'Import dashboard from file or Grafana.com',
+        icon: 'plus',
+        url: '/dashboard/import',
+        hideFromTabs: true,
+      },
+    ],
+  },
+  'manage-dashboards': {
+    id: 'manage-dashboards',
+    text: 'Browse',
+    icon: 'sitemap',
+    url: '/dashboards',
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  playlists: {
+    id: 'playlists',
+    text: 'Playlists',
+    icon: 'presentation-play',
+    url: '/playlists',
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  snapshots: {
+    id: 'snapshots',
+    text: 'Snapshots',
+    icon: 'camera',
+    url: '/dashboard/snapshots',
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  'library-panels': {
+    id: 'library-panels',
+    text: 'Library panels',
+    icon: 'library-panel',
+    url: '/library-panels',
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  divider: {
+    id: 'divider',
+    text: 'Divider',
+    divider: true,
+    hideFromTabs: true,
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  'new-dashboard': {
+    id: 'new-dashboard',
+    text: 'New dashboard',
+    icon: 'plus',
+    url: '/dashboard/new',
+    hideFromTabs: true,
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  'new-folder': {
+    id: 'new-folder',
+    text: 'New folder',
+    subTitle: 'Create a new folder to organize your dashboards',
+    icon: 'plus',
+    url: '/dashboards/folder/new',
+    hideFromTabs: true,
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  import: {
+    id: 'import',
+    text: 'Import',
+    subTitle: 'Import dashboard from file or Grafana.com',
+    icon: 'plus',
+    url: '/dashboard/import',
+    hideFromTabs: true,
+    parentItem: {
+      id: 'dashboards',
+      text: 'Dashboards',
+      section: NavSection.Core,
+      subTitle: 'Manage dashboards and folders',
+      icon: 'apps',
+      url: '/dashboards',
+      children: [
+        {
+          id: 'manage-dashboards',
+          text: 'Browse',
+          icon: 'sitemap',
+          url: '/dashboards',
+        },
+        {
+          id: 'playlists',
+          text: 'Playlists',
+          icon: 'presentation-play',
+          url: '/playlists',
+        },
+        {
+          id: 'snapshots',
+          text: 'Snapshots',
+          icon: 'camera',
+          url: '/dashboard/snapshots',
+        },
+        {
+          id: 'library-panels',
+          text: 'Library panels',
+          icon: 'library-panel',
+          url: '/library-panels',
+        },
+        {
+          id: 'divider',
+          text: 'Divider',
+          divider: true,
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-dashboard',
+          text: 'New dashboard',
+          icon: 'plus',
+          url: '/dashboard/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'new-folder',
+          text: 'New folder',
+          subTitle: 'Create a new folder to organize your dashboards',
+          icon: 'plus',
+          url: '/dashboards/folder/new',
+          hideFromTabs: true,
+        },
+        {
+          id: 'import',
+          text: 'Import',
+          subTitle: 'Import dashboard from file or Grafana.com',
+          icon: 'plus',
+          url: '/dashboard/import',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  'not-found': {
+    text: 'Page not found',
+    subTitle: '404 Error',
+    icon: 'exclamation-triangle',
+  },
+  explore: {
+    id: 'explore',
+    text: 'Explore',
+    section: NavSection.Core,
+    subTitle: 'Explore your data',
+    icon: 'compass',
+    url: '/explore',
+  },
+  alerting: {
+    id: 'alerting',
+    text: 'Alerting',
+    section: NavSection.Core,
+    subTitle: 'Alert rules and notifications',
+    icon: 'bell',
+    url: '/alerting/list',
+    children: [
+      {
+        id: 'alert-list',
+        text: 'Alert rules',
+        icon: 'list-ul',
+        url: '/alerting/list',
+      },
+      {
+        id: 'channels',
+        text: 'Notification channels',
+        icon: 'comment-alt-share',
+        url: '/alerting/notifications',
+      },
+    ],
+  },
+  'alert-list': {
+    id: 'alert-list',
+    text: 'Alert rules',
+    icon: 'list-ul',
+    url: '/alerting/list',
+    parentItem: {
+      id: 'alerting',
+      text: 'Alerting',
+      section: NavSection.Core,
+      subTitle: 'Alert rules and notifications',
+      icon: 'bell',
+      url: '/alerting/list',
+      children: [
+        {
+          id: 'alert-list',
+          text: 'Alert rules',
+          icon: 'list-ul',
+          url: '/alerting/list',
+        },
+        {
+          id: 'channels',
+          text: 'Notification channels',
+          icon: 'comment-alt-share',
+          url: '/alerting/notifications',
+        },
+      ],
+    },
+  },
+  channels: {
+    id: 'channels',
+    text: 'Notification channels',
+    icon: 'comment-alt-share',
+    url: '/alerting/notifications',
+    parentItem: {
+      id: 'alerting',
+      text: 'Alerting',
+      section: NavSection.Core,
+      subTitle: 'Alert rules and notifications',
+      icon: 'bell',
+      url: '/alerting/list',
+      children: [
+        {
+          id: 'alert-list',
+          text: 'Alert rules',
+          icon: 'list-ul',
+          url: '/alerting/list',
+        },
+        {
+          id: 'channels',
+          text: 'Notification channels',
+          icon: 'comment-alt-share',
+          url: '/alerting/notifications',
+        },
+      ],
+    },
+  },
+  cfg: {
+    id: 'cfg',
+    text: 'Configuration',
+    section: NavSection.Config,
+    subTitle: 'Organization: Main Org',
+    icon: 'cog',
+    url: '/datasources',
+    children: [
+      {
+        id: 'datasources',
+        text: 'Data sources',
+        icon: 'database',
+        url: '/datasources',
+      },
+      {
+        id: 'users',
+        text: 'Users',
+        icon: 'user',
+        url: '/org/users',
+      },
+      {
+        id: 'teams',
+        text: 'Teams',
+        icon: 'users-alt',
+        url: '/org/teams',
+      },
+      {
+        id: 'plugins',
+        text: 'Plugins',
+        icon: 'plug',
+        url: '/plugins',
+      },
+      {
+        id: 'org-settings',
+        text: 'Preferences',
+        icon: 'sliders-v-alt',
+        url: '/org',
+      },
+      {
+        id: 'apikeys',
+        text: 'API keys',
+        icon: 'key-skeleton-alt',
+        url: '/org/apikeys',
+      },
+    ],
+  },
+  datasources: {
+    id: 'datasources',
+    text: 'Data sources',
+    icon: 'database',
+    url: '/datasources',
+    parentItem: {
+      id: 'cfg',
+      text: 'Configuration',
+      section: NavSection.Config,
+      subTitle: 'Organization: Main Org',
+      icon: 'cog',
+      url: '/datasources',
+      children: [
+        {
+          id: 'datasources',
+          text: 'Data sources',
+          icon: 'database',
+          url: '/datasources',
+        },
+        {
+          id: 'users',
+          text: 'Users',
+          icon: 'user',
+          url: '/org/users',
+        },
+        {
+          id: 'teams',
+          text: 'Teams',
+          icon: 'users-alt',
+          url: '/org/teams',
+        },
+        {
+          id: 'plugins',
+          text: 'Plugins',
+          icon: 'plug',
+          url: '/plugins',
+        },
+        {
+          id: 'org-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/org',
+        },
+        {
+          id: 'apikeys',
+          text: 'API keys',
+          icon: 'key-skeleton-alt',
+          url: '/org/apikeys',
+        },
+      ],
+    },
+  },
+  users: {
+    id: 'users',
+    text: 'Users',
+    icon: 'user',
+    url: '/org/users',
+    parentItem: {
+      id: 'cfg',
+      text: 'Configuration',
+      section: NavSection.Config,
+      subTitle: 'Organization: Main Org',
+      icon: 'cog',
+      url: '/datasources',
+      children: [
+        {
+          id: 'datasources',
+          text: 'Data sources',
+          icon: 'database',
+          url: '/datasources',
+        },
+        {
+          id: 'users',
+          text: 'Users',
+          icon: 'user',
+          url: '/org/users',
+        },
+        {
+          id: 'teams',
+          text: 'Teams',
+          icon: 'users-alt',
+          url: '/org/teams',
+        },
+        {
+          id: 'plugins',
+          text: 'Plugins',
+          icon: 'plug',
+          url: '/plugins',
+        },
+        {
+          id: 'org-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/org',
+        },
+        {
+          id: 'apikeys',
+          text: 'API keys',
+          icon: 'key-skeleton-alt',
+          url: '/org/apikeys',
+        },
+      ],
+    },
+  },
+  teams: {
+    id: 'teams',
+    text: 'Teams',
+    icon: 'users-alt',
+    url: '/org/teams',
+    parentItem: {
+      id: 'cfg',
+      text: 'Configuration',
+      section: NavSection.Config,
+      subTitle: 'Organization: Main Org',
+      icon: 'cog',
+      url: '/datasources',
+      children: [
+        {
+          id: 'datasources',
+          text: 'Data sources',
+          icon: 'database',
+          url: '/datasources',
+        },
+        {
+          id: 'users',
+          text: 'Users',
+          icon: 'user',
+          url: '/org/users',
+        },
+        {
+          id: 'teams',
+          text: 'Teams',
+          icon: 'users-alt',
+          url: '/org/teams',
+        },
+        {
+          id: 'plugins',
+          text: 'Plugins',
+          icon: 'plug',
+          url: '/plugins',
+        },
+        {
+          id: 'org-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/org',
+        },
+        {
+          id: 'apikeys',
+          text: 'API keys',
+          icon: 'key-skeleton-alt',
+          url: '/org/apikeys',
+        },
+      ],
+    },
+  },
+  plugins: {
+    id: 'plugins',
+    text: 'Plugins',
+    icon: 'plug',
+    url: '/plugins',
+    parentItem: {
+      id: 'cfg',
+      text: 'Configuration',
+      section: NavSection.Config,
+      subTitle: 'Organization: Main Org',
+      icon: 'cog',
+      url: '/datasources',
+      children: [
+        {
+          id: 'datasources',
+          text: 'Data sources',
+          icon: 'database',
+          url: '/datasources',
+        },
+        {
+          id: 'users',
+          text: 'Users',
+          icon: 'user',
+          url: '/org/users',
+        },
+        {
+          id: 'teams',
+          text: 'Teams',
+          icon: 'users-alt',
+          url: '/org/teams',
+        },
+        {
+          id: 'plugins',
+          text: 'Plugins',
+          icon: 'plug',
+          url: '/plugins',
+        },
+        {
+          id: 'org-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/org',
+        },
+        {
+          id: 'apikeys',
+          text: 'API keys',
+          icon: 'key-skeleton-alt',
+          url: '/org/apikeys',
+        },
+      ],
+    },
+  },
+  'org-settings': {
+    id: 'org-settings',
+    text: 'Preferences',
+    icon: 'sliders-v-alt',
+    url: '/org',
+    parentItem: {
+      id: 'cfg',
+      text: 'Configuration',
+      section: NavSection.Config,
+      subTitle: 'Organization: Main Org',
+      icon: 'cog',
+      url: '/datasources',
+      children: [
+        {
+          id: 'datasources',
+          text: 'Data sources',
+          icon: 'database',
+          url: '/datasources',
+        },
+        {
+          id: 'users',
+          text: 'Users',
+          icon: 'user',
+          url: '/org/users',
+        },
+        {
+          id: 'teams',
+          text: 'Teams',
+          icon: 'users-alt',
+          url: '/org/teams',
+        },
+        {
+          id: 'plugins',
+          text: 'Plugins',
+          icon: 'plug',
+          url: '/plugins',
+        },
+        {
+          id: 'org-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/org',
+        },
+        {
+          id: 'apikeys',
+          text: 'API keys',
+          icon: 'key-skeleton-alt',
+          url: '/org/apikeys',
+        },
+      ],
+    },
+  },
+  apikeys: {
+    id: 'apikeys',
+    text: 'API keys',
+    icon: 'key-skeleton-alt',
+    url: '/org/apikeys',
+    parentItem: {
+      id: 'cfg',
+      text: 'Configuration',
+      section: NavSection.Config,
+      subTitle: 'Organization: Main Org',
+      icon: 'cog',
+      url: '/datasources',
+      children: [
+        {
+          id: 'datasources',
+          text: 'Data sources',
+          icon: 'database',
+          url: '/datasources',
+        },
+        {
+          id: 'users',
+          text: 'Users',
+          icon: 'user',
+          url: '/org/users',
+        },
+        {
+          id: 'teams',
+          text: 'Teams',
+          icon: 'users-alt',
+          url: '/org/teams',
+        },
+        {
+          id: 'plugins',
+          text: 'Plugins',
+          icon: 'plug',
+          url: '/plugins',
+        },
+        {
+          id: 'org-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/org',
+        },
+        {
+          id: 'apikeys',
+          text: 'API keys',
+          icon: 'key-skeleton-alt',
+          url: '/org/apikeys',
+        },
+      ],
+    },
+  },
+  admin: {
+    id: 'admin',
+    text: 'Server Admin',
+    section: NavSection.Config,
+    subTitle: 'Manage all users and orgs',
+    icon: 'shield',
+    url: '/admin/users',
+    hideFromTabs: true,
+    children: [
+      {
+        id: 'global-users',
+        text: 'Users',
+        icon: 'user',
+        url: '/admin/users',
+      },
+      {
+        id: 'global-orgs',
+        text: 'Orgs',
+        icon: 'building',
+        url: '/admin/orgs',
+      },
+      {
+        id: 'server-settings',
+        text: 'Settings',
+        icon: 'sliders-v-alt',
+        url: '/admin/settings',
+      },
+      {
+        id: 'upgrading',
+        text: 'Stats and license',
+        icon: 'unlock',
+        url: '/admin/upgrading',
+      },
+    ],
+  },
+  'global-users': {
+    id: 'global-users',
+    text: 'Users',
+    icon: 'user',
+    url: '/admin/users',
+    parentItem: {
+      id: 'admin',
+      text: 'Server Admin',
+      section: NavSection.Config,
+      subTitle: 'Manage all users and orgs',
+      icon: 'shield',
+      url: '/admin/users',
+      hideFromTabs: true,
+      children: [
+        {
+          id: 'global-users',
+          text: 'Users',
+          icon: 'user',
+          url: '/admin/users',
+        },
+        {
+          id: 'global-orgs',
+          text: 'Orgs',
+          icon: 'building',
+          url: '/admin/orgs',
+        },
+        {
+          id: 'server-settings',
+          text: 'Settings',
+          icon: 'sliders-v-alt',
+          url: '/admin/settings',
+        },
+        {
+          id: 'upgrading',
+          text: 'Stats and license',
+          icon: 'unlock',
+          url: '/admin/upgrading',
+        },
+      ],
+    },
+  },
+  'global-orgs': {
+    id: 'global-orgs',
+    text: 'Orgs',
+    icon: 'building',
+    url: '/admin/orgs',
+    parentItem: {
+      id: 'admin',
+      text: 'Server Admin',
+      section: NavSection.Config,
+      subTitle: 'Manage all users and orgs',
+      icon: 'shield',
+      url: '/admin/users',
+      hideFromTabs: true,
+      children: [
+        {
+          id: 'global-users',
+          text: 'Users',
+          icon: 'user',
+          url: '/admin/users',
+        },
+        {
+          id: 'global-orgs',
+          text: 'Orgs',
+          icon: 'building',
+          url: '/admin/orgs',
+        },
+        {
+          id: 'server-settings',
+          text: 'Settings',
+          icon: 'sliders-v-alt',
+          url: '/admin/settings',
+        },
+        {
+          id: 'upgrading',
+          text: 'Stats and license',
+          icon: 'unlock',
+          url: '/admin/upgrading',
+        },
+      ],
+    },
+  },
+  'server-settings': {
+    id: 'server-settings',
+    text: 'Settings',
+    icon: 'sliders-v-alt',
+    url: '/admin/settings',
+    parentItem: {
+      id: 'admin',
+      text: 'Server Admin',
+      section: NavSection.Config,
+      subTitle: 'Manage all users and orgs',
+      icon: 'shield',
+      url: '/admin/users',
+      hideFromTabs: true,
+      children: [
+        {
+          id: 'global-users',
+          text: 'Users',
+          icon: 'user',
+          url: '/admin/users',
+        },
+        {
+          id: 'global-orgs',
+          text: 'Orgs',
+          icon: 'building',
+          url: '/admin/orgs',
+        },
+        {
+          id: 'server-settings',
+          text: 'Settings',
+          icon: 'sliders-v-alt',
+          url: '/admin/settings',
+        },
+        {
+          id: 'upgrading',
+          text: 'Stats and license',
+          icon: 'unlock',
+          url: '/admin/upgrading',
+        },
+      ],
+    },
+  },
+  upgrading: {
+    id: 'upgrading',
+    text: 'Stats and license',
+    icon: 'unlock',
+    url: '/admin/upgrading',
+    parentItem: {
+      id: 'admin',
+      text: 'Server Admin',
+      section: NavSection.Config,
+      subTitle: 'Manage all users and orgs',
+      icon: 'shield',
+      url: '/admin/users',
+      hideFromTabs: true,
+      children: [
+        {
+          id: 'global-users',
+          text: 'Users',
+          icon: 'user',
+          url: '/admin/users',
+        },
+        {
+          id: 'global-orgs',
+          text: 'Orgs',
+          icon: 'building',
+          url: '/admin/orgs',
+        },
+        {
+          id: 'server-settings',
+          text: 'Settings',
+          icon: 'sliders-v-alt',
+          url: '/admin/settings',
+        },
+        {
+          id: 'upgrading',
+          text: 'Stats and license',
+          icon: 'unlock',
+          url: '/admin/upgrading',
+        },
+      ],
+    },
+  },
+  profile: {
+    id: 'profile',
+    text: 'admin',
+    section: NavSection.Config,
+    img: '/avatar/46d229b033af06a191ff2267bca9ae56',
+    url: '/profile',
+    children: [
+      {
+        id: 'profile-settings',
+        text: 'Preferences',
+        icon: 'sliders-v-alt',
+        url: '/profile',
+      },
+      {
+        id: 'change-password',
+        text: 'Change password',
+        icon: 'lock',
+        url: '/profile/password',
+      },
+      {
+        id: 'sign-out',
+        text: 'Sign out',
+        icon: 'arrow-from-right',
+        url: '/logout',
+        target: '_self',
+        hideFromTabs: true,
+      },
+    ],
+  },
+  'profile-settings': {
+    id: 'profile-settings',
+    text: 'Preferences',
+    icon: 'sliders-v-alt',
+    url: '/profile',
+    parentItem: {
+      id: 'profile',
+      text: 'admin',
+      section: NavSection.Config,
+      img: '/avatar/46d229b033af06a191ff2267bca9ae56',
+      url: '/profile',
+      children: [
+        {
+          id: 'profile-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/profile',
+        },
+        {
+          id: 'change-password',
+          text: 'Change password',
+          icon: 'lock',
+          url: '/profile/password',
+        },
+        {
+          id: 'sign-out',
+          text: 'Sign out',
+          icon: 'arrow-from-right',
+          url: '/logout',
+          target: '_self',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  'change-password': {
+    id: 'change-password',
+    text: 'Change password',
+    icon: 'lock',
+    url: '/profile/password',
+    parentItem: {
+      id: 'profile',
+      text: 'admin',
+      section: NavSection.Config,
+      img: '/avatar/46d229b033af06a191ff2267bca9ae56',
+      url: '/profile',
+      children: [
+        {
+          id: 'profile-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/profile',
+        },
+        {
+          id: 'change-password',
+          text: 'Change password',
+          icon: 'lock',
+          url: '/profile/password',
+        },
+        {
+          id: 'sign-out',
+          text: 'Sign out',
+          icon: 'arrow-from-right',
+          url: '/logout',
+          target: '_self',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  'sign-out': {
+    id: 'sign-out',
+    text: 'Sign out',
+    icon: 'arrow-from-right',
+    url: '/logout',
+    target: '_self',
+    hideFromTabs: true,
+    parentItem: {
+      id: 'profile',
+      text: 'admin',
+      section: NavSection.Config,
+      img: '/avatar/46d229b033af06a191ff2267bca9ae56',
+      url: '/profile',
+      children: [
+        {
+          id: 'profile-settings',
+          text: 'Preferences',
+          icon: 'sliders-v-alt',
+          url: '/profile',
+        },
+        {
+          id: 'change-password',
+          text: 'Change password',
+          icon: 'lock',
+          url: '/profile/password',
+        },
+        {
+          id: 'sign-out',
+          text: 'Sign out',
+          icon: 'arrow-from-right',
+          url: '/logout',
+          target: '_self',
+          hideFromTabs: true,
+        },
+      ],
+    },
+  },
+  help: {
+    id: 'help',
+    text: 'Help',
+    section: NavSection.Config,
+    subTitle: 'Grafana v8.5.0-pre (f1c4da095b)',
+    icon: 'question-circle',
+    url: '#',
+  },
+};
diff --git a/public/test/redux-rtl.tsx b/public/test/redux-rtl.tsx
new file mode 100644
index 00000000000..d37501e3569
--- /dev/null
+++ b/public/test/redux-rtl.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { render as rtlRender } from '@testing-library/react';
+import { AnyAction, configureStore } from '@reduxjs/toolkit';
+import { ThunkMiddlewareFor } from '@reduxjs/toolkit/dist/getDefaultMiddleware';
+import { Provider } from 'react-redux';
+import { createRootReducer } from 'app/core/reducers/root';
+import { StoreState } from 'app/types';
+import { mockNavModel } from './mocks/navModel';
+
+function render(
+  ui: React.ReactElement,
+  {
+    preloadedState = { navIndex: mockNavModel },
+    store = configureStore<
+      StoreState,
+      AnyAction,
+      ReadonlyArray<ThunkMiddlewareFor<StoreState, { thunk: true; serializableCheck: false; immutableCheck: false }>>
+    >({
+      reducer: createRootReducer(),
+      preloadedState,
+      middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware({ thunk: true, serializableCheck: false, immutableCheck: false }),
+    }),
+    ...renderOptions
+  }: { preloadedState?: Partial<StoreState>; store?: ReturnType<typeof configureStore> } = {}
+) {
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+export * from '@testing-library/react';
+export { render };