From 14f4ed0180d1548d8ba7f670b3368b07acf285b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Thu, 21 Sep 2023 15:15:11 +0200
Subject: [PATCH] Navigation: enable third level on the `DockedMegaMenu`
 (#75180)

---
 .../DockedMegaMenu/DockedMegaMenu.test.tsx    | 27 ++++++++++++++++++-
 .../DockedMegaMenu/NavBarMenuItemWrapper.tsx  |  9 ++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/DockedMegaMenu.test.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/DockedMegaMenu.test.tsx
index 8462f161341..7edfb40b882 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/DockedMegaMenu.test.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/DockedMegaMenu.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
@@ -17,7 +18,12 @@ const setup = () => {
       id: 'section',
       url: 'section',
       children: [
-        { text: 'Child1', id: 'child1', url: 'section/child1' },
+        {
+          text: 'Child1',
+          id: 'child1',
+          url: 'section/child1',
+          children: [{ text: 'Grandchild1', id: 'grandchild1', url: 'section/child1/grandchild1' }],
+        },
         { text: 'Child2', id: 'child2', url: 'section/child2' },
       ],
     },
@@ -41,6 +47,9 @@ const setup = () => {
 };
 
 describe('MegaMenu', () => {
+  afterEach(() => {
+    window.localStorage.clear();
+  });
   it('should render component', async () => {
     setup();
 
@@ -48,6 +57,22 @@ describe('MegaMenu', () => {
     expect(await screen.findByRole('link', { name: 'Section name' })).toBeInTheDocument();
   });
 
+  it('should render children', async () => {
+    setup();
+    await userEvent.click(await screen.findByRole('button', { name: 'Expand section Section name' }));
+    expect(await screen.findByRole('link', { name: 'Child1' })).toBeInTheDocument();
+    expect(await screen.findByRole('link', { name: 'Child2' })).toBeInTheDocument();
+  });
+
+  it('should render grandchildren', async () => {
+    setup();
+    await userEvent.click(await screen.findByRole('button', { name: 'Expand section Section name' }));
+    expect(await screen.findByRole('link', { name: 'Child1' })).toBeInTheDocument();
+    await userEvent.click(await screen.findByRole('button', { name: 'Expand section Child1' }));
+    expect(await screen.findByRole('link', { name: 'Grandchild1' })).toBeInTheDocument();
+    expect(await screen.findByRole('link', { name: 'Child2' })).toBeInTheDocument();
+  });
+
   it('should filter out profile', async () => {
     setup();
 
diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/NavBarMenuItemWrapper.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/NavBarMenuItemWrapper.tsx
index d64073c6f6c..04e4e010576 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/NavBarMenuItemWrapper.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/NavBarMenuItemWrapper.tsx
@@ -34,7 +34,14 @@ export function NavBarMenuItemWrapper({
       {linkHasChildren(link) && (
         <ul className={styles.children}>
           {link.children.map((childLink) => {
-            return (
+            return linkHasChildren(childLink) ? (
+              <NavBarMenuItemWrapper
+                key={`${link.text}-${childLink.text}`}
+                link={childLink}
+                activeItem={activeItem}
+                onClose={onClose}
+              />
+            ) : (
               !childLink.isCreateAction && (
                 <NavBarMenuItem
                   key={`${link.text}-${childLink.text}`}