[CB] Remove tooltips from context menu #4033

sergeyteleshev · 2026-01-06T10:21:34Z

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

devnaumov · 2026-01-07T11:26:11Z

webapp/packages/core-blocks/src/Menu/MenuItemElement.tsx

-
-  const title = translate(label);
+  const textRef = useRef<HTMLDivElement | null>(null);
+  const truncatedLabel = useTruncatedTooltip(textRef, label);


I think we dont need this, tooltips are just fine

I also think so, we don't expect to have long tooltips or labels in the menu items, where we expect them, we should truncate them at the declaration point

for example like here:

cloudbeaver/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/DataGridContextMenuFilterService.ts

Lines 405 to 434 in a836412

if (this.clipboardService.state === 'granted') {

const filters = supportedOperations

.filter(operation => !nullOperationsFilter(operation))

.map(operation => {

const val = this.clipboardService.clipboardValue || '';

const wrappedValue = wrapOperationArgument(operation.id, val);

const clippedValue = replaceMiddle(wrappedValue, ' ... ', 8, 30);

const label = `${columnLabel} ${operation.expression} ${clippedValue}`;

return new MenuBaseItem(

{ id: operation.id, icon: 'filter-clipboard', label },

{

onSelect: async () => {

const wrappedValue = wrapOperationArgument(operation.id, val);

await this.applyFilter(

model as unknown as IDatabaseDataModel<ResultSetDataSource>,

resultIndex,

key.column,

operation.id,

wrappedValue,

);

},

},

{ isDisabled: () => model.isLoading() },

);

});

result.push(...filters);

}

Wroud · 2026-01-07T15:37:19Z

webapp/packages/core-blocks/src/Menu/MenuItemElement.tsx

-
-  const title = translate(label);
+  const textRef = useRef<HTMLDivElement | null>(null);
+  const truncatedLabel = useTruncatedTooltip(textRef, label);


I also think so, we don't expect to have long tooltips or labels in the menu items, where we expect them, we should truncate them at the declaration point

Wroud · 2026-01-07T15:38:51Z

webapp/packages/core-blocks/src/Menu/MenuItemElement.tsx

-
-  const title = translate(label);
+  const textRef = useRef<HTMLDivElement | null>(null);
+  const truncatedLabel = useTruncatedTooltip(textRef, label);


for example like here:

cloudbeaver/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/DataGridContextMenuFilterService.ts

Lines 405 to 434 in a836412

if (this.clipboardService.state === 'granted') {

const filters = supportedOperations

.filter(operation => !nullOperationsFilter(operation))

.map(operation => {

const val = this.clipboardService.clipboardValue || '';

const wrappedValue = wrapOperationArgument(operation.id, val);

const clippedValue = replaceMiddle(wrappedValue, ' ... ', 8, 30);

const label = `${columnLabel} ${operation.expression} ${clippedValue}`;

return new MenuBaseItem(

{ id: operation.id, icon: 'filter-clipboard', label },

{

onSelect: async () => {

const wrappedValue = wrapOperationArgument(operation.id, val);

await this.applyFilter(

model as unknown as IDatabaseDataModel<ResultSetDataSource>,

resultIndex,

key.column,

operation.id,

wrappedValue,

);

},

},

{ isDisabled: () => model.isLoading() },

);

});

result.push(...filters);

}

webapp/packages/core-blocks/src/Menu/MenuItemElement.tsx

Co-authored-by: Alexey Potsetsuev <[email protected]>

Wroud · 2026-01-12T09:32:23Z

webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx

    let binding: string | undefined;
    if (item.action.binding !== null) {
-      binding = getBindingLabel(item.action.binding.binding);
+      binding = getBindingLabels(item.action.binding.binding);


probably we don't want to change this, shortcuts might take a lot of space we can't display all of them in the menu, so it was intentionally to display first one

Wroud · 2026-01-12T09:33:38Z

...c/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/DataGridContextMenuFilterService.ts

+          const label = localizationService.translate('data_grid_table_filter_delete_for_column', undefined, { column: resultColumn?.name ?? '' });
+          const { clippedLabel, tooltip } = getMenuLabelClipped(label);


please clip only resultColumn?.name ?? '' not whole label

Wroud · 2026-01-12T09:34:39Z

...c/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/DataGridContextMenuFilterService.ts

-            const clippedValue = replaceMiddle(wrappedValue, ' ... ', 8, 30);
+            const fullLabel = `${columnLabel} ${operation.expression} ${wrappedValue}`;
+            const { clippedLabel, tooltip } = getMenuLabelClipped(fullLabel);

            return new MenuBaseItem(
              {
                id: operation.id,
-                label: `${columnLabel} ${operation.expression} ${clippedValue}`,
+                label: clippedLabel,


you can revert this changes and use fullLabel as a tooltip

Wroud · 2026-01-12T09:35:09Z

...c/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/DataGridContextMenuFilterService.ts

            const title = `${columnLabel} ${operation.expression}`;
+            const { clippedLabel, tooltip } = getMenuLabelClipped(title);


only columnLabel should be clipped (replaceMiddle or getMenuLabelClipped)

Wroud · 2026-01-12T09:35:31Z

...c/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/DataGridContextMenuFilterService.ts

-              const clippedValue = replaceMiddle(wrappedValue, ' ... ', 8, 30);
-              const label = `${columnLabel} ${operation.expression} ${clippedValue}`;
+              const label = `${columnLabel} ${operation.expression} ${wrappedValue}`;
+              const { clippedLabel, tooltip } = getMenuLabelClipped(label);


please revert

Wroud · 2026-01-12T09:37:17Z

webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersBootstrap.ts

+        const nodeName = node?.name || '';
+        const fullLabel = this.localizationService.translate('plugin_navigation_tree_filters_configuration', undefined, { name: nodeName });
+        const isLongNodeName = nodeName?.length > 10;
+        const label = `${isLongNodeName ? fullLabel.replace(nodeName, nodeName.slice(0, 3) + '...') : fullLabel}...`;
+        const tooltip = isLongNodeName ? fullLabel : undefined;


only nodeName should be clipped (replaceMiddle or getMenuLabelClipped)

Wroud · 2026-01-12T09:37:59Z

webapp/packages/plugin-sql-generator/src/SqlGenerators/SqlGeneratorsBootstrap.ts

-                    });
-                  },
+          ...actions.map(action => {
+            const { clippedLabel, tooltip } = getMenuLabelClipped(action.label);


probably we don't need to clip this values, they should not be long

dbeaver/pro#7772 adds truncated tooltips for context menus

93a598b

sergeyteleshev requested review from SychevAndrey, Wroud and devnaumov January 6, 2026 10:21

sergeyteleshev self-assigned this Jan 6, 2026

Merge branch 'devel' into 7772-cb-remove-tooltips-from-context-menu

285b6b7

sergeyteleshev force-pushed the 7772-cb-remove-tooltips-from-context-menu branch from 6dd1f10 to 285b6b7 Compare January 6, 2026 12:26

devnaumov reviewed Jan 7, 2026

View reviewed changes

Wroud requested changes Jan 7, 2026

View reviewed changes

sergeyteleshev added 4 commits January 8, 2026 10:54

Merge branch 'devel' into 7772-cb-remove-tooltips-from-context-menu

e64ad4f

dbeaver/pro#7772 adds " ... " for long labels

a7365de

adds unit tests

178dfe8

Merge branch 'devel' into 7772-cb-remove-tooltips-from-context-menu

8fa917c

sergeyteleshev requested review from Wroud and devnaumov January 8, 2026 13:36

Wroud previously approved these changes Jan 8, 2026

View reviewed changes

webapp/packages/core-blocks/src/Menu/MenuItemElement.tsx Outdated Show resolved Hide resolved

devnaumov previously approved these changes Jan 8, 2026

View reviewed changes

Update webapp/packages/core-blocks/src/Menu/MenuItemElement.tsx

e0e4162

Co-authored-by: Alexey Potsetsuev <[email protected]>

sergeyteleshev dismissed stale reviews from devnaumov and Wroud via e0e4162 January 8, 2026 15:28

sergeyteleshev and others added 6 commits January 8, 2026 16:29

Merge branch 'devel' into 7772-cb-remove-tooltips-from-context-menu

6f02892

Merge branch 'devel' into 7772-cb-remove-tooltips-from-context-menu

9732955

adds binding for delete row

67ad19b

removes tooltips

c8455bd

Merge branch 'devel' into 7772-cb-remove-tooltips-from-context-menu

f423efe

fixes tree filters clipping

b2eb320

sergeyteleshev requested review from Wroud and devnaumov January 9, 2026 15:30

Wroud requested changes Jan 12, 2026

View reviewed changes

Merge branch 'devel' into 7772-cb-remove-tooltips-from-context-menu

459dfab

sergeyteleshev added 5 commits January 12, 2026 15:07

clips only names, not whole labels

cd3ee3d

clips only names, not whole labels [2]

1e01d04

reverts getBindingLabels + fixes the os specific keys to show it first

f3c996d

clips only names, not whole labels [3]

34d1696

dbeaver/pro#7772 simplifies keys helpers logic

8743624

	if (this.clipboardService.state === 'granted') {
	const filters = supportedOperations
	.filter(operation => !nullOperationsFilter(operation))
	.map(operation => {
	const val = this.clipboardService.clipboardValue \|\| '';
	const wrappedValue = wrapOperationArgument(operation.id, val);
	const clippedValue = replaceMiddle(wrappedValue, ' ... ', 8, 30);
	const label = `${columnLabel} ${operation.expression} ${clippedValue}`;

	return new MenuBaseItem(
	{ id: operation.id, icon: 'filter-clipboard', label },
	{
	onSelect: async () => {
	const wrappedValue = wrapOperationArgument(operation.id, val);

	await this.applyFilter(
	model as unknown as IDatabaseDataModel<ResultSetDataSource>,
	resultIndex,
	key.column,
	operation.id,
	wrappedValue,
	);
	},
	},
	{ isDisabled: () => model.isLoading() },
	);
	});

	result.push(...filters);
	}

		const label = localizationService.translate('data_grid_table_filter_delete_for_column', undefined, { column: resultColumn?.name ?? '' });
		const { clippedLabel, tooltip } = getMenuLabelClipped(label);

		const title = `${columnLabel} ${operation.expression}`;
		const { clippedLabel, tooltip } = getMenuLabelClipped(title);

[CB] Remove tooltips from context menu #4033

Are you sure you want to change the base?

[CB] Remove tooltips from context menu #4033

Uh oh!

Conversation

sergeyteleshev commented Jan 6, 2026

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!

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!

Wroud Jan 12, 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!

Wroud Jan 12, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Wroud Jan 12, 2026 •

edited

Loading

Wroud Jan 12, 2026 •

edited

Loading