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

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}>

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} />)}
     </>
   );
 }