From cf7ed5ed22cb844cd819e7aabef89eb6cb2a96b7 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 31 May 2022 07:23:27 -0400
Subject: [PATCH] add feature highlighting in the expanded menu (#49892)
 (#49901)

(cherry picked from commit 0089779945fdef977a95457e0229fbc740dc46d3)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../app/core/components/NavBar/Next/NavBarMenu.tsx  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/NavBar/Next/NavBarMenu.tsx b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
index 750f86dd091..3ea31a4e153 100644
--- a/public/app/core/components/NavBar/Next/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
@@ -11,6 +11,7 @@ import { reportInteraction } from '@grafana/runtime';
 import { CollapsableSection, CustomScrollbar, Icon, IconButton, IconName, useStyles2, useTheme2 } from '@grafana/ui';
 
 import { Branding } from '../../Branding/Branding';
+import { NavFeatureHighlight } from '../NavFeatureHighlight';
 import { isMatchOrChildMatch } from '../utils';
 
 import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu';
@@ -255,6 +256,7 @@ function NavItem({
       </CollapsibleNavItem>
     );
   } else {
+    const FeatureHighlightWrapper = link.highlightText ? NavFeatureHighlight : React.Fragment;
     return (
       <li className={styles.flex}>
         <NavBarItemWithoutMenu
@@ -270,7 +272,9 @@ function NavItem({
           isActive={link === activeItem}
         >
           <div className={styles.itemWithoutMenuContent}>
-            <div className={styles.iconContainer}>{getLinkIcon(link)}</div>
+            <div className={styles.iconContainer}>
+              <FeatureHighlightWrapper>{getLinkIcon(link)}</FeatureHighlightWrapper>
+            </div>
             <span className={styles.linkText}>{link.text}</span>
           </div>
         </NavBarItemWithoutMenu>
@@ -339,6 +343,7 @@ function CollapsibleNavItem({
 }) {
   const styles = useStyles2(getCollapsibleStyles);
   const [sectionExpanded, setSectionExpanded] = useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false);
+  const FeatureHighlightWrapper = link.highlightText ? NavFeatureHighlight : React.Fragment;
 
   return (
     <li className={cx(styles.menuItem, className)}>
@@ -354,7 +359,7 @@ function CollapsibleNavItem({
         className={styles.collapsibleMenuItem}
         elClassName={styles.collapsibleIcon}
       >
-        {getLinkIcon(link)}
+        <FeatureHighlightWrapper>{getLinkIcon(link)}</FeatureHighlightWrapper>
       </NavBarItemWithoutMenu>
       <div className={styles.collapsibleSectionWrapper}>
         <CollapsableSection
@@ -439,9 +444,7 @@ function getLinkIcon(link: NavModelItem) {
     return <Branding.MenuLogo />;
   } else if (link.icon) {
     return <Icon name={link.icon as IconName} size="xl" />;
-  } else if (link.img) {
-    return <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />;
   } else {
-    return null;
+    return <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />;
   }
 }