[Stateful sidenav] Fix collapsed menu for panels with no landing pages (

elastic#195904)
kibanamachine · Oct 14, 2024 · a3289e4 · a3289e4
1 parent 0c5a94b
commit a3289e4
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 72 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
@@ -114,7 +114,7 @@ describe('builds navigation tree', () => {
 
       const accordionToggleButton = await findByTestId(/nav-item-group1\s/);
       accordionToggleButton.click();
-      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(navigateToUrl).not.toHaveBeenCalled(); // Should not navigate to the href
       unmount();
     }
 
@@ -138,6 +138,85 @@ describe('builds navigation tree', () => {
     }
   });
 
+  test('should render panel opener groups as accordion when the sideNav is collapsed', async () => {
+    const panelOpenerNode: ChromeProjectNavigationNode = {
+      id: 'nestedGroup1',
+      title: 'Nested Group 1',
+      path: 'group1.nestedGroup1',
+      renderAs: 'panelOpener', // Should be converted to accordion when sideNav is collapsed
+      children: [
+        {
+          id: 'item1',
+          title: 'Item 1',
+          href: 'https://foo',
+          path: 'group1.item1',
+        },
+      ],
+    };
+
+    const nodes: ChromeProjectNavigationNode = {
+      id: 'group1',
+      title: 'Group 1',
+      path: 'group1',
+      children: [panelOpenerNode],
+    };
+
+    {
+      // Side nav is collapsed
+      const { queryAllByTestId, unmount } = renderNavigation({
+        navTreeDef: of({
+          body: [nodes],
+        }),
+        services: { isSideNavCollapsed: true },
+      });
+
+      const accordionButtonLabel = queryAllByTestId('accordionToggleBtn').map((c) => c.textContent);
+      expect(accordionButtonLabel).toEqual(['Group 1', 'Nested Group 1']); // 2 accordion buttons
+
+      unmount();
+    }
+
+    {
+      // Side nav is not collapsed
+      const { queryAllByTestId, unmount } = renderNavigation({
+        navTreeDef: of({
+          body: [nodes],
+        }),
+        services: { isSideNavCollapsed: false }, // No conversion to accordion
+      });
+
+      const accordionButtonLabel = queryAllByTestId('accordionToggleBtn').map((c) => c.textContent);
+
+      expect(accordionButtonLabel).toEqual(['Group 1']); // Only 1 accordion button (top level)
+      unmount();
+    }
+
+    {
+      // Panel opener with a link
+      const { queryAllByTestId, unmount } = renderNavigation({
+        navTreeDef: of({
+          body: [
+            {
+              ...nodes,
+              children: [
+                {
+                  ...panelOpenerNode,
+                  href: '/foo/bar', // Panel opener with a link should not be converted to accordion
+                },
+              ],
+            },
+          ],
+        }),
+        services: { isSideNavCollapsed: true }, // SideNav is collapsed
+      });
+
+      const accordionButtonLabel = queryAllByTestId('accordionToggleBtn').map((c) => c.textContent);
+
+      expect(accordionButtonLabel).toEqual(['Group 1']); // Only 1 accordion button (top level)
+      unmount();
+    }
+  });
+
   test('should track click event', async () => {
     const navigateToUrl = jest.fn();
     const reportEvent = jest.fn();

diff --git a/packages/shared-ux/chrome/navigation/__jest__/utils.tsx b/packages/shared-ux/chrome/navigation/__jest__/utils.tsx
@@ -34,7 +34,6 @@ export const getServicesMock = (): NavigationServices => {
   return {
     basePath,
     recentlyAccessed$,
-    navIsOpen: true,
     navigateToUrl,
     activeNodes$: of(activeNodes),
     isSideNavCollapsed: false,

diff --git a/packages/shared-ux/chrome/navigation/mocks/storybook.ts b/packages/shared-ux/chrome/navigation/mocks/storybook.ts
@@ -14,15 +14,15 @@ import { EventTracker } from '../src/analytics';
 import { NavigationServices } from '../src/types';
 
 type Arguments = NavigationServices;
-export type Params = Pick<Arguments, 'navIsOpen' | 'recentlyAccessed$' | 'activeNodes$'>;
+export type Params = Pick<Arguments, 'isSideNavCollapsed' | 'recentlyAccessed$' | 'activeNodes$'>;
 
 export class StorybookMock extends AbstractStorybookMock<{}, NavigationServices> {
   propArguments = {};
 
   serviceArguments = {
-    navIsOpen: {
+    isSideNavCollapsed: {
       control: 'boolean',
-      defaultValue: true,
+      defaultValue: false,
     },
   };
 

diff --git a/packages/shared-ux/chrome/navigation/src/services.tsx b/packages/shared-ux/chrome/navigation/src/services.tsx
@@ -44,7 +44,6 @@ export const NavigationKibanaProvider: FC<PropsWithChildren<NavigationKibanaDepe
       basePath,
       recentlyAccessed$: chrome.recentlyAccessed.get$(),
       navigateToUrl,
-      navIsOpen: true,
       activeNodes$,
       isSideNavCollapsed,
       eventTracker: new EventTracker({ reportEvent: analytics.reportEvent }),

diff --git a/packages/shared-ux/chrome/navigation/src/types.ts b/packages/shared-ux/chrome/navigation/src/types.ts
@@ -34,7 +34,6 @@ export type NavigateToUrlFn = ApplicationStart['navigateToUrl'];
 export interface NavigationServices {
   basePath: BasePathService;
   recentlyAccessed$: Observable<ChromeRecentlyAccessedHistoryItem[]>;
-  navIsOpen: boolean;
   navigateToUrl: NavigateToUrlFn;
   activeNodes$: Observable<ChromeProjectNavigationNode[][]>;
   isSideNavCollapsed: boolean;