Page: Pages that have hideFromBreadcrumbs set to true should not be added to page Title (#56596)

* Page: Pages that have hideFromBreadcrumbs set to true should not be added to page Title

* Updated test

public/app/core/components/Page/usePageTitle.ts

@@ -7,22 +7,21 @@ import { Branding } from '../Branding/Branding';
 export function usePageTitle(navModel?: NavModel, pageNav?: NavModelItem) {
   useEffect(() => {
     const parts: string[] = [];
-
     if (pageNav) {
       if (pageNav.children) {
         const activePage = pageNav.children.find((x) => x.active);
         if (activePage) {
-          parts.push(activePage.text);
+          addTitleSegment(parts, activePage);
         }
       }
-      parts.push(pageNav.text);
+      addTitleSegment(parts, pageNav);
     }
 
     if (navModel) {
       if (navModel.node !== navModel.main) {
-        parts.push(navModel.node.text);
+        addTitleSegment(parts, navModel.node);
       }
-      parts.push(navModel.main.text);
+      addTitleSegment(parts, navModel.main);
     }
 
     parts.push(Branding.AppTitle);
@@ -30,3 +29,9 @@ export function usePageTitle(navModel?: NavModel, pageNav?: NavModelItem) {
     document.title = parts.join(' - ');
   }, [navModel, pageNav]);
 }
+
+function addTitleSegment(parts: string[], node: NavModelItem) {
+  if (!node.hideFromBreadcrumbs) {
+    parts.push(node.text);
+  }
+}

public/app/core/components/PageNew/Page.test.tsx

@@ -89,4 +89,15 @@ describe('Render', () => {
     expect(screen.getByRole('tab', { name: 'Tab Child1' })).toBeInTheDocument();
     expect(screen.getByRole('tab', { name: 'Tab pageNav child1' })).toBeInTheDocument();
   });
+
+  it('should update document title', async () => {
+    setup({ navId: 'child1', pageNav });
+    expect(document.title).toBe('pageNav child1 - pageNav title - Child1 - Section name - Grafana');
+  });
+
+  it('should not include hideFromBreadcrumb nodes in title', async () => {
+    pageNav.children![0].hideFromBreadcrumbs = true;
+    setup({ navId: 'child1', pageNav });
+    expect(document.title).toBe('pageNav title - Child1 - Section name - Grafana');
+  });
 });

public/app/features/plugins/utils.test.ts

@@ -30,14 +30,16 @@ describe('buildPluginSectionNav', () => {
     children: [app1],
   };
 
+  const home = {
+    id: HOME_NAV_ID,
+    text: 'Home',
+  };
+
   const adminSection: NavModelItem = {
     text: 'Admin',
     id: 'admin',
     children: [],
-    parentItem: {
-      id: HOME_NAV_ID,
-      text: 'Home',
-    },
+    parentItem: home,
   };
 
   const standalonePluginPage = {
@@ -54,6 +56,7 @@ describe('buildPluginSectionNav', () => {
     apps: appsSection,
     [app1.id!]: appsSection.children[0],
     [standalonePluginPage.id]: standalonePluginPage,
+    [HOME_NAV_ID]: home,
   };
 
   it('Should return pluginNav if topnav is disabled', () => {
@@ -107,9 +110,7 @@ describe('buildPluginSectionNav', () => {
   it('Should not throw error just return a root nav model without children for plugins that dont exist in navtree', () => {
     config.featureToggles.topnav = true;
     const result = buildPluginSectionNav({} as HistoryLocation, pluginNav, navIndex, 'app3');
-    expect(result?.main.id).toBe('root-plugin-page');
-    expect(result?.main.hideFromBreadcrumbs).toBe(true);
-    expect(result?.main.children?.length).toBe(0);
+    expect(result?.main.id).toBe(HOME_NAV_ID);
   });
 
   it('Should throw error if app has no section', () => {

public/app/features/plugins/utils.ts

@@ -2,6 +2,7 @@ import { Location as HistoryLocation } from 'history';
 
 import { GrafanaPlugin, NavIndex, NavModel, NavModelItem, PanelPluginMeta, PluginType } from '@grafana/data';
 import { config } from '@grafana/runtime';
+import { HOME_NAV_ID } from 'app/core/reducers/navModel';
 import { getRootSectionForNode } from 'app/core/selectors/navModel';
 
 import { importPanelPluginFromMeta } from './importPanelPlugin';
@@ -99,7 +100,7 @@ export function getPluginSection(location: HistoryLocation, navIndex: NavIndex,
   // Some plugins like cloud home don't have any precense in the navtree so we need to allow those
   const navTreeNodeForPlugin = navIndex[`plugin-page-${pluginId}`];
   if (!navTreeNodeForPlugin) {
-    return { id: 'root-plugin-page', text: 'Root plugin page', hideFromBreadcrumbs: true };
+    return navIndex[HOME_NAV_ID];
   }
 
   if (!navTreeNodeForPlugin.parentItem) {