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

GrafanaUI: Render PageToolbar's leftItems regardless of title's presence (#53285)

Browse Source 
* Grafana-UI: make PageToolbar render leftItems regardless of title's presence

* simplify test
This commit is contained in:
Giordano Ricci 2022-08-04 11:59:20 +01:00 committed by GitHub
parent 66fd516c44
commit 1ec9007fe0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx Normal file
View File

@ -0,0 +1,13 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { PageToolbar } from '..';
describe('PageToolbar', () => {
it('renders left items when title is not set', () => {
const leftItemContent = 'Left Item!';
render(<PageToolbar leftItems={[<div key="left-item">{leftItemContent}</div>]} />);
expect(screen.getByText(leftItemContent)).toBeInTheDocument();
});
});

43
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
View File

@ -61,12 +61,6 @@ export const PageToolbar: FC<Props> = React.memo(
className
);
const leftItemChildren = leftItems?.map((child, index) => (
<div className={styles.leftActionItem} key={index}>
{child}
</div>
));
const titleEl = (
<>
<span className={styles.noLinkTitle}>{title}</span>
@ -112,22 +106,29 @@ export const PageToolbar: FC<Props> = React.memo(
</>
)}
{title && (
{(title || leftItems?.length) && (
<div className={styles.titleWrapper}>
<h1 className={styles.h1Styles}>
{titleHref ? (
<Link
aria-label="Search dashboard by name"
className={cx(styles.titleText, styles.titleLink)}
href={titleHref}
>
{titleEl}
</Link>
) : (
<div className={styles.titleText}>{titleEl}</div>
)}
</h1>
{leftItemChildren}
{title && (
<h1 className={styles.h1Styles}>
{titleHref ? (
<Link
aria-label="Search dashboard by name"
className={cx(styles.titleText, styles.titleLink)}
href={titleHref}
>
{titleEl}
</Link>
) : (
<div className={styles.titleText}>{titleEl}</div>
)}
</h1>
)}
{leftItems?.map((child, index) => (
<div className={styles.leftActionItem} key={index}>
{child}
</div>
))}
</div>
)}
</nav>