[Stateful sidenav] Fix breadcrumbs (elastic#196169)

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx

@@ -392,7 +392,7 @@ describe('start', () => {
   describe('breadcrumbs', () => {
     it('updates/emits the current set of breadcrumbs', async () => {
       const { chrome, service } = await start();
-      const promise = chrome.getBreadcrumbs$().pipe(toArray()).toPromise();
+      const promise = firstValueFrom(chrome.getBreadcrumbs$().pipe(toArray()));
 
       chrome.setBreadcrumbs([{ text: 'foo' }, { text: 'bar' }]);
       chrome.setBreadcrumbs([{ text: 'foo' }]);
@@ -425,6 +425,35 @@ describe('start', () => {
                       ]
                   `);
     });
+
+    it('allows the project breadcrumb to also be set', async () => {
+      const { chrome } = await start();
+
+      chrome.setBreadcrumbs([{ text: 'foo' }, { text: 'bar' }]); // only setting the classic breadcrumbs
+
+      {
+        const breadcrumbs = await firstValueFrom(chrome.project.getBreadcrumbs$());
+        expect(breadcrumbs.length).toBe(1);
+        expect(breadcrumbs[0]).toMatchObject({
+          'data-test-subj': 'deploymentCrumb',
+        });
+      }
+
+      chrome.setBreadcrumbs([{ text: 'foo' }, { text: 'bar' }], {
+        project: { value: [{ text: 'baz' }] }, // also setting the project breadcrumb
+      });
+
+      {
+        const breadcrumbs = await firstValueFrom(chrome.project.getBreadcrumbs$());
+        expect(breadcrumbs.length).toBe(2);
+        expect(breadcrumbs[0]).toMatchObject({
+          'data-test-subj': 'deploymentCrumb',
+        });
+        expect(breadcrumbs[1]).toEqual({
+          text: 'baz', // the project breadcrumb
+        });
+      }
+    });
   });
 
   describe('breadcrumbsAppendExtension$', () => {

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

@@ -27,6 +27,7 @@ import type {
   ChromeNavLink,
   ChromeBadge,
   ChromeBreadcrumb,
+  ChromeSetBreadcrumbsParams,
   ChromeBreadcrumbsAppendExtension,
   ChromeGlobalHelpExtensionMenuLink,
   ChromeHelpExtension,
@@ -354,6 +355,17 @@ export class ChromeService {
       projectNavigation.setProjectBreadcrumbs(breadcrumbs, params);
     };
 
+    const setClassicBreadcrumbs = (
+      newBreadcrumbs: ChromeBreadcrumb[],
+      { project }: ChromeSetBreadcrumbsParams = {}
+    ) => {
+      breadcrumbs$.next(newBreadcrumbs);
+      if (project) {
+        const { value: projectValue, absolute = false } = project;
+        setProjectBreadcrumbs(projectValue ?? [], { absolute });
+      }
+    };
+
     const setProjectHome = (homeHref: string) => {
       validateChromeStyle();
       projectNavigation.setProjectHome(homeHref);
@@ -507,9 +519,7 @@ export class ChromeService {
 
       getBreadcrumbs$: () => breadcrumbs$.pipe(takeUntil(this.stop$)),
 
-      setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => {
-        breadcrumbs$.next(newBreadcrumbs);
-      },
+      setBreadcrumbs: setClassicBreadcrumbs,
 
       getBreadcrumbsAppendExtension$: () => breadcrumbsAppendExtension$.pipe(takeUntil(this.stop$)),
 
@@ -586,6 +596,7 @@ export class ChromeService {
         getNavigationTreeUi$: () => projectNavigation.getNavigationTreeUi$(),
         setSideNavComponent: setProjectSideNavComponent,
         setBreadcrumbs: setProjectBreadcrumbs,
+        getBreadcrumbs$: projectNavigation.getProjectBreadcrumbs$.bind(projectNavigation),
         getActiveNavigationNodes$: () => projectNavigation.getActiveNodes$(),
         updateSolutionNavigations: projectNavigation.updateSolutionNavigations,
         changeActiveSolutionNavigation: projectNavigation.changeActiveSolutionNavigation,

packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx

@@ -11,7 +11,6 @@ import React from 'react';
 import { EuiContextMenuPanel, EuiContextMenuItem, EuiButtonEmpty } from '@elastic/eui';
 import type {
   AppDeepLinkId,
-  ChromeProjectBreadcrumb,
   ChromeProjectNavigationNode,
   ChromeSetProjectBreadcrumbsParams,
   ChromeBreadcrumb,
@@ -30,14 +29,14 @@ export function buildBreadcrumbs({
 }: {
   projectName?: string;
   projectBreadcrumbs: {
-    breadcrumbs: ChromeProjectBreadcrumb[];
+    breadcrumbs: ChromeBreadcrumb[];
     params: ChromeSetProjectBreadcrumbsParams;
   };
   chromeBreadcrumbs: ChromeBreadcrumb[];
   cloudLinks: CloudLinks;
   activeNodes: ChromeProjectNavigationNode[][];
   isServerless: boolean;
-}): ChromeProjectBreadcrumb[] {
+}): ChromeBreadcrumb[] {
   const rootCrumb = buildRootCrumb({
     projectName,
     cloudLinks,
@@ -54,7 +53,7 @@ export function buildBreadcrumbs({
     (n) => Boolean(n.title) && n.breadcrumbStatus !== 'hidden'
   );
   const navBreadcrumbs = navBreadcrumbPath.map(
-    (node): ChromeProjectBreadcrumb => ({
+    (node): ChromeBreadcrumb => ({
       href: node.deepLink?.url ?? node.href,
       deepLinkId: node.deepLink?.id as AppDeepLinkId,
       text: node.title,
@@ -99,7 +98,7 @@ function buildRootCrumb({
   projectName?: string;
   cloudLinks: CloudLinks;
   isServerless: boolean;
-}): ChromeProjectBreadcrumb {
+}): ChromeBreadcrumb {
   if (isServerless) {
     return {
       text:

packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.ts

@@ -11,7 +11,6 @@ import { InternalApplicationStart } from '@kbn/core-application-browser-internal
 import type {
   ChromeNavLinks,
   SideNavComponent,
-  ChromeProjectBreadcrumb,
   ChromeBreadcrumb,
   ChromeSetProjectBreadcrumbsParams,
   ChromeProjectNavigationNode,
@@ -80,7 +79,7 @@ export class ProjectNavigationService {
   );
 
   private projectBreadcrumbs$ = new BehaviorSubject<{
-    breadcrumbs: ChromeProjectBreadcrumb[];
+    breadcrumbs: ChromeBreadcrumb[];
     params: ChromeSetProjectBreadcrumbsParams;
   }>({ breadcrumbs: [], params: { absolute: false } });
   private readonly stop$ = new ReplaySubject<void>(1);
@@ -153,15 +152,15 @@ export class ProjectNavigationService {
         return this.customProjectSideNavComponent$.asObservable();
       },
       setProjectBreadcrumbs: (
-        breadcrumbs: ChromeProjectBreadcrumb | ChromeProjectBreadcrumb[],
+        breadcrumbs: ChromeBreadcrumb | ChromeBreadcrumb[],
         params?: Partial<ChromeSetProjectBreadcrumbsParams>
       ) => {
         this.projectBreadcrumbs$.next({
           breadcrumbs: Array.isArray(breadcrumbs) ? breadcrumbs : [breadcrumbs],
           params: { absolute: false, ...params },
         });
       },
-      getProjectBreadcrumbs$: (): Observable<ChromeProjectBreadcrumb[]> => {
+      getProjectBreadcrumbs$: (): Observable<ChromeBreadcrumb[]> => {
         return combineLatest([
           this.projectBreadcrumbs$,
           this.activeNodes$,

packages/core/chrome/core-chrome-browser-internal/src/types.ts

@@ -9,8 +9,8 @@
 
 import type {
   ChromeStart,
+  ChromeBreadcrumb,
   SideNavComponent,
-  ChromeProjectBreadcrumb,
   ChromeSetProjectBreadcrumbsParams,
   ChromeProjectNavigationNode,
   AppDeepLinkId,
@@ -87,6 +87,9 @@ export interface InternalChromeStart extends ChromeStart {
      */
     setSideNavComponent(component: SideNavComponent | null): void;
 
+    /** Get an Observable of the current project breadcrumbs */
+    getBreadcrumbs$(): Observable<ChromeBreadcrumb[]>;
+
     /**
      * Set project breadcrumbs
      * @param breadcrumbs
@@ -95,7 +98,7 @@ export interface InternalChromeStart extends ChromeStart {
      * Use {@link ServerlessPluginStart.setBreadcrumbs} to set project breadcrumbs.
      */
     setBreadcrumbs(
-      breadcrumbs: ChromeProjectBreadcrumb[] | ChromeProjectBreadcrumb,
+      breadcrumbs: ChromeBreadcrumb[] | ChromeBreadcrumb,
       params?: Partial<ChromeSetProjectBreadcrumbsParams>
     ): void;
 

packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts

@@ -84,6 +84,7 @@ const createStartContractMock = () => {
       initNavigation: jest.fn(),
       setSideNavComponent: jest.fn(),
       setBreadcrumbs: jest.fn(),
+      getBreadcrumbs$: jest.fn(),
       getActiveNavigationNodes$: jest.fn(),
       getNavigationTreeUi$: jest.fn(),
       changeActiveSolutionNavigation: jest.fn(),

packages/core/chrome/core-chrome-browser/index.ts

@@ -12,6 +12,7 @@ export type {
   AppId,
   ChromeBadge,
   ChromeBreadcrumb,
+  ChromeSetBreadcrumbsParams,
   ChromeBreadcrumbsAppendExtension,
   ChromeDocTitle,
   ChromeGlobalHelpExtensionMenuLink,
@@ -41,7 +42,6 @@ export type {
   SideNavCompProps,
   SideNavComponent,
   SideNavNodeStatus,
-  ChromeProjectBreadcrumb,
   ChromeSetProjectBreadcrumbsParams,
   NodeDefinition,
   NodeDefinitionWithChildren,

packages/core/chrome/core-chrome-browser/src/breadcrumb.ts

@@ -24,3 +24,22 @@ export interface ChromeBreadcrumb extends EuiBreadcrumb {
 export interface ChromeBreadcrumbsAppendExtension {
   content: MountPoint<HTMLDivElement>;
 }
+
+/** @public */
+export interface ChromeSetBreadcrumbsParams {
+  /**
+   * Declare the breadcrumbs for the project/solution type navigation in stateful.
+   * Those breadcrumbs correspond to the serverless breadcrumbs declaration.
+   */
+  project?: {
+    /**
+     * The breadcrumb value to set. Can be a single breadcrumb or an array of breadcrumbs.
+     */
+    value: ChromeBreadcrumb | ChromeBreadcrumb[];
+    /**
+     * Indicates whether the breadcrumb should be absolute (replaces the full path) or relative.
+     * @default false
+     */
+    absolute?: boolean;
+  };
+}

packages/core/chrome/core-chrome-browser/src/contracts.ts

@@ -13,7 +13,11 @@ import type { ChromeRecentlyAccessed } from './recently_accessed';
 import type { ChromeDocTitle } from './doc_title';
 import type { ChromeHelpMenuLink, ChromeNavControls } from './nav_controls';
 import type { ChromeHelpExtension } from './help_extension';
-import type { ChromeBreadcrumb, ChromeBreadcrumbsAppendExtension } from './breadcrumb';
+import type {
+  ChromeBreadcrumb,
+  ChromeBreadcrumbsAppendExtension,
+  ChromeSetBreadcrumbsParams,
+} from './breadcrumb';
 import type { ChromeBadge, ChromeStyle, ChromeUserBanner } from './types';
 import type { ChromeGlobalHelpExtensionMenuLink } from './help_extension';
 import type { PanelSelectedNode } from './project_navigation';
@@ -84,7 +88,7 @@ export interface ChromeStart {
   /**
    * Override the current set of breadcrumbs
    */
-  setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void;
+  setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[], params?: ChromeSetBreadcrumbsParams): void;
 
   /**
    * Get an observable of the current extension appended to breadcrumbs

packages/core/chrome/core-chrome-browser/src/index.ts

@@ -7,7 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export type { ChromeBreadcrumbsAppendExtension, ChromeBreadcrumb } from './breadcrumb';
+export type {
+  ChromeBreadcrumbsAppendExtension,
+  ChromeBreadcrumb,
+  ChromeSetBreadcrumbsParams,
+} from './breadcrumb';
 export type { ChromeStart } from './contracts';
 export type { ChromeDocTitle } from './doc_title';
 export type {
@@ -42,7 +46,6 @@ export type {
   SideNavComponent,
   SideNavNodeStatus,
   ChromeSetProjectBreadcrumbsParams,
-  ChromeProjectBreadcrumb,
   NodeDefinition,
   NodeDefinitionWithChildren,
   RenderAs as NodeRenderAs,

packages/core/chrome/core-chrome-browser/src/project_navigation.ts

@@ -39,7 +39,6 @@ import type { AppId as SecurityApp, DeepLinkId as SecurityLink } from '@kbn/deep
 import type { AppId as FleetApp, DeepLinkId as FleetLink } from '@kbn/deeplinks-fleet';
 import type { AppId as SharedApp, DeepLinkId as SharedLink } from '@kbn/deeplinks-shared';
 
-import type { ChromeBreadcrumb } from './breadcrumb';
 import type { ChromeNavLink } from './nav_links';
 import type { ChromeRecentlyAccessedHistoryItem } from './recently_accessed';
 
@@ -262,9 +261,6 @@ export interface SideNavCompProps {
 /** @public */
 export type SideNavComponent = ComponentType<SideNavCompProps>;
 
-/** @public */
-export type ChromeProjectBreadcrumb = ChromeBreadcrumb;
-
 /** @public */
 export interface ChromeSetProjectBreadcrumbsParams {
   absolute: boolean;

src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx

@@ -189,7 +189,10 @@ export function InternalDashboardTopNav({
             },
           },
           ...dashboardTitleBreadcrumbs,
-        ])
+        ]),
+        {
+          project: { value: dashboardTitleBreadcrumbs },
+        }
       );
     }
   }, [redirectTo, dashboardTitle, dashboardApi, viewMode, customLeadingBreadCrumbs]);

src/plugins/management/public/plugin.tsx

@@ -131,7 +131,9 @@ export class ManagementPlugin
               const [, ...trailingBreadcrumbs] = newBreadcrumbs;
               deps.serverless.setBreadcrumbs(trailingBreadcrumbs);
             } else {
-              coreStart.chrome.setBreadcrumbs(newBreadcrumbs);
+              coreStart.chrome.setBreadcrumbs(newBreadcrumbs, {
+                project: { value: newBreadcrumbs, absolute: true },
+              });
             }
           },
           isSidebarEnabled$: managementPlugin.isSidebarEnabled$,

x-pack/plugins/security_solution_ess/public/navigation/breadcrumbs.ts

@@ -10,6 +10,10 @@ import type { Services } from '../common/services';
 export const subscribeBreadcrumbs = (services: Services) => {
   const { securitySolution, chrome } = services;
   securitySolution.getBreadcrumbsNav$().subscribe((breadcrumbsNav) => {
-    chrome.setBreadcrumbs([...breadcrumbsNav.leading, ...breadcrumbsNav.trailing]);
+    chrome.setBreadcrumbs([...breadcrumbsNav.leading, ...breadcrumbsNav.trailing], {
+      project: {
+        value: breadcrumbsNav.trailing,
+      },
+    });
   });
 };

x-pack/plugins/serverless/public/types.ts

@@ -6,7 +6,7 @@
  */
 
 import type {
-  ChromeProjectBreadcrumb,
+  ChromeBreadcrumb,
   ChromeSetProjectBreadcrumbsParams,
   SideNavComponent,
   NavigationTreeDefinition,
@@ -21,7 +21,7 @@ export interface ServerlessPluginSetup {}
 
 export interface ServerlessPluginStart {
   setBreadcrumbs: (
-    breadcrumbs: ChromeProjectBreadcrumb | ChromeProjectBreadcrumb[],
+    breadcrumbs: ChromeBreadcrumb | ChromeBreadcrumb[],
     params?: Partial<ChromeSetProjectBreadcrumbsParams>
   ) => void;
   setProjectHome(homeHref: string): void;

x-pack/test/functional_solution_sidenav/tests/observability_sidenav.ts

@@ -82,7 +82,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await solutionNavigation.sidenav.openSection('project_settings_project_nav');
         await solutionNavigation.sidenav.clickLink({ deepLinkId: 'management' });
         await solutionNavigation.sidenav.expectLinkActive({ deepLinkId: 'management' });
-        await solutionNavigation.breadcrumbs.expectBreadcrumbExists({ deepLinkId: 'management' });
+        await solutionNavigation.breadcrumbs.expectBreadcrumbExists({ text: 'Stack Management' });
 
         // navigate back to the home page using header logo
         await solutionNavigation.clickLogo();

x-pack/test/functional_solution_sidenav/tests/search_sidenav.ts

@@ -64,7 +64,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await solutionNavigation.sidenav.openSection('project_settings_project_nav');
         await solutionNavigation.sidenav.clickLink({ deepLinkId: 'management' });
         await solutionNavigation.sidenav.expectLinkActive({ deepLinkId: 'management' });
-        await solutionNavigation.breadcrumbs.expectBreadcrumbExists({ deepLinkId: 'management' });
+        await solutionNavigation.breadcrumbs.expectBreadcrumbExists({ text: 'Stack Management' });
 
         // navigate back to the home page using header logo
         await solutionNavigation.clickLogo();