feat: add new popup menu icon

astandrik · astandrik · commit 79dd23bc1ddc · 2025-03-25T19:25:15.000+03:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
         ) : (
             '-'
         );

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../styles/mixins.scss';`
	`2`	`+`
`1`	`3`	`.ydb-storage-groups-columns {`
`2`	`4`	`&__vdisks-column,`
`3`	`5`	`&__disks-column {`
`@@ -17,6 +19,13 @@`
`17`	`19`	`}`
`18`	`20`
`19`	`21`	`&__group-id {`
	`22`	`+ margin-right: var(--g-spacing-1);`
`20`	`23`	`font-weight: 500;`
`21`	`24`	`}`
	`25`	`+`
	`26`	`+ &__clipboard-button {`
	`27`	`+ color: var(--g-color-text-secondary);`
	`28`	`+`
	`29`	`+ @include mixins.table-hover-appearing-button();`
	`30`	`+ }`
`22`	`31`	`}`