[Stateful sidenav] Dynamic links

.github/CODEOWNERS

@@ -817,7 +817,6 @@ packages/kbn-shared-ux-utility @elastic/appex-sharedux
 x-pack/plugins/observability_solution/slo @elastic/obs-ux-management-team
 x-pack/packages/kbn-slo-schema @elastic/obs-ux-management-team
 x-pack/plugins/snapshot_restore @elastic/kibana-management
-packages/solution-nav/es @elastic/appex-sharedux @elastic/enterprise-search-frontend
 packages/solution-nav/oblt @elastic/appex-sharedux @elastic/obs-ux-management-team
 packages/kbn-some-dev-log @elastic/kibana-operations
 packages/kbn-sort-package-json @elastic/kibana-operations

package.json

@@ -820,7 +820,6 @@
     "@kbn/slo-plugin": "link:x-pack/plugins/observability_solution/slo",
     "@kbn/slo-schema": "link:x-pack/packages/kbn-slo-schema",
     "@kbn/snapshot-restore-plugin": "link:x-pack/plugins/snapshot_restore",
-    "@kbn/solution-nav-es": "link:packages/solution-nav/es",
     "@kbn/solution-nav-oblt": "link:packages/solution-nav/oblt",
     "@kbn/sort-predicates": "link:packages/kbn-sort-predicates",
     "@kbn/spaces-plugin": "link:x-pack/plugins/spaces",

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

