IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-18 20:43:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

add feature highlighting in the expanded menu (#49892)

Browse Source
This commit is contained in:
Ashley Harrison 2022-05-31 12:03:38 +01:00 committed by GitHub
parent d590012a18
commit 0089779945
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/core/components/NavBar/Next/NavBarMenu.tsx
View File

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