Device in bootloader mode is not selectable

src/components/DeviceHeader/index.js

@@ -1,12 +1,9 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
-import Icon from 'components/Icon';
-import icons from 'config/icons';
 import {
     getStatusColor,
     getStatusName,
-    isDisabled,
     getStatus,
     getVersion,
 } from 'utils/device';
@@ -19,11 +16,13 @@ const Wrapper = styled.div`
     width: 320px;
     display: flex;
     align-items: center;
-    background: ${colors.WHITE};
+    background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')};
+    background: ${props => (props.isSelected ? colors.WHITE : 'transparent')};
+
     border-radius: 4px 0 0 0;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
+    box-shadow: ${props => (props.disabled ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.04)')};
 
-    ${props => props.isOpen && css`
+    ${props => (props.isOpen || !props.isSelected) && css`
         box-shadow: none;
     `}
 
@@ -43,7 +42,7 @@ const ClickWrapper = styled.div`
     cursor: pointer;
 
     ${props => props.disabled && css`
-        cursor: initial;
+        cursor: not-allowed;
     `}
 `;
 
@@ -71,18 +70,6 @@ const Status = styled.div`
     color: ${colors.TEXT_SECONDARY};
 `;
 
-const Counter = styled.div`
-    border: 1px solid ${colors.DIVIDER};
-    border-radius: 50%;
-    color: ${colors.TEXT_SECONDARY};
-    width: 24px;
-    height: 24px;
-    line-height: 22px;
-    text-align: center;
-    font-size: 11px;
-    margin-right: 8px;
-`;
-
 const IconWrapper = styled.div`
     padding-right: 25px;
     display: flex;
@@ -104,36 +91,19 @@ const Dot = styled.div`
     height: 10px;
 `;
 
-class DeviceHeader extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            clicked: false,
-        };
-    }
-
-    isDisabled(device, devices, transport) {
-        return isDisabled(device, devices, transport);
-    }
 
-    handleClickWrapper() {
+const DeviceHeader = ({
-        this.setState({ clicked: true });
+    isOpen, icon, device, isHoverable = true, onClickWrapper, disabled = false, isSelected = false,
-        if (!this.props.disabled) {
+}) => {
-            this.props.onClickWrapper();
-        }
-    }
-
-    render() {
-        const {
-            isOpen, icon, device, devices, transport, isHoverable,
-        } = this.props;
     const status = getStatus(device);
-        const disabled = isDisabled(device, devices, transport);
-        const deviceCount = devices.length;
-
     return (
-            <Wrapper isOpen={isOpen} isHoverable={isHoverable}>
+        <Wrapper
-                <ClickWrapper disabled={disabled} onClick={() => this.handleClickWrapper()}>
+            isSelected={isSelected}
+            isOpen={isOpen}
+            isHoverable={isHoverable}
+            disabled={disabled}
+        >
+            <ClickWrapper disabled={disabled} onClick={onClickWrapper}>
                 <ImageWrapper>
                     <Dot color={getStatusColor(status)} />
                     <TrezorImage model={getVersion(device)} />
@@ -143,33 +113,20 @@ class DeviceHeader extends Component {
                     <Status>{getStatusName(status)}</Status>
                 </LabelWrapper>
                 <IconWrapper>
-                        {icon && icon}
+                    {icon && !disabled && icon}
-                        {!icon && deviceCount > 1 && <Counter>{deviceCount}</Counter>}
-                        {!icon && !disabled && (
-                            <Icon
-                                canAnimate={this.state.clicked === true}
-                                isActive={isOpen}
-                                size={25}
-                                color={colors.TEXT_SECONDARY}
-                                icon={icons.ARROW_DOWN}
-                            />
-                        )
-                        }
                 </IconWrapper>
             </ClickWrapper>
         </Wrapper>
     );
-    }
+};
-}
 
 DeviceHeader.propTypes = {
     device: PropTypes.object,
-    devices: PropTypes.array,
-    transport: PropTypes.object,
     icon: PropTypes.element,
     isHoverable: PropTypes.bool,
     disabled: PropTypes.bool,
     isOpen: PropTypes.bool,
+    isSelected: PropTypes.bool,
     onClickWrapper: PropTypes.func.isRequired,
 };
 

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js

@@ -23,10 +23,17 @@ class DeviceList extends Component {
                     .map(device => (
                         device !== selectedDevice && (
                             <DeviceHeader
-                                key={`${device.instanceLabel}`}
+                                key={device.state || device.path}
-                                onClickWrapper={() => onSelectDevice(device)}
+                                disabled={device.features && device.features.bootloader_mode}
+                                onClickWrapper={() => {
+                                    if (device.features
+                                    && !device.features.bootloader_mode) {
+                                        onSelectDevice(device);
+                                    }
+                                }}
                                 onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, device)}
                                 icon={(
+                                    <React.Fragment>
                                         <IconClick onClick={(event) => {
                                             event.stopPropagation();
                                             event.preventDefault();
@@ -39,6 +46,7 @@ class DeviceList extends Component {
                                                 color={colors.TEXT_SECONDARY}
                                             />
                                         </IconClick>
+                                    </React.Fragment>
                                 )}
                                 device={device}
                                 devices={devices}

src/views/Wallet/components/LeftNavigation/index.js

@@ -13,6 +13,18 @@ import StickyContainer from './components/StickyContainer';
 
 const Header = styled(DeviceHeader)``;
 
+const Counter = styled.div`
+    border: 1px solid ${colors.DIVIDER};
+    border-radius: 50%;
+    color: ${colors.TEXT_SECONDARY};
+    width: 24px;
+    height: 24px;
+    line-height: 22px;
+    text-align: center;
+    font-size: 11px;
+    margin-right: 8px;
+`;
+
 const TransitionGroupWrapper = styled(TransitionGroup)`
     width: 640px;
 `;
@@ -64,6 +76,7 @@ class LeftNavigation extends Component {
         this.state = {
             animationType: null,
             shouldRenderDeviceSelection: false,
+            clicked: false,
         };
     }
 
@@ -128,6 +141,7 @@ class LeftNavigation extends Component {
     }
 
     handleOpen() {
+        this.setState({ clicked: true });
         this.props.toggleDeviceDropdown(!this.props.wallet.dropdownOpened);
     }
 
@@ -142,11 +156,26 @@ class LeftNavigation extends Component {
                 deviceSelection={this.props.wallet.dropdownOpened}
             >
                 <Header
+                    isSelected
                     onClickWrapper={() => this.handleOpen()}
                     device={this.props.wallet.selectedDevice}
                     transport={this.props.connect.transport}
                     devices={this.props.devices}
                     isOpen={this.props.wallet.dropdownOpened}
+                    icon={(
+                        <React.Fragment>
+                            {this.props.devices.length > 1 && (
+                                <Counter>{this.props.devices.length}</Counter>
+                            )}
+                            <Icon
+                                canAnimate={this.state.clicked === true}
+                                isActive={this.props.wallet.dropdownOpened}
+                                size={25}
+                                color={colors.TEXT_SECONDARY}
+                                icon={icons.ARROW_DOWN}
+                            />
+                        </React.Fragment>
+                    )}
                     {...this.props}
                 />
                 <Body>