diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx new file mode 100644 index 00000000000..6fa71287d09 --- /dev/null +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx @@ -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({leftItemContent}]} />); + + expect(screen.getByText(leftItemContent)).toBeInTheDocument(); + }); +}); diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx index 2af2412a28a..34298aebbd6 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx @@ -61,12 +61,6 @@ export const PageToolbar: FC = React.memo( className ); - const leftItemChildren = leftItems?.map((child, index) => ( -
- {child} -
- )); - const titleEl = ( <> {title} @@ -112,22 +106,29 @@ export const PageToolbar: FC = React.memo( )} - {title && ( + {(title || leftItems?.length) && (
-

- {titleHref ? ( - - {titleEl} - - ) : ( -
{titleEl}
- )} -

- {leftItemChildren} + {title && ( +

+ {titleHref ? ( + + {titleEl} + + ) : ( +
{titleEl}
+ )} +

+ )} + + {leftItems?.map((child, index) => ( +
+ {child} +
+ ))}
)}