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

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

* simplify test

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(<PageToolbar leftItems={[<div key="left-item">{leftItemContent}</div>]} />);
+
+    expect(screen.getByText(leftItemContent)).toBeInTheDocument();
+  });
+});

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -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}>
+                {title && (
-                  {titleHref ? (
+                  <h1 className={styles.h1Styles}>
-                    <Link
+                    {titleHref ? (
-                      aria-label="Search dashboard by name"
+                      <Link
-                      className={cx(styles.titleText, styles.titleLink)}
+                        aria-label="Search dashboard by name"
-                      href={titleHref}
+                        className={cx(styles.titleText, styles.titleLink)}
-                    >
+                        href={titleHref}
-                      {titleEl}
+                      >
-                    </Link>
+                        {titleEl}
-                  ) : (
+                      </Link>
-                    <div className={styles.titleText}>{titleEl}</div>
+                    ) : (
-                  )}
+                      <div className={styles.titleText}>{titleEl}</div>
-                </h1>
+                    )}
-                {leftItemChildren}
+                  </h1>
+                )}
+
+                {leftItems?.map((child, index) => (
+                  <div className={styles.leftActionItem} key={index}>
+                    {child}
+                  </div>
+                ))}
               </div>
             )}
           </nav>