From 1dc6014b105690c8dbff3b4236e2c035d35541c7 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Wed, 6 Mar 2024 08:31:54 -0600
Subject: [PATCH] Dashboard: Revert descending z-index changes (#83466)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../src/components/PanelChrome/PanelChrome.tsx     |  9 ---------
 .../grafana-ui/src/themes/_variables.scss.tmpl.ts  |  1 -
 .../SplitPaneWrapper/SplitPaneWrapper.tsx          |  4 ----
 .../dashboard-scene/scene/DashboardControls.tsx    |  2 +-
 public/app/features/trails/DataTrail.tsx           |  2 +-
 public/sass/_variables.generated.scss              |  1 -
 public/sass/components/_dashboard_grid.scss        | 14 +-------------
 7 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index da00cbf970a..4f4d690a42d 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -358,15 +358,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       flexDirection: 'column',
 
-      '> *': {
-        zIndex: 0,
-      },
-
-      // matches .react-grid-item styles in _dashboard_grid.scss to ensure any contained tooltips occlude adjacent panels
-      '&:hover, &:active, &:focus': {
-        zIndex: theme.zIndex.activePanel,
-      },
-
       '.show-on-hover': {
         opacity: '0',
         visibility: 'hidden',
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 5651553f125..75a8ad0d4af 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -161,7 +161,6 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindex-active-panel: ${theme.zIndex.activePanel};
 $zindex-dropdown: ${theme.zIndex.dropdown};
 $zindex-navbar-fixed: ${theme.zIndex.navbarFixed};
 $zindex-sidemenu: ${theme.zIndex.sidemenu};
diff --git a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
index 9605b6e7721..54691d44845 100644
--- a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
+++ b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
@@ -91,7 +91,6 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
 
     return (
       <SplitPane
-        className={styles.splitPane}
         split={splitOrientation}
         minSize={minSize}
         maxSize={maxSize}
@@ -115,9 +114,6 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
 
 const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
   return {
-    splitPane: css({
-      overflow: 'visible !important',
-    }),
     resizer: css({
       display: hasSplit ? 'block' : 'none',
     }),
diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index 55e5e370eba..0ad76b3bff1 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -74,7 +74,7 @@ function getStyles(theme: GrafanaTheme2) {
       position: 'sticky',
       top: 0,
       background: theme.colors.background.canvas,
-      zIndex: theme.zIndex.activePanel,
+      zIndex: theme.zIndex.navbarFixed,
       padding: theme.spacing(2, 0),
       width: '100%',
       marginLeft: 'auto',
diff --git a/public/app/features/trails/DataTrail.tsx b/public/app/features/trails/DataTrail.tsx
index 30c2e01e238..bbdca58404b 100644
--- a/public/app/features/trails/DataTrail.tsx
+++ b/public/app/features/trails/DataTrail.tsx
@@ -245,7 +245,7 @@ function getStyles(theme: GrafanaTheme2) {
       flexWrap: 'wrap',
       position: 'sticky',
       background: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
-      zIndex: theme.zIndex.activePanel + 1,
+      zIndex: theme.zIndex.navbarFixed,
       top: 0,
     }),
   };
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 290ebadaedd..1a2e11a0651 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -163,7 +163,6 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindex-active-panel: 999;
 $zindex-dropdown: 1030;
 $zindex-navbar-fixed: 1000;
 $zindex-sidemenu: 1020;
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
index a68f95cd3b6..7185a2a9be2 100644
--- a/public/sass/components/_dashboard_grid.scss
+++ b/public/sass/components/_dashboard_grid.scss
@@ -13,7 +13,6 @@
   &:hover {
     .react-resizable-handle {
       visibility: visible;
-      z-index: $zindex-active-panel;
     }
   }
 }
@@ -86,22 +85,11 @@
   }
 }
 
-// Hack to prevent panel overlap during drag/hover (due to descending z-index assignment)
-.react-grid-item:not(.context-menu-open, .resizing) {
-  &:hover,
-  &:active,
-  &:focus {
-    z-index: $zindex-active-panel !important;
-  }
-}
-
 // Hack for preventing panel menu overlapping.
-.react-grid-item.context-menu-open,
-.react-grid-item.resizing,
 .react-grid-item.resizing.panel,
 .react-grid-item.panel.dropdown-menu-open,
 .react-grid-item.react-draggable-dragging.panel {
-  z-index: $zindex-dropdown !important;
+  z-index: $zindex-dropdown;
 }
 
 // Disable animation on initial rendering and enable it when component has been mounted.