Navigation: Add tab title to breadcrumbs (#89102)

* show active child in breadcrumb

* use activeChild url

* only add tab title if not first tab

* handle scenes settings breadcrumbs

* fix breadcrumbs on starred dashboard settings

* display separate crumb

public/app/core/components/Breadcrumbs/utils.ts

@@ -35,6 +35,14 @@ export function buildBreadcrumbs(sectionNav: NavModelItem, pageNav?: NavModelIte
     const shouldAddCrumb = !node.hideFromBreadcrumbs && !(shouldDedupe && isSamePathAsLastBreadcrumb);
 
     if (shouldAddCrumb) {
+      const activeChildIndex = node.children?.findIndex((child) => child.active) ?? -1;
+      // Add tab to breadcrumbs if it's not the first active child
+      if (activeChildIndex > 0) {
+        const activeChild = node.children?.[activeChildIndex];
+        if (activeChild) {
+          crumbs.unshift({ text: activeChild.text, href: activeChild.url ?? '' });
+        }
+      }
       crumbs.unshift({ text: node.text, href: node.url ?? '' });
     }
 

public/app/features/dashboard-scene/settings/AnnotationsEditView.tsx

@@ -178,13 +178,11 @@ function AnnotationsSettingsEditView({
   onBackToList,
   onDelete,
 }: AnnotationsSettingsEditViewProps) {
-  const parentTab = pageNav.children!.find((p) => p.active)!;
-  parentTab.parentItem = pageNav;
   const { name, query } = annotationLayer.useState();
 
   const editAnnotationPageNav = {
     text: name,
-    parentItem: parentTab,
+    parentItem: pageNav,
   };
 
   return (

public/app/features/dashboard-scene/settings/DashboardLinksEditView.tsx

@@ -119,12 +119,9 @@ interface EditLinkViewProps {
 }
 
 function EditLinkView({ pageNav, link, navModel, dashboard, onChange, onGoBack }: EditLinkViewProps) {
-  const parentTab = pageNav.children!.find((p) => p.active)!;
-  parentTab.parentItem = pageNav;
-
   const editLinkPageNav = {
     text: 'Edit link',
-    parentItem: parentTab,
+    parentItem: pageNav,
   };
 
   return (

public/app/features/dashboard-scene/settings/VariablesEditView.tsx

@@ -261,13 +261,11 @@ function VariableEditorSettingsView({
   onDelete,
   onValidateVariableName,
 }: VariableEditorSettingsEditViewProps) {
-  const parentTab = pageNav.children!.find((p) => p.active)!;
-  parentTab.parentItem = pageNav;
   const { name } = variable.useState();
 
   const editVariablePageNav = {
     text: name,
-    parentItem: parentTab,
+    parentItem: pageNav,
   };
   return (
     <Page navModel={navModel} pageNav={editVariablePageNav} layout={PageLayoutType.Standard}>

public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx

@@ -48,10 +48,7 @@ function getSubPageNav(
   if (editItem) {
     return {
       text: editItem.name,
-      parentItem: parentItem && {
-        ...parentItem,
-        url: node.url,
-      },
+      parentItem,
     };
   }
 

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -199,7 +199,7 @@ function getSectionNav(
     subTitle: page.subTitle,
   }));
 
-  const pageNavWithSectionParent = applySectionAsParent(pageNav, sectionNav.node);
+  const pageNavWithSectionParent = applySectionAsParent(pageNav, sectionNav.main);
 
   main.parentItem = pageNavWithSectionParent;
 

public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx

@@ -39,12 +39,7 @@ export function LinksSettings({ dashboard, sectionNav, editIndex }: SettingsPage
     pageNav = {
       text: title,
       subTitle: description,
-    };
-
-    const parentUrl = sectionNav.node.url;
-    pageNav.parentItem = sectionNav.node.parentItem && {
-      ...sectionNav.node.parentItem,
-      url: parentUrl,
+      parentItem: sectionNav.node.parentItem,
     };
   }
 

public/app/features/variables/editor/VariableEditorContainer.tsx

@@ -108,12 +108,7 @@ class VariableEditorContainerUnconnected extends PureComponent<Props, State> {
     const { editIndex, variables, sectionNav } = this.props;
     const variableToEdit = editIndex != null ? variables[editIndex] : undefined;
     const node = sectionNav.node;
-    const parentItem = node.parentItem
-      ? {
-          ...node.parentItem,
-          url: node.url,
-        }
-      : undefined;
+    const parentItem = node.parentItem;
     const subPageNav = variableToEdit ? { text: variableToEdit.name, parentItem } : parentItem;
 
     return (