Device manager - device tile main click target (#9409)

* change device tile click to toggle details instead of selection

* lint

* test current device section click

* stuck cypress

src/components/views/settings/DevicesPanelEntry.tsx

@@ -173,7 +173,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
 
         return (
             <div className="mx_DevicesPanel_device">
-                <SelectableDeviceTile device={extendedDevice} onClick={this.onDeviceToggled} isSelected={this.props.selected}>
+                <SelectableDeviceTile device={extendedDevice} onSelect={this.onDeviceToggled} isSelected={this.props.selected}>
                     { buttons }
                 </SelectableDeviceTile>
             </div>

src/components/views/settings/devices/CurrentDeviceSection.tsx

@@ -105,6 +105,7 @@ const CurrentDeviceSection: React.FC<Props> = ({
         { !!device && <>
             <DeviceTile
                 device={device}
+                onClick={() => setIsExpanded(!isExpanded)}
             >
                 <DeviceExpandDetailsButton
                     data-testid='current-session-toggle-details'

src/components/views/settings/devices/DeviceTile.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { Fragment } from "react";
+import classNames from "classnames";
 
 import { Icon as InactiveIcon } from '../../../../../res/img/element-icons/settings/inactive.svg';
 import { _t } from "../../../../languageHandler";
@@ -23,6 +24,7 @@ import Heading from "../../typography/Heading";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
 import { ExtendedDevice } from "./types";
 import { DeviceTypeIcon } from "./DeviceTypeIcon";
+import { preventDefaultWrapper } from "../../../../utils/NativeEventUtils";
 export interface DeviceTileProps {
     device: ExtendedDevice;
     isSelected?: boolean;
@@ -88,13 +90,20 @@ const DeviceTile: React.FC<DeviceTileProps> = ({
             { id: 'deviceId', value: device.device_id },
         ];
 
-    return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
+    return <div
+        className={classNames(
+            "mx_DeviceTile",
+            { "mx_DeviceTile_interactive": !!onClick },
+        )}
+        data-testid={`device-tile-${device.device_id}`}
+        onClick={onClick}
+    >
         <DeviceTypeIcon
             isVerified={device.isVerified}
             isSelected={isSelected}
             deviceType={device.deviceType}
         />
-        <div className="mx_DeviceTile_info" onClick={onClick}>
+        <div className="mx_DeviceTile_info">
             <DeviceTileName device={device} />
             <div className="mx_DeviceTile_metadata">
                 { metadata.map(({ id, value }, index) =>
@@ -107,7 +116,7 @@ const DeviceTile: React.FC<DeviceTileProps> = ({
                 ) }
             </div>
         </div>
-        <div className="mx_DeviceTile_actions">
+        <div className="mx_DeviceTile_actions" onClick={preventDefaultWrapper(() => {})}>
             { children }
         </div>
     </div>;

src/components/views/settings/devices/FilteredDeviceList.tsx

@@ -179,7 +179,8 @@ const DeviceListItem: React.FC<{
 }) => <li className='mx_FilteredDeviceList_listItem'>
     <SelectableDeviceTile
         isSelected={isSelected}
-        onClick={toggleSelected}
+        onSelect={toggleSelected}
+        onClick={onDeviceExpandToggle}
         device={device}
     >
         <DeviceExpandDetailsButton

src/components/views/settings/devices/SelectableDeviceTile.tsx

@@ -21,15 +21,22 @@ import DeviceTile, { DeviceTileProps } from './DeviceTile';
 
 interface Props extends DeviceTileProps {
     isSelected: boolean;
-    onClick: () => void;
+    onSelect: () => void;
+    onClick?: () => void;
 }
 
-const SelectableDeviceTile: React.FC<Props> = ({ children, device, isSelected, onClick }) => {
+const SelectableDeviceTile: React.FC<Props> = ({
+    children,
+    device,
+    isSelected,
+    onSelect,
+    onClick,
+}) => {
     return <div className='mx_SelectableDeviceTile'>
         <StyledCheckbox
             kind={CheckboxStyle.Solid}
             checked={isSelected}
-            onChange={onClick}
+            onChange={onSelect}
             className='mx_SelectableDeviceTile_checkbox'
             id={`device-tile-checkbox-${device.device_id}`}
             data-testid={`device-tile-checkbox-${device.device_id}`}