From 79dd23bc1ddcc8e27c73a7ec9e10a8952a3ae6a9 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@gmail.com>
Date: Tue, 25 Mar 2025 19:25:15 +0300
Subject: [PATCH 1/4] feat: add new popup menu icon

---
 src/components/EntityStatus/EntityStatus.scss | 21 +++++-
 src/components/EntityStatus/EntityStatus.tsx  | 56 +++++++++++----
 .../NodeHostWrapper/NodeHostWrapper.tsx       | 23 +++---
 .../TenantNameWrapper/TenantNameWrapper.tsx   | 71 +++++++++----------
 .../columns/StorageGroupsColumns.scss         |  9 +++
 .../Storage/StorageGroups/columns/columns.tsx | 18 +++--
 6 files changed, 129 insertions(+), 69 deletions(-)

diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
index b0f864aabf..d229608b77 100644
--- a/src/components/EntityStatus/EntityStatus.scss
+++ b/src/components/EntityStatus/EntityStatus.scss
@@ -16,6 +16,7 @@
         margin-right: var(--g-spacing-2);
     }
 
+    &__info-icon,
     &__clipboard-button {
         color: var(--g-color-text-secondary);
 
@@ -26,14 +27,30 @@
         }
     }
 
+    &__info-icon {
+        &:hover {
+            color: var(--g-color-text-primary);
+        }
+    }
+
     &__wrapper {
         position: relative;
 
         overflow: hidden;
 
-        &_with-button {
+        &_with-clipboard-button {
             padding-right: var(--button-width);
         }
+
+        &_with-info-button {
+            padding-right: var(--button-width);
+        }
+
+        &_with-clipboard-button {
+            &.entity-status__wrapper_with-info-button {
+                padding-right: calc(2 * var(--button-width));
+            }
+        }
     }
 
     &__controls-wrapper {
@@ -51,6 +68,8 @@
         &_visible {
             width: min-content;
             padding: var(--g-spacing-1);
+
+            background-color: var(--g-color-base-background);
         }
 
         .data-table__row:hover &,
diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
index bfe32e6969..88dc9054b9 100644
--- a/src/components/EntityStatus/EntityStatus.tsx
+++ b/src/components/EntityStatus/EntityStatus.tsx
@@ -1,4 +1,7 @@
-import {ClipboardButton, Link as UIKitLink} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {CircleInfo} from '@gravity-ui/icons';
+import {Button, ClipboardButton, Icon, Popover, Link as UIKitLink} from '@gravity-ui/uikit';
 
 import {EFlag} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
@@ -25,6 +28,7 @@ interface EntityStatusProps {
     withLeftTrim?: boolean;
 
     hasClipboardButton?: boolean;
+    infoPopoverContent?: React.ReactNode;
     clipboardButtonAlwaysVisible?: boolean;
 
     className?: string;
@@ -45,10 +49,13 @@ export function EntityStatus({
     withLeftTrim = false,
 
     hasClipboardButton,
+    infoPopoverContent,
     clipboardButtonAlwaysVisible = false,
 
     className,
 }: EntityStatusProps) {
+    const [infoIconHovered, setInfoIconHovered] = React.useState(false);
+
     const renderIcon = () => {
         if (!showStatus) {
             return null;
@@ -90,24 +97,49 @@ export function EntityStatus({
                 </span>
             )}
             {(path || name) && (
-                <div className={b('wrapper', {'with-button': hasClipboardButton})}>
+                <div
+                    className={b('wrapper', {
+                        'with-clipboard-button': hasClipboardButton,
+                        'with-info-button': Boolean(infoPopoverContent),
+                    })}
+                >
                     <span className={b('link', {'with-left-trim': withLeftTrim})} title={name}>
                         {renderLink()}
                     </span>
-                    {hasClipboardButton && (
+                    {(hasClipboardButton || infoPopoverContent) && (
                         <div
                             className={b('controls-wrapper', {
-                                visible: clipboardButtonAlwaysVisible,
+                                visible: clipboardButtonAlwaysVisible || infoIconHovered,
                             })}
                         >
-                            <ClipboardButton
-                                text={name}
-                                size="xs"
-                                view="normal"
-                                className={b('clipboard-button', {
-                                    visible: clipboardButtonAlwaysVisible,
-                                })}
-                            />
+                            {infoPopoverContent && (
+                                <Popover
+                                    className={b('info-popover')}
+                                    content={infoPopoverContent}
+                                    placement={['top-start', 'bottom-start']}
+                                    onOpenChange={(visible) => setInfoIconHovered(visible)}
+                                >
+                                    <Button view="normal" size="xs">
+                                        <Icon
+                                            data={CircleInfo}
+                                            className={b('info-icon', {
+                                                visible:
+                                                    clipboardButtonAlwaysVisible || infoIconHovered,
+                                            })}
+                                        />
+                                    </Button>
+                                </Popover>
+                            )}
+                            {hasClipboardButton && (
+                                <ClipboardButton
+                                    text={name}
+                                    size="xs"
+                                    view="normal"
+                                    className={b('clipboard-button', {
+                                        visible: clipboardButtonAlwaysVisible || infoIconHovered,
+                                    })}
+                                />
+                            )}
                         </div>
                     )}
                 </div>
diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
index 6ddf3ca374..df50320cb1 100644
--- a/src/components/NodeHostWrapper/NodeHostWrapper.tsx
+++ b/src/components/NodeHostWrapper/NodeHostWrapper.tsx
@@ -1,5 +1,3 @@
-import {PopoverBehavior} from '@gravity-ui/uikit';
-
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import type {GetNodeRefFunc, NodeAddress} from '../../types/additionalProps';
 import type {TNodeInfo, TSystemStateInfo} from '../../types/api/nodes';
@@ -8,7 +6,6 @@ import {
     createDeveloperUILinkWithNodeId,
 } from '../../utils/developerUI/developerUI';
 import {isUnavailableNode} from '../../utils/nodes';
-import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 
@@ -64,14 +61,16 @@ export const NodeHostWrapper = ({
         : undefined;
 
     return (
-        <CellWithPopover
-            disabled={!isNodeAvailable}
-            content={<NodeEndpointsTooltipContent data={node} nodeHref={developerUIInternalHref} />}
-            placement={['top', 'bottom']}
-            behavior={PopoverBehavior.Immediate}
-            delayClosing={200}
-        >
-            <EntityStatus name={node.Host} status={status} path={nodePath} hasClipboardButton />
-        </CellWithPopover>
+        <EntityStatus
+            name={node.Host}
+            status={status}
+            path={nodePath}
+            hasClipboardButton
+            infoPopoverContent={
+                isNodeAvailable ? (
+                    <NodeEndpointsTooltipContent data={node} nodeHref={developerUIInternalHref} />
+                ) : null
+            }
+        />
     );
 };
diff --git a/src/components/TenantNameWrapper/TenantNameWrapper.tsx b/src/components/TenantNameWrapper/TenantNameWrapper.tsx
index 65f1799c9f..5f51743346 100644
--- a/src/components/TenantNameWrapper/TenantNameWrapper.tsx
+++ b/src/components/TenantNameWrapper/TenantNameWrapper.tsx
@@ -1,10 +1,9 @@
-import {DefinitionList, Flex, PopoverBehavior} from '@gravity-ui/uikit';
+import {DefinitionList, Flex} from '@gravity-ui/uikit';
 
 import {getTenantPath} from '../../containers/Tenant/TenantPages';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps, NodeAddress} from '../../types/additionalProps';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
-import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 
@@ -41,43 +40,37 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
     const monitoringLink = additionalTenantsProps?.getMonitoringLink?.(tenant.Name, tenant.Type);
     const logsLink = additionalTenantsProps?.getLogsLink?.(tenant.Name);
 
+    const infoPopoverContent =
+        (monitoringLink || logsLink) && isUserAllowedToMakeChanges ? (
+            <DefinitionList responsive>
+                <DefinitionList.Item name={i18n('field_links')}>
+                    <Flex gap={2} wrap="wrap">
+                        {monitoringLink && (
+                            <LinkWithIcon
+                                title={i18n('field_monitoring-link')}
+                                url={monitoringLink}
+                            />
+                        )}
+                        {logsLink && (
+                            <LinkWithIcon title={i18n('field_logs-link')} url={logsLink} />
+                        )}
+                    </Flex>
+                </DefinitionList.Item>
+            </DefinitionList>
+        ) : null;
+
     return (
-        <CellWithPopover
-            disabled={!isUserAllowedToMakeChanges || (!monitoringLink && !logsLink)}
-            delayClosing={200}
-            content={
-                monitoringLink || logsLink ? (
-                    <DefinitionList responsive>
-                        <DefinitionList.Item name={i18n('field_links')}>
-                            <Flex gap={2} wrap="wrap">
-                                {monitoringLink && (
-                                    <LinkWithIcon
-                                        title={i18n('field_monitoring-link')}
-                                        url={monitoringLink}
-                                    />
-                                )}
-                                {logsLink && (
-                                    <LinkWithIcon title={i18n('field_logs-link')} url={logsLink} />
-                                )}
-                            </Flex>
-                        </DefinitionList.Item>
-                    </DefinitionList>
-                ) : null
-            }
-            placement={['top', 'bottom']}
-            behavior={PopoverBehavior.Immediate}
-        >
-            <EntityStatus
-                externalLink={isExternalLink}
-                name={tenant.Name || i18n('context_unknown')}
-                withLeftTrim={true}
-                status={tenant.Overall}
-                hasClipboardButton
-                path={getTenantPath({
-                    database: tenant.Name,
-                    backend,
-                })}
-            />
-        </CellWithPopover>
+        <EntityStatus
+            externalLink={isExternalLink}
+            name={tenant.Name || i18n('context_unknown')}
+            withLeftTrim={true}
+            status={tenant.Overall}
+            infoPopoverContent={infoPopoverContent}
+            hasClipboardButton
+            path={getTenantPath({
+                database: tenant.Name,
+                backend,
+            })}
+        />
     );
 }
diff --git a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
index 413cc84d45..e0af959083 100644
--- a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
+++ b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .ydb-storage-groups-columns {
     &__vdisks-column,
     &__disks-column {
@@ -17,6 +19,13 @@
     }
 
     &__group-id {
+        margin-right: var(--g-spacing-1);
         font-weight: 500;
     }
+
+    &__clipboard-button {
+        color: var(--g-color-text-secondary);
+
+        @include mixins.table-hover-appearing-button();
+    }
 }
diff --git a/src/containers/Storage/StorageGroups/columns/columns.tsx b/src/containers/Storage/StorageGroups/columns/columns.tsx
index 68b3a57e22..e93321c4d2 100644
--- a/src/containers/Storage/StorageGroups/columns/columns.tsx
+++ b/src/containers/Storage/StorageGroups/columns/columns.tsx
@@ -1,6 +1,6 @@
 import {ShieldKeyhole} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {ClipboardButton, Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPopover';
 import {InternalLink} from '../../../../components/InternalLink';
@@ -144,12 +144,20 @@ const diskSpaceUsageColumn: StorageGroupsColumn = {
 const groupIdColumn: StorageGroupsColumn = {
     name: STORAGE_GROUPS_COLUMNS_IDS.GroupId,
     header: STORAGE_GROUPS_COLUMNS_TITLES.GroupId,
-    width: 130,
+    width: 140,
     render: ({row}) => {
         return row.GroupId ? (
-            <InternalLink className={b('group-id')} to={getStorageGroupPath(row.GroupId)}>
-                {row.GroupId}
-            </InternalLink>
+            <div className={b('group-id-wrapper')}>
+                <InternalLink className={b('group-id')} to={getStorageGroupPath(row.GroupId)}>
+                    {row.GroupId}
+                </InternalLink>
+                <ClipboardButton
+                    text={String(row.GroupId)}
+                    className={b('clipboard-button')}
+                    size="xs"
+                    view="normal"
+                />
+            </div>
         ) : (
             '-'
         );

From 346601843e4566e898d62168b965387084eba904 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@gmail.com>
Date: Tue, 25 Mar 2025 19:31:08 +0300
Subject: [PATCH 2/4] fix: lint

---
 .../Storage/StorageGroups/columns/StorageGroupsColumns.scss      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
index e0af959083..56a260f604 100644
--- a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
+++ b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
@@ -20,6 +20,7 @@
 
     &__group-id {
         margin-right: var(--g-spacing-1);
+
         font-weight: 500;
     }
 

From f912e0f18c38df8a357565503d6cce63dd6d6957 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@gmail.com>
Date: Wed, 26 Mar 2025 14:56:59 +0300
Subject: [PATCH 3/4] fix: design nanofixes

---
 src/components/EntityStatus/EntityStatus.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx
index 88dc9054b9..b4ac4b71c1 100644
--- a/src/components/EntityStatus/EntityStatus.tsx
+++ b/src/components/EntityStatus/EntityStatus.tsx
@@ -116,12 +116,14 @@ export function EntityStatus({
                                 <Popover
                                     className={b('info-popover')}
                                     content={infoPopoverContent}
+                                    tooltipOffset={[-4, 4]}
                                     placement={['top-start', 'bottom-start']}
                                     onOpenChange={(visible) => setInfoIconHovered(visible)}
                                 >
                                     <Button view="normal" size="xs">
                                         <Icon
                                             data={CircleInfo}
+                                            size="12"
                                             className={b('info-icon', {
                                                 visible:
                                                     clipboardButtonAlwaysVisible || infoIconHovered,

From b9abbf1593ccab22b28783fa56c1b64c1464ff91 Mon Sep 17 00:00:00 2001
From: Anton Standrik <astandrik@gmail.com>
Date: Thu, 27 Mar 2025 17:23:36 +0300
Subject: [PATCH 4/4] fix: review fixes

---
 src/components/EntityStatus/EntityStatus.scss | 16 ++++++++++++-
 .../columns/StorageGroupsColumns.scss         |  6 -----
 .../Storage/StorageGroups/columns/columns.tsx | 23 ++++++++-----------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
index d229608b77..d1cfc99b0a 100644
--- a/src/components/EntityStatus/EntityStatus.scss
+++ b/src/components/EntityStatus/EntityStatus.scss
@@ -98,13 +98,27 @@
         display: inline-block;
         overflow: hidden;
 
-        width: calc(100% + var(--button-width));
+        width: 100%;
         margin-top: 5px;
 
         white-space: nowrap;
         text-overflow: ellipsis;
     }
 
+    &__wrapper_with-clipboard-button &__link {
+        width: calc(100% + var(--button-width));
+    }
+
+    &__wrapper_with-info-button &__link {
+        width: calc(100% + var(--button-width));
+    }
+
+    &__wrapper_with-clipboard-button {
+        &.entity-status__wrapper_with-info-button .entity-status__link {
+            width: calc(100% + 2 * var(--button-width));
+        }
+    }
+
     &__link_with-left-trim {
         text-align: end;
         direction: rtl;
diff --git a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
index 56a260f604..63b377730a 100644
--- a/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
+++ b/src/containers/Storage/StorageGroups/columns/StorageGroupsColumns.scss
@@ -23,10 +23,4 @@
 
         font-weight: 500;
     }
-
-    &__clipboard-button {
-        color: var(--g-color-text-secondary);
-
-        @include mixins.table-hover-appearing-button();
-    }
 }
diff --git a/src/containers/Storage/StorageGroups/columns/columns.tsx b/src/containers/Storage/StorageGroups/columns/columns.tsx
index e93321c4d2..07fccf54b7 100644
--- a/src/containers/Storage/StorageGroups/columns/columns.tsx
+++ b/src/containers/Storage/StorageGroups/columns/columns.tsx
@@ -1,9 +1,9 @@
 import {ShieldKeyhole} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import {ClipboardButton, Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPopover';
-import {InternalLink} from '../../../../components/InternalLink';
+import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {StatusIcon} from '../../../../components/StatusIcon/StatusIcon';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
 import {getStorageGroupPath} from '../../../../routes';
@@ -147,23 +147,18 @@ const groupIdColumn: StorageGroupsColumn = {
     width: 140,
     render: ({row}) => {
         return row.GroupId ? (
-            <div className={b('group-id-wrapper')}>
-                <InternalLink className={b('group-id')} to={getStorageGroupPath(row.GroupId)}>
-                    {row.GroupId}
-                </InternalLink>
-                <ClipboardButton
-                    text={String(row.GroupId)}
-                    className={b('clipboard-button')}
-                    size="xs"
-                    view="normal"
-                />
-            </div>
+            <EntityStatus
+                name={String(row.GroupId)}
+                path={getStorageGroupPath(row.GroupId)}
+                hasClipboardButton
+                showStatus={false}
+            />
         ) : (
             '-'
         );
     },
     sortAccessor: (row) => Number(row.GroupId),
-    align: DataTable.RIGHT,
+    align: DataTable.LEFT,
 };
 
 const usedColumn: StorageGroupsColumn = {