fix(Disks): fix vdisk popup hiding (#2946)

Author: artemmufazalov

src/containers/Storage/Disks/Disks.tsx

@@ -8,6 +8,7 @@ import {cn} from '../../../utils/cn';
 import type {PreparedVDisk} from '../../../utils/disks/types';
 import {isNumeric} from '../../../utils/utils';
 import {PDisk} from '../PDisk';
+import {DISKS_POPUP_DEBOUNCE_TIMEOUT} from '../shared';
 import type {StorageViewContext} from '../types';
 import {isVdiskActive, useVDisksWithDCMargins} from '../utils';
 
@@ -101,6 +102,8 @@ function VDiskItem({
                 compact
                 inactive={inactive}
                 showPopup={highlightedVDisk === vDiskId}
+                delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
+                delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
                 onShowPopup={() => setHighlightedVDisk(vDiskId)}
                 onHidePopup={() => setHighlightedVDisk(undefined)}
                 progressBarClassName={b('vdisk-progress-bar')}
@@ -122,6 +125,8 @@ function PDiskItem({vDisk, highlightedVDisk, setHighlightedVDisk, withDCMargin}:
             progressBarClassName={b('pdisk-progress-bar')}
             data={vDisk.PDisk}
             showPopup={highlightedVDisk === vDiskId}
+            delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
+            delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
             onShowPopup={() => setHighlightedVDisk(vDiskId)}
             onHidePopup={() => setHighlightedVDisk(undefined)}
         />

src/containers/Storage/PDisk/PDisk.tsx

@@ -9,6 +9,7 @@ import {getPDiskPagePath} from '../../../routes';
 import {valueIsDefined} from '../../../utils';
 import {cn} from '../../../utils/cn';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
+import {DISKS_POPUP_DEBOUNCE_TIMEOUT} from '../shared';
 import type {StorageViewContext} from '../types';
 import {isVdiskActive} from '../utils';
 
@@ -26,6 +27,8 @@ interface PDiskProps {
     progressBarClassName?: string;
     viewContext?: StorageViewContext;
     width?: number;
+    delayOpen?: number;
+    delayClose?: number;
 }
 
 export const PDisk = ({
@@ -38,6 +41,8 @@ export const PDisk = ({
     progressBarClassName,
     viewContext,
     width,
+    delayOpen = DISKS_POPUP_DEBOUNCE_TIMEOUT,
+    delayClose = DISKS_POPUP_DEBOUNCE_TIMEOUT,
 }: PDiskProps) => {
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
@@ -65,8 +70,8 @@ export const PDisk = ({
                             data={vdisk}
                             inactive={!isVdiskActive(vdisk, viewContext)}
                             compact
-                            delayClose={200}
-                            delayOpen={200}
+                            delayOpen={delayOpen}
+                            delayClose={delayClose}
                         />
                     </div>
                 ))}
@@ -90,7 +95,8 @@ export const PDisk = ({
                 onShowPopup={onShowPopup}
                 onHidePopup={onHidePopup}
                 renderPopupContent={() => <PDiskPopup data={data} />}
-                delayClose={200}
+                delayOpen={delayOpen}
+                delayClose={delayClose}
             >
                 <InternalLink to={pDiskPath} className={b('content')}>
                     <DiskStateProgressBar

src/containers/Storage/VDisks/VDisks.tsx

@@ -2,6 +2,7 @@ import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsSta
 import type {Erasure} from '../../../types/api/storage';
 import {cn} from '../../../utils/cn';
 import type {PreparedVDisk} from '../../../utils/disks/types';
+import {DISKS_POPUP_DEBOUNCE_TIMEOUT} from '../shared';
 import type {StorageViewContext} from '../types';
 import {isVdiskActive, useVDisksWithDCMargins} from '../utils';
 
@@ -25,6 +26,8 @@ export function VDisks({vDisks, viewContext, erasure}: VDisksProps) {
                     key={vDisk.StringifiedId}
                     data={vDisk}
                     inactive={!isVdiskActive(vDisk, viewContext)}
+                    delayOpen={DISKS_POPUP_DEBOUNCE_TIMEOUT}
+                    delayClose={DISKS_POPUP_DEBOUNCE_TIMEOUT}
                     className={b('item', {
                         'with-dc-margin': vDisksWithDCMargins.includes(index),
                     })}

src/containers/Storage/shared.tsx

@@ -1,3 +1,5 @@
 import {cn} from '../../utils/cn';
 
 export const b = cn('global-storage');
+
+export const DISKS_POPUP_DEBOUNCE_TIMEOUT = 200;