fix: preserve pdisk preview focus and verify disk rendering

Author: StekPerepolnen

src/containers/Storage/PDisks/PDisksPreview.tsx

@@ -232,9 +232,23 @@ function PDiskPreviewItem({
     const [previewFocused, setPreviewFocused] = React.useState(false);
     const popupContainerRef = React.useRef<HTMLElement | null>(null);
     const detailsRef = React.useRef<HTMLDivElement>(null);
+    const previewRef = React.useRef<HTMLButtonElement>(null);
+    const transferFocusRef = React.useRef(false);
     const popupHostRef = React.useRef<HTMLDivElement>(null);
     const [popupAvailableHeight, setPopupAvailableHeight] = React.useState(0);
 
+    React.useLayoutEffect(() => {
+        if (!transferFocusRef.current) {
+            return;
+        }
+        transferFocusRef.current = false;
+        // Transfer keyboard focus after React replaces the activated control.
+        const target = detailsOpened
+            ? detailsRef.current?.querySelector<HTMLElement>('.pdisk-storage__content')
+            : previewRef.current;
+        target?.focus({preventScroll: true});
+    }, [detailsOpened]);
+
     React.useLayoutEffect(() => {
         const container = popupContainerRef.current;
         const details = detailsRef.current;
@@ -295,6 +309,7 @@ function PDiskPreviewItem({
 
             event.preventDefault();
             event.stopPropagation();
+            transferFocusRef.current = event.detail === 0;
             closeDetails();
         },
         [closeDetails],
@@ -305,12 +320,14 @@ function PDiskPreviewItem({
             <Button
                 view="flat"
                 className={b('control')}
+                ref={previewRef}
                 onMouseEnter={() => setPreviewHovered(true)}
                 onMouseLeave={() => setPreviewHovered(false)}
                 onFocus={() => setPreviewFocused(true)}
                 onBlur={() => setPreviewFocused(false)}
                 onClick={(event) => {
                     event.stopPropagation();
+                    transferFocusRef.current = event.detail === 0;
                     // Keep popup wheel events in the table's native scroll container.
                     let container = event.currentTarget.parentElement;
                     while (

tests/suites/nodes/pdisksPreview.test.ts

@@ -15,6 +15,9 @@ import {setupPDiskPreviewMocks} from './pdisksPreviewMocks';
 
 const settingTitle = 'Compact PDisk previews';
 const previewSelector = '.ydb-storage-pdisks-preview__control';
+// Linux ARM64 and x64 round translucent disk colors differently by 1–2 RGB levels.
+// Keep exact palette comparisons against a baseline from the same architecture.
+const paletteArchitecture = process.platform === 'linux' ? `-${process.arch}` : '';
 
 async function openNodeDisks(page: Page) {
     await new NodesPage(page).goto({clusterName: 'preview-test', backend: 'https://preview.test'});
@@ -62,6 +65,11 @@ for (const theme of ['light', 'dark']) {
                 .getByRole('button', {name: `Show PDisk 2-${diskId} details`, exact: true})
                 .press('Enter');
         }
+        // Compare the palette without a focus outline; keyboard focus has its own regression test.
+        await page
+            .locator('.pdisk-storage__content')
+            .last()
+            .evaluate((element) => element.blur());
         await page.mouse.move(0, 0);
         const previews = page.locator(previewSelector);
         const details = page.locator('.pdisk-storage');
@@ -84,11 +92,14 @@ for (const theme of ['light', 'dark']) {
         };
         // Keep previews and their original controls together in the same reference image.
         // Tiny translucent squares need exact comparison to catch missing color layers.
-        await expect(page).toHaveScreenshot(`pdisk-preview-palette-${theme}.png`, {
-            clip,
-            threshold: 0,
-            maxDiffPixels: 0,
-        });
+        await expect(page).toHaveScreenshot(
+            `pdisk-preview-palette-${theme}${paletteArchitecture}.png`,
+            {
+                clip,
+                threshold: 0,
+                maxDiffPixels: 0,
+            },
+        );
 
         // As in vdiskColoring.test.ts, force every tone's hover state for one stable snapshot.
         await previews.locator('.ydb-storage-pdisks-preview__color').evaluateAll((elements) => {
@@ -101,11 +112,14 @@ for (const theme of ['light', 'dark']) {
                 element.classList.add('storage-disk-progress-bar_highlighted'),
             );
         });
-        await expect(page).toHaveScreenshot(`pdisk-preview-palette-${theme}-hover.png`, {
-            clip,
-            threshold: 0,
-            maxDiffPixels: 0,
-        });
+        await expect(page).toHaveScreenshot(
+            `pdisk-preview-palette-${theme}-hover${paletteArchitecture}.png`,
+            {
+                clip,
+                threshold: 0,
+                maxDiffPixels: 0,
+            },
+        );
     });
 }
 
@@ -205,7 +219,7 @@ test('preview uses compact SVG, preserves row height, and keeps detail popups in
     await details.press('Enter');
     await expect(preview).toBeVisible();
     await expect(action).toHaveCount(0);
-    await expect(preview.locator('.ydb-storage-pdisks-preview__color_highlighted')).toHaveCount(0);
+    await expect(preview).toBeFocused();
 });
 
 test('15-second refresh updates open details, their popup and the collapsed preview', async ({
@@ -359,3 +373,71 @@ test('wheel scrolling over a disk popup reaches the table', async ({page}) => {
         .poll(() => scroll.evaluate((element) => element.scrollTop))
         .toBeGreaterThan(initialScroll);
 });
+
+test('expanded disks remain interactive beyond the compact column boundary', async ({page}) => {
+    await setupPDiskPreviewMocks(page);
+    await page.addInitScript(() => localStorage.setItem('enablePDisksPreview', 'true'));
+    await openNodeDisks(page);
+    const preview = page.getByRole('button', {name: 'Show PDisk 1-1 details', exact: true});
+    const cell = preview.locator('xpath=ancestor::td');
+    const cellBox = await cell.boundingBox();
+    assert(cellBox);
+    await preview.click();
+    const lastVDisk = page.locator('.pdisk-storage__vdisks-item').last();
+    await expect(lastVDisk).toBeVisible();
+    const diskBox = await lastVDisk.boundingBox();
+    assert(diskBox);
+    expect(diskBox.x + diskBox.width / 2).toBeGreaterThan(cellBox.x + cellBox.width);
+    expect(
+        await lastVDisk.evaluate((element) => {
+            const rect = element.getBoundingClientRect();
+            return element.contains(
+                document.elementFromPoint(rect.right - 1, rect.top + rect.height / 2),
+            );
+        }),
+    ).toBe(true);
+    await lastVDisk.hover();
+    await expect(page.getByRole('link', {name: 'Go to VDisk', exact: true})).toBeVisible();
+    await lastVDisk.click();
+    await expect(preview).toBeVisible();
+});
+
+test('Enter repeatedly expands and collapses the same disk without losing focus', async ({
+    page,
+}) => {
+    await setupPDiskPreviewMocks(page, 2);
+    await page.addInitScript(() => localStorage.setItem('enablePDisksPreview', 'true'));
+    await openNodeDisks(page);
+    const preview = page.getByRole('button', {name: 'Show PDisk 2-1 details', exact: true});
+    const details = page.locator('.pdisk-storage__content');
+    const initialUrl = page.url();
+    await preview.focus();
+    for (let cycle = 0; cycle < 3; cycle++) {
+        await page.keyboard.press('Enter');
+        await expect(details).toBeFocused();
+        await expect(details).toHaveAttribute('href', /nodeId=2/);
+        await page.keyboard.press('Enter');
+        await expect(preview).toBeFocused();
+        await expect(details).toHaveCount(0);
+    }
+    // Collapsing from a VDisk should return to the same preview as well.
+    await page.keyboard.press('Enter');
+    await page.locator('.pdisk-storage__vdisks-item a').last().focus();
+    await page.keyboard.press('Enter');
+    await expect(preview).toBeFocused();
+    expect(page.url()).toBe(initialUrl);
+});
+
+test('mouse expansion and collapse do not transfer focus to the new control', async ({page}) => {
+    await setupPDiskPreviewMocks(page);
+    await page.addInitScript(() => localStorage.setItem('enablePDisksPreview', 'true'));
+    await openNodeDisks(page);
+    const preview = page.getByRole('button', {name: 'Show PDisk 1-1 details', exact: true});
+    const details = page.locator('.pdisk-storage__content');
+    await preview.click();
+    await expect(details).toBeVisible();
+    await expect(details).not.toBeFocused();
+    await details.click();
+    await expect(preview).toBeVisible();
+    await expect(preview).not.toBeFocused();
+});