fix: fix incorrect truncate strings with popover (#567)

Author: krosy1337

package-lock.json

@@ -117,7 +117,7 @@
     "@types/lodash": "^4.14.178",
     "@types/numeral": "^2.0.2",
     "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.44",
+    "@types/react": "^17.0.58",
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.2",

package.json

@@ -0,0 +1,13 @@
+.ydb-cell-with-popover {
+    display: flex;
+
+    &__popover {
+        display: inline-block;
+        overflow: hidden;
+
+        max-width: 100%;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}

src/components/CellWithPopover/CellWithPopover.scss

@@ -0,0 +1,26 @@
+import cn from 'bem-cn-lite';
+
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+
+import './CellWithPopover.scss';
+
+const b = cn('ydb-cell-with-popover');
+
+interface CellWithPopoverProps extends PopoverProps {
+    wrapperClassName?: string;
+}
+
+export function CellWithPopover({
+    children,
+    className,
+    wrapperClassName,
+    ...props
+}: CellWithPopoverProps) {
+    return (
+        <div className={b(null, wrapperClassName)}>
+            <Popover className={b('popover', className)} {...props}>
+                {children}
+            </Popover>
+        </div>
+    );
+}

src/components/CellWithPopover/CellWithPopover.tsx

@@ -1,6 +1,4 @@
 .ydb-node-host-wrapper {
-    display: flex;
-
     &__host-wrapper {
         display: flex;
 

src/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,6 +1,6 @@
 import block from 'bem-cn-lite';
 
-import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Button, PopoverBehavior} from '@gravity-ui/uikit';
 
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {NodeAddress} from '../../types/additionalProps';
@@ -10,6 +10,7 @@ import {isUnavailableNode} from '../../utils/nodes';
 import EntityStatus from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 import {IconWrapper} from '../Icon';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 
 import './NodeHostWrapper.scss';
 
@@ -34,33 +35,31 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
         : undefined;
 
     return (
-        <div className={b()}>
-            <Popover
-                disabled={!isNodeAvailable}
-                content={<NodeEndpointsTooltipContent data={node} />}
-                placement={['top', 'bottom']}
-                behavior={PopoverBehavior.Immediate}
-            >
-                <div className={b('host-wrapper')}>
-                    <EntityStatus
-                        name={node.Host}
-                        status={node.SystemState}
-                        path={nodePath}
-                        hasClipboardButton
-                        className={b('host')}
-                    />
-                    {nodeRef && (
-                        <Button
-                            size="s"
-                            href={nodeRef}
-                            className={b('external-button')}
-                            target="_blank"
-                        >
-                            <IconWrapper name="external" />
-                        </Button>
-                    )}
-                </div>
-            </Popover>
-        </div>
+        <CellWithPopover
+            disabled={!isNodeAvailable}
+            content={<NodeEndpointsTooltipContent data={node} />}
+            placement={['top', 'bottom']}
+            behavior={PopoverBehavior.Immediate}
+        >
+            <div className={b('host-wrapper')}>
+                <EntityStatus
+                    name={node.Host}
+                    status={node.SystemState}
+                    path={nodePath}
+                    hasClipboardButton
+                    className={b('host')}
+                />
+                {nodeRef && (
+                    <Button
+                        size="s"
+                        href={nodeRef}
+                        className={b('external-button')}
+                        target="_blank"
+                    >
+                        <IconWrapper name="external" />
+                    </Button>
+                )}
+            </div>
+        </CellWithPopover>
     );
 };

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -1,5 +1,4 @@
 import DataTable, {type Column} from '@gravity-ui/react-data-table';
-import {Popover} from '@gravity-ui/uikit';
 
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
@@ -13,6 +12,7 @@ import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {GetNodeRefFunc} from '../../types/additionalProps';
 import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
 import {UsageLabel} from '../../components/UsageLabel/UsageLabel';
+import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
 
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
@@ -76,7 +76,7 @@ const versionColumn: Column<NodesPreparedEntity> = {
     width: '200px',
     align: DataTable.LEFT,
     render: ({row}) => {
-        return <Popover content={row.Version}>{row.Version}</Popover>;
+        return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
     },
     sortable: false,
 };

src/containers/Nodes/getNodesColumns.tsx

@@ -28,20 +28,9 @@
         }
     }
     &__pool-name-wrapper {
-        display: flex;
-        align-items: flex-end;
-
         width: 230px;
     }
-    &__pool-name {
-        display: inline-block;
-        overflow: hidden;
 
-        max-width: 230px;
-
-        vertical-align: top;
-        text-overflow: ellipsis;
-    }
     &__usage-label {
         &_overload {
             color: var(--yc-color-text-light-primary);

src/containers/Storage/StorageGroups/StorageGroups.scss

@@ -12,6 +12,7 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {Stack} from '../../../components/Stack/Stack';
+import {CellWithPopover} from '../../../components/CellWithPopover/CellWithPopover';
 import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
 import i18n from './i18n';
@@ -58,17 +59,16 @@ const poolNameColumn: Column<PreparedStorageGroup> = {
     render: ({row}) => {
         const splitted = row.PoolName?.split('/');
         return (
-            <div className={b('pool-name-wrapper')}>
-                {splitted && (
-                    <Popover
-                        content={row.PoolName}
-                        placement={['right']}
-                        behavior={PopoverBehavior.Immediate}
-                    >
-                        <span className={b('pool-name')}>{splitted[splitted.length - 1]}</span>
-                    </Popover>
-                )}
-            </div>
+            splitted && (
+                <CellWithPopover
+                    wrapperClassName={b('pool-name-wrapper')}
+                    content={row.PoolName}
+                    placement={['right']}
+                    behavior={PopoverBehavior.Immediate}
+                >
+                    {splitted[splitted.length - 1]}
+                </CellWithPopover>
+            )
         );
     },
     align: DataTable.LEFT,