[CB] Render data viewer context menu on the root level by sergeyteleshev · Pull Request #4363 · dbeaver/cloudbeaver

sergeyteleshev · 2026-05-26T09:51:09Z

closes https://github.com/dbeaver/pro/issues/9308

codacy-production · 2026-05-26T09:53:06Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 23 complexity

Metric Results

Complexity 23

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer}
_{TIP This summary will be updated as you push new changes.}

Copilot

Pull request overview

This PR moves the data viewer context menu rendering to the DataGrid root level so the menu can be positioned globally (rather than per-cell) and re-open reliably on a single right-click (fixing issue #9308).

Changes:

Introduces a grid-level TableMenuContext + DataGridMenuContextProvider to manage active cell + menu coordinates.
Replaces the per-cell embedded context menu with a lightweight trigger button and a single root-level CellMenu.
Adds a new useViewLeave hook to close the menu when the originating cell leaves the viewport, and adds a right-click mousedown propagation blocker to avoid premature dismiss.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Menu/DataGridMenuContextProvider.tsx	Adds grid-level provider to centralize context-menu state and rendering.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Menu/CellMenu.tsx	Implements a single root-level context menu bound to the active cell via context.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Menu/CellMenu.module.css	Hides the menu anchor element since menu is positioned via coordinates.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx	Replaces embedded menu with a trigger button that opens the root-level menu.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.module.css	Styles the new menu trigger button.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx	Wraps the grid in the new menu provider and blocks right-click dismiss behavior.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/TableMenuContext.ts	Introduces shared menu state contract for cell/menu integration.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx	Routes menu open/close through the shared context and closes on viewport leave.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellContext.ts	Extends `setMenuVisibility` to accept an optional position.
webapp/packages/core-blocks/src/useViewLeave.ts	Adds a new hook to detect when an element leaves the viewport.
webapp/packages/core-blocks/src/index.ts	Re-exports `useViewLeave`.
webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx	Removes the old per-cell menu implementation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

devnaumov · 2026-05-27T09:47:25Z

+      menuPosition,
+      openMenu(cellKey: IGridDataKey, x: number, y: number) {
+        this.activeCellKey = cellKey;
+        this.menuPosition.position = { x, y };


Please use menuPosition.open(event)

devnaumov · 2026-05-27T09:53:03Z

  editionState: DatabaseEditChangeType | null;
-  isMenuVisible: boolean;
-  setMenuVisibility(visible: boolean): void;
+  setMenuVisibility(visible: boolean, position?: { x: number; y: number }): void;


This api should be reworked. There should be openMenu handler that takes event and cell id. This handler should call useContextMenuPosition. Because position is only needed when you open menu and you dont need it when close it

devnaumov · 2026-05-27T10:01:21Z

-    cellContext.setMenuVisibility(visible);
+  function handleMenuTriggerClick(event: React.MouseEvent<HTMLButtonElement>) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    cellContext.setMenuVisibility(true, { x: rect.right - 20, y: rect.bottom });


Cell formatter should not make any calculactions with coordinates. openMenu(event) should

devnaumov · 2026-05-27T10:02:59Z

-      focusable={!cellContext.isMenuVisible}
      className={s(style, { formatter: true })}
      value={cellHolder.value as boolean | null}
+      focusable


We still should have the way to check whether menu is opened, please keep old behaviour

devnaumov · 2026-05-27T10:04:38Z

-            onStateSwitch={handleCellMenuStateSwitch}
-          />
-        </div>
+        <button


Please never user native buttons, use our components from ariakit

devnaumov · 2026-05-27T10:06:55Z

+
+  const { activeCellKey, menuPosition } = tableMenuContext;
+
+  useEffect(() => {


this logic should not be inside cellMenu, it should be on MenuContextProvider level

devnaumov · 2026-05-27T10:09:09Z


    function syncFocus(data: DatabaseDataSelectActionsData<Partial<IGridDataKey>>) {
      if (data.type === 'focus') {
+        const colIdx = data.key?.column ? tableData.getColumnIndexFromColumnKey(data.key.column) : -1;


Please do not modify this method

you sure? we are going to loose this behavior that we can re-open on right click the new cell (it was before so this is gonna be a regression). the thing is this focus sync steals the focus which causes the bug

Screen.Recording.2026-05-27.at.14.59.13.mov

this focus is weird. i dont like its defered behavior with setTimeout
something went wrong when we have added it

wdym by something went wrong? Is something works incorrectly? As I remember we always had some async logic but in the different place

devnaumov · 2026-05-27T10:10:52Z

+import type { IGridDataKey } from '@cloudbeaver/plugin-data-viewer';
+
+export interface ITableMenuContext {
+  activeCellKey: IGridDataKey | null;


Why do we need activeCellKey? we already have cell and position inside cellContext, we should use them?

we moved menu outside of cell context so we need to track active cell id to pass it here:

cloudbeaver/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Menu/CellMenu.tsx

Lines 78 to 85 in a56dd8c

useDataContextLink(menu.context, (context, id) => {

context.set(DATA_CONTEXT_DV_DDM, dataGridContext.model, id);

context.set(DATA_CONTEXT_DV_DDM_RESULT_INDEX, dataGridContext.resultIndex, id);

context.set(DATA_CONTEXT_DV_SIMPLE, dataGridContext.simple, id);

context.set(DATA_CONTEXT_DV_ACTIONS, dataGridContext.actions, id);

context.set(DATA_CONTEXT_DV_PRESENTATION_ACTIONS, spreadsheetActions, id);

context.set(DATA_CONTEXT_DV_RESULT_KEY, tableMenuContext.activeCell, id);

});

devnaumov · 2026-05-27T10:10:57Z

+import type { IContextMenuPosition } from '@cloudbeaver/core-blocks';
+import type { IGridDataKey } from '@cloudbeaver/plugin-data-viewer';
+
+export interface ITableMenuContext {


You probably dont need this. You have all 3 fields returned from useContextMenuPosition hook already that lets you open and close menu.

we need to track active cell key and is opened status

Maybe we can use Popover component from aria-kit and PopoverProvider?

Then we could use PopoverAnchor in CellFormatter that will position our menu positioned relative to the anchor element

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

-
-        this.isMenuVisible = visibility;
+      openMenu(event: React.MouseEvent): void {
+        this.tableMenuContext.openMenu(this.cell, event);


+    context.set(DATA_CONTEXT_DV_SIMPLE, dataGridContext.simple, id);
+    context.set(DATA_CONTEXT_DV_ACTIONS, dataGridContext.actions, id);
+    context.set(DATA_CONTEXT_DV_PRESENTATION_ACTIONS, spreadsheetActions, id);
+    context.set(DATA_CONTEXT_DV_RESULT_KEY, tableMenuContext.activeCell, id);
+  });


devnaumov · 2026-06-03T12:48:25Z

-        };
+        this.openAt(x, y);
+      },
+      openAt(x: number, y: number) {


openAt is not needed anymore

devnaumov · 2026-06-07T14:45:26Z

    ['getAnchorRect', 'handleVisibleSwitch'],
  );

-  const showAtPosition = !!contextMenuPosition?.position;


Could you please explain why do we need such changes?

case:

open menu via right click

do not close it

open another menu in another cell via rightclick

expected behavior: menu reopens using new position
current behavior without changes: menu stays on the same position, only items of the menu changes

it changes position only if in the tree above react rerendered something. then its gonna rerender and change menu position

…the-root-level

devnaumov · 2026-06-08T12:02:12Z

+  const gridContext = useContext(DataGridContext);
+  const container = gridContext.getScrollContainer();
+
+  function handleScroll() {


this function should be created inside effect to mantain the reference and avoid memory leaks

const handleScroll = () => menu.closeMenu();

used useCallback to keep the link still

devnaumov · 2026-06-08T12:02:46Z

+      return;
+    }
+
+    container.addEventListener('scroll', handleScroll, { capture: true });


please add some delta value, so user can scroll a little before closing menu, also add throttle

devnaumov · 2026-06-08T12:03:57Z

  position: IContextMenuPosition;
  id: string;
  openMenu(activeCell: IGridDataKey, event: React.MouseEvent | React.KeyboardEvent): void;
+  closeMenu(): void;


we dont need this method, you can call position.close, also we delete context on menu opening

this means the context the whole time is gonna be there even if menu is closed
this can cause some issues, i don't think it is expected

moreover it doesn't work this way. menu doesn't close at all

open/close menu on this level API is fine so I'll keep it, there is no biggie here

devnaumov · 2026-06-08T12:04:26Z

  simple: boolean;
  isGridInFocus: () => boolean;
  getDataGridApi: () => DataGridRef | null;
+  getScrollContainer: () => HTMLDivElement | null;


lets call it just getContainer, its only one for now

…the-root-level

This reverts commit a830301.

dbeaver/pro#9308 moves context menu from the cell level to table level

003171b

sergeyteleshev requested review from SychevAndrey and devnaumov May 26, 2026 09:51

sergeyteleshev self-assigned this May 26, 2026

sergeyteleshev commented May 26, 2026

View reviewed changes

Comment thread webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx Outdated

sergeyteleshev commented May 26, 2026

View reviewed changes

Comment thread webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx Outdated

sergeyteleshev added 5 commits May 26, 2026 12:07

cleanup

2b53c4b

adds DataGridMenuContextProvider

4eba3a1

uses context menu position from the hook useContextMenuPosition

1415889

closes menu if cell is not visible

aa2aa98

adds useViewLeave hook to close menu if it is out of the view

b5d69a8

SychevAndrey requested a review from Copilot May 26, 2026 14:00

Copilot started reviewing on behalf of SychevAndrey May 26, 2026 14:00 View session

Copilot AI reviewed May 26, 2026

View reviewed changes

sergeyteleshev added 5 commits May 26, 2026 16:42

changes approach for re-opening menus + removes isMenuVisible logic

35ce3f5

removes redundant event prevent default and stopPropogation

0b4517e

fixes focus stealing issue

b468dbf

hides menu on scroll

c403459

cleanup

b58fa3f

devnaumov requested changes May 27, 2026

View reviewed changes

sergeyteleshev added 3 commits May 27, 2026 14:55

pr fixes

3fb9cee

cleanup

1b44760

uses cell key to open table

a56dd8c

sergeyteleshev requested a review from devnaumov May 27, 2026 13:36

SychevAndrey requested a review from Copilot May 27, 2026 14:17

Copilot started reviewing on behalf of SychevAndrey May 27, 2026 14:17 View session

Copilot AI reviewed May 27, 2026

View reviewed changes

pr fixes

c7607c6

removes setContext

e852190

devnaumov reviewed Jun 3, 2026

View reviewed changes

sergeyteleshev added 3 commits June 3, 2026 15:01

cleanup

9ff33f9

simplifies interfaces

6b09f67

fixes bug with menu not being able to rerender

621a1e9

sergeyteleshev requested a review from devnaumov June 3, 2026 13:43

restores focus on close

e8fc2e0

SychevAndrey previously approved these changes Jun 4, 2026

View reviewed changes

devnaumov reviewed Jun 7, 2026

View reviewed changes

devnaumov and others added 2 commits June 7, 2026 19:55

Merge branch 'devel' into 9308-cb-render-data-viewer-context-menu-on-…

f3d3b99

…the-root-level

dbeaver/pro#9308 simplify logic

9ff2c4c

devnaumov dismissed SychevAndrey’s stale review via 9ff2c4c June 7, 2026 21:13

sergeyteleshev requested a review from devnaumov June 8, 2026 06:58

adds closing menu on scroll

5e0761e

devnaumov requested changes Jun 8, 2026

View reviewed changes

pr fixes

46e6c97

sergeyteleshev requested review from SychevAndrey and devnaumov June 8, 2026 13:13

devnaumov previously approved these changes Jun 8, 2026

View reviewed changes

dariamarutkina and others added 3 commits June 9, 2026 10:14

Merge branch 'devel' into 9308-cb-render-data-viewer-context-menu-on-…

1f6ba1a

…the-root-level

Merge branch 'devel' into 9308-cb-render-data-viewer-context-menu-on-…

60b3307

…the-root-level

dbeaver/pro#9308 adds context menu sr-only for accessibility

0c1f73c

sergeyteleshev dismissed devnaumov’s stale review via 0c1f73c June 9, 2026 11:45

sergeyteleshev added 3 commits June 9, 2026 16:24

adds arialabel for icon button

a830301

Revert "adds arialabel for icon button"

ac6224f

This reverts commit a830301.

adds span to make scrolling work

1fb0504

SychevAndrey approved these changes Jun 9, 2026

View reviewed changes

devnaumov approved these changes Jun 9, 2026

View reviewed changes

devnaumov merged commit 6cdc6b2 into devel Jun 9, 2026
10 checks passed

devnaumov deleted the 9308-cb-render-data-viewer-context-menu-on-the-root-level branch June 9, 2026 22:30


		const { activeCellKey, menuPosition } = tableMenuContext;

		useEffect(() => {

	useDataContextLink(menu.context, (context, id) => {
	context.set(DATA_CONTEXT_DV_DDM, dataGridContext.model, id);
	context.set(DATA_CONTEXT_DV_DDM_RESULT_INDEX, dataGridContext.resultIndex, id);
	context.set(DATA_CONTEXT_DV_SIMPLE, dataGridContext.simple, id);
	context.set(DATA_CONTEXT_DV_ACTIONS, dataGridContext.actions, id);
	context.set(DATA_CONTEXT_DV_PRESENTATION_ACTIONS, spreadsheetActions, id);
	context.set(DATA_CONTEXT_DV_RESULT_KEY, tableMenuContext.activeCell, id);
	});

Uh oh!

Conversation

sergeyteleshev commented May 26, 2026

Uh oh!

codacy-production Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sergeyteleshev May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

codacy-production Bot commented May 26, 2026 •

edited

Loading

sergeyteleshev May 27, 2026 •

edited

Loading