@@ -40,7 +40,7 @@ export function buildBreadcrumbs({
   activeNodes: ChromeProjectNavigationNode[][];
   solutionNavigations?: {
     definitions: SolutionNavigationDefinitions;
-    activeId: string;
+    activeId: string | null;
     onChange: (id: string) => void;
   };
 }): ChromeProjectBreadcrumb[] {
@@ -106,7 +106,7 @@ function buildRootCrumb({
   cloudLinks: CloudLinks;
   solutionNavigations?: {
     definitions: SolutionNavigationDefinitions;
-    activeId: string;
+    activeId: string | null;
     onChange: (id: string) => void;
   };
 }): ChromeProjectBreadcrumb {

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

@@ -328,6 +328,7 @@ describe('initNavigation()', () => {
               "href": "/app/discover",
               "id": "discover",
               "isElasticInternalLink": false,
+              "onClick": undefined,
               "path": "rootNav:analytics.discover",
               "sideNavStatus": "visible",
               "title": "DISCOVER",
@@ -346,6 +347,7 @@ describe('initNavigation()', () => {
               "href": "/app/dashboards",
               "id": "dashboards",
               "isElasticInternalLink": false,
+              "onClick": undefined,
               "path": "rootNav:analytics.dashboards",
               "sideNavStatus": "visible",
               "title": "DASHBOARDS",
@@ -364,6 +366,7 @@ describe('initNavigation()', () => {
               "href": "/app/visualize",
               "id": "visualize",
               "isElasticInternalLink": false,
+              "onClick": undefined,
               "path": "rootNav:analytics.visualize",
               "sideNavStatus": "visible",
               "title": "VISUALIZE",
@@ -374,6 +377,7 @@ describe('initNavigation()', () => {
           "icon": "stats",
           "id": "rootNav:analytics",
           "isElasticInternalLink": false,
+          "onClick": undefined,
           "path": "rootNav:analytics",
           "renderAs": "accordion",
           "sideNavStatus": "visible",

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

@@ -162,6 +162,7 @@ export class ProjectNavigationService {
           chromeBreadcrumbs$,
           this.projectName$,
           this.solutionNavDefinitions$,
+          this.nextSolutionNavDefinitionId$,
           this.activeSolutionNavDefinitionId$,
           this.cloudLinks$,
         ]).pipe(
@@ -172,12 +173,13 @@ export class ProjectNavigationService {
               chromeBreadcrumbs,
               projectName,
               solutionNavDefinitions,
+              nextSolutionNavDefinitionId,
               activeSolutionNavDefinitionId,
               cloudLinks,
             ]) => {
               const solutionNavigations =
                 Object.keys(solutionNavDefinitions).length > 0 &&
-                activeSolutionNavDefinitionId !== null
+                (nextSolutionNavDefinitionId !== null || activeSolutionNavDefinitionId !== null)
                   ? {
                       definitions: solutionNavDefinitions,
                       activeId: activeSolutionNavDefinitionId,

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

@@ -23,6 +23,7 @@ import type {
   ItemDefinition,
 } from '@kbn/core-chrome-browser/src';
 import type { Location } from 'history';
+import type { MouseEventHandler } from 'react';
 import { getPresets } from './navigation_presets';
 
 const wrapIdx = (index: number): string => `[${index}]`;
@@ -212,15 +213,17 @@ function getNodeStatus(
     deepLink,
     cloudLink,
     sideNavStatus,
+    onClick,
   }: {
     link?: string;
     deepLink?: ChromeNavLink;
     cloudLink?: CloudLinkId;
     sideNavStatus?: SideNavNodeStatus;
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLElement>;
   },
   { cloudLinks }: { cloudLinks: CloudLinks }
 ): SideNavNodeStatus | 'remove' {
-  if (link && !deepLink) {
+  if (link && !deepLink && !onClick) {
     // If a link is provided, but no deepLink is found, don't render anything
     return 'remove';
   }
@@ -259,7 +262,7 @@ function validateNodeProps<
   LinkId extends AppDeepLinkId = AppDeepLinkId,
   Id extends string = string,
   ChildrenId extends string = Id
->({ id, link, href, cloudLink, renderAs }: NodeDefinition<LinkId, Id, ChildrenId>) {
+>({ id, link, href, cloudLink, renderAs, onClick }: NodeDefinition<LinkId, Id, ChildrenId>) {
   if (link && cloudLink) {
     throw new Error(
       `[Chrome navigation] Error in node [${id}]. Only one of "link" or "cloudLink" can be provided.`
@@ -275,9 +278,9 @@ function validateNodeProps<
       `[Chrome navigation] Error in node [${id}]. If renderAs is set to "panelOpener", a "link" must also be provided.`
     );
   }
-  if (renderAs === 'item' && !link) {
+  if (renderAs === 'item' && !link && !onClick) {
     throw new Error(
-      `[Chrome navigation] Error in node [${id}]. If renderAs is set to "item", a "link" must also be provided.`
+      `[Chrome navigation] Error in node [${id}]. If renderAs is set to "item", a "link" or "onClick" must also be provided.`
     );
   }
 }
@@ -302,14 +305,15 @@ const initNavNode = <
 ): ChromeProjectNavigationNode | null => {
   validateNodeProps(node);
 
-  const { cloudLink, link, children, ...navNodeFromProps } = node;
+  const { cloudLink, link, children, onClick, ...navNodeFromProps } = node;
   const deepLink = link !== undefined ? deepLinks[link] : undefined;
   const sideNavStatus = getNodeStatus(
     {
       link,
       deepLink,
       cloudLink,
       sideNavStatus: navNodeFromProps.sideNavStatus,
+      onClick,
     },
     { cloudLinks }
   );
@@ -324,14 +328,15 @@ const initNavNode = <
   const href = isElasticInternalLink ? cloudLinks[cloudLink]?.href : node.href;
   const path = parentNodePath ? `${parentNodePath}.${id}` : id;
 
-  if (href && !isAbsoluteLink(href)) {
+  if (href && !isAbsoluteLink(href) && !onClick) {
     throw new Error(`href must be an absolute URL. Node id [${id}].`);
   }
 
   const navNode: ChromeProjectNavigationNode = {
     ...navNodeFromProps,
     id,
     href: getNavigationNodeHref({ href, deepLink }),
+    onClick,
     path,
     title,
     deepLink,

packages/core/chrome/core-chrome-browser-internal/src/ui/solution_nav_switcher_breadcrumbs.tsx

@@ -21,7 +21,7 @@ export const getSolutionNavSwitcherBreadCrumb = ({
   cloudLinks,
 }: {
   definitions: SolutionNavigationDefinitions;
-  activeId: string;
+  activeId: string | null;
   onChange: (id: string) => void;
   cloudLinks: CloudLinks;
 }): ChromeProjectBreadcrumb => {

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

@@ -56,4 +56,5 @@ export type {
   NavigationTreeDefinitionUI,
   SolutionNavigationDefinition,
   SolutionNavigationDefinitions,
+  EuiSideNavItemTypeEnhanced,
 } from './src';

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

@@ -55,4 +55,5 @@ export type {
   NavigationTreeDefinitionUI,
   SolutionNavigationDefinition,
   SolutionNavigationDefinitions,
+  EuiSideNavItemTypeEnhanced,
 } from './project_navigation';

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

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import type { ComponentType } from 'react';
+import type { ComponentType, MouseEventHandler } from 'react';
 import type { Location } from 'history';
-import type { EuiThemeSizes, IconType } from '@elastic/eui';
+import type { EuiSideNavItemType, EuiThemeSizes, IconType } from '@elastic/eui';
 import type { Observable } from 'rxjs';
 import type { AppId as DevToolsApp, DeepLinkId as DevToolsLink } from '@kbn/deeplinks-devtools';
 import type {
@@ -128,6 +128,10 @@ interface NodeDefinitionBase {
    * href for absolute links only. Internal links should use "link".
    */
   href?: string;
+  /**
+   * Custom handler to execute when clicking on the node. This handler takes precedence over the "link" or "href" props.
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement | HTMLElement>;
   /**
    * Optional status to indicate if the breadcrumb should be hidden when this node is active.
    * @default 'visible'
@@ -434,3 +438,15 @@ export interface SolutionNavigationDefinition<LinkId extends AppDeepLinkId = App
 export interface SolutionNavigationDefinitions {
   [id: string]: SolutionNavigationDefinition;
 }
+
+/**
+ * Temporary helper interface while we have to maintain both the legacy side navigation
+ * and the new "solution view" one. The legacy uses EuiSideNavItemType and its properties are not fully compatible
+ * with the NodeDefinition. Solution teams declare their "classic" navigation using the EuiSideNavItemType.
+ * Converting those to the `NodeDefinition` require some additional props.
+ */
+export type EuiSideNavItemTypeEnhanced<T = unknown> = Omit<EuiSideNavItemType<T>, 'items'> & {
+  items?: Array<EuiSideNavItemTypeEnhanced<unknown>>;
+  iconToString?: string;
+  nameToString?: string;
+};

packages/shared-ux/chrome/navigation/__jest__/build_nav_tree.test.tsx

@@ -135,6 +135,40 @@ describe('builds navigation tree', () => {
     }
   });
 
+  test('should allow custom onClick handler for links', async () => {
+    const navigateToUrl = jest.fn();
+    const onClick = jest.fn();
+
+    const node: ChromeProjectNavigationNode = {
+      id: 'group1',
+      title: 'Group 1',
+      path: 'group1',
+      defaultIsCollapsed: false,
+      children: [
+        {
+          id: 'item1',
+          title: 'Item 1',
+          href: 'https://foo',
+          path: 'group1.item1',
+          onClick,
+        },
+      ],
+    };
+
+    const { findByTestId } = renderNavigation({
+      navTreeDef: of({
+        body: [node],
+      }),
+      services: { navigateToUrl },
+    });
+
+    const navItem = await findByTestId(/nav-item-group1.item1\s/);
+    navItem.click();
+
+    expect(navigateToUrl).not.toHaveBeenCalled();
+    expect(onClick).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }));
+  });
+
   test('should not render the group if it does not have children', async () => {
     const navTree: NavigationTreeDefinitionUI = {
       body: [