From 7cf419c09a1415b3055b9ae99d70f415b28810e9 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Mon, 4 Mar 2024 08:47:20 -0600
Subject: [PATCH] Dashboard: Revert LayoutItemContext (#83465)

---
 .../components/Layout/LayoutItemContext.ts    | 21 ------------
 packages/grafana-ui/src/components/index.ts   |  2 --
 .../dashboard/dashgrid/DashboardGrid.tsx      | 34 +++----------------
 3 files changed, 5 insertions(+), 52 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/Layout/LayoutItemContext.ts

diff --git a/packages/grafana-ui/src/components/Layout/LayoutItemContext.ts b/packages/grafana-ui/src/components/Layout/LayoutItemContext.ts
deleted file mode 100644
index 08832aab601..00000000000
--- a/packages/grafana-ui/src/components/Layout/LayoutItemContext.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createContext } from 'react';
-
-export interface LayoutItemContextProps {
-  boostZIndex(): () => void;
-}
-
-/**
- * Provides an API for downstream components (e.g. within panels) to inform the layout
- * that anchored tooltips or context menus could overflow the panel bounds. The layout
- * system can then boost the z-index of items with any anchored contents to prevent the overflown
- * content from rendering underneath adjacent layout items (e.g. other panels) that naturally
- * render later/higher in the stacking order
- *
- * This is used by VizTooltips and Annotations, which anchor to data points or time range within
- * the viz drawing area
- *
- * @internal
- */
-export const LayoutItemContext = createContext<LayoutItemContextProps>({
-  boostZIndex: () => () => {},
-});
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index ec094bea02e..13d8a7b604b 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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,
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 02969867235..6ca7fc81910 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/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';
@@ -379,21 +377,6 @@ 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 style: CSSProperties = props.style ?? {};
 
@@ -424,17 +407,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} style={{ ...divProps.style, zIndex: descendingOrderIndex }} ref={ref}>
+      {/* Pass width and height to children as render props */}
+      {[props.children[0](width, height), props.children.slice(1)]}
+    </div>
   );
 });