Handle already connected and add disconnect button

src/components/connection-modal/connected-step.jsx

@@ -33,7 +33,7 @@ const ConnectedStep = props => (
                 >
                     <FormattedMessage
                         defaultMessage="disconnect"
-                        description="Disconnect the "
+                        description="Disconnect the device"
                         id="gui.connection.disconnect"
                     />
                 </button>
@@ -53,6 +53,8 @@ const ConnectedStep = props => (
 );
 
 ConnectedStep.propTypes = {
+    onCancel: PropTypes.func,
+    onDisconnect: PropTypes.func
 };
 
 export default ConnectedStep;

src/components/connection-modal/connecting-step.jsx

@@ -25,7 +25,7 @@ const ConnectingStep = props => (
             />
             <button
                 className={styles.connectionButton}
-                onClick={props.onAbortConnecting}
+                onClick={props.onDisconnect}
             >
                 <FormattedMessage
                     defaultMessage="X"
@@ -38,7 +38,7 @@ const ConnectingStep = props => (
 );
 
 ConnectingStep.propTypes = {
-    onAbortConnecting: PropTypes.func
+    onDisconnect: PropTypes.func
 };
 
 export default ConnectingStep;

src/components/connection-modal/error-step.jsx

@@ -19,6 +19,7 @@ const ErrorStep = props => (
             </div>
             <Box className={styles.buttonRow}>
                 <button
+                    className={styles.connectionButton}
                     onClick={props.onSearch}
                 >
                     <FormattedMessage

src/containers/connection-modal.jsx

@@ -8,9 +8,9 @@ class ConnectionModal extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleAbortConnecting',
             'handleConnected',
             'handleConnecting',
+            'handleDisconnect',
             'handleError'
         ]);
         this.state = {
@@ -20,6 +20,12 @@ class ConnectionModal extends React.Component {
     componentDidMount () {
         this.props.vm.on('PERIPHERAL_CONNECTED', this.handleConnected);
         this.props.vm.on('PERIPHERAL_ERROR', this.handleError);
+
+        // Check if we're already connected
+        if (this.props.vm.getPeripheralIsConnected(this.props.extensionId)) {
+            this.handleConnected();
+        }
+
     }
     componentWillUnmount () {
         this.props.vm.removeListener('PERIPHERAL_CONNECTED', this.handleConnected);
@@ -31,17 +37,22 @@ class ConnectionModal extends React.Component {
             phase: 'connecting'
         });
     }
+    handleDisconnect () {
+        this.props.vm.disconnectExtensionSession(this.props.extensionId);
+        this.props.onCancel();
+    }
+    handleCancel () {
+        // If we're not connected to a device, close the websocket so we stop scanning.
+        if (!this.props.vm.getPeripheralIsConnected(this.props.extensionId)) {
+            this.props.vm.disconnectExtensionSession(this.props.extensionId);
+        }
+        this.props.onCancel();
+    }
     handleError () {
         this.setState({
             phase: 'error'
         });
     }
-    handleAbortConnecting () {
-        // @todo: abort the current device connection process in the VM
-        this.setState({
-            phase: 'scanning'
-        });
-    }
     handleConnected () {
         this.setState({
             phase: 'connected'
@@ -54,10 +65,10 @@ class ConnectionModal extends React.Component {
                 phase={this.state.phase}
                 title={this.props.extensionId}
                 vm={this.props.vm}
-                onAbortConnecting={this.handleAbortConnecting}
                 onCancel={this.props.onCancel}
                 onConnected={this.handleConnected}
                 onConnecting={this.handleConnecting}
+                onDisconnect={this.handleDisconnect}
             />
         );
     }