fix(Storage): tune popups for vdisk and pdisk (#1883)

Author: Raubzeug

src/components/HoverPopup/HoverPopup.tsx

@@ -20,6 +20,8 @@ type HoverPopupProps = {
     anchorRef?: React.RefObject<HTMLElement>;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
+    delayOpen?: number;
+    delayClose?: number;
 } & Pick<PopupProps, 'placement' | 'contentClassName'>;
 
 export const HoverPopup = ({
@@ -32,6 +34,8 @@ export const HoverPopup = ({
     onHidePopup,
     placement = ['top', 'bottom'],
     contentClassName,
+    delayClose = DEBOUNCE_TIMEOUT,
+    delayOpen = DEBOUNCE_TIMEOUT,
 }: HoverPopupProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const anchor = React.useRef<HTMLDivElement>(null);
@@ -41,8 +45,8 @@ export const HoverPopup = ({
             debounce(() => {
                 setIsPopupVisible(true);
                 onShowPopup?.();
-            }, DEBOUNCE_TIMEOUT),
-        [onShowPopup],
+            }, delayOpen),
+        [onShowPopup, delayOpen],
     );
 
     const hidePopup = React.useCallback(() => {
@@ -51,8 +55,8 @@ export const HoverPopup = ({
     }, [onHidePopup]);
 
     const debouncedHandleHidePopup = React.useMemo(
-        () => debounce(hidePopup, DEBOUNCE_TIMEOUT),
-        [hidePopup],
+        () => debounce(hidePopup, delayClose),
+        [hidePopup, delayClose],
     );
 
     const onMouseEnter = debouncedHandleShowPopup;

src/components/VDisk/VDisk.tsx

@@ -19,6 +19,8 @@ export interface VDiskProps {
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
     progressBarClassName?: string;
+    delayOpen?: number;
+    delayClose?: number;
 }
 
 export const VDisk = ({
@@ -29,6 +31,8 @@ export const VDisk = ({
     onShowPopup,
     onHidePopup,
     progressBarClassName,
+    delayClose,
+    delayOpen,
 }: VDiskProps) => {
     const vDiskPath = getVDiskLink(data);
 
@@ -38,6 +42,9 @@ export const VDisk = ({
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
             popupContent={<VDiskPopup data={data} />}
+            offset={[0, 5]}
+            delayClose={delayClose}
+            delayOpen={delayOpen}
         >
             <div className={b()}>
                 <InternalLink to={vDiskPath} className={b('content')}>

src/containers/Storage/PDisk/PDisk.tsx

@@ -59,7 +59,13 @@ export const PDisk = ({
                             flexGrow: Number(vdisk.AllocatedSize) || 1,
                         }}
                     >
-                        <VDisk data={vdisk} inactive={!isVdiskActive(vdisk, viewContext)} compact />
+                        <VDisk
+                            data={vdisk}
+                            inactive={!isVdiskActive(vdisk, viewContext)}
+                            compact
+                            delayClose={200}
+                            delayOpen={200}
+                        />
                     </div>
                 ))}
             </div>
@@ -77,10 +83,12 @@ export const PDisk = ({
             {renderVDisks()}
             <HoverPopup
                 showPopup={showPopup}
+                offset={[0, 5]}
                 anchorRef={anchorRef}
                 onShowPopup={onShowPopup}
                 onHidePopup={onHidePopup}
                 popupContent={<PDiskPopup data={data} />}
+                delayClose={200}
             >
                 <InternalLink to={pDiskPath} className={b('content')}>
                     <DiskStateProgressBar