Dashboard: Revert descending z-index changes

packages/grafana-data/src/themes/zIndex.ts

@@ -1,7 +1,6 @@
 // We need to centralize the zIndex definitions as they work
 // like global values in the browser.
 export const zIndex = {
-  activePanel: 999,
   navbarFixed: 1000,
   sidemenu: 1020,
   dropdown: 1030,

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',

packages/grafana-ui/src/components/index.ts

@@ -267,8 +267,6 @@ export { Divider } from './Divider/Divider';
 export { getDragStyles, type DragHandlePosition } from './DragHandle/DragHandle';
 export { useSplitter } from './Splitter/useSplitter';
 
-export { LayoutItemContext, type LayoutItemContextProps } from './Layout/LayoutItemContext';
-
 /** @deprecated Please use non-legacy versions of these components */
 const LegacyForms = {
   SecretFormField,

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};

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',
     }),

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -1,12 +1,10 @@
 import classNames from 'classnames';
-import React, { PureComponent, CSSProperties, useRef, useCallback, useReducer, useMemo } from 'react';
+import React, { PureComponent, CSSProperties } from 'react';
 import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Subscription } from 'rxjs';
 
-import { zIndex } from '@grafana/data/src/themes/zIndex';
 import { config } from '@grafana/runtime';
-import { LayoutItemContext } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -222,15 +220,10 @@ export class DashboardGrid extends PureComponent<Props, State> {
     for (const panel of this.props.dashboard.panels) {
       const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
 
-      // used to allow overflowing content to show on top of the next panel
-      // requires parent create stacking context to prevent overlap with parent elements
-      const descIndex = this.props.dashboard.panels.length - panelElements.length;
-
       const p = (
         <GrafanaGridItem
           key={panel.key}
           className={panelClasses}
-          descendingOrderIndex={descIndex}
           data-panelid={panel.id}
           gridPos={panel.gridPos}
           gridWidth={gridWidth}
@@ -304,18 +297,9 @@ export class DashboardGrid extends PureComponent<Props, State> {
      * We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
      * properly working. For more information go here:
      * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#can-i-use-autosizer-within-a-flex-container
-     *
-     * pos: rel + z-index is required to create a new stacking context to contain the escalating z-indexes of the panels
      */
     return (
-      <div
-        style={{
-          flex: '1 1 auto',
-          position: 'relative',
-          zIndex: 1,
-          display: this.props.editPanel ? 'none' : undefined,
-        }}
-      >
+      <div style={{ flex: '1 1 auto', display: this.props.editPanel ? 'none' : undefined }}>
         <AutoSizer disableHeight>
           {({ width }) => {
             if (width === 0) {
@@ -364,7 +348,6 @@ export class DashboardGrid extends PureComponent<Props, State> {
 interface GrafanaGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
   gridWidth?: number;
   gridPos?: GridPos;
-  descendingOrderIndex?: number;
   isViewing: boolean;
   windowHeight: number;
   windowWidth: number;
@@ -379,22 +362,7 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
   let width = 100;
   let height = 100;
 
-  const boostedCount = useRef(0);
-  const [_, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  const boostZIndex = useCallback(() => {
-    boostedCount.current += 1;
-    forceUpdate();
-
-    return () => {
-      boostedCount.current -= 1;
-      forceUpdate();
-    };
-  }, [forceUpdate]);
-
-  const ctxValue = useMemo(() => ({ boostZIndex }), [boostZIndex]);
-
-  const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, descendingOrderIndex, ...divProps } = props;
+  const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, ...divProps } = props;
   const style: CSSProperties = props.style ?? {};
 
   if (isViewing) {
@@ -424,17 +392,10 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
 
   // props.children[0] is our main children. RGL adds the drag handle at props.children[1]
   return (
-    <LayoutItemContext.Provider value={ctxValue}>
-      <div
-        {...divProps}
-        // .context-menu-open === $zindex-dropdown === 1030 (zIndex.ts)
-        style={{ ...divProps.style, zIndex: boostedCount.current === 0 ? descendingOrderIndex : zIndex.dropdown }}
-        ref={ref}
-      >
-        {/* Pass width and height to children as render props */}
-        {[props.children[0](width, height), props.children.slice(1)]}
-      </div>
-    </LayoutItemContext.Provider>
+    <div {...divProps} ref={ref}>
+      {/* Pass width and height to children as render props */}
+      {[props.children[0](width, height), props.children.slice(1)]}
+    </div>
   );
 });
 

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;

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.