add feature highlighting in the expanded menu (#49892)

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%' }} />;
   }
 }