diff --git a/public/app/features/plugins/utils.test.ts b/public/app/features/plugins/utils.test.ts index c66d7ea2ebc..349a9870a6b 100644 --- a/public/app/features/plugins/utils.test.ts +++ b/public/app/features/plugins/utils.test.ts @@ -18,6 +18,16 @@ describe('buildPluginSectionNav', () => { text: 'page2', url: '/a/plugin1/page2', }, + { + text: 'page3', + url: '/a/plugin1/page3', + children: [ + { + text: 'page4', + url: '/a/plugin1/page3/page4', + }, + ], + }, ], }; @@ -77,4 +87,10 @@ describe('buildPluginSectionNav', () => { expect(result?.main.text).toBe('Admin'); expect(result?.node.text).toBe('Standalone page'); }); + + it('Should set nested active page', () => { + const result = buildPluginSectionNav(appsSection, null, '/a/plugin1/page3/page4'); + expect(result?.main.children![0].children![2].children![0].active).toBe(true); + expect(result?.node.text).toBe('page4'); + }); }); diff --git a/public/app/features/plugins/utils.ts b/public/app/features/plugins/utils.ts index d2badad9ed1..c6e1ba8bf5c 100644 --- a/public/app/features/plugins/utils.ts +++ b/public/app/features/plugins/utils.ts @@ -35,6 +35,7 @@ export function buildPluginSectionNav( currentUrl: string ): NavModel | undefined { // shallow clone as we set active flag + const MAX_RECURSION_DEPTH = 10; let copiedPluginNavSection = { ...pluginNavSection }; let activePage: NavModelItem | undefined; @@ -58,12 +59,15 @@ export function buildPluginSectionNav( return activePage; } - // Find and set active page - copiedPluginNavSection.children = (copiedPluginNavSection?.children ?? []).map((child) => { + function findAndSetActivePage(child: NavModelItem, depth = 0): NavModelItem { + if (depth > MAX_RECURSION_DEPTH) { + return child; + } + if (child.children) { // Doing this here to make sure that first we check if any of the children is active // (In case yes, then the check for the parent will not mark it as active) - const children = child.children.map((pluginPage) => setPageToActive(pluginPage, currentUrl)); + const children = child.children.map((pluginPage) => findAndSetActivePage(pluginPage, depth + 1)); return { ...setPageToActive(child, currentUrl), @@ -72,7 +76,10 @@ export function buildPluginSectionNav( } return setPageToActive(child, currentUrl); - }); + } + + // Find and set active page + copiedPluginNavSection.children = (copiedPluginNavSection?.children ?? []).map(findAndSetActivePage); return { main: copiedPluginNavSection, node: activePage ?? copiedPluginNavSection }; }