Adding an alert reconnect button to the alert component.

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,8 @@ import styles from './alert.css';
 const AlertComponent = ({
     iconURL,
     message,
-    onCloseAlert
+    onCloseAlert,
+    onReconnect
 }) => (
     <Box
         className={styles.alert}
@@ -23,19 +25,34 @@ const AlertComponent = ({
             ) : null}
             {message}
         </div>
-        <CloseButton
-            className={styles.alertCloseButton}
-            color={CloseButton.COLOR_ORANGE}
-            size={CloseButton.SIZE_LARGE}
-            onClick={onCloseAlert}
-        />
+        <button
+            className={styles.connectionButton}
+            onClick={onReconnect}
+        >
+            <FormattedMessage
+                defaultMessage="Reconnect"
+                description="Button to disconnect the device"
+                id="gui.connection.disconnect"
+            />
+        </button>
+        <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.isRequired
 };
 
 export default AlertComponent;

src/components/alerts/alerts.jsx

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 
 import Box from '../box/box.jsx';
 import Alert from '../../containers/alert.jsx';
+import VM from 'scratch-vm';
 
 const AlertsComponent = ({
     alertsList,
     className,
-    onCloseAlert
+    onCloseAlert,
+    vm
 }) => (
     <Box
         bounds="parent"
@@ -19,6 +21,7 @@ const AlertsComponent = ({
                 index={index}
                 key={index}
                 message={a.message}
+                vm={vm}
                 onCloseAlert={onCloseAlert}
             />
         ))}
@@ -28,7 +31,8 @@ const AlertsComponent = ({
 AlertsComponent.propTypes = {
     alertsList: PropTypes.arrayOf(PropTypes.object),
     className: PropTypes.string,
-    onCloseAlert: PropTypes.func
+    onCloseAlert: PropTypes.func,
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
 export default AlertsComponent;

src/components/gui/gui.jsx

@@ -130,7 +130,10 @@ const GUIComponent = props => {
                 vm={vm}
             >
                 {alertsVisible ? (
-                    <Alerts className={styles.alertsContainer} />
+                    <Alerts
+                        className={styles.alertsContainer}
+                        vm={vm}
+                    />
                 ) : null}
             </StageWrapper>
         ) : (
@@ -158,7 +161,10 @@ const GUIComponent = props => {
                     <Cards />
                 ) : null}
                 {alertsVisible ? (
-                    <Alerts className={styles.alertsContainer} />
+                    <Alerts
+                        className={styles.alertsContainer}
+                        vm={vm}
+                    />
                 ) : null}
                 {connectionModalVisible ? (
                     <ConnectionModal

src/containers/alert.jsx

 import React from 'react';
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import VM from 'scratch-vm';
 
 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) {
@@ -14,6 +18,10 @@ class Alert extends React.Component {
     handleOnCloseAlert () {
         this.props.onCloseAlert(this.props.index);
     }
+    handleOnReconnect () {
+        // this.props.vm.emit('')
+        console.log('hello');
+    }
     render () {
         const {
             index, // eslint-disable-line no-unused-vars
@@ -25,16 +33,28 @@ class Alert extends React.Component {
                 iconURL={iconURL}
                 message={message}
                 onCloseAlert={this.handleOnCloseAlert}
+                onReconnect={this.handleOnReconnect}
             />
         );
     }
 }
 
+const mapDispatchToProps = dispatch => ({
+    onOpenConnectionModal: id => {
+        dispatch(setConnectionModalExtensionId(id));
+        dispatch(openConnectionModal());
+    }
+});
+
 Alert.propTypes = {
     iconURL: PropTypes.string,
     index: PropTypes.number,
     message: PropTypes.string,
-    onCloseAlert: PropTypes.func.isRequired
+    onCloseAlert: PropTypes.func.isRequired,
+    onOpenConnectionModal: PropTypes.func,
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default Alert;
+export default connect(
+    mapDispatchToProps
+)(Alerts);

src/containers/alerts.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import VM from 'scratch-vm';
 
 import {
     closeAlert
@@ -11,11 +12,13 @@ import AlertsComponent from '../components/alerts/alerts.jsx';
 const Alerts = ({
     alertsList,
     className,
-    onCloseAlert
+    onCloseAlert,
+    vm
 }) => (
     <AlertsComponent
         alertsList={alertsList}
         className={className}
+        vm={vm}
         onCloseAlert={onCloseAlert}
     />
 );
@@ -23,7 +26,8 @@ const Alerts = ({
 Alerts.propTypes = {
     alertsList: PropTypes.arrayOf(PropTypes.object),
     className: PropTypes.string,
-    onCloseAlert: PropTypes.func
+    onCloseAlert: PropTypes.func,
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
 const mapStateToProps = state => ({