[SharedUxChromeNavigation] Detect active nav route(s)

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

@@ -164,7 +164,7 @@ export class ChromeService {
 
     const navControls = this.navControls.start();
     const navLinks = this.navLinks.start({ application, http });
-    const projectNavigation = this.projectNavigation.start({ application, navLinks });
+    const projectNavigation = this.projectNavigation.start({ application, navLinks, http });
     const recentlyAccessed = await this.recentlyAccessed.start({ http });
     const docTitle = this.docTitle.start();
     const { customBranding$ } = customBranding;
@@ -262,18 +262,12 @@ export class ChromeService {
 
     const getHeaderComponent = () => {
       if (chromeStyle$.getValue() === 'project') {
-        // const projectNavigationConfig = projectNavigation.getProjectNavigation$();
-        // TODO: Uncommented when we support the project navigation config
-        // if (!projectNavigationConfig) {
-        //   throw new Erorr(`Project navigation config must be provided for project.`);
-        // }
-
         const projectNavigationComponent$ = projectNavigation.getProjectSideNavComponent$();
-        // const projectNavigation$ = projectNavigation.getProjectNavigation$();
+        const activeNodes$ = projectNavigation.getActiveNodes$();
 
         const ProjectHeaderWithNavigation = () => {
           const CustomSideNavComponent = useObservable(projectNavigationComponent$, undefined);
-          // const projectNavigationConfig = useObservable(projectNavigation$, undefined);
+          const activeNodes = useObservable(activeNodes$, []);
 
           let SideNavComponent: ISideNavComponent = () => null;
 
@@ -311,8 +305,7 @@ export class ChromeService {
               kibanaVersion={injectedMetadata.getKibanaVersion()}
               prependBasePath={http.basePath.prepend}
             >
-              {/* TODO: pass down the SideNavCompProps once they are defined  */}
-              <SideNavComponent />
+              <SideNavComponent activeNodes={activeNodes} />
             </ProjectHeader>
           );
         };
@@ -428,12 +421,14 @@ export class ChromeService {
         setNavigation: setProjectNavigation,
         setSideNavComponent: setProjectSideNavComponent,
         setBreadcrumbs: setProjectBreadcrumbs,
+        getActiveNavigationNodes$: () => projectNavigation.getActiveNodes$(),
       },
     };
   }
 
   public stop() {
     this.navLinks.stop();
+    this.projectNavigation.stop();
     this.stop$.next();
   }
 }

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

@@ -6,16 +6,46 @@
  * Side Public License, v 1.
  */
 
-import { firstValueFrom } from 'rxjs';
-import { ProjectNavigationService } from './project_navigation_service';
+import { History } from 'history';
+import { firstValueFrom, lastValueFrom, take } from 'rxjs';
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
 import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
 import type { ChromeNavLinks } from '@kbn/core-chrome-browser';
+import { ProjectNavigationService } from './project_navigation_service';
+
+const createHistoryMock = ({
+  locationPathName = '/',
+}: { locationPathName?: string } = {}): jest.Mocked<History> => {
+  return {
+    block: jest.fn(),
+    createHref: jest.fn(),
+    go: jest.fn(),
+    goBack: jest.fn(),
+    goForward: jest.fn(),
+    listen: jest.fn(),
+    push: jest.fn(),
+    replace: jest.fn(),
+    action: 'PUSH',
+    length: 1,
+    location: {
+      pathname: locationPathName,
+      search: '',
+      hash: '',
+      key: '',
+      state: undefined,
+    },
+  };
+};
 
-const setup = () => {
+const setup = ({ locationPathName = '/' }: { locationPathName?: string } = {}) => {
   const projectNavigationService = new ProjectNavigationService();
   const projectNavigation = projectNavigationService.start({
-    application: applicationServiceMock.createInternalStartContract(),
+    application: {
+      ...applicationServiceMock.createInternalStartContract(),
+      history: createHistoryMock({ locationPathName }),
+    },
     navLinks: {} as unknown as ChromeNavLinks,
+    http: httpServiceMock.createStartContract(),
   });
 
   return { projectNavigation };
@@ -89,3 +119,104 @@ describe('breadcrumbs', () => {
     `);
   });
 });
+
+describe('getActiveNodes$()', () => {
+  test('should set the active nodes from history location', async () => {
+    const currentLocationPathName = '/foo/item1';
+    const { projectNavigation } = setup({ locationPathName: currentLocationPathName });
+
+    let activeNodes = await lastValueFrom(projectNavigation.getActiveNodes$().pipe(take(1)));
+    expect(activeNodes).toEqual([]);
+
+    projectNavigation.setProjectNavigation({
+      navigationTree: [
+        {
+          id: 'root',
+          title: 'Root',
+          path: ['root'],
+          children: [
+            {
+              id: 'item1',
+              title: 'Item 1',
+              path: ['root', 'item1'],
+              deepLink: {
+                id: 'item1',
+                title: 'Item 1',
+                url: '/foo/item1',
+                baseUrl: '',
+                href: '',
+              },
+            },
+          ],
+        },
+      ],
+    });
+
+    activeNodes = await lastValueFrom(projectNavigation.getActiveNodes$().pipe(take(1)));
+
+    expect(activeNodes).toEqual([
+      [
+        {
+          id: 'root',
+          title: 'Root',
+          path: ['root'],
+        },
+        {
+          id: 'item1',
+          title: 'Item 1',
+          path: ['root', 'item1'],
+          deepLink: {
+            id: 'item1',
+            title: 'Item 1',
+            url: '/foo/item1',
+            baseUrl: '',
+            href: '',
+          },
+        },
+      ],
+    ]);
+  });
+
+  test('should set the active nodes from getIsActive() handler', async () => {
+    const { projectNavigation } = setup();
+
+    let activeNodes = await lastValueFrom(projectNavigation.getActiveNodes$().pipe(take(1)));
+    expect(activeNodes).toEqual([]);
+
+    projectNavigation.setProjectNavigation({
+      navigationTree: [
+        {
+          id: 'root',
+          title: 'Root',
+          path: ['root'],
+          children: [
+            {
+              id: 'item1',
+              title: 'Item 1',
+              path: ['root', 'item1'],
+              getIsActive: () => true,
+            },
+          ],
+        },
+      ],
+    });
+
+    activeNodes = await lastValueFrom(projectNavigation.getActiveNodes$().pipe(take(1)));
+
+    expect(activeNodes).toEqual([
+      [
+        {
+          id: 'root',
+          title: 'Root',
+          path: ['root'],
+        },
+        {
+          id: 'item1',
+          title: 'Item 1',
+          path: ['root', 'item1'],
+          getIsActive: expect.any(Function),
+        },
+      ],
+    ]);
+  });
+});

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

@@ -13,13 +13,20 @@ import {
   SideNavComponent,
   ChromeProjectBreadcrumb,
   ChromeSetProjectBreadcrumbsParams,
+  ChromeProjectNavigationNode,
 } from '@kbn/core-chrome-browser';
-import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs';
+import type { HttpStart } from '@kbn/core-http-browser';
+import { BehaviorSubject, Observable, combineLatest, map, takeUntil, ReplaySubject } from 'rxjs';
+import type { Location } from 'history';
+import deepEqual from 'react-fast-compare';
+
 import { createHomeBreadcrumb } from './home_breadcrumbs';
+import { findActiveNodes, flattenNav, stripQueryParams } from './utils';
 
 interface StartDeps {
   application: InternalApplicationStart;
   navLinks: ChromeNavLinks;
+  http: HttpStart;
 }
 
 export class ProjectNavigationService {
@@ -28,17 +35,23 @@ export class ProjectNavigationService {
   }>({ current: null });
   private projectHome$ = new BehaviorSubject<string | undefined>(undefined);
   private projectNavigation$ = new BehaviorSubject<ChromeProjectNavigation | undefined>(undefined);
+  private activeNodes$ = new BehaviorSubject<ChromeProjectNavigationNode[][]>([]);
+  private projectNavigationNavTreeFlattened: Record<string, ChromeProjectNavigationNode> = {};
 
   private projectBreadcrumbs$ = new BehaviorSubject<{
     breadcrumbs: ChromeProjectBreadcrumb[];
     params: ChromeSetProjectBreadcrumbsParams;
   }>({ breadcrumbs: [], params: { absolute: false } });
+  private readonly stop$ = new ReplaySubject<void>(1);
+  private application?: InternalApplicationStart;
+  private http?: HttpStart;
+  private unlistenHistory?: () => void;
 
-  public start({ application, navLinks }: StartDeps) {
-    // TODO: use application, navLink and projectNavigation$ to:
-    // 1. validate projectNavigation$ against navLinks,
-    // 2. filter disabled/missing links from projectNavigation
-    // 3. keep track of currently active link / path (path will be used to highlight the link in the sidenav and display part of the breadcrumbs)
+  public start({ application, navLinks, http }: StartDeps) {
+    this.application = application;
+    this.http = http;
+    this.onHistoryLocationChange(application.history.location);
+    this.unlistenHistory = application.history.listen(this.onHistoryLocationChange.bind(this));
 
     return {
       setProjectHome: (homeHref: string) => {
@@ -49,10 +62,15 @@ export class ProjectNavigationService {
       },
       setProjectNavigation: (projectNavigation: ChromeProjectNavigation) => {
         this.projectNavigation$.next(projectNavigation);
+        this.projectNavigationNavTreeFlattened = flattenNav(projectNavigation.navigationTree);
+        this.setActiveProjectNavigationNodes();
       },
       getProjectNavigation$: () => {
         return this.projectNavigation$.asObservable();
       },
+      getActiveNodes$: () => {
+        return this.activeNodes$.pipe(takeUntil(this.stop$));
+      },
       setProjectSideNavComponent: (component: SideNavComponent | null) => {
         this.customProjectSideNavComponent$.next({ current: component });
       },
@@ -88,4 +106,52 @@ export class ProjectNavigationService {
       },
     };
   }
+
+  private setActiveProjectNavigationNodes(_location?: Location) {
+    if (!this.application) return;
+    if (!Object.keys(this.projectNavigationNavTreeFlattened).length) return;
+
+    const location = _location ?? this.application.history.location;
+    let currentPathname = this.http?.basePath.prepend(location.pathname) ?? location.pathname;
+
+    // We add possible hash to the current pathname
+    // e.g. /app/kibana#/management
+    currentPathname = stripQueryParams(`${currentPathname}${location.hash}`);
+
+    const activeNodes = findActiveNodes(
+      currentPathname,
+      this.projectNavigationNavTreeFlattened,
+      location
+    );
+
+    // Each time we call findActiveNodes() we create a new array of activeNodes. As this array is used
+    // in React in useCallback() and useMemo() dependencies arrays it triggers an infinite navigation
+    // tree registration loop. To avoid that we only notify the listeners when the activeNodes array
+    // has actually changed.
+    let requiresUpdate = activeNodes.length !== this.activeNodes$.value.length;
+
+    if (!requiresUpdate) {
+      for (const [i, nodesBranch] of this.activeNodes$.value.entries()) {
+        for (const [j, node] of nodesBranch.entries()) {
+          if (!deepEqual(node, activeNodes[i][j])) {
+            requiresUpdate = true;
+            break;
+          }
+        }
+      }
+    }
+
+    if (!requiresUpdate) return;
+
+    this.activeNodes$.next(activeNodes);
+  }
+
+  private onHistoryLocationChange(location: Location) {
+    this.setActiveProjectNavigationNodes(location);
+  }
+
+  public stop() {
+    this.stop$.next();
+    this.unlistenHistory?.();
+  }
 }