Navigation: more nav interface cleanup (#67708)

more nav interface cleanup

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) => ({