fix: isolate pdisk preview rendering and preserve keyboard focus

Author: StekPerepolnen

src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,4 +1,4 @@
-@use './diskStateColors';
+@use '../../styles/mixins';
 
 .storage-disk-progress-bar {
     $block: &;
@@ -31,7 +31,22 @@
     border-radius: $outer-border-radius;
     background-color: var(--entity-state-background-color);
 
-    @include diskStateColors.disk-state-colors($block);
+    @include mixins.entity-state-colors($block);
+
+    // SolidRed severity (6): solid red background for critical errors in State mode
+    &_solidred {
+        --entity-state-font-color: var(--g-color-text-light-primary);
+        --entity-state-border-color: var(--g-color-base-danger-heavy);
+        --entity-state-background-color: var(--g-color-base-danger-heavy);
+        --entity-state-fill-color: var(--g-color-base-danger-heavy);
+        --entity-state-icon-color: var(--g-color-text-light-primary);
+        --entity-state-stripe-color: var(--g-color-text-dark-hint);
+
+        &#{$block}_highlighted {
+            --entity-state-background-color: var(--g-color-base-danger-heavy-hover);
+            --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
+        }
+    }
 
     &_expert-mode {
         --entity-state-compact-background-color: var(--entity-state-background-color);

src/components/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -33,11 +33,8 @@ interface DiskStateProgressBarProps {
     overflowVisible?: boolean;
 }
 
-export function getDiskStateColorMods(tone: DiskBarTone, highlighted?: boolean) {
-    return {
-        [tone === 'LightGrey' ? 'light-grey' : tone.toLowerCase()]: true,
-        highlighted,
-    };
+function getToneModifier(tone: DiskBarTone) {
+    return tone === 'LightGrey' ? 'light-grey' : tone.toLowerCase();
 }
 
 export function DiskStateProgressBar({
@@ -69,10 +66,11 @@ export function DiskStateProgressBar({
         inactive,
         striped,
         filled,
+        highlighted,
         'all-mode-has-issues': mode === 'all' && strongFill,
         'legend-inactive': borderless,
         'overlap-icon-at-top-left': overflowVisible,
-        ...getDiskStateColorMods(tone, highlighted),
+        [getToneModifier(tone)]: true,
     };
 
     if (mode) {

src/components/DiskStateProgressBar/diskStateColors.scss

@@ -172,6 +172,7 @@ interface PDiskProps {
     onHidePopup?: VoidFunction;
     className?: string;
     progressBarClassName?: string;
+    linkRef?: React.Ref<HTMLAnchorElement>;
     viewContext?: StorageViewContext;
     width?: number;
     delayOpen?: number;
@@ -192,6 +193,7 @@ export const PDisk = ({
     onHidePopup,
     className,
     progressBarClassName,
+    linkRef,
     viewContext,
     width,
     delayOpen = DISKS_POPUP_DEBOUNCE_TIMEOUT,
@@ -278,7 +280,12 @@ export const PDisk = ({
                 delayOpen={delayOpen}
                 delayClose={delayClose}
             >
-                <InternalLink to={pDiskPath} aria-label={accessibleName} className={b('content')}>
+                <InternalLink
+                    to={pDiskPath}
+                    innerRef={linkRef}
+                    aria-label={accessibleName}
+                    className={b('content')}
+                >
                     <DiskStateProgressBar
                         allocation={allocatedPercent}
                         tone={tone}

src/containers/Storage/PDisk/PDisk.tsx

@@ -1,8 +1,8 @@
-@use '../../../components/DiskStateProgressBar/diskStateColors';
+@use '../../../styles/mixins';
 
 .ydb-storage-pdisks-preview {
     &__color {
-        @include diskStateColors.disk-state-colors(&);
+        @include mixins.entity-state-colors(&);
     }
 
     &__control {

src/containers/Storage/PDisks/PDisksPreview.scss

@@ -8,13 +8,15 @@ import type {PDisk} from '../PDisk';
 import {PDisksPreview} from './PDisksPreview';
 
 let mockInverted = false;
+const mockDetailsById = new Map<string, React.ComponentProps<typeof PDisk>>();
 let mockDetailsProps: React.ComponentProps<typeof PDisk>;
 
 jest.mock('../../../utils/hooks/useSetting', () => ({useSetting: () => [mockInverted]}));
 jest.mock('../../../store', () => ({singleClusterMode: true}));
 jest.mock('../PDisk', () => ({
     PDisk: (props: React.ComponentProps<typeof PDisk>) => {
         mockDetailsProps = props;
+        mockDetailsById.set(props.data?.StringifiedId || '', props);
         return <button>Expanded PDisk</button>;
     },
 }));
@@ -93,3 +95,32 @@ test('closing details clears highlight and ignores callbacks from the previous e
     act(() => mockDetailsProps.onShowPopup?.());
     expect(mockDetailsProps.highlighted).toBe(true);
 });
+
+test('collapsing another group and its delayed hide callback preserve the highlighted owner', () => {
+    const secondDisk = {...pDisk, PDiskId: 2, StringifiedId: '1-2'};
+    render(<PDisksPreview pDisks={[pDisk, secondDisk]} vDisks={vDisks} />);
+    fireEvent.click(screen.getByRole('button', {name: 'Show PDisk 1-1 details'}));
+    fireEvent.click(screen.getByRole('button', {name: 'Show PDisk 1-2 details'}));
+    const firstHide = mockDetailsById.get('1-1')?.onHidePopup;
+    act(() => mockDetailsById.get('1-2')?.onShowPopup?.());
+    act(() => firstHide?.());
+    expect(mockDetailsById.get('1-2')?.highlighted).toBe(true);
+    fireEvent.click(screen.getByRole('button', {name: 'Hide PDisk 1-1 details'}));
+    expect(mockDetailsById.get('1-2')?.highlighted).toBe(true);
+});
+
+test('exposes expanded state and a collapse button associated with the disk controls', () => {
+    render(<PDisksPreview pDisks={[pDisk]} vDisks={vDisks} />);
+    const preview = screen.getByRole('button', {name: 'Show PDisk 1-1 details'});
+    expect(preview).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(preview);
+    const collapse = screen.getByRole('button', {name: 'Hide PDisk 1-1 details'});
+    expect(collapse).toHaveAttribute('aria-expanded', 'true');
+    const content = document.getElementById(collapse.getAttribute('aria-controls') || '');
+    expect(content).toContainElement(screen.getByRole('button', {name: 'Expanded PDisk'}));
+    fireEvent.click(collapse);
+    expect(screen.getByRole('button', {name: 'Show PDisk 1-1 details'})).toHaveAttribute(
+        'aria-expanded',
+        'false',
+    );
+});

src/containers/Storage/PDisks/PDisksPreview.test.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
 
-import {Button, Flex, PortalProvider} from '@gravity-ui/uikit';
+import {ChevronUp} from '@gravity-ui/icons';
+import {Button, Flex, Icon, PortalProvider} from '@gravity-ui/uikit';
 import {createPortal} from 'react-dom';
 
-import {getDiskStateColorMods} from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
 import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
 import {cn} from '../../../utils/cn';
-import {
-    getDefaultDiskDisplayState,
-    getDefaultPDiskDisplayState,
-} from '../../../utils/disks/displayState';
-import {getDiskBarTone} from '../../../utils/disks/getDiskBarTone';
-import type {DiskBarTone, PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
+import {DONOR_COLOR} from '../../../utils/disks/constants';
+import {getDataSeverityColor} from '../../../utils/disks/helpers';
+import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
 import {useSetting} from '../../../utils/hooks/useSetting';
 import {isNumeric} from '../../../utils/utils';
 import {PDisk} from '../PDisk';
@@ -62,13 +59,16 @@ interface PDiskPreviewItemProps extends PDiskPreviewSvgProps {
     id: string;
     expandedWidth: number;
     highlightedDisk?: string;
-    setHighlightedDisk: (id?: string) => void;
+    setHighlightedDisk: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
+// The preview uses ordinary prepared-data severity, independently of Expert mode display states.
+type PreviewTone = ReturnType<typeof getDataSeverityColor> | typeof DONOR_COLOR;
+
 interface VDiskPath {
     key: string;
     path: string;
-    tone: DiskBarTone;
+    tone: PreviewTone;
     inactive: boolean;
 }
 
@@ -86,8 +86,8 @@ function getFilledSize(percent: unknown, size: number, inverted = false) {
     return (filledPercent / 100) * size;
 }
 
-function getBarClassName(element: string, tone: DiskBarTone, highlighted?: boolean) {
-    return b('color', getDiskStateColorMods(tone, highlighted), b(element));
+function getBarClassName(element: string, tone: PreviewTone, highlighted?: boolean) {
+    return b('color', {[tone.toLowerCase()]: true, highlighted}, b(element));
 }
 
 function getPDiskKey(pDisk: PreparedPDisk, index: number) {
@@ -102,10 +102,7 @@ function getVDiskPaths(vDisks: PreparedVDisk[], viewContext?: StorageViewContext
         const row = index % VDISKS_WITHOUT_PDISK_COLUMN;
         const x = VDISK_X + column * (VDISK_SIZE + VDISK_COLUMN_GAP);
         const y = row * (VDISK_SIZE + VDISK_GAP);
-        const tone = getDiskBarTone({
-            severity: getDefaultDiskDisplayState(vDisk, vDisk.DonorMode).severity,
-            isDonor: vDisk.DonorMode,
-        });
+        const tone = vDisk.DonorMode ? DONOR_COLOR : getDataSeverityColor(vDisk.Severity);
         const inactive = !isVdiskActive(vDisk, viewContext);
         const key = `${tone}-${inactive}`;
         const rectPath = `M${x} ${y}h${VDISK_SIZE}v${VDISK_SIZE}h-${VDISK_SIZE}z`;
@@ -143,9 +140,8 @@ function PDiskPreviewSvg({
     highlighted,
     inverted,
 }: PDiskPreviewSvgProps) {
-    const displayState = getDefaultPDiskDisplayState(pDisk);
-    const pDiskTone = getDiskBarTone({severity: displayState.severity});
-    const pDiskFilledHeight = getFilledSize(displayState.allocatedPercent, PDISK_HEIGHT, inverted);
+    const pDiskTone = getDataSeverityColor(pDisk.Severity);
+    const pDiskFilledHeight = getFilledSize(pDisk.AllocatedPercent, PDISK_HEIGHT, inverted);
     const pDiskFillY = inverted ? PDISK_Y : PDISK_Y + PDISK_HEIGHT - pDiskFilledHeight;
     const vDiskPaths = React.useMemo(
         () => getVDiskPaths(vDisks, viewContext),
@@ -227,14 +223,28 @@ function PDiskPreviewItem({
     highlightedDisk,
     setHighlightedDisk,
 }: PDiskPreviewItemProps) {
+    const detailsId = React.useId();
     const [detailsOpened, setDetailsOpened] = React.useState(false);
     const [previewHovered, setPreviewHovered] = React.useState(false);
     const [previewFocused, setPreviewFocused] = React.useState(false);
     const popupContainerRef = React.useRef<HTMLElement | null>(null);
     const detailsRef = React.useRef<HTMLDivElement>(null);
+    const diskLinkRef = React.useRef<HTMLAnchorElement>(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 ? diskLinkRef.current : previewRef.current;
+        target?.focus({preventScroll: true});
+    }, [detailsOpened]);
+
     React.useLayoutEffect(() => {
         const container = popupContainerRef.current;
         const details = detailsRef.current;
@@ -264,15 +274,26 @@ function PDiskPreviewItem({
             window.removeEventListener('resize', updatePopupHeight);
         };
     }, [detailsOpened, highlightedDisk]);
+    const clearOwnHighlight = React.useCallback(() => {
+        setHighlightedDisk((current) =>
+            current === id || vDisks.some((disk) => disk.StringifiedId === current)
+                ? undefined
+                : current,
+        );
+    }, [id, vDisks, setHighlightedDisk]);
     const detailsVersionRef = React.useRef(0);
     const detailsVersion = detailsVersionRef.current;
     const setDetailsHighlightedDisk = React.useCallback(
         (diskId?: string) => {
             if (detailsVersionRef.current === detailsVersion) {
-                setHighlightedDisk(diskId);
+                if (diskId === undefined) {
+                    clearOwnHighlight();
+                } else {
+                    setHighlightedDisk(diskId);
+                }
             }
         },
-        [detailsVersion, setHighlightedDisk],
+        [detailsVersion, setHighlightedDisk, clearOwnHighlight],
     );
 
     const closeDetails = React.useCallback(() => {
@@ -281,8 +302,8 @@ function PDiskPreviewItem({
         setPreviewHovered(false);
         setPreviewFocused(false);
         setDetailsOpened(false);
-        setHighlightedDisk(undefined);
-    }, [setHighlightedDisk]);
+        clearOwnHighlight();
+    }, [clearOwnHighlight]);
 
     const handleOpenedDetailsClick = React.useCallback(
         (event: React.MouseEvent<unknown>) => {
@@ -295,6 +316,7 @@ function PDiskPreviewItem({
 
             event.preventDefault();
             event.stopPropagation();
+            transferFocusRef.current = event.detail === 0;
             closeDetails();
         },
         [closeDetails],
@@ -305,12 +327,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 (
@@ -322,6 +346,7 @@ function PDiskPreviewItem({
                     popupContainerRef.current = container;
                     setDetailsOpened(true);
                 }}
+                aria-expanded={false}
                 aria-label={i18n('action_show-pdisks-details', {id})}
             >
                 <PDiskPreviewSvg
@@ -360,19 +385,30 @@ function PDiskPreviewItem({
                     ref={detailsRef}
                     onClickCapture={handleOpenedDetailsClick}
                 >
-                    <PDisk
-                        data={pDisk}
-                        inactive={!isPdiskActive(pDisk, viewContext)}
-                        vDisks={vDisks}
-                        viewContext={viewContext}
-                        width={expandedWidth}
-                        showPopup={highlightedDisk === id}
-                        onShowPopup={() => setDetailsHighlightedDisk(id)}
-                        onHidePopup={() => setDetailsHighlightedDisk(undefined)}
-                        highlighted={highlightedDisk === id}
-                        highlightedDisk={highlightedDisk}
-                        setHighlightedDisk={setDetailsHighlightedDisk}
-                    />
+                    <Button
+                        view="flat"
+                        aria-label={i18n('action_hide-pdisks-details', {id})}
+                        aria-expanded={true}
+                        aria-controls={detailsId}
+                    >
+                        <Icon data={ChevronUp} size={16} />
+                    </Button>
+                    <div id={detailsId}>
+                        <PDisk
+                            linkRef={diskLinkRef}
+                            data={pDisk}
+                            inactive={!isPdiskActive(pDisk, viewContext)}
+                            vDisks={vDisks}
+                            viewContext={viewContext}
+                            width={expandedWidth}
+                            showPopup={highlightedDisk === id}
+                            onShowPopup={() => setDetailsHighlightedDisk(id)}
+                            onHidePopup={() => setDetailsHighlightedDisk(undefined)}
+                            highlighted={highlightedDisk === id}
+                            highlightedDisk={highlightedDisk}
+                            setHighlightedDisk={setDetailsHighlightedDisk}
+                        />
+                    </div>
                 </Flex>
             </PortalProvider>
         </React.Fragment>

src/containers/Storage/PDisks/PDisksPreview.tsx

@@ -1,3 +1,4 @@
 {
-  "action_show-pdisks-details": "Show PDisk {{id}} details"
+  "action_show-pdisks-details": "Show PDisk {{id}} details",
+  "action_hide-pdisks-details": "Hide PDisk {{id}} details"
 }