[8.18] Fix toggling of the secondary panel for non-landing page nav item buttons (#211852) (#213172)

# Backport This will backport the following commits from `main` to `8.18`: - [Fix toggling of the secondary panel for non-landing page nav item buttons (#211852)](https://github.com/elastic/kibana/pull/211852)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-24 09:48:58 -04:00 · 2025-03-05 09:12:33 -07:00 · 2025-03-05 09:12:33 -07:00 · a215ddc2d2
commit a215ddc2d2
parent 4a0f8937ed
4 changed files with 143 additions and 34 deletions
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/jest/panel.test.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/jest/panel.test.tsx
@ -8,8 +8,11 @@
 */

 import './setup_jest_mocks';
+
+import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 import { BehaviorSubject, of } from 'rxjs';
+
 import type {
  ChromeProjectNavigationNode,
  NavigationTreeDefinitionUI,
@ -110,9 +113,105 @@ describe('Panel', () => {
    expect(queryByTestId(/panelOpener-root.group2/)).toBeVisible();
  });

+  describe('toggle the panel open and closed', () => {
+    let navigationTree: NavigationTreeDefinitionUI;
+    beforeAll(() => {
+      navigationTree = {
+        id: 'es',
+        body: [
+          {
+            id: 'root',
+            title: 'Root',
+            path: 'root',
+            isCollapsible: false,
+            children: [
+              {
+                id: 'group1',
+                title: 'Group 1',
+                path: 'root.group1',
+                renderAs: 'panelOpener',
+                children: [
+                  { id: 'item1', title: 'Item 1', href: '/app/item1', path: 'root.group1.item1' },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+    });
+
+    test('should allow button to toggle', async () => {
+      const { findByTestId, queryByTestId } = renderNavigation({
+        navTreeDef: of(navigationTree),
+      });
+
+      // open the panel
+      (await findByTestId(/nav-item-id-group1/)).click();
+      expect(queryByTestId(/sideNavPanel/)).toBeVisible();
+
+      // close the panel
+      await userEvent.click(await findByTestId(/nav-item-id-group1/));
+      expect(queryByTestId(/sideNavPanel/)).toBeNull();
+    });
+
+    test('should allow the button label to toggle', async () => {
+      const { findByTestId, queryByTestId, container } = renderNavigation({
+        navTreeDef: of(navigationTree),
+      });
+
+      // open the panel via the button
+      (await findByTestId(/nav-item-id-group1/)).click();
+      expect(queryByTestId(/sideNavPanel/)).toBeVisible();
+
+      // click the label element
+      const buttonLabel = container.querySelectorAll('span span')[0];
+      expect(buttonLabel).toBeInTheDocument();
+      await userEvent.click(buttonLabel!);
+
+      expect(queryByTestId(/sideNavPanel/)).toBeNull();
+    });
+
+    test('should allow the button icon to toggle', async () => {
+      const { findByTestId, queryByTestId, container } = renderNavigation({
+        navTreeDef: of(navigationTree),
+      });
+
+      // open the panel via the button
+      (await findByTestId(/nav-item-id-group1/)).click();
+      expect(queryByTestId(/sideNavPanel/)).toBeVisible();
+
+      // click the label element
+      const buttonIcon = container.querySelectorAll('span span')[1];
+      expect(buttonIcon).toBeInTheDocument();
+      await userEvent.click(buttonIcon!);
+
+      expect(queryByTestId(/sideNavPanel/)).toBeNull();
+    });
+
+    test('should allow outside click to close the panel', async () => {
+      const { findByTestId, queryByTestId } = renderNavigation({
+        navTreeDef: of(navigationTree),
+      });
+
+      // open the panel via the button
+      (await findByTestId(/nav-item-id-group1/)).click();
+      expect(queryByTestId(/sideNavPanel/)).toBeVisible();
+
+      // click an element outside of the panel
+      const navRoot = await findByTestId(/nav-item-id-root/);
+      expect(navRoot).toBeInTheDocument();
+
+      const navRootParent = navRoot!.parentNode! as Element;
+      expect(navRootParent).toBeInTheDocument();
+      await userEvent.click(navRootParent);
+
+      expect(queryByTestId(/sideNavPanel/)).toBeNull();
+    });
+  });
+
  describe('custom content', () => {
    test('should render custom component inside the panel', async () => {
-      const panelContentProvider: PanelContentProvider = (id) => {
+      const panelContentProvider: PanelContentProvider = (_id) => {
        return {
          content: ({ closePanel, selectedNode, activeNodes }) => {
            const [path0 = []] = activeNodes;
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx
@ -102,18 +102,21 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
    [`panelOpener-deepLinkId-${deepLink?.id}`]: !!deepLink,
  });

-  const togglePanel = useCallback(() => {
-    if (selectedNode?.id === item.id) {
-      closePanel();
-    } else {
-      openPanel(item);
-    }
-  }, [selectedNode?.id, item, closePanel, openPanel]);
+  const togglePanel = useCallback(
+    (target: EventTarget) => {
+      if (selectedNode?.id === item.id) {
+        closePanel();
+      } else {
+        openPanel(item, target as Element);
+      }
+    },
+    [selectedNode?.id, item, closePanel, openPanel]
+  );

  const onLinkClick = useCallback(
    (e: React.MouseEvent) => {
      if (!href) {
-        togglePanel();
+        togglePanel(e.target);
        return;
      }
      e.preventDefault();
@ -123,9 +126,12 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
    [closePanel, href, navigateToUrl, togglePanel]
  );

-  const onIconClick = useCallback(() => {
-    togglePanel();
-  }, [togglePanel]);
+  const onIconClick = useCallback(
+    (e: React.MouseEvent) => {
+      togglePanel(e.target);
+    },
+    [togglePanel]
+  );

  if (!hasLandingPage) {
    return (
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/context.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/context.tsx
@ -16,6 +16,7 @@ import React, {
  useState,
  ReactNode,
  useEffect,
+  useRef,
 } from 'react';
 import type { ChromeProjectNavigationNode, PanelSelectedNode } from '@kbn/core-chrome-browser';

@ -25,10 +26,12 @@ import { ContentProvider } from './types';
 export interface PanelContext {
  isOpen: boolean;
  toggle: () => void;
-  open: (navNode: PanelSelectedNode) => void;
+  open: (navNode: PanelSelectedNode, openerEl: Element | null) => void;
  close: () => void;
  /** The selected node is the node in the main panel that opens the Panel */
  selectedNode: PanelSelectedNode | null;
+  /** Reference to the selected nav node element in the DOM */
+  selectedNodeEl: React.MutableRefObject<Element | null>;
  /** Handler to retrieve the component to render in the panel */
  getContent: () => React.ReactNode;
 }
@ -51,14 +54,21 @@ export const PanelProvider: FC<PropsWithChildren<Props>> = ({
 }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedNode, setActiveNode] = useState<PanelSelectedNode | null>(selectedNodeProp);
+  const selectedNodeEl = useRef<Element | null>(null);

  const toggle = useCallback(() => {
    setIsOpen((prev) => !prev);
  }, []);

  const open = useCallback(
-    (navNode: PanelSelectedNode) => {
+    (navNode: PanelSelectedNode, openerEl: Element | null) => {
      setActiveNode(navNode);
+
+      const navNodeEl = openerEl?.closest(`[data-test-subj~=nav-item]`);
+      if (navNodeEl) {
+        selectedNodeEl.current = navNodeEl;
+      }
+
      setIsOpen(true);
      setSelectedNode?.(navNode);
    },
@ -67,6 +77,7 @@ export const PanelProvider: FC<PropsWithChildren<Props>> = ({

  const close = useCallback(() => {
    setActiveNode(null);
+    selectedNodeEl.current = null;
    setIsOpen(false);
    setSelectedNode?.(null);
  }, [setSelectedNode]);
@ -110,9 +121,10 @@ export const PanelProvider: FC<PropsWithChildren<Props>> = ({
      open,
      close,
      selectedNode,
+      selectedNodeEl,
      getContent,
    }),
-    [isOpen, toggle, open, close, selectedNode, getContent]
+    [isOpen, toggle, open, close, selectedNode, selectedNodeEl, getContent]
  );

  return <Context.Provider value={ctx}>{children}</Context.Provider>;
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/navigation_panel.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/navigation_panel.tsx
@ -32,15 +32,9 @@ const getTestSubj = (selectedNode: PanelSelectedNode | null): string | undefined
  });
 };

-const getTargetTestSubj = (target: EventTarget | null): string | undefined => {
-  if (!target) return;
-
-  return (target as HTMLElement).dataset.testSubj;
-};
-
 export const NavigationPanel: FC = () => {
  const { euiTheme } = useEuiTheme();
-  const { isOpen, close, getContent, selectedNode } = usePanel();
+  const { isOpen, close, getContent, selectedNode, selectedNodeEl } = usePanel();

  // ESC key closes PanelNav
  const onKeyDown = useCallback(
@ -54,26 +48,24 @@ export const NavigationPanel: FC = () => {

  const onOutsideClick = useCallback(
    ({ target }: Event) => {
+      if (!target) {
+        close();
+        return;
+      }
+
      let doClose = true;

-      if (target) {
-        // Only close if we are not clicking on the currently selected nav node
-        const testSubj =
-          getTargetTestSubj(target) ?? getTargetTestSubj((target as HTMLElement).parentNode);
-
-        if (
-          testSubj?.includes(`nav-item-${selectedNode?.path}`) ||
-          testSubj?.includes(`panelOpener-${selectedNode?.path}`)
-        ) {
-          doClose = false;
-        }
+      // Do not close if clicking on the button (or child of the button) of the currently selected node,
+      // because we must defer to allowing the button's click handler to manage toggling.
+      if (selectedNodeEl && selectedNodeEl.current?.contains(target as Node)) {
+        doClose = false;
      }

      if (doClose) {
        close();
      }
    },
-    [close, selectedNode]
+    [close, selectedNodeEl]
  );

  const panelWrapperClasses = getPanelWrapperStyles();