Merge pull request #3530 from evhan55/alert-reconnect-button

Add reconnect button to hardware disconnect alerts

src/components/alerts/alert.css

@@ -30,7 +30,29 @@
 }
 
 .alert-close-button {
+    outline-style:none;
+}
+
+.alert-close-button-container {
     margin-top: 7px;
     margin-right: 4px;
     outline-style:none;
+    width: 30px;
+    height: 30px;
+}
+
+.connection-button {
+    padding: 0.55rem 0.9rem;
+    border-radius: 0.35rem;
+    background: #FF8C1A;
+    color: white;
+    font-weight: 700;
+    font-size: 0.77rem;
+    margin: 0.25rem;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: 13px;
+    outline-style:none;
 }

src/components/alerts/alert.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
 import CloseButton from '../close-button/close-button.jsx';
@@ -9,7 +10,9 @@ import styles from './alert.css';
 const AlertComponent = ({
     iconURL,
     message,
-    onCloseAlert
+    onCloseAlert,
+    onReconnect,
+    showReconnect
 }) => (
     <Box
         className={styles.alert}
@@ -23,19 +26,37 @@ const AlertComponent = ({
             ) : null}
             {message}
         </div>
-        <CloseButton
-            className={styles.alertCloseButton}
-            color={CloseButton.COLOR_ORANGE}
-            size={CloseButton.SIZE_LARGE}
-            onClick={onCloseAlert}
-        />
+        {showReconnect ? (
+            <button
+                className={styles.connectionButton}
+                onClick={onReconnect}
+            >
+                <FormattedMessage
+                    defaultMessage="Reconnect"
+                    description="Button to reconnect the device"
+                    id="gui.connection.reconnect"
+                />
+            </button>
+        ) : null}
+        <Box
+            className={styles.alertCloseButtonContainer}
+        >
+            <CloseButton
+                className={styles.alertCloseButton}
+                color={CloseButton.COLOR_ORANGE}
+                size={CloseButton.SIZE_LARGE}
+                onClick={onCloseAlert}
+            />
+        </Box>
     </Box>
 );
 
 AlertComponent.propTypes = {
     iconURL: PropTypes.string,
     message: PropTypes.string,
-    onCloseAlert: PropTypes.func.isRequired
+    onCloseAlert: PropTypes.func.isRequired,
+    onReconnect: PropTypes.func,
+    showReconnect: PropTypes.bool.isRequired
 };
 
 export default AlertComponent;

src/components/alerts/alerts.jsx

@@ -15,10 +15,12 @@ const AlertsComponent = ({
     >
         {alertsList.map((a, index) => (
             <Alert
+                extensionId={a.extensionId}
                 iconURL={a.iconURL}
                 index={index}
                 key={index}
                 message={a.message}
+                showReconnect={a.showReconnect}
                 onCloseAlert={onCloseAlert}
             />
         ))}

src/components/gui/gui.css

@@ -303,7 +303,7 @@ $fade-out-distance: 15px;
 /* Alerts */
 
 .alerts-container {
-    width: 448px;
+    width: 520px;
     z-index: $z-index-alerts;
     left: 0;
     right: 0;

src/containers/alert.jsx

 import React from 'react';
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
 
 import AlertComponent from '../components/alerts/alert.jsx';
+import {openConnectionModal} from '../reducers/modals';
+import {setConnectionModalExtensionId} from '../reducers/connection-modal';
 
 class Alert extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleOnCloseAlert'
+            'handleOnCloseAlert',
+            'handleOnReconnect'
         ]);
     }
     handleOnCloseAlert () {
         this.props.onCloseAlert(this.props.index);
     }
+    handleOnReconnect () {
+        this.props.onOpenConnectionModal(this.props.extensionId);
+        this.handleOnCloseAlert();
+    }
     render () {
         const {
             index, // eslint-disable-line no-unused-vars
             iconURL,
-            message
+            message,
+            showReconnect
         } = this.props;
         return (
             <AlertComponent
                 iconURL={iconURL}
                 message={message}
+                showReconnect={showReconnect}
                 onCloseAlert={this.handleOnCloseAlert}
+                onReconnect={this.handleOnReconnect}
             />
         );
     }
 }
 
+const mapStateToProps = state => ({
+    state: state
+});
+
+const mapDispatchToProps = dispatch => ({
+    onOpenConnectionModal: id => {
+        dispatch(setConnectionModalExtensionId(id));
+        dispatch(openConnectionModal());
+    }
+});
+
 Alert.propTypes = {
+    extensionId: PropTypes.string,
     iconURL: PropTypes.string,
     index: PropTypes.number,
     message: PropTypes.string,
-    onCloseAlert: PropTypes.func.isRequired
+    onCloseAlert: PropTypes.func.isRequired,
+    onOpenConnectionModal: PropTypes.func,
+    showReconnect: PropTypes.bool.isRequired
 };
 
-export default Alert;
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Alert);

src/reducers/alerts.js

@@ -15,11 +15,14 @@ const reducer = function (state, action) {
         const newList = state.alertsList.slice();
         const newAlert = {message: action.data.message};
         const extensionId = action.data.extensionId;
+        newAlert.showReconnect = false;
         if (extensionId) { // if it's an extension
             const extension = extensionData.find(ext => ext.extensionId === extensionId);
             if (extension && extension.name) {
                 // TODO: is this the right place to assemble this message?
+                newAlert.extensionId = extensionId;
                 newAlert.message = `${newAlert.message} ${extension.name}.`;
+                newAlert.showReconnect = true;
             }
             if (extension && extension.smallPeripheralImage) {
                 newAlert.iconURL = extension.smallPeripheralImage;