ydb-embedded-ui 22.4.0 → 22.5.0

package/src/components/DiskCapacityInfo/DiskCapacityInfo.tsx

@@ -1,10 +1,5 @@
-import React from 'react';
-
-import {Label} from '@gravity-ui/uikit';
-
 import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
-import {isCapacityAlert} from '../../types/api/enums';
-import {getCapacityAlertTheme, normalizeCapacityAlert} from '../../utils/capacityAlerts';
+import {normalizeCapacityAlert} from '../../utils/capacityAlerts';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
 import type {PreparedPDisk, PreparedVDisk} from '../../utils/disks/types';
@@ -15,11 +10,8 @@ import {
     formatStorageMetricPair,
 } from '../../utils/storageMetrics';
 import {DiskCapacityAlertLabel} from '../DiskStatus/DiskStatus';
-import type {InfoViewerItem} from '../InfoViewer';
 import {pDiskInfoKeyset} from '../PDiskInfo/i18n';
-import {TitleWithHelpMark} from '../TitleWithHelpmark/TitleWithHelpmark';
 import {vDiskInfoKeyset} from '../VDiskInfo/i18n';
-import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
 import {
     CAPACITY_CONFIGURATION_HELP_TEXT,
     CAPACITY_METRICS_COLUMN_TITLES,
@@ -29,139 +21,6 @@ import {formatCapacityUnitCount} from '../capacityMetricsColumns/formatters';
 
 import i18n from './i18n';
 
-export interface DiskCapacityInfoItem {
-    id: string;
-    title: string;
-    value: React.ReactNode;
-    note?: string;
-}
-
-function getCapacityAlertValue(value: unknown): React.ReactNode {
-    return normalizeCapacityAlert(value) ?? EMPTY_DATA_PLACEHOLDER;
-}
-
-function getAlertAwareUsageValue(value: string, capacityAlertValue: unknown): React.ReactNode {
-    if (value === EMPTY_DATA_PLACEHOLDER) {
-        return value;
-    }
-
-    const capacityAlert = normalizeCapacityAlert(capacityAlertValue);
-    const theme = isCapacityAlert(capacityAlert) ? getCapacityAlertTheme(capacityAlert) : 'normal';
-
-    return <Label theme={theme}>{value}</Label>;
-}
-
-export function getVDiskCapacityInfoItems(
-    data: PreparedVDisk | undefined,
-    {withRawUsage}: {withRawUsage: boolean},
-): DiskCapacityInfoItem[] {
-    const sizeData = data?.WhiteboardSize ?? data?.DisplaySize ?? data;
-    const items: DiskCapacityInfoItem[] = [
-        {
-            id: 'size',
-            title: i18n('field_size'),
-            value: formatStorageMetricPair(sizeData?.AllocatedSize, sizeData?.SizeLimit),
-        },
-        {
-            id: 'vdisk-slot-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
-            value: getAlertAwareUsageValue(
-                formatMetricPercent(data?.VDiskSlotUsage),
-                data?.CapacityAlert,
-            ),
-            note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskSlotUsage,
-        },
-    ];
-
-    if (withRawUsage) {
-        items.push({
-            id: 'vdisk-raw-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
-            value: formatMetricPercent(data?.VDiskRawUsage),
-            note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskRawUsage,
-        });
-    }
-
-    items.push(
-        {
-            id: 'group-size-in-units',
-            title: i18n('field_group-size-in-units'),
-            value: formatCapacityUnitCount(data?.GroupSizeInUnits),
-            note: CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits,
-        },
-        {
-            id: 'capacity-alert',
-            title: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
-            value: getCapacityAlertValue(data?.CapacityAlert),
-            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
-        },
-    );
-
-    return items;
-}
-
-export function getPDiskCapacityInfoItems(
-    data: PreparedPDisk | undefined,
-    {
-        withUsage,
-        withCapacityAlert,
-        fixedDecimalPlaces,
-        useWhiteboardSize = true,
-    }: {
-        withUsage: boolean;
-        withCapacityAlert: boolean;
-        fixedDecimalPlaces?: number;
-        useWhiteboardSize?: boolean;
-    },
-): DiskCapacityInfoItem[] {
-    const sizeData = useWhiteboardSize ? (data?.WhiteboardSize ?? data) : data;
-    const items: DiskCapacityInfoItem[] = [
-        {
-            id: 'space',
-            title: i18n('field_space'),
-            value: formatStorageMetricPair(
-                sizeData?.AllocatedSize,
-                sizeData?.TotalSize,
-                fixedDecimalPlaces,
-            ),
-        },
-    ];
-
-    if (withUsage) {
-        items.push({
-            id: 'pdisk-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxPDiskUsage,
-            value: formatMetricPercent(data?.PDiskUsage, fixedDecimalPlaces),
-            note: CAPACITY_METRICS_HELP_TEXT.MaxPDiskUsage,
-        });
-    }
-
-    items.push(
-        {
-            id: 'slots',
-            title: i18n('field_slots'),
-            value: formatMetricCountPair(data?.NumActiveSlots, data?.ExpectedSlotCount),
-        },
-        {
-            id: 'slot-size-in-units',
-            title: i18n('field_slot-size-in-units'),
-            value: formatCapacityUnitCount(data?.SlotSizeInUnits),
-            note: CAPACITY_CONFIGURATION_HELP_TEXT.SlotSizeInUnits,
-        },
-    );
-
-    if (withCapacityAlert) {
-        items.push({
-            id: 'capacity-alert',
-            title: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
-            value: getCapacityAlertValue(data?.PDiskCapacityAlert),
-            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
-        });
-    }
-
-    return items;
-}
-
 export function getVDiskCapacityItems(
     data: PreparedVDisk,
     {capacityMetricsEnabled}: {capacityMetricsEnabled: boolean},
@@ -206,42 +65,49 @@ export function getPDiskCapacityItems(
     data: PreparedPDisk,
     {useWhiteboardSize = true}: {useWhiteboardSize?: boolean} = {},
 ): DiskDetailItem[] {
-    const fieldOrder = ['slot-size-in-units', 'space', 'capacity-alert', 'pdisk-usage', 'slots'];
-    const capacityItems = getPDiskCapacityInfoItems(data, {
-        withUsage: true,
-        withCapacityAlert: true,
-        fixedDecimalPlaces: 2,
-        useWhiteboardSize,
-    });
-    const items: DiskDetailItem[] = [];
-    for (const id of fieldOrder) {
-        const field = capacityItems.find((item) => item.id === id);
-        if (field) {
-            items.push({
-                id,
-                name: field.title,
-                content:
-                    id === 'capacity-alert' ? (
-                        <DiskCapacityAlertLabel value={data.PDiskCapacityAlert} />
-                    ) : (
-                        field.value
-                    ),
-                note: id === 'slots' ? pDiskInfoKeyset('context_slots') : field.note,
-            });
-        }
-    }
-    return items;
+    const size = useWhiteboardSize ? (data.WhiteboardSize ?? data) : data;
+    return [
+        {
+            id: 'slot-size-in-units',
+            name: i18n('field_slot-size-in-units'),
+            content: formatCapacityUnitCount(data.SlotSizeInUnits),
+            note: CAPACITY_CONFIGURATION_HELP_TEXT.SlotSizeInUnits,
+        },
+        {
+            id: 'space',
+            name: i18n('field_space'),
+            content: formatStorageMetricPair(size.AllocatedSize, size.TotalSize, 2),
+        },
+        {
+            id: 'capacity-alert',
+            name: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
+            content: <DiskCapacityAlertLabel value={data.PDiskCapacityAlert} />,
+            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
+        },
+        {
+            id: 'pdisk-usage',
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxPDiskUsage,
+            content: formatMetricPercent(data.PDiskUsage, 2),
+            note: CAPACITY_METRICS_HELP_TEXT.MaxPDiskUsage,
+        },
+        {
+            id: 'slots',
+            name: i18n('field_slots'),
+            content: formatMetricCountPair(data.NumActiveSlots, data.ExpectedSlotCount),
+            note: pDiskInfoKeyset('context_slots'),
+        },
+    ];
 }
 
 export function getStorageGroupCapacityInfoItems(
     data: PreparedStorageGroup | undefined,
-): DiskCapacityInfoItem[] {
+): DiskDetailItem[] {
     const capacityAlert = normalizeCapacityAlert(data?.CapacityAlert);
     return [
         {
             id: 'capacity-alert',
-            title: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
-            value: capacityAlert ? (
+            name: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
+            content: capacityAlert ? (
                 <DiskCapacityAlertLabel value={capacityAlert} />
             ) : (
                 EMPTY_DATA_PLACEHOLDER
@@ -250,26 +116,15 @@ export function getStorageGroupCapacityInfoItems(
         },
         {
             id: 'vdisk-slot-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
-            value: formatNormalizedMetricPercent(data?.MaxVDiskSlotUsage),
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
+            content: formatNormalizedMetricPercent(data?.MaxVDiskSlotUsage),
             note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskSlotUsage,
         },
         {
             id: 'vdisk-raw-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
-            value: formatNormalizedMetricPercent(data?.MaxVDiskRawUsage),
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
+            content: formatNormalizedMetricPercent(data?.MaxVDiskRawUsage),
             note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskRawUsage,
         },
     ];
 }
-
-export function toDefinitionListItems(items: DiskCapacityInfoItem[]): YDBDefinitionListItem[] {
-    return items.map(({title, value, note}) => ({name: title, content: value, note}));
-}
-
-export function toInfoViewerItems(items: DiskCapacityInfoItem[]): InfoViewerItem[] {
-    return items.map(({title, value, note}) => ({
-        label: note ? <TitleWithHelpMark header={title} note={note} /> : title,
-        value,
-    }));
-}

package/src/components/DiskCapacityInfo/i18n/en.json

@@ -1,5 +1,4 @@
 {
-  "field_size": "Size",
   "field_space": "Space",
   "field_slots": "Slots",
   "field_group-size-in-units": "Group Size In Units",

package/src/components/EntityStatus/EntityStatus.scss

@@ -1,6 +1,11 @@
 @use '../../styles/mixins.scss';
 
 .ydb-entity-status {
+    &__compact {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
     &__note {
         color: inherit;
     }

package/src/components/EntityStatus/EntityStatus.tsx

@@ -44,31 +44,64 @@ const EFlagToStatusName: Record<EFlag, string> = {
     },
 };
 
-interface EntityStatusLabelProps {
+interface EntityStatusLabelBaseProps {
     status: EFlag;
+    className?: string;
+    size?: LabelProps['size'];
+    iconSize?: number;
+    qa?: string;
+}
+
+interface DefaultEntityStatusLabelProps {
+    view?: 'default';
     note?: React.ReactNode;
     children?: React.ReactNode;
-    className?: string;
     endContent?: React.ReactNode;
     withStatusName?: boolean;
-    size?: LabelProps['size'];
-    iconSize?: number;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    qa?: string;
 }
 
+interface CompactEntityStatusLabelProps {
+    view: 'compact';
+    note?: never;
+    children?: never;
+    endContent?: never;
+    withStatusName?: never;
+    onClick?: never;
+}
+
+type EntityStatusLabelProps = EntityStatusLabelBaseProps &
+    (DefaultEntityStatusLabelProps | CompactEntityStatusLabelProps);
+
 function EntityStatusLabel({
     children,
     className,
     endContent,
     status,
     withStatusName = true,
+    view = 'default',
     note,
     size = 'm',
     iconSize = 14,
     onClick,
     qa,
 }: EntityStatusLabelProps) {
+    if (view === 'compact') {
+        const statusName = EFlagToStatusName[status];
+        return (
+            <ActionTooltip title={statusName}>
+                <span className={b('compact')} role="img" aria-label={statusName}>
+                    <Label
+                        theme={status === EFlag.Blue ? 'info' : EFlagToLabelTheme[status]}
+                        icon={<StatusIcon size={iconSize} status={status} />}
+                        size={size}
+                        className={b(null, className)}
+                        qa={qa}
+                    />
+                </span>
+            </ActionTooltip>
+        );
+    }
     const theme = EFlagToLabelTheme[status];
     const isClickable = Boolean(onClick);
     return (

package/src/components/EvictVDiskButton/EvictVDiskButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ArrowsOppositeToDots} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
+import type {ButtonProps} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
 import {
@@ -10,6 +11,7 @@ import {
 } from '../../store/reducers/capabilities/hooks';
 import type {ModifyDiskResponse} from '../../types/api/modifyDisk';
 import type {TVDiskID} from '../../types/api/vdisk';
+import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {ButtonWithConfirmDialog} from '../ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 
@@ -19,7 +21,9 @@ interface EvictVDiskButtonProps {
     vDiskId: Required<TVDiskID>;
     donorMode?: boolean;
     fullWidth?: boolean;
-    onSuccess?: () => void;
+    view?: ButtonProps['view'];
+    onSuccess?: (isDialogOpen: boolean) => void;
+    onDialogOpen?: () => VoidFunction;
 }
 
 export function isAllVdiskParamsDefined(vDiskId?: TVDiskID): vDiskId is Required<TVDiskID> {
@@ -36,7 +40,9 @@ export const EvictVDiskButton = ({
     vDiskId,
     donorMode,
     fullWidth,
+    view = 'normal',
     onSuccess,
+    onDialogOpen,
 }: EvictVDiskButtonProps) => {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
@@ -79,8 +85,10 @@ export const EvictVDiskButton = ({
         <ButtonWithConfirmDialog
             onConfirmAction={handleEvictVDisk}
             onConfirmActionSuccess={onSuccess}
+            onDialogOpen={onDialogOpen}
             buttonDisabled={!isUserAllowedToMakeChanges || donorMode}
-            buttonView="normal"
+            buttonView={view}
+            buttonClassName={view === 'action' ? BRAND_BUTTON_CLASS : undefined}
             buttonWidth={fullWidth ? 'max' : undefined}
             dialogHeader={evictVDiskButtonKeyset('title_evict-dialog')}
             dialogText={evictVDiskButtonKeyset('confirm_evict')}

package/src/components/EvictVDiskButton/i18n/en.json

@@ -3,8 +3,8 @@
   "action_evict-short": "Evict",
   "action_force-evict": "Evict anyway",
   "title_evict-dialog": "Evict VDisk?",
-  "confirm_evict": "The VDisk will be evicted from the PDisk. This VDisk will be replaced by a new one in the group. Data will be replicated to the new disk. The old VDisk will serve as a donor until replication is complete, and then it will be removed.",
-  "alert_evict": "This operation cannot be cancelled.",
+  "confirm_evict": "The VDisk will be evicted from the PDisk.",
+  "alert_evict": "This VDisk will be replaced by a new one in the group. Data will be replicated to the new disk. The old VDisk will serve as\u00a0a\u00a0donor until replication is complete, and then it will be\u00a0removed.",
   "alert_not-allowed": "You don't have enough rights to evict VDisk",
   "alert_donor-mode-impossible": "Evicting a donor VDisk is not possible"
 }

package/src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -5,7 +5,7 @@ import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatStorageValues} from '../../utils/dataFormatters/dataFormatters';
 import {useNodeDeveloperUIHref} from '../../utils/hooks/useNodeDeveloperUIHref';
-import {isNumeric} from '../../utils/utils';
+import {getNodeMemory} from '../../utils/memory';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
@@ -90,18 +90,13 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
         return <div className="error">{i18n('no-data')}</div>;
     }
 
-    const memoryUsed = isNumeric(node.MemoryUsed) ? Number(node.MemoryUsed) : undefined;
-    const memoryLimit = isNumeric(node.MemoryLimit) ? Number(node.MemoryLimit) : undefined;
-    const hasMemoryUsed =
-        memoryUsed !== undefined && Number.isFinite(memoryUsed) && memoryUsed >= 0;
-    const hasMemoryLimit =
-        memoryLimit !== undefined && Number.isFinite(memoryLimit) && memoryLimit > 0;
+    const {memoryUsed, memoryLimit} = getNodeMemory(node);
 
     const renderMemory = () => {
-        if (!hasMemoryUsed) {
+        if (memoryUsed === undefined) {
             return EMPTY_DATA_PLACEHOLDER;
         }
-        if (!hasMemoryLimit) {
+        if (memoryLimit === undefined) {
             return formatMemoryValues(memoryUsed)[0];
         }
 

package/src/components/HoverPopup/HoverPopup.tsx

@@ -44,7 +44,10 @@ function useVisibleAnchor(
 
 type HoverPopupProps = {
     children: React.ReactNode;
-    renderPopupContent: (controls: {onClose: VoidFunction}) => React.ReactNode;
+    renderPopupContent: (controls: {
+        onClose: VoidFunction;
+        holdOpen: () => VoidFunction;
+    }) => React.ReactNode;
     showPopup?: boolean;
     anchorRef?: React.RefObject<HTMLElement>;
     onShowPopup?: VoidFunction;
@@ -72,8 +75,11 @@ export const HoverPopup = ({
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
     const [isFocused, setIsFocused] = React.useState(false);
+    const [hoverClosing, setHoverClosing] = React.useState(false);
+    const dialogHoldRef = React.useRef<object | null>(null);
 
     const anchor = React.useRef<HTMLSpanElement>(null);
+    const popupContent = React.useRef<HTMLDivElement>(null);
     const {activate, zIndex} = usePopupPriority();
     const bringToFront = useEventHandler(() => activate(anchorRef?.current || anchor.current));
 
@@ -102,32 +108,36 @@ export const HoverPopup = ({
         [delayOpen, reportOpen],
     );
 
-    const hidePopup = React.useCallback(() => {
+    const hidePopup = useEventHandler(() => {
+        if (dialogHoldRef.current || isFocused) {
+            return;
+        }
+        setHoverClosing(open && visibleAnchorRef.current === anchorElement);
         setIsPopupVisible(false);
-    }, []);
+        reportOpen(false);
+    });
 
     const debouncedHandleHidePopup = React.useMemo(
-        () =>
-            debounce(() => {
-                hidePopup();
-                reportOpen(false);
-            }, delayClose),
-        [delayClose, reportOpen, hidePopup],
+        () => debounce(hidePopup, delayClose),
+        [delayClose, hidePopup],
     );
 
     React.useEffect(() => {
         return () => {
             debouncedHandleShowPopup.cancel();
             debouncedHandleHidePopup.cancel();
+            dialogHoldRef.current = null;
         };
     }, [debouncedHandleShowPopup, debouncedHandleHidePopup]);
 
     const closePopup = React.useCallback(() => {
         debouncedHandleShowPopup.cancel();
         debouncedHandleHidePopup.cancel();
+        dialogHoldRef.current = null;
         setIsPopupVisible(false);
         setIsPopupContentHovered(false);
         setIsFocused(false);
+        setHoverClosing(false);
         reportOpen(false, true);
         onClosePopup?.();
     }, [debouncedHandleHidePopup, debouncedHandleShowPopup, onClosePopup, reportOpen]);
@@ -136,6 +146,7 @@ export const HoverPopup = ({
         debouncedHandleShowPopup.cancel();
         setIsPopupContentHovered(false);
         setIsFocused(false);
+        setHoverClosing(false);
         debouncedHandleHidePopup();
     });
 
@@ -146,11 +157,59 @@ export const HoverPopup = ({
     // Release only this popup's hover source; a hovered peer can keep the pair open.
     const [isAnchorVisible, visibleAnchorRef] = useVisibleAnchor(
         anchorElement,
-        open,
+        open || hoverClosing,
         hideClippedPopup,
     );
     const container = getPopupScrollContainer(anchorElement);
 
+    React.useEffect(() => {
+        if (!hoverClosing || !anchorElement) {
+            return undefined;
+        }
+        // Escape may close this popup through its paired sibling's handler.
+        const preventHoverReturn = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setHoverClosing(false);
+            }
+        };
+        const doc = anchorElement.ownerDocument;
+        doc.addEventListener('keydown', preventHoverReturn, true);
+        return () => doc.removeEventListener('keydown', preventHoverReturn, true);
+    }, [anchorElement, hoverClosing]);
+
+    const resumeHover = useEventHandler(() => {
+        const contentHovered = Boolean(popupContent.current?.matches(':hover'));
+        const hovered =
+            visibleAnchorRef.current === anchorElement &&
+            (anchorElement?.matches(':hover') || contentHovered);
+        debouncedHandleShowPopup.cancel();
+        debouncedHandleHidePopup.cancel();
+        setIsFocused(false);
+        setIsPopupContentHovered(Boolean(hovered && contentHovered));
+        if (hovered) {
+            setIsPopupVisible(true);
+            reportOpen(true);
+        } else {
+            debouncedHandleHidePopup();
+        }
+    });
+
+    const holdOpen = () => {
+        const interaction = {};
+        dialogHoldRef.current = interaction;
+        debouncedHandleShowPopup.cancel();
+        debouncedHandleHidePopup.cancel();
+        setIsFocused(false);
+        setIsPopupVisible(true);
+        reportOpen(true);
+        return () => {
+            if (dialogHoldRef.current === interaction) {
+                dialogHoldRef.current = null;
+                resumeHover();
+            }
+        };
+    };
+
     const onMouseEnter = (event: React.MouseEvent<HTMLSpanElement>) => {
         if (event.buttons !== 0) {
             return;
@@ -167,18 +226,27 @@ export const HoverPopup = ({
 
     const onPopupMouseEnter = React.useCallback(
         (event: React.MouseEvent<HTMLDivElement>) => {
-            // An exiting popup can still receive events during its close animation.
-            if (!open || visibleAnchorRef.current !== anchorElement) {
+            if ((!open && !hoverClosing) || visibleAnchorRef.current !== anchorElement) {
                 return;
             }
             if (event.buttons === 0) {
                 bringToFront();
             }
             debouncedHandleHidePopup.cancel();
+            setHoverClosing(false);
+            setIsPopupVisible(true);
             setIsPopupContentHovered(true);
             reportOpen(true);
         },
-        [bringToFront, reportOpen, debouncedHandleHidePopup, open, visibleAnchorRef, anchorElement],
+        [
+            bringToFront,
+            reportOpen,
+            debouncedHandleHidePopup,
+            open,
+            hoverClosing,
+            visibleAnchorRef,
+            anchorElement,
+        ],
     );
 
     const onPopupMouseLeave = React.useCallback(() => {
@@ -187,7 +255,7 @@ export const HoverPopup = ({
     }, [debouncedHandleHidePopup]);
 
     const onPopupContextMenu = React.useCallback(() => {
-        if (!open || visibleAnchorRef.current !== anchorElement) {
+        if (dialogHoldRef.current || !open || visibleAnchorRef.current !== anchorElement) {
             return;
         }
         bringToFront();
@@ -195,12 +263,16 @@ export const HoverPopup = ({
         reportOpen(true);
     }, [bringToFront, reportOpen, open, visibleAnchorRef, anchorElement]);
 
-    const onPopupBlur = React.useCallback(() => {
-        setIsFocused(false);
-    }, []);
+    const onPopupBlur = useEventHandler(() => {
+        if (isFocused && !dialogHoldRef.current) {
+            resumeHover();
+        }
+    });
 
     const onPopupEscapeKeyDown = React.useCallback(() => {
-        closePopup();
+        if (!dialogHoldRef.current) {
+            closePopup();
+        }
     }, [closePopup]);
 
     return (
@@ -218,6 +290,8 @@ export const HoverPopup = ({
                     onOpenChange={(_open, _event, reason) => {
                         if (reason === 'escape-key') {
                             onPopupEscapeKeyDown();
+                        } else if (reason === 'outside-press') {
+                            onPopupBlur();
                         }
                     }}
                     placement={placement}
@@ -226,11 +300,13 @@ export const HoverPopup = ({
                     returnFocus={false}
                     hasArrow
                     open={open && isAnchorVisible}
+                    onTransitionOutComplete={() => setHoverClosing(false)}
                     // bigger offset for easier switching to neighbour nodes
                     // matches the default offset for popup with arrow out of a sense of beauty
                     offset={offset || {mainAxis: 12, crossAxis: 0}}
                 >
                     <div
+                        ref={popupContent}
                         className={contentClassName}
                         onContextMenu={onPopupContextMenu}
                         onMouseEnter={onPopupMouseEnter}
@@ -238,7 +314,7 @@ export const HoverPopup = ({
                         onBlur={onPopupBlur}
                     >
                         <div className={YDB_POPOVER_CLASS_NAME}>
-                            {renderPopupContent({onClose: closePopup})}
+                            {renderPopupContent({onClose: closePopup, holdOpen})}
                         </div>
                     </div>
                 </Popup>