From 61fd369b3f2b55abf9b34d649b904b9fac787d8d Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 12 Oct 2022 17:02:31 +0100
Subject: [PATCH] ensure the first item in the sectionnav is always the section
 root (#56815)

---
 public/app/core/components/PageNew/SectionNav.tsx     | 2 +-
 public/app/core/components/PageNew/SectionNavItem.tsx | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx
index d3b660a6380..b5ca7b6e502 100644
--- a/public/app/core/components/PageNew/SectionNav.tsx
+++ b/public/app/core/components/PageNew/SectionNav.tsx
@@ -26,7 +26,7 @@ export function SectionNav({ model, isExpanded }: Props) {
     >
       <CustomScrollbar showScrollIndicators>
         <div className={styles.items} role="tablist">
-          <SectionNavItem item={model.main} />
+          <SectionNavItem item={model.main} isSectionRoot />
         </div>
       </CustomScrollbar>
     </nav>
diff --git a/public/app/core/components/PageNew/SectionNavItem.tsx b/public/app/core/components/PageNew/SectionNavItem.tsx
index 9f436a1ac19..0c231131a93 100644
--- a/public/app/core/components/PageNew/SectionNavItem.tsx
+++ b/public/app/core/components/PageNew/SectionNavItem.tsx
@@ -4,19 +4,18 @@ import React from 'react';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2, Icon } from '@grafana/ui';
-import { HOME_NAV_ID } from 'app/core/reducers/navModel';
 
 import { getNavTitle } from '../NavBar/navBarItem-translations';
 
 export interface Props {
   item: NavModelItem;
+  isSectionRoot?: boolean;
 }
 
-export function SectionNavItem({ item }: Props) {
+export function SectionNavItem({ item, isSectionRoot = false }: Props) {
   const styles = useStyles2(getStyles);
 
   const children = item.children?.filter((x) => !x.hideFromTabs);
-  const isSectionRoot = item.parentItem?.id === HOME_NAV_ID;
   const hasActiveChild = Boolean(children?.length && children.find((x) => x.active));
 
   // If first root child is a section skip the bottom margin (as sections have top margin already)