From b6fb1e52f21dd38bc60b90a0181e9bd6692cbc77 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 13 Oct 2023 10:38:35 +0100
Subject: [PATCH] Navigation: Limit `SectionNav` to rendering items up to 3
 levels (#76478)

* only render section nav items up to 3 levels

* extract level depth into constant, apply in DockedMegaMenu as well
---
 .../AppChrome/DockedMegaMenu/MegaMenuItem.tsx         |  5 ++++-
 .../AppChrome/SectionNav/SectionNavItem.tsx           | 11 ++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
index 2518d035889..c733f0bc0ed 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
@@ -19,6 +19,9 @@ interface Props {
   level?: number;
 }
 
+// max level depth to render
+const MAX_DEPTH = 2;
+
 export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
   const styles = useStyles2(getStyles);
   const FeatureHighlightWrapper = link.highlightText ? FeatureHighlight : React.Fragment;
@@ -26,7 +29,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
   const hasActiveChild = hasChildMatch(link, activeItem);
   const [sectionExpanded, setSectionExpanded] =
     useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false) ?? Boolean(hasActiveChild);
-  const showExpandButton = linkHasChildren(link) || link.emptyMessage;
+  const showExpandButton = level < MAX_DEPTH && (linkHasChildren(link) || link.emptyMessage);
 
   return (
     <li className={styles.listItem}>
diff --git a/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx b/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
index 7865ac56343..ef29d68ecc1 100644
--- a/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
+++ b/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
@@ -9,9 +9,13 @@ import { useStyles2, Icon } from '@grafana/ui';
 export interface Props {
   item: NavModelItem;
   isSectionRoot?: boolean;
+  level?: number;
 }
 
-export function SectionNavItem({ item, isSectionRoot = false }: Props) {
+// max level depth to render
+const MAX_DEPTH = 2;
+
+export function SectionNavItem({ item, isSectionRoot = false, level = 0 }: Props) {
   const styles = useStyles2(getStyles);
 
   const children = item.children?.filter((x) => !x.hideFromTabs);
@@ -22,7 +26,7 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
   const linkClass = cx({
     [styles.link]: true,
     [styles.activeStyle]: item.active,
-    [styles.isSection]: Boolean(children?.length) || item.isSection,
+    [styles.isSection]: level < MAX_DEPTH && (Boolean(children?.length) || item.isSection),
     [styles.isSectionRoot]: isSectionRoot,
     [styles.noRootMargin]: noRootMargin,
   });
@@ -56,7 +60,8 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
         {item.text}
         {item.tabSuffix && <item.tabSuffix className={styles.suffix} />}
       </a>
-      {children?.map((child, index) => <SectionNavItem item={child} key={index} />)}
+      {level < MAX_DEPTH &&
+        children?.map((child, index) => <SectionNavItem item={child} key={index} level={level + 1} />)}
     </>
   );
 }