From abf351f776a7a6d429a1ab5c659c3f339ce20d10 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 26 Jul 2021 20:53:45 +0200
Subject: [PATCH] Panels: allow interaction in corners when no title exists
 (#37169) (#37224)

(cherry picked from commit be4b753aa0045c8ad2d4ec62b4601afa0c083bdc)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
---
 .../features/dashboard/dashgrid/PanelChrome.tsx  |  7 +------
 .../dashboard/dashgrid/PanelChromeAngular.tsx    |  7 +------
 .../dashgrid/PanelHeader/PanelHeader.tsx         | 16 ++++++++--------
 public/sass/components/_panel_header.scss        |  8 +++++++-
 4 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 15cb1f1f1b0..43366f540b6 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -403,12 +403,7 @@ export class PanelChrome extends Component<Props, State> {
 
   hasOverlayHeader() {
     const { panel } = this.props;
-    const { errorMessage, data } = this.state;
-
-    // always show normal header if we have an error message
-    if (errorMessage) {
-      return false;
-    }
+    const { data } = this.state;
 
     // always show normal header if we have time override
     if (data.request && data.request.timeInfo) {
diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
index 6160798bc04..eee5f22cabd 100644
--- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
@@ -173,12 +173,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
 
   hasOverlayHeader() {
     const { panel } = this.props;
-    const { errorMessage, data } = this.state;
-
-    // always show normal header if we have an error message
-    if (errorMessage) {
-      return false;
-    }
+    const { data } = this.state;
 
     // always show normal header if we have time override
     if (data.request && data.request.timeInfo) {
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 46aa74332a5..32f37f6490f 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -35,15 +35,15 @@ export const PanelHeader: FC<Props> = ({ panel, error, isViewing, isEditing, dat
   return (
     <>
       <PanelHeaderLoadingIndicator state={data.state} onClick={onCancelQuery} />
+      <PanelHeaderCorner
+        panel={panel}
+        title={panel.title}
+        description={panel.description}
+        scopedVars={panel.scopedVars}
+        links={getPanelLinksSupplier(panel)}
+        error={error}
+      />
       <div className={className}>
-        <PanelHeaderCorner
-          panel={panel}
-          title={panel.title}
-          description={panel.description}
-          scopedVars={panel.scopedVars}
-          links={getPanelLinksSupplier(panel)}
-          error={error}
-        />
         <PanelHeaderMenuTrigger aria-label={selectors.components.Panels.Panel.title(title)}>
           {({ closeMenu, panelMenuOpen }) => {
             return (
diff --git a/public/sass/components/_panel_header.scss b/public/sass/components/_panel_header.scss
index daed63795b0..c6f616d5b18 100644
--- a/public/sass/components/_panel_header.scss
+++ b/public/sass/components/_panel_header.scss
@@ -10,8 +10,14 @@ $panel-header-no-title-zindex: 1;
 .panel-container--no-title {
   .panel-header {
     position: absolute;
-    width: 100%;
+    left: min(50px, 10%); // allows space for interaction in the corders
+    right: min(50px, 10%);
     z-index: $panel-header-z-index;
+
+    &:hover {
+      left: 0;
+      right: 0;
+    }
   }
   .panel-content {
     height: 100%;