fix(Disks): fix vdisk popup hiding

Author: artemmufazalov

src/components/VDisk/VDisk.tsx

@@ -12,6 +12,8 @@ import './VDisk.scss';
 
 const b = cn('ydb-vdisk-component');
 
+const VDISK_POPUP_DEBOUNCE_TIMEOUT = 200;
+
 export interface VDiskProps {
     data?: PreparedVDisk;
     compact?: boolean;
@@ -32,8 +34,8 @@ export const VDisk = ({
     onShowPopup,
     onHidePopup,
     progressBarClassName,
-    delayClose,
-    delayOpen,
+    delayClose = VDISK_POPUP_DEBOUNCE_TIMEOUT,
+    delayOpen = VDISK_POPUP_DEBOUNCE_TIMEOUT,
 }: VDiskProps) => {
     const database = useDatabaseFromQuery();
     const vDiskPath = getVDiskLink(data, {

src/containers/Storage/Disks/Disks.tsx

@@ -16,6 +16,7 @@ import './Disks.scss';
 const b = cn('ydb-storage-disks');
 
 const VDISKS_CONTAINER_WIDTH = 300;
+const DISKS_POPUPS_DEBOUNCE_TIMEOUT = 200;
 
 interface DisksProps {
     vDisks?: PreparedVDisk[];
@@ -101,6 +102,8 @@ function VDiskItem({
                 compact
                 inactive={inactive}
                 showPopup={highlightedVDisk === vDiskId}
+                delayOpen={DISKS_POPUPS_DEBOUNCE_TIMEOUT}
+                delayClose={DISKS_POPUPS_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_POPUPS_DEBOUNCE_TIMEOUT}
+            delayClose={DISKS_POPUPS_DEBOUNCE_TIMEOUT}
             onShowPopup={() => setHighlightedVDisk(vDiskId)}
             onHidePopup={() => setHighlightedVDisk(undefined)}
         />

src/containers/Storage/PDisk/PDisk.tsx

@@ -16,6 +16,8 @@ import './PDisk.scss';
 
 const b = cn('pdisk-storage');
 
+const PDISK_POPUP_DEBOUNCE_TIMEOUT = 200;
+
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: PreparedVDisk[];
@@ -26,6 +28,8 @@ interface PDiskProps {
     progressBarClassName?: string;
     viewContext?: StorageViewContext;
     width?: number;
+    delayOpen?: number;
+    delayClose?: number;
 }
 
 export const PDisk = ({
@@ -38,6 +42,8 @@ export const PDisk = ({
     progressBarClassName,
     viewContext,
     width,
+    delayOpen = PDISK_POPUP_DEBOUNCE_TIMEOUT,
+    delayClose = PDISK_POPUP_DEBOUNCE_TIMEOUT,
 }: PDiskProps) => {
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
@@ -65,8 +71,8 @@ export const PDisk = ({
                             data={vdisk}
                             inactive={!isVdiskActive(vdisk, viewContext)}
                             compact
-                            delayClose={200}
-                            delayOpen={200}
+                            delayOpen={delayOpen}
+                            delayClose={delayClose}
                         />
                     </div>
                 ))}
@@ -90,7 +96,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