IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-28 11:44:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard: Revert LayoutItemContext (#83465)

Browse Source
This commit is contained in:
Leon Sorokin 2024-03-04 08:47:20 -06:00 committed by GitHub
parent b63866baaf
commit 7cf419c09a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-ui/src/components/Layout/LayoutItemContext.ts
View File

@ -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: () => () => {},
});

2
packages/grafana-ui/src/components/index.ts
View File

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

34
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

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