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};
-    border-radius: 4px 0 0 0;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
+    background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')};
+    background: ${props => (props.isSelected ? colors.WHITE : 'transparent')};
 
-    ${props => props.isOpen && css`
+    border-radius: 4px 0 0 0;
+    box-shadow: ${props => (props.disabled ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.04)')};
+
+    ${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,72 +91,42 @@ 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() {
-        this.setState({ clicked: true });
-        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}>
-                <ClickWrapper disabled={disabled} onClick={() => this.handleClickWrapper()}>
-                    <ImageWrapper>
-                        <Dot color={getStatusColor(status)} />
-                        <TrezorImage model={getVersion(device)} />
-                    </ImageWrapper>
-                    <LabelWrapper>
-                        <Name>{device.instanceLabel}</Name>
-                        <Status>{getStatusName(status)}</Status>
-                    </LabelWrapper>
-                    <IconWrapper>
-                        {icon && 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>
-        );
-    }
-}
+const DeviceHeader = ({
+    isOpen, icon, device, isHoverable = true, onClickWrapper, disabled = false, isSelected = false,
+}) => {
+    const status = getStatus(device);
+    return (
+        <Wrapper
+            isSelected={isSelected}
+            isOpen={isOpen}
+            isHoverable={isHoverable}
+            disabled={disabled}
+        >
+            <ClickWrapper disabled={disabled} onClick={onClickWrapper}>
+                <ImageWrapper>
+                    <Dot color={getStatusColor(status)} />
+                    <TrezorImage model={getVersion(device)} />
+                </ImageWrapper>
+                <LabelWrapper>
+                    <Name>{device.instanceLabel}</Name>
+                    <Status>{getStatusName(status)}</Status>
+                </LabelWrapper>
+                <IconWrapper>
+                    {icon && !disabled && icon}
+                </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,22 +23,30 @@ class DeviceList extends Component {
                     .map(device => (
                         device !== selectedDevice && (
                             <DeviceHeader
-                                key={`${device.instanceLabel}`}
-                                onClickWrapper={() => onSelectDevice(device)}
+                                key={device.state || device.path}
+                                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={(
-                                    <IconClick onClick={(event) => {
-                                        event.stopPropagation();
-                                        event.preventDefault();
-                                        this.onDeviceMenuClick({ type: 'forget', label: '' }, device);
-                                    }}
-                                    >
-                                        <Icon
-                                            icon={icons.EJECT}
-                                            size={25}
-                                            color={colors.TEXT_SECONDARY}
-                                        />
-                                    </IconClick>
+                                    <React.Fragment>
+                                        <IconClick onClick={(event) => {
+                                            event.stopPropagation();
+                                            event.preventDefault();
+                                            this.onDeviceMenuClick({ type: 'forget', label: '' }, device);
+                                        }}
+                                        >
+                                            <Icon
+                                                icon={icons.EJECT}
+                                                size={25}
+                                                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>