[CB] Remove tooltips from context menu

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

@@ -1,11 +1,12 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import { type HTMLAttributes, useRef } from 'react';
 
 import { Icon } from '../Icon.js';
 import { IconOrImage } from '../IconOrImage.js';
@@ -14,8 +15,8 @@ import { useTranslate } from '../localization/useTranslate.js';
 import { s } from '../s.js';
 import { useS } from '../useS.js';
 import { useStateDelay } from '../useStateDelay.js';
+import { useTruncatedTooltip } from '../useTruncatedTooltip.js';
 import style from './MenuItemElement.module.css';
-import type { HTMLAttributes } from 'react';
 
 export interface IMenuItemGroupArrowElementProps extends HTMLAttributes<HTMLButtonElement> {}
 
@@ -43,21 +44,21 @@ export const MenuItemElement = observer<IMenuItemElementProps>(function MenuItem
 }) {
   const styles = useS(style);
   const translate = useTranslate();
-
-  const title = translate(label);
+  const textRef = useRef<HTMLDivElement | null>(null);
+  const truncatedLabel = useTruncatedTooltip(textRef, label);
   loading = useStateDelay(loading, 300);
 
   return (
-    <button {...rest} className={s(styles, { menuPanelItem: true }, rest.className)} title={tooltip ? translate(tooltip) : title}>
+    <button {...rest} className={s(styles, { menuPanelItem: true }, rest.className)} title={tooltip || truncatedLabel}>
       <div className={s(styles, { menuItemMain: true })}>
         <div className={s(styles, { menuItemIcon: true })}>
           <Loader className={s(styles, { loader: true })} suspense small fullSize>
             {typeof icon === 'string' ? <IconOrImage className={s(styles, { iconOrImage: true })} icon={icon} /> : icon}
           </Loader>
         </div>
         {!onlyIcons ? (
-          <div className={s(styles, { menuItemText: true })} title={title}>
-            {title}
+          <div ref={textRef} className={s(styles, { menuItemText: true })}>
+            {translate(label)}
           </div>
         ) : (
           <div />

webapp/packages/core-blocks/src/index.ts

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -10,22 +10,22 @@
 
 export * from './AuthenticationProviderLoader.js';
 export * from './useAuthenticationAction.js';
 export * from './CommonDialog/CommonDialog/CommonDialogBody.js';
 export * from './CommonDialog/CommonDialog/CommonDialogFooter.js';
 export * from './CommonDialog/CommonDialog/CommonDialogHeader.js';
 export * from './CommonDialog/CommonDialog/CommonDialogWrapper.js';
 export * from './CommonDialog/ConfirmationDialog.js';
 export { default as ConfirmationDialogStyles } from './CommonDialog/ConfirmationDialog.module.css';
 export * from './CommonDialog/ConfirmationDialogDelete.js';
 export * from './CommonDialog/RenameDialog.js';
 export * from './CommonDialog/DialogsPortal.js';
 export * from './ExportImageDialog/ExportImageDialogLazy.js';
 export * from './ExportImageDialog/ExportImageFormats.js';
 
 export * from './ErrorDetailsDialog/ErrorDetailsDialog.js';
 
 export * from './ComponentsRegistry/CRegistryLoader.js';
 export * from './ComponentsRegistry/registry.js';
 export * from './ComponentsRegistry/CRegistryList.js';
 export * from './ComponentsRegistry/IComponentsTreeNodeValidator.js';
 export * from './ComponentsRegistry/useParentProps.js';
@@ -231,6 +231,7 @@
 export * from './usePromiseState.js';
 export * from './useS.js';
 export * from './useStateDelay.js';
+export * from './useTruncatedTooltip.js';
 export * from './useErrorDetails.js';
 export * from './useActivationDelay.js';
 export * from './useAdministrationSettings.js';

webapp/packages/core-blocks/src/useTruncatedTooltip.ts

@@ -0,0 +1,60 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2026 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { useEffect, useRef, useState } from 'react';
+
+import { useTranslate } from './localization/useTranslate.js';
+
+export function useTruncatedTooltip(ref: React.RefObject<HTMLDivElement | null>, tooltip: string | undefined): string | undefined {
+  const [isTextTruncated, setIsTextTruncated] = useState(false);
+  const translate = useTranslate();
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const elementRef = useRef<HTMLDivElement | null>(null);
+
+  function checkTruncation() {
+    if (elementRef.current) {
+      setIsTextTruncated(elementRef.current.scrollWidth > elementRef.current.clientWidth);
+    }
+  }
+
+  useEffect(() => {
+    const element = ref.current;
+
+    if (elementRef.current === element) {
+      return;
+    }
+
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+
+    elementRef.current = element;
+
+    if (!element) {
+      return;
+    }
+
+    checkTruncation();
+
+    const resizeObserver = new ResizeObserver(checkTruncation);
+    resizeObserver.observe(element);
+    observerRef.current = resizeObserver;
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
+  const translatedTooltip = tooltip ? translate(tooltip) : undefined;
+
+  if (isTextTruncated && translatedTooltip) {
+    return translatedTooltip;
+  }
+
+  return;
+}