From f7d92ab8411ae3488b15f0912c992e733d599271 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 26 Jan 2023 12:07:43 +0000
Subject: [PATCH] Navigation: only show the `img` for a section root if both
 `img` and `icon` are present (#62127)

only show an img for a section root if both img and icon are present
---
 .../PageNew/SectionNavItem.test.tsx           | 25 +++++++++++++++++++
 .../components/PageNew/SectionNavItem.tsx     | 11 ++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 public/app/core/components/PageNew/SectionNavItem.test.tsx

diff --git a/public/app/core/components/PageNew/SectionNavItem.test.tsx b/public/app/core/components/PageNew/SectionNavItem.test.tsx
new file mode 100644
index 00000000000..90d92e75462
--- /dev/null
+++ b/public/app/core/components/PageNew/SectionNavItem.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { NavModelItem } from '@grafana/data';
+
+import { SectionNavItem } from './SectionNavItem';
+
+describe('SectionNavItem', () => {
+  it('should only show the img for a section root if both img and icon are present', () => {
+    const item: NavModelItem = {
+      text: 'Test',
+      icon: 'k6',
+      img: 'img',
+      children: [
+        {
+          text: 'Child',
+        },
+      ],
+    };
+
+    render(<SectionNavItem item={item} isSectionRoot />);
+    expect(screen.getByTestId('section-image')).toBeInTheDocument();
+    expect(screen.queryByTestId('section-icon')).not.toBeInTheDocument();
+  });
+});
diff --git a/public/app/core/components/PageNew/SectionNavItem.tsx b/public/app/core/components/PageNew/SectionNavItem.tsx
index 148a3b386f1..9a85a66ee76 100644
--- a/public/app/core/components/PageNew/SectionNavItem.tsx
+++ b/public/app/core/components/PageNew/SectionNavItem.tsx
@@ -28,6 +28,14 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
     [styles.noRootMargin]: noRootMargin,
   });
 
+  let icon: React.ReactNode | null = null;
+
+  if (item.img) {
+    icon = <img data-testid="section-image" className={styles.sectionImg} src={item.img} alt="" />;
+  } else if (item.icon) {
+    icon = <Icon data-testid="section-icon" name={item.icon} />;
+  }
+
   return (
     <>
       <a
@@ -37,8 +45,7 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
         role="tab"
         aria-selected={item.active}
       >
-        {isSectionRoot && item.icon && <Icon name={item.icon} />}
-        {isSectionRoot && item.img && <img className={styles.sectionImg} src={item.img} alt={`logo of ${item.text}`} />}
+        {isSectionRoot && icon}
         {getNavTitle(item.id) ?? item.text}
         {item.tabSuffix && <item.tabSuffix className={styles.suffix} />}
       </a>