From 4db402c6495d40317926084d42097e60e6b30b82 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 4 Aug 2022 12:38:20 +0100
Subject: [PATCH] GrafanaUI: Render PageToolbar's leftItems regardless of
 title's presence (#53285) (#53292)

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

* simplify test

(cherry picked from commit 1ec9007fe073052b37890e6804d8d9313e66e029)

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
---
 .../PageLayout/PageToolbar.test.tsx           | 13 ++++++
 .../src/components/PageLayout/PageToolbar.tsx | 43 ++++++++++---------
 2 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx

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