IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: only show the img for a section root if both img and icon are present (#62127)

Browse Source 
only show an img for a section root if both img and icon are present
This commit is contained in:
Ashley Harrison 2023-01-26 12:07:43 +00:00 committed by GitHub
parent a77c342764
commit f7d92ab841
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/app/core/components/PageNew/SectionNavItem.test.tsx Normal file
View File

@ -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();
});
});

11
public/app/core/components/PageNew/SectionNavItem.tsx
View File

@ -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>