From 0fa8ae4fac2f350bfb5f9141d5bc8c65393cf259 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 14:30:59 +0100
Subject: [PATCH] panel-header: Move the panel description/links/error
 container outside of panel header to not interfere with the react-grid stuff

---
 .../dashgrid/PanelHeader/PanelHeader.tsx      | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 48d1f1671cf..b07bc672265 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -43,7 +43,7 @@ export class PanelHeader extends PureComponent<Props, State> {
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
     const { panel, dashboard, timeInfo } = this.props;
     return (
-      <div className={panelHeaderClass}>
+      <>
         {panel.description && (
           <Tooltip
             content={panel.description}
@@ -60,27 +60,29 @@ export class PanelHeader extends PureComponent<Props, State> {
           </span>
         )}
 
-        <div className="panel-title-container" onClick={this.onMenuToggle}>
-          <div className="panel-title">
-            <span className="icon-gf panel-alert-icon" />
-            <span className="panel-title-text">
-              {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
-            </span>
-
-            {this.state.panelMenuOpen && (
-              <ClickOutsideWrapper onClick={this.closeMenu}>
-                <PanelHeaderMenu panel={panel} dashboard={dashboard} />
-              </ClickOutsideWrapper>
-            )}
-
-            {timeInfo && (
-              <span className="panel-time-info">
-                <i className="fa fa-clock-o" /> {timeInfo}
+        <div className={panelHeaderClass}>
+          <div className="panel-title-container" onClick={this.onMenuToggle}>
+            <div className="panel-title">
+              <span className="icon-gf panel-alert-icon" />
+              <span className="panel-title-text">
+                {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
               </span>
-            )}
+
+              {this.state.panelMenuOpen && (
+                <ClickOutsideWrapper onClick={this.closeMenu}>
+                  <PanelHeaderMenu panel={panel} dashboard={dashboard} />
+                </ClickOutsideWrapper>
+              )}
+
+              {timeInfo && (
+                <span className="panel-time-info">
+                  <i className="fa fa-clock-o" /> {timeInfo}
+                </span>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 }