fix(suite): Device headers in DeviceSwitch are not clickable

packages/components/src/components/Modal/ModalBackdrop.tsx

@@ -20,6 +20,7 @@ export type ModalBackdropProps = {
     padding?: Padding;
     zIndex?: ZIndexValues;
     opaque?: boolean;
+    'data-testid'?: string;
 };
 
 const Backdrop = styled.div<{ $opaque?: boolean }>`
@@ -46,14 +47,15 @@ export const ModalBackdrop = ({
     padding = spacings.xs,
     zIndex = zIndices.modal,
     opaque = false,
+    'data-testid': dataTest,
 }: ModalBackdropProps) => {
     const modalTarget = useModalTarget();
 
     const backdrop = (
         // eslint-disable-next-line jsx-a11y/no-autofocus
         <FocusLock autoFocus={false}>
             <Box position={{ type: 'absolute', inset: 0 }} zIndex={zIndex}>
-                <Backdrop onClick={onClick} $opaque={opaque}>
+                <Backdrop onClick={onClick} $opaque={opaque} data-testid={dataTest}>
                     <Box padding={padding} height="100%">
                         <Column
                             alignItems={mapAlignmentToAlignItems(alignment)}

packages/suite-desktop-core/e2e/support/pageObjects/dashboardPage.ts

@@ -53,9 +53,7 @@ export class DashboardPage {
         this.dashboardHeader = this.page.getByRole('heading', { name: 'Dashboard' });
         this.graph = this.page.getByTestId('@dashboard/graph');
         this.deviceSwitchingOpenButton = this.page.getByTestId('@menu/switch-device');
-        this.deviceSwitchingCloseButton = this.page
-            .getByTestId('@switch-device/cancel-button')
-            .first();
+        this.deviceSwitchingCloseButton = this.page.getByTestId('@modal/backdrop').first();
         this.modal = this.page.getByTestId('@modal');
         this.deviceSwitcherModal = this.page.getByTestId('@modal/switch-device');
         this.confirmDeviceEjectButton = this.page.getByTestId('@switch-device/eject');

packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceHeader.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { getDeviceInternalModel } from '@suite-common/suite-utils';
 import { selectSelectedDevice } from '@suite-common/wallet-core';
-import { Box, IconButton, Row, TOOLTIP_DELAY_LONG, Tooltip } from '@trezor/components';
+import { IconButton, Row, TOOLTIP_DELAY_LONG, Tooltip } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { WebUsbButton } from 'src/components/suite';
@@ -59,21 +59,11 @@ export const DeviceHeader = ({
             )}
 
             {deviceModelInternal && isDeviceStatusVisible && (
-                // In case the cancel button is not visible (e.g. in device switcher),
-                // we need to have an alternative, mostly for testing purposes.
-                <Box
-                    data-testid={
-                        isDefaultCancelVisible ? undefined : '@switch-device/cancel-button'
-                    }
-                    onClick={isDefaultCancelVisible ? undefined : () => onCancel?.()}
-                    cursor={isDefaultCancelVisible ? 'default' : 'pointer'}
-                >
-                    <DeviceStatus
-                        deviceModel={deviceModelInternal}
-                        device={device}
-                        forceConnectionInfo={true}
-                    />
-                </Box>
+                <DeviceStatus
+                    deviceModel={deviceModelInternal}
+                    device={device}
+                    forceConnectionInfo={true}
+                />
             )}
 
             <Row gap={spacings.xxs} margin={{ left: 'auto' }}>
@@ -91,7 +81,6 @@ export const DeviceHeader = ({
                             size="small"
                             variant="tertiary"
                             onClick={() => onCancel()}
-                            data-testid="@switch-device/cancel-button"
                         />
                     </Tooltip>
                 )}

packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 
 import { TrezorDevice } from '@suite-common/suite-types';
 import * as deviceUtils from '@suite-common/suite-utils';
-import { acquireDevice } from '@suite-common/wallet-core';
 
 import { Translation } from 'src/components/suite/Translation';
 
-import { useDispatch } from '../../../../hooks/suite';
 import { getDeviceResolveStatusCTAMessage } from '../getDeviceResolveStatusCTAMessage';
 import { DeviceConnectionText } from './DeviceConnectionText';
 import { DeviceStatusTextThp } from './DeviceStatusTextThp';
@@ -23,7 +21,6 @@ export const DeviceStatusText = ({
     deviceNeedsRefresh,
 }: DeviceStatusTextProps) => {
     const deviceStatus = deviceUtils.getStatus(device);
-    const dispatch = useDispatch();
     if (deviceNeedsRefresh) {
         return (
             <DeviceConnectionText
@@ -32,15 +29,6 @@ export const DeviceStatusText = ({
                 data-testid="@deviceStatus-connected"
                 data-testid-alt="@deviceStatus"
                 isAction
-                onClick={(e: React.MouseEvent) => {
-                    e.stopPropagation();
-
-                    dispatch(
-                        acquireDevice({
-                            requestedDevice: device,
-                        }),
-                    );
-                }}
             >
                 <Translation id={getDeviceResolveStatusCTAMessage(deviceStatus)} />
             </DeviceConnectionText>

packages/suite/src/views/suite/SwitchDevice/SwitchDeviceModal.tsx

@@ -40,6 +40,7 @@ export const SwitchDeviceModal = ({
     return (
         <Modal.Backdrop
             onClick={onCancel}
+            data-testid={`${dataTest}/backdrop`}
             alignment={{ x: 'start', y: 'start' }}
             padding={spacings.xs}
         >