From ab09f2783c67c6e7d2986996417cb7015c23d426 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 4 Oct 2022 11:17:12 +0100
Subject: [PATCH] fix section root styling, parentItem will be the home item
 now (#56266)

---
 .../app/core/components/PageNew/SectionNavItem.tsx  | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/public/app/core/components/PageNew/SectionNavItem.tsx b/public/app/core/components/PageNew/SectionNavItem.tsx
index ff7b3348866..a8bdc276a2b 100644
--- a/public/app/core/components/PageNew/SectionNavItem.tsx
+++ b/public/app/core/components/PageNew/SectionNavItem.tsx
@@ -4,6 +4,7 @@ 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';
 
 export interface Props {
   item: NavModelItem;
@@ -13,18 +14,18 @@ export function SectionNavItem({ item }: Props) {
   const styles = useStyles2(getStyles);
 
   const children = item.children?.filter((x) => !x.hideFromTabs);
-  const isRoot = item.parentItem == null;
+  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)
-  const noRootMargin = isRoot && Boolean(item.children![0].children?.length);
+  const noRootMargin = isSectionRoot && Boolean(item.children![0].children?.length);
 
   const linkClass = cx({
     [styles.link]: true,
     [styles.activeStyle]: item.active,
     [styles.isSection]: Boolean(children?.length),
     [styles.hasActiveChild]: hasActiveChild,
-    [styles.isRoot]: isRoot,
+    [styles.isSectionRoot]: isSectionRoot,
     [styles.noRootMargin]: noRootMargin,
   });
 
@@ -37,8 +38,8 @@ export function SectionNavItem({ item }: Props) {
         role="tab"
         aria-selected={item.active}
       >
-        {isRoot && item.icon && <Icon name={item.icon} />}
-        {isRoot && item.img && <img className={styles.sectionImg} src={item.img} alt={`logo of ${item.text}`} />}
+        {isSectionRoot && item.icon && <Icon name={item.icon} />}
+        {isSectionRoot && item.img && <img className={styles.sectionImg} src={item.img} alt={`logo of ${item.text}`} />}
         {item.text}
         {item.tabSuffix && <item.tabSuffix className={styles.suffix} />}
       </a>
@@ -90,7 +91,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     sectionImg: css({
       height: 18,
     }),
-    isRoot: css({
+    isSectionRoot: css({
       color: theme.colors.text.primary,
       fontSize: theme.typography.h4.fontSize,
       marginTop: 0,