fix: fix incorrect truncate strings with popover

ydb-platform · Oct 23, 2023 · eb62001 · eb62001
1 parent 241227e
commit eb62001
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 51 deletions.
diff --git a/src/components/CellWithPopover/CellWithPopover.scss b/src/components/CellWithPopover/CellWithPopover.scss
@@ -0,0 +1,13 @@
+.ydb-cell-with-popover {
+    display: inline-block;
+    overflow: hidden;
+
+    max-width: 100%;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &__wrapper {
+        display: flex;
+    }
+}
diff --git a/src/components/CellWithPopover/CellWithPopover.tsx b/src/components/CellWithPopover/CellWithPopover.tsx
@@ -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('wrapper', wrapperClassName)}>
+            <Popover className={b(null, className)} {...props}>
+                {children}
+            </Popover>
+        </div>
+    );
+}
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.scss b/src/components/NodeHostWrapper/NodeHostWrapper.scss
@@ -1,6 +1,4 @@
 .ydb-node-host-wrapper {
-    display: flex;
-
     &__host-wrapper {
         display: flex;
 

diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
@@ -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>
     );
 };
diff --git a/src/containers/Nodes/getNodesColumns.tsx b/src/containers/Nodes/getNodesColumns.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,
 };

diff --git a/src/containers/Storage/StorageGroups/StorageGroups.scss b/src/containers/Storage/StorageGroups/StorageGroups.scss
@@ -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);

diff --git a/src/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx b/src/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx
@@ -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,18 @@ const poolNameColumn: Column<PreparedStorageGroup> = {
     render: ({row}) => {
         const splitted = row.PoolName?.split('/');
         return (
-            <div className={b('pool-name-wrapper')}>
+            <>
                 {splitted && (
-                    <Popover
+                    <CellWithPopover
+                        wrapperClassName={b('pool-name-wrapper')}
                         content={row.PoolName}
                         placement={['right']}
                         behavior={PopoverBehavior.Immediate}
                     >
-                        <span className={b('pool-name')}>{splitted[splitted.length - 1]}</span>
-                    </Popover>
+                        {splitted[splitted.length - 1]}
+                    </CellWithPopover>
                 )}
-            </div>
+            </>
         );
     },
     align: DataTable.LEFT,
@@ -83,8 +85,8 @@ const kindColumn: Column<PreparedStorageGroup> = {
             <Label>{row.Kind || '—'}</Label>
             {' '}
             {row.Encryption && (
-                <Popover
-                    content={i18n('encrypted')}
+                <Popover 
+                    content={i18n('encrypted')} 
                     placement="right"
                     behavior={PopoverBehavior.Immediate}
                 >