Prevent href click on accordion button

elastic · May 15, 2024 · ef841a9 · ef841a9
1 parent 5a01049
commit ef841a9
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/packages/shared-ux/chrome/navigation/__jest__/build_nav_tree.test.tsx b/packages/shared-ux/chrome/navigation/__jest__/build_nav_tree.test.tsx
@@ -7,7 +7,10 @@
  */
 import './setup_jest_mocks';
 import { of } from 'rxjs';
-import type { NavigationTreeDefinitionUI } from '@kbn/core-chrome-browser';
+import type {
+  NavigationTreeDefinitionUI,
+  ChromeProjectNavigationNode,
+} from '@kbn/core-chrome-browser';
 
 import { renderNavigation } from './utils';
 
@@ -79,6 +82,59 @@ describe('builds navigation tree', () => {
     expect(await findByTestId(/nav-item-group1.group1A.group1A_1.item1/)).toBeVisible();
   });
 
+  test('should handle links on accordion toggle button', async () => {
+    const navigateToUrl = jest.fn();
+
+    const accordionNode: ChromeProjectNavigationNode = {
+      id: 'group1',
+      title: 'Group 1',
+      path: 'group1',
+      renderAs: 'accordion',
+      href: '/app/foo', // Accordion has an href
+      children: [
+        {
+          id: 'item1',
+          title: 'Item 1',
+          href: 'https://foo',
+          path: 'group1.item1',
+        },
+      ],
+    };
+
+    {
+      const { findByTestId, unmount } = renderNavigation({
+        navTreeDef: of({
+          body: [accordionNode],
+        }),
+        services: { navigateToUrl },
+      });
+
+      const accordionToggleButton = await findByTestId(/nav-item-group1\s/);
+      accordionToggleButton.click();
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      unmount();
+    }
+
+    {
+      const { findByTestId } = renderNavigation({
+        navTreeDef: of({
+          body: [
+            {
+              ...accordionNode,
+              isCollapsible: false, // Non-collapsible accordion
+            },
+          ],
+        }),
+        services: { navigateToUrl },
+      });
+
+      const accordionToggleButton = await findByTestId(/nav-item-group1\s/);
+      accordionToggleButton.click();
+
+      expect(navigateToUrl).toHaveBeenCalledWith('/app/foo'); // Should navigate to the href
+    }
+  });
+
   test('should not render the group if it does not have children', async () => {
     const navTree: NavigationTreeDefinitionUI = {
       body: [

diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
@@ -184,7 +184,7 @@ const nodeToEuiCollapsibleNavProps = (
   const { navNode, isItem, hasChildren, hasLink } = serializeNavNode(_navNode);
   const isActive = isActiveFromUrl(navNode.path, activeNodes);
 
-  const { id, path, href, renderAs } = navNode;
+  const { id, path, href, renderAs, isCollapsible = DEFAULT_IS_COLLAPSIBLE } = navNode;
   const isExternal = Boolean(href) && !navNode.isElasticInternalLink && isAbsoluteLink(href!);
 
   const isAccordion = hasChildren && !isItem;
@@ -222,6 +222,9 @@ const nodeToEuiCollapsibleNavProps = (
   }
 
   const onClick = (e: React.MouseEvent) => {
+    // Do not navigate if it is a collapsible accordion, link will be used in the breadcrumb
+    if (isAccordion && isCollapsible) return;
+
     if (href !== undefined) {
       e.preventDefault();
       navigateToUrl(href);