Merge pull request #573 from dbeaver/fix/ellipsis

fix(core-app): add ellipsis and tooltips to several places

webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx

@@ -23,6 +23,14 @@ const menuStyles = css`
   Menu {
     max-height: 400px;
     overflow: auto;
+    & menu-panel-item {
+        overflow-x: hidden;
+    }
+    & menu-item-text {
+        max-width: 400px;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+    }
   }
 `;
 

webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx

@@ -27,6 +27,8 @@ export const TopMenuItem = observer<IProps>(function TopMenuItem({ menuItem, sty
   const translate = useTranslate();
   const styles = useStyles(style, topMenuStyles);
 
+  const title = translate(menuItem.title);
+
   if (!menuItem.panel) {
     return (
       <TopMenuButton
@@ -54,7 +56,7 @@ export const TopMenuItem = observer<IProps>(function TopMenuItem({ menuItem, sty
           <IconOrImage icon={menuItem.icon} />
         </menu-trigger-icon>
       )}
-      <div>{translate(menuItem.title)}</div>
+      <menu-trigger-text title={title}>{title}</menu-trigger-text>
       <Icon name="angle" viewBox="0 0 15 8" />
     </MenuTrigger>
   );

webapp/packages/core-app/src/TopNavBar/shared/topMenuStyles.ts

@@ -53,6 +53,11 @@ export const topMenuStyles = composes(
       & menu-trigger-icon {
         margin-right: 8px;
       }
+      & menu-trigger-text {
+          max-width: 240px;
+          overflow-x: hidden;
+          text-overflow: ellipsis;
+      }
       &:hover box > Icon,
       &:global([aria-expanded="true"]) box > Icon {
         background: #236ea0;

webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx

@@ -51,7 +51,7 @@ export const Tab = observer<TabProps>(function Tab({
             <tab-container>
               {children}
               {onClose && (
-                <tab-action onClick={handleClose}>
+                <tab-action title={translate('ui_close')} onClick={handleClose}>
                   <Icon name="cross-bold" viewBox="0 0 7 8" />
                 </tab-action>
               )}

webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuPanelItem.tsx

@@ -11,7 +11,7 @@ import styled, { use } from 'reshadow';
 
 import { Checkbox, Icon, IconOrImage, Loader, Radio } from '@cloudbeaver/core-blocks';
 import type { IMenuItem } from '@cloudbeaver/core-dialogs';
-import { Translate } from '@cloudbeaver/core-localization';
+import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { menuPanelStyles } from './menuPanelStyles';
@@ -25,6 +25,9 @@ export const MenuPanelItem = observer<MenuPanelItemProps>(function MenuPanelItem
   menuItem,
   style = [],
 }) {
+  const translate = useTranslate();
+
+  const title = translate(menuItem.title);
   let control = null;
 
   if (menuItem.type === 'radio') {
@@ -40,8 +43,8 @@ export const MenuPanelItem = observer<MenuPanelItemProps>(function MenuPanelItem
           <IconOrImage icon={menuItem.icon} />
         ) : control}
       </menu-item-content>
-      <menu-item-text>
-        <Translate token={menuItem.title} />
+      <menu-item-text title={title}>
+        {title}
       </menu-item-text>
       <menu-item-content>
         {menuItem.panel && (

webapp/packages/core-theming/src/styles/_tabs.scss

@@ -66,6 +66,7 @@
   }
 
   tab-container {
+    max-width: 240px;
     height: 100%;
     display: flex;
     flex-shrink: 0;
@@ -115,9 +116,14 @@
       height: 8px;
       width: 8px;
       align-self: flex-start;
+      flex-shrink: 0;
       padding: 4px;
       padding-left: 0;
 
+      &:hover {
+        opacity: 0.8;
+      }
+
       Icon {
         display: block;
       }

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

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';
 
 import { Icon, IconOrImage, Loader, useStateDelay } from '@cloudbeaver/core-blocks';
-import { Translate } from '@cloudbeaver/core-localization';
+import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { menuPanelStyles } from './menuPanelStyles';
@@ -34,14 +34,18 @@ export const MenuPanelItem = observer<MenuPanelItemProps>(function MenuPanelItem
   loading = false,
   style = [],
 }) {
+  const translate = useTranslate();
+
+  const title = translate(label);
   loading = useStateDelay(loading, 100);
+
   return styled(useStyles(menuPanelStyles, style))(
     <menu-panel-item title={tooltip}>
       <menu-item-content>
         {typeof icon === 'string' ? <IconOrImage icon={icon} /> : icon}
       </menu-item-content>
-      <menu-item-text>
-        <Translate token={label} />
+      <menu-item-text title={title}>
+        {title}
       </menu-item-text>
       <menu-item-binding>
         {binding}

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/FolderTabRenderer.tsx

@@ -61,7 +61,7 @@ const NavNodeTab = observer<INavNodeTabProps>(function NavNodeTab({ nodeId, styl
   )), 300);
 
   return styled(useStyles(style))(
-    <Tab tabId={nodeId}>
+    <Tab tabId={nodeId} title={nodeInfo.node?.name}>
       {nodeInfo.node?.icon && <TabIcon icon={nodeInfo.node.icon} />}
       <TabTitle>{nodeInfo.node?.name}</TabTitle>
       <tab-loader><Loader loading={loading} small /></tab-loader>

webapp/packages/plugin-object-viewer/src/ObjectViewerTab.tsx

@@ -21,11 +21,12 @@ export const ObjectViewerTab: TabHandlerTabComponent<IObjectViewerTabState> = ob
   const { node } = useNode(tab.handlerState.objectId);
   const handleSelect = ({ tabId }: ITabData<any>) => onSelect(tabId);
   const handleClose = onClose ? ({ tabId }: ITabData<any>) => onClose(tabId) : undefined;
+  const title = node?.name || tab.handlerState.tabTitle;
 
   return styled(useStyles(style))(
-    <Tab tabId={tab.id} style={style} onOpen={handleSelect} onClose={handleClose}>
+    <Tab tabId={tab.id} style={style} title={title} onOpen={handleSelect} onClose={handleClose}>
       <TabIcon icon={node?.icon || tab.handlerState.tabIcon} />
-      <TabTitle>{node?.name || tab.handlerState.tabTitle}</TabTitle>
+      <TabTitle>{title}</TabTitle>
     </Tab>
   );
 });

webapp/packages/plugin-sql-editor-navigation-tab/src/SqlEditorTab.tsx

@@ -34,7 +34,7 @@ export const SqlEditorTab: TabHandlerTabComponent<ISqlEditorTabState> = observer
   const handleClose = onClose ? ({ tabId }: ITabData<any>) => onClose(tabId) : undefined;
 
   return styled(useStyles(style))(
-    <Tab tabId={tab.id} style={style} onOpen={handleSelect} onClose={handleClose}>
+    <Tab tabId={tab.id} style={style} title={name} onOpen={handleSelect} onClose={handleClose}>
       <TabIcon icon='/icons/sql_script_m.svg' />
       <TabTitle>{name}</TabTitle>
     </Tab>

webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx

@@ -95,7 +95,7 @@ export const SqlResultTabs = observer<Props>(function SqlDataResult({ state, onT
       <TabsState currentTabId={currentId} onChange={handleSelect}>
         <TabList style={styles}>
           {orderedTabs.map(result => (
-            <Tab key={result.id} tabId={result.id} style={styles} onClose={handleClose}>
+            <Tab key={result.id} tabId={result.id} style={styles} title={result.name} onClose={handleClose}>
               <TabIcon icon={result.icon} />
               <TabTitle>{result.name}</TabTitle>
             </Tab>