Navigation: more nav interface cleanup (#67708)

more nav interface cleanup

packages/grafana-data/src/types/navModel.ts

@@ -6,7 +6,6 @@ import { IconName } from './icon';
 export interface NavLinkDTO {
   id?: string;
   text: string;
-  description?: string;
   subTitle?: string;
   icon?: IconName;
   img?: string;
@@ -21,6 +20,7 @@ export interface NavLinkDTO {
   isSection?: boolean;
   children?: NavLinkDTO[];
   highlightText?: string;
+  highlightId?: string;
   emptyMessageId?: string;
   // The ID of the plugin that registered the page (in case it was registered by a plugin, otherwise left empty)
   pluginId?: string;
@@ -31,23 +31,13 @@ export interface NavLinkDTO {
 export interface NavModelItem extends NavLinkDTO {
   children?: NavModelItem[];
   active?: boolean;
-  breadcrumbs?: NavModelBreadcrumb[];
   parentItem?: NavModelItem;
-  showOrgSwitcher?: boolean;
   onClick?: () => void;
-  menuItemType?: NavMenuItemType;
-  highlightText?: string;
-  highlightId?: string;
   tabSuffix?: ComponentType<{ className?: string }>;
   hideFromBreadcrumbs?: boolean;
   emptyMessage?: string;
 }
 
-export enum NavMenuItemType {
-  Section = 'section',
-  Item = 'item',
-}
-
 /**
  *  Interface used to describe  different kinds of page titles and page navigation. Navmodels are usually generated in the backend and stored in Redux.
  */
@@ -62,11 +52,6 @@ export interface NavModel {
   node: NavModelItem;
 }
 
-export interface NavModelBreadcrumb {
-  title: string;
-  url?: string;
-}
-
 export type NavIndex = { [s: string]: NavModelItem };
 
 export enum PageLayoutType {

public/app/core/components/PageHeader/PageHeader.test.tsx

@@ -21,22 +21,4 @@ describe('PageHeader', () => {
       expect(screen.getByRole('heading', { name: 'node' })).toBeInTheDocument();
     });
   });
-
-  describe('when the nav tree has a node with breadcrumbs and a title', () => {
-    it('should render the title with breadcrumbs first and then title last', async () => {
-      const nav: NavModelItem = {
-        icon: 'folder-open',
-        id: 'child',
-        subTitle: 'child subtitle',
-        url: '',
-        text: 'child',
-        breadcrumbs: [{ title: 'Parent', url: 'parentUrl' }],
-      };
-
-      render(<PageHeader navItem={nav} />);
-
-      expect(screen.getByRole('heading', { name: 'Parent / child' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Parent' })).toBeInTheDocument();
-    });
-  });
 });

public/app/core/components/PageHeader/PageHeader.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
 
-import { NavModelItem, NavModelBreadcrumb, GrafanaTheme2 } from '@grafana/data';
+import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
 import { Tab, TabsBar, Icon, useStyles2, toIconName } from '@grafana/ui';
 import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
 
@@ -106,9 +106,7 @@ export const PageHeader = ({ navItem: model, renderTitle, actions, info, subTitl
         </span>
 
         <div className={cx('page-header__info-block', styles.headerText)}>
-          {renderTitle
-            ? renderTitle(main.text)
-            : renderHeaderTitle(main.text, main.breadcrumbs ?? [], main.highlightText)}
+          {renderTitle ? renderTitle(main.text) : renderHeaderTitle(main.text, main.highlightText)}
           {info && <PageInfo info={info} />}
           {sub && <div className="page-header__sub-title">{sub}</div>}
           {actions && <div className={styles.actions}>{actions}</div>}
@@ -129,46 +127,24 @@ export const PageHeader = ({ navItem: model, renderTitle, actions, info, subTitl
   );
 };
 
-function renderHeaderTitle(
-  title: string,
-  breadcrumbs: NavModelBreadcrumb[],
-  highlightText: NavModelItem['highlightText']
-) {
-  if (!title && (!breadcrumbs || breadcrumbs.length === 0)) {
+function renderHeaderTitle(title: string, highlightText: NavModelItem['highlightText']) {
+  if (!title) {
     return null;
   }
 
-  if (!breadcrumbs || breadcrumbs.length === 0) {
-    return (
-      <h1 className="page-header__title">
-        {title}
-        {highlightText && (
-          <ProBadge
-            text={highlightText}
-            className={css`
-              vertical-align: middle;
-            `}
-          />
-        )}
-      </h1>
-    );
-  }
-
-  const breadcrumbsResult = [];
-  for (const bc of breadcrumbs) {
-    if (bc.url) {
-      breadcrumbsResult.push(
-        <a className="page-header__link" key={breadcrumbsResult.length} href={bc.url}>
-          {bc.title}
-        </a>
-      );
-    } else {
-      breadcrumbsResult.push(<span key={breadcrumbsResult.length}> / {bc.title}</span>);
-    }
-  }
-  breadcrumbsResult.push(<span key={breadcrumbs.length + 1}> / {title}</span>);
-
-  return <h1 className="page-header__title">{breadcrumbsResult}</h1>;
+  return (
+    <h1 className="page-header__title">
+      {title}
+      {highlightText && (
+        <ProBadge
+          text={highlightText}
+          className={css`
+            vertical-align: middle;
+          `}
+        />
+      )}
+    </h1>
+  );
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({

public/app/features/admin/AdminEditOrgPage.tsx

@@ -90,7 +90,6 @@ const AdminEditOrgPage = ({ match }: Props) => {
   const pageNav: NavModelItem = {
     text: orgState?.value?.name ?? '',
     icon: 'shield',
-    breadcrumbs: [{ title: 'Orgs', url: 'admin/orgs' }],
     subTitle: 'Manage settings and user roles for an organization.',
   };
 

public/app/features/admin/UserAdminPage.tsx

@@ -111,7 +111,6 @@ export class UserAdminPage extends PureComponent<Props> {
     const pageNav: NavModelItem = {
       text: user?.login ?? '',
       icon: 'shield',
-      breadcrumbs: [{ title: 'Users', url: 'admin/users' }],
       subTitle: 'Manage settings for an individual user.',
     };
 

public/app/features/admin/UserCreatePage.tsx

@@ -20,7 +20,6 @@ const pageNav: NavModelItem = {
   id: 'user-new',
   text: 'New user',
   subTitle: 'Create a new Grafana user.',
-  breadcrumbs: [{ title: 'Server admin', url: 'admin/users' }],
 };
 
 const UserCreatePage = () => {

public/app/features/alerting/unified/RuleEditor.tsx

@@ -21,7 +21,6 @@ type RuleEditorProps = GrafanaRouteComponentProps<{ id?: string }>;
 const defaultPageNav: Partial<NavModelItem> = {
   icon: 'bell',
   id: 'alert-rule-view',
-  breadcrumbs: [{ title: 'Alert rules', url: 'alerting/list' }],
 };
 
 const getPageNav = (state: 'edit' | 'add') => {

public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx

@@ -60,7 +60,6 @@ const useDefaultValues = (muteTiming?: MuteTimeInterval): MuteTimingFields => {
 
 const defaultPageNav: Partial<NavModelItem> = {
   icon: 'sitemap',
-  breadcrumbs: [{ title: 'Notification Policies', url: 'alerting/routes' }],
 };
 
 const MuteTimingForm = ({ muteTiming, showError, provenance }: Props) => {

public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx

@@ -14,7 +14,6 @@ type Props = {
 const defaultPageNav: Partial<NavModelItem> = {
   icon: 'bell',
   id: 'alert-rule-view',
-  breadcrumbs: [{ title: 'Alert rules', url: 'alerting/list' }],
 };
 
 export function RuleViewerLayout(props: Props): JSX.Element | null {

public/app/features/alerting/unified/hooks/useSilenceNavData.test.tsx

@@ -27,7 +27,6 @@ describe('useSilenceNavData', () => {
 
     expect(result).toEqual({
       icon: 'bell-slash',
-      breadcrumbs: [{ title: 'Silences', url: 'alerting/silences' }],
       id: 'silence-new',
       text: 'Add silence',
     });
@@ -39,7 +38,6 @@ describe('useSilenceNavData', () => {
 
     expect(result).toEqual({
       icon: 'bell-slash',
-      breadcrumbs: [{ title: 'Silences', url: 'alerting/silences' }],
       id: 'silence-edit',
       text: 'Edit silence',
     });

public/app/features/alerting/unified/hooks/useSilenceNavData.ts

@@ -5,7 +5,6 @@ import { NavModelItem } from '@grafana/data';
 
 const defaultPageNav: Partial<NavModelItem> = {
   icon: 'bell-slash',
-  breadcrumbs: [{ title: 'Silences', url: 'alerting/silences' }],
 };
 
 export function useSilenceNavData() {

public/app/features/datasources/__mocks__/store.navIndex.mock.ts

@@ -1003,28 +1003,28 @@ export const navIndex: NavIndex = {
       {
         id: 'connections-datasources',
         text: 'Data sources',
-        description: 'Add and configure data sources',
+        subTitle: 'Add and configure data sources',
         icon: 'database',
         url: '/connections/datasources',
       },
       {
         id: 'connections-plugins',
         text: 'Plugins',
-        description: 'Manage plugins',
+        subTitle: 'Manage plugins',
         icon: 'plug',
         url: '/connections/plugins',
       },
       {
         id: 'connections-cloud-integrations',
         text: 'Cloud integrations',
-        description: 'Manage your cloud integrations',
+        subTitle: 'Manage your cloud integrations',
         icon: 'bolt',
         url: '/connections/cloud-integrations',
       },
       {
         id: 'connections-recorded-queries',
         text: 'Recorded queries',
-        description: 'Manage your recorded queries',
+        subTitle: 'Manage your recorded queries',
         icon: 'record-audio',
         url: '/connections/recorded-queries',
       },
@@ -1033,7 +1033,7 @@ export const navIndex: NavIndex = {
   'connections-datasources': {
     id: 'connections-datasources',
     text: 'Data sources',
-    description: 'Add and configure data sources',
+    subTitle: 'Add and configure data sources',
     icon: 'database',
     url: '/connections/datasources',
     parentItem: {
@@ -1046,28 +1046,28 @@ export const navIndex: NavIndex = {
         {
           id: 'connections-datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/connections/datasources',
         },
         {
           id: 'connections-plugins',
           text: 'Plugins',
-          description: 'Manage plugins',
+          subTitle: 'Manage plugins',
           icon: 'plug',
           url: '/connections/plugins',
         },
         {
           id: 'connections-cloud-integrations',
           text: 'Cloud integrations',
-          description: 'Manage your cloud integrations',
+          subTitle: 'Manage your cloud integrations',
           icon: 'bolt',
           url: '/connections/cloud-integrations',
         },
         {
           id: 'connections-recorded-queries',
           text: 'Recorded queries',
-          description: 'Manage your recorded queries',
+          subTitle: 'Manage your recorded queries',
           icon: 'record-audio',
           url: '/connections/recorded-queries',
         },
@@ -1077,7 +1077,7 @@ export const navIndex: NavIndex = {
   'connections-plugins': {
     id: 'connections-plugins',
     text: 'Plugins',
-    description: 'Manage plugins',
+    subTitle: 'Manage plugins',
     icon: 'plug',
     url: '/connections/plugins',
     parentItem: {
@@ -1090,28 +1090,28 @@ export const navIndex: NavIndex = {
         {
           id: 'connections-datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/connections/datasources',
         },
         {
           id: 'connections-plugins',
           text: 'Plugins',
-          description: 'Manage plugins',
+          subTitle: 'Manage plugins',
           icon: 'plug',
           url: '/connections/plugins',
         },
         {
           id: 'connections-cloud-integrations',
           text: 'Cloud integrations',
-          description: 'Manage your cloud integrations',
+          subTitle: 'Manage your cloud integrations',
           icon: 'bolt',
           url: '/connections/cloud-integrations',
         },
         {
           id: 'connections-recorded-queries',
           text: 'Recorded queries',
-          description: 'Manage your recorded queries',
+          subTitle: 'Manage your recorded queries',
           icon: 'record-audio',
           url: '/connections/recorded-queries',
         },
@@ -1121,7 +1121,7 @@ export const navIndex: NavIndex = {
   'connections-cloud-integrations': {
     id: 'connections-cloud-integrations',
     text: 'Cloud integrations',
-    description: 'Manage your cloud integrations',
+    subTitle: 'Manage your cloud integrations',
     icon: 'bolt',
     url: '/connections/cloud-integrations',
     parentItem: {
@@ -1134,28 +1134,28 @@ export const navIndex: NavIndex = {
         {
           id: 'connections-datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/connections/datasources',
         },
         {
           id: 'connections-plugins',
           text: 'Plugins',
-          description: 'Manage plugins',
+          subTitle: 'Manage plugins',
           icon: 'plug',
           url: '/connections/plugins',
         },
         {
           id: 'connections-cloud-integrations',
           text: 'Cloud integrations',
-          description: 'Manage your cloud integrations',
+          subTitle: 'Manage your cloud integrations',
           icon: 'bolt',
           url: '/connections/cloud-integrations',
         },
         {
           id: 'connections-recorded-queries',
           text: 'Recorded queries',
-          description: 'Manage your recorded queries',
+          subTitle: 'Manage your recorded queries',
           icon: 'record-audio',
           url: '/connections/recorded-queries',
         },
@@ -1165,7 +1165,7 @@ export const navIndex: NavIndex = {
   'connections-recorded-queries': {
     id: 'connections-recorded-queries',
     text: 'Recorded queries',
-    description: 'Manage your recorded queries',
+    subTitle: 'Manage your recorded queries',
     icon: 'record-audio',
     url: '/connections/recorded-queries',
     parentItem: {
@@ -1178,28 +1178,28 @@ export const navIndex: NavIndex = {
         {
           id: 'connections-datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/connections/datasources',
         },
         {
           id: 'connections-plugins',
           text: 'Plugins',
-          description: 'Manage plugins',
+          subTitle: 'Manage plugins',
           icon: 'plug',
           url: '/connections/plugins',
         },
         {
           id: 'connections-cloud-integrations',
           text: 'Cloud integrations',
-          description: 'Manage your cloud integrations',
+          subTitle: 'Manage your cloud integrations',
           icon: 'bolt',
           url: '/connections/cloud-integrations',
         },
         {
           id: 'connections-recorded-queries',
           text: 'Recorded queries',
-          description: 'Manage your recorded queries',
+          subTitle: 'Manage your recorded queries',
           icon: 'record-audio',
           url: '/connections/recorded-queries',
         },
@@ -1386,49 +1386,49 @@ export const navIndex: NavIndex = {
       {
         id: 'datasources',
         text: 'Data sources',
-        description: 'Add and configure data sources',
+        subTitle: 'Add and configure data sources',
         icon: 'database',
         url: '/datasources',
       },
       {
         id: 'users',
         text: 'Users',
-        description: 'Manage org members',
+        subTitle: 'Manage org members',
         icon: 'user',
         url: '/org/users',
       },
       {
         id: 'teams',
         text: 'Teams',
-        description: 'Manage org groups',
+        subTitle: 'Manage org groups',
         icon: 'users-alt',
         url: '/org/teams',
       },
       {
         id: 'plugins',
         text: 'Plugins',
-        description: 'View and configure plugins',
+        subTitle: 'View and configure plugins',
         icon: 'plug',
         url: '/plugins',
       },
       {
         id: 'org-settings',
         text: 'Preferences',
-        description: 'Organization preferences',
+        subTitle: 'Organization preferences',
         icon: 'sliders-v-alt',
         url: '/org',
       },
       {
         id: 'apikeys',
         text: 'API keys',
-        description: 'Create & manage API keys',
+        subTitle: 'Create & manage API keys',
         icon: 'key-skeleton-alt',
         url: '/org/apikeys',
       },
       {
         id: 'serviceaccounts',
         text: 'Service accounts',
-        description: 'Manage service accounts',
+        subTitle: 'Manage service accounts',
         icon: 'gf-service-account',
         url: '/org/serviceaccounts',
       },
@@ -1437,7 +1437,7 @@ export const navIndex: NavIndex = {
   datasources: {
     id: 'datasources',
     text: 'Data sources',
-    description: 'Add and configure data sources',
+    subTitle: 'Add and configure data sources',
     icon: 'database',
     url: '/datasources',
     parentItem: {
@@ -1451,49 +1451,49 @@ export const navIndex: NavIndex = {
         {
           id: 'datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/datasources',
         },
         {
           id: 'users',
           text: 'Users',
-          description: 'Manage org members',
+          subTitle: 'Manage org members',
           icon: 'user',
           url: '/org/users',
         },
         {
           id: 'teams',
           text: 'Teams',
-          description: 'Manage org groups',
+          subTitle: 'Manage org groups',
           icon: 'users-alt',
           url: '/org/teams',
         },
         {
           id: 'plugins',
           text: 'Plugins',
-          description: 'View and configure plugins',
+          subTitle: 'View and configure plugins',
           icon: 'plug',
           url: '/plugins',
         },
         {
           id: 'org-settings',
           text: 'Preferences',
-          description: 'Organization preferences',
+          subTitle: 'Organization preferences',
           icon: 'sliders-v-alt',
           url: '/org',
         },
         {
           id: 'apikeys',
           text: 'API keys',
-          description: 'Create & manage API keys',
+          subTitle: 'Create & manage API keys',
           icon: 'key-skeleton-alt',
           url: '/org/apikeys',
         },
         {
           id: 'serviceaccounts',
           text: 'Service accounts',
-          description: 'Manage service accounts',
+          subTitle: 'Manage service accounts',
           icon: 'gf-service-account',
           url: '/org/serviceaccounts',
         },
@@ -1503,7 +1503,7 @@ export const navIndex: NavIndex = {
   users: {
     id: 'users',
     text: 'Users',
-    description: 'Manage org members',
+    subTitle: 'Manage org members',
     icon: 'user',
     url: '/org/users',
     parentItem: {
@@ -1517,49 +1517,49 @@ export const navIndex: NavIndex = {
         {
           id: 'datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/datasources',
         },
         {
           id: 'users',
           text: 'Users',
-          description: 'Manage org members',
+          subTitle: 'Manage org members',
           icon: 'user',
           url: '/org/users',
         },
         {
           id: 'teams',
           text: 'Teams',
-          description: 'Manage org groups',
+          subTitle: 'Manage org groups',
           icon: 'users-alt',
           url: '/org/teams',
         },
         {
           id: 'plugins',
           text: 'Plugins',
-          description: 'View and configure plugins',
+          subTitle: 'View and configure plugins',
           icon: 'plug',
           url: '/plugins',
         },
         {
           id: 'org-settings',
           text: 'Preferences',
-          description: 'Organization preferences',
+          subTitle: 'Organization preferences',
           icon: 'sliders-v-alt',
           url: '/org',
         },
         {
           id: 'apikeys',
           text: 'API keys',
-          description: 'Create & manage API keys',
+          subTitle: 'Create & manage API keys',
           icon: 'key-skeleton-alt',
           url: '/org/apikeys',
         },
         {
           id: 'serviceaccounts',
           text: 'Service accounts',
-          description: 'Manage service accounts',
+          subTitle: 'Manage service accounts',
           icon: 'gf-service-account',
           url: '/org/serviceaccounts',
         },
@@ -1569,7 +1569,7 @@ export const navIndex: NavIndex = {
   teams: {
     id: 'teams',
     text: 'Teams',
-    description: 'Manage org groups',
+    subTitle: 'Manage org groups',
     icon: 'users-alt',
     url: '/org/teams',
     parentItem: {
@@ -1583,49 +1583,49 @@ export const navIndex: NavIndex = {
         {
           id: 'datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/datasources',
         },
         {
           id: 'users',
           text: 'Users',
-          description: 'Manage org members',
+          subTitle: 'Manage org members',
           icon: 'user',
           url: '/org/users',
         },
         {
           id: 'teams',
           text: 'Teams',
-          description: 'Manage org groups',
+          subTitle: 'Manage org groups',
           icon: 'users-alt',
           url: '/org/teams',
         },
         {
           id: 'plugins',
           text: 'Plugins',
-          description: 'View and configure plugins',
+          subTitle: 'View and configure plugins',
           icon: 'plug',
           url: '/plugins',
         },
         {
           id: 'org-settings',
           text: 'Preferences',
-          description: 'Organization preferences',
+          subTitle: 'Organization preferences',
           icon: 'sliders-v-alt',
           url: '/org',
         },
         {
           id: 'apikeys',
           text: 'API keys',
-          description: 'Create & manage API keys',
+          subTitle: 'Create & manage API keys',
           icon: 'key-skeleton-alt',
           url: '/org/apikeys',
         },
         {
           id: 'serviceaccounts',
           text: 'Service accounts',
-          description: 'Manage service accounts',
+          subTitle: 'Manage service accounts',
           icon: 'gf-service-account',
           url: '/org/serviceaccounts',
         },
@@ -1635,7 +1635,7 @@ export const navIndex: NavIndex = {
   plugins: {
     id: 'plugins',
     text: 'Plugins',
-    description: 'View and configure plugins',
+    subTitle: 'View and configure plugins',
     icon: 'plug',
     url: '/plugins',
     parentItem: {
@@ -1649,49 +1649,49 @@ export const navIndex: NavIndex = {
         {
           id: 'datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/datasources',
         },
         {
           id: 'users',
           text: 'Users',
-          description: 'Manage org members',
+          subTitle: 'Manage org members',
           icon: 'user',
           url: '/org/users',
         },
         {
           id: 'teams',
           text: 'Teams',
-          description: 'Manage org groups',
+          subTitle: 'Manage org groups',
           icon: 'users-alt',
           url: '/org/teams',
         },
         {
           id: 'plugins',
           text: 'Plugins',
-          description: 'View and configure plugins',
+          subTitle: 'View and configure plugins',
           icon: 'plug',
           url: '/plugins',
         },
         {
           id: 'org-settings',
           text: 'Preferences',
-          description: 'Organization preferences',
+          subTitle: 'Organization preferences',
           icon: 'sliders-v-alt',
           url: '/org',
         },
         {
           id: 'apikeys',
           text: 'API keys',
-          description: 'Create & manage API keys',
+          subTitle: 'Create & manage API keys',
           icon: 'key-skeleton-alt',
           url: '/org/apikeys',
         },
         {
           id: 'serviceaccounts',
           text: 'Service accounts',
-          description: 'Manage service accounts',
+          subTitle: 'Manage service accounts',
           icon: 'gf-service-account',
           url: '/org/serviceaccounts',
         },
@@ -1701,7 +1701,7 @@ export const navIndex: NavIndex = {
   'org-settings': {
     id: 'org-settings',
     text: 'Preferences',
-    description: 'Organization preferences',
+    subTitle: 'Organization preferences',
     icon: 'sliders-v-alt',
     url: '/org',
     parentItem: {
@@ -1715,49 +1715,49 @@ export const navIndex: NavIndex = {
         {
           id: 'datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/datasources',
         },
         {
           id: 'users',
           text: 'Users',
-          description: 'Manage org members',
+          subTitle: 'Manage org members',
           icon: 'user',
           url: '/org/users',
         },
         {
           id: 'teams',
           text: 'Teams',
-          description: 'Manage org groups',
+          subTitle: 'Manage org groups',
           icon: 'users-alt',
           url: '/org/teams',
         },
         {
           id: 'plugins',
           text: 'Plugins',
-          description: 'View and configure plugins',
+          subTitle: 'View and configure plugins',
           icon: 'plug',
           url: '/plugins',
         },
         {
           id: 'org-settings',
           text: 'Preferences',
-          description: 'Organization preferences',
+          subTitle: 'Organization preferences',
           icon: 'sliders-v-alt',
           url: '/org',
         },
         {
           id: 'apikeys',
           text: 'API keys',
-          description: 'Create & manage API keys',
+          subTitle: 'Create & manage API keys',
           icon: 'key-skeleton-alt',
           url: '/org/apikeys',
         },
         {
           id: 'serviceaccounts',
           text: 'Service accounts',
-          description: 'Manage service accounts',
+          subTitle: 'Manage service accounts',
           icon: 'gf-service-account',
           url: '/org/serviceaccounts',
         },
@@ -1767,7 +1767,7 @@ export const navIndex: NavIndex = {
   apikeys: {
     id: 'apikeys',
     text: 'API keys',
-    description: 'Create & manage API keys',
+    subTitle: 'Create & manage API keys',
     icon: 'key-skeleton-alt',
     url: '/org/apikeys',
     parentItem: {
@@ -1781,49 +1781,49 @@ export const navIndex: NavIndex = {
         {
           id: 'datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/datasources',
         },
         {
           id: 'users',
           text: 'Users',
-          description: 'Manage org members',
+          subTitle: 'Manage org members',
           icon: 'user',
           url: '/org/users',
         },
         {
           id: 'teams',
           text: 'Teams',
-          description: 'Manage org groups',
+          subTitle: 'Manage org groups',
           icon: 'users-alt',
           url: '/org/teams',
         },
         {
           id: 'plugins',
           text: 'Plugins',
-          description: 'View and configure plugins',
+          subTitle: 'View and configure plugins',
           icon: 'plug',
           url: '/plugins',
         },
         {
           id: 'org-settings',
           text: 'Preferences',
-          description: 'Organization preferences',
+          subTitle: 'Organization preferences',
           icon: 'sliders-v-alt',
           url: '/org',
         },
         {
           id: 'apikeys',
           text: 'API keys',
-          description: 'Create & manage API keys',
+          subTitle: 'Create & manage API keys',
           icon: 'key-skeleton-alt',
           url: '/org/apikeys',
         },
         {
           id: 'serviceaccounts',
           text: 'Service accounts',
-          description: 'Manage service accounts',
+          subTitle: 'Manage service accounts',
           icon: 'gf-service-account',
           url: '/org/serviceaccounts',
         },
@@ -1833,7 +1833,7 @@ export const navIndex: NavIndex = {
   serviceaccounts: {
     id: 'serviceaccounts',
     text: 'Service accounts',
-    description: 'Manage service accounts',
+    subTitle: 'Manage service accounts',
     icon: 'gf-service-account',
     url: '/org/serviceaccounts',
     parentItem: {
@@ -1847,49 +1847,49 @@ export const navIndex: NavIndex = {
         {
           id: 'datasources',
           text: 'Data sources',
-          description: 'Add and configure data sources',
+          subTitle: 'Add and configure data sources',
           icon: 'database',
           url: '/datasources',
         },
         {
           id: 'users',
           text: 'Users',
-          description: 'Manage org members',
+          subTitle: 'Manage org members',
           icon: 'user',
           url: '/org/users',
         },
         {
           id: 'teams',
           text: 'Teams',
-          description: 'Manage org groups',
+          subTitle: 'Manage org groups',
           icon: 'users-alt',
           url: '/org/teams',
         },
         {
           id: 'plugins',
           text: 'Plugins',
-          description: 'View and configure plugins',
+          subTitle: 'View and configure plugins',
           icon: 'plug',
           url: '/plugins',
         },
         {
           id: 'org-settings',
           text: 'Preferences',
-          description: 'Organization preferences',
+          subTitle: 'Organization preferences',
           icon: 'sliders-v-alt',
           url: '/org',
         },
         {
           id: 'apikeys',
           text: 'API keys',
-          description: 'Create & manage API keys',
+          subTitle: 'Create & manage API keys',
           icon: 'key-skeleton-alt',
           url: '/org/apikeys',
         },
         {
           id: 'serviceaccounts',
           text: 'Service accounts',
-          description: 'Manage service accounts',
+          subTitle: 'Manage service accounts',
           icon: 'gf-service-account',
           url: '/org/serviceaccounts',
         },

public/app/features/datasources/state/navModel.ts

@@ -19,7 +19,6 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
     subTitle: `Type: ${pluginMeta.name}`,
     url: '',
     text: dataSource.name,
-    breadcrumbs: [{ title: 'Data Sources', url: 'datasources' }],
     children: [
       {
         active: false,

public/app/features/folders/components/NewDashboardsFolder.tsx

@@ -29,7 +29,6 @@ const initialFormModel: FormModel = { folderName: '' };
 const pageNav: NavModelItem = {
   text: 'Create a new folder',
   subTitle: 'Folders provide a way to group dashboards and alert rules.',
-  breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],
 };
 
 function NewDashboardsFolder({ createNewFolder }: Props) {

public/app/features/folders/state/navModel.ts

@@ -10,7 +10,6 @@ export function buildNavModel(folder: FolderDTO): NavModelItem {
     subTitle: 'Manage folder dashboards and permissions',
     url: '',
     text: folder.title,
-    breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],
     children: [
       {
         active: false,

public/app/features/manage-dashboards/DashboardImportPage.tsx

@@ -192,7 +192,6 @@ class UnthemedDashboardImport extends PureComponent<Props> {
   pageNav: NavModelItem = {
     text: 'Import dashboard',
     subTitle: 'Import dashboard from file or Grafana.com',
-    breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],
   };
 
   render() {

public/app/features/org/NewOrgPage.tsx

@@ -24,7 +24,6 @@ const pageNav: NavModelItem = {
   icon: 'building',
   id: 'org-new',
   text: 'New organization',
-  breadcrumbs: [{ title: 'Server admin', url: 'admin/orgs' }],
 };
 
 export const NewOrgPage = ({ createOrganization }: Props) => {

public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx

@@ -21,7 +21,6 @@ export const usePluginDetailsTabs = (plugin?: CatalogPlugin, pageId?: PluginTabI
   const { loading, error, value: pluginConfig } = usePluginConfig(plugin);
   const { pathname } = useLocation();
   const defaultTab = useDefaultPage(plugin, pluginConfig);
-  const parentUrl = pathname.substring(0, pathname.lastIndexOf('/'));
   const isPublished = Boolean(plugin?.isPublished);
 
   const currentPageId = pageId || defaultTab;
@@ -98,7 +97,6 @@ export const usePluginDetailsTabs = (plugin?: CatalogPlugin, pageId?: PluginTabI
   const navModel: NavModelItem = {
     text: plugin?.name ?? '',
     img: plugin?.info.logos.small,
-    breadcrumbs: [{ title: 'Plugins', url: parentUrl }],
     children: [
       {
         text: PluginTabLabels.OVERVIEW,

public/app/features/serviceaccounts/ServiceAccountPage.tsx

@@ -82,7 +82,6 @@ export const ServiceAccountPageUnconnected = ({
   const pageNav: NavModelItem = {
     text: serviceAccount.name,
     img: serviceAccount.avatarUrl,
-    breadcrumbs: [{ title: 'Service accounts', url: 'org/serviceaccounts' }],
     subTitle: 'Manage settings for an individual service account.',
   };
 

public/app/features/teams/CreateTeam.tsx

@@ -15,7 +15,6 @@ const pageNav: NavModelItem = {
   id: 'team-new',
   text: 'New team',
   subTitle: 'Create a new team. Teams let you grant permissions to a group of users.',
-  breadcrumbs: [{ title: 'Configuration', url: 'org/teams' }],
 };
 
 export const CreateTeam = (): JSX.Element => {

public/app/features/teams/state/navModel.ts

@@ -25,7 +25,6 @@ export function buildNavModel(team: Team): NavModelItem {
     subTitle: 'Manage members and settings',
     url: '',
     text: team.name,
-    breadcrumbs: [{ title: 'Teams', url: 'org/teams' }],
     children: [
       // With RBAC this tab will always be available (but not always editable)
       // With Legacy it will be hidden by hideTabsFromNonTeamAdmin should the user not be allowed to see it