Made onReconnect not required, and added showReconnect boolean to optionally show reconnect button.

src/components/alerts/alert.jsx

@@ -11,7 +11,8 @@ const AlertComponent = ({
     iconURL,
     message,
     onCloseAlert,
-    onReconnect
+    onReconnect,
+    showReconnect
 }) => (
     <Box
         className={styles.alert}
@@ -25,16 +26,18 @@ const AlertComponent = ({
             ) : null}
             {message}
         </div>
-        <button
-            className={styles.connectionButton}
-            onClick={onReconnect}
-        >
-            <FormattedMessage
-                defaultMessage="Reconnect"
-                description="Button to reconnect the device"
-                id="gui.connection.reconnect"
-            />
-        </button>
+        {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}
         >
@@ -52,7 +55,8 @@ AlertComponent.propTypes = {
     iconURL: PropTypes.string,
     message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired,
-    onReconnect: PropTypes.func.isRequired
+    onReconnect: PropTypes.func,
+    showReconnect: PropTypes.bool.isRequired
 };
 
 export default AlertComponent;

src/components/alerts/alerts.jsx

@@ -20,6 +20,7 @@ const AlertsComponent = ({
                 index={index}
                 key={index}
                 message={a.message}
+                showReconnect={a.showReconnect}
                 onCloseAlert={onCloseAlert}
             />
         ))}

src/containers/alert.jsx

@@ -26,12 +26,14 @@ class Alert extends React.Component {
         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}
             />
@@ -56,7 +58,8 @@ Alert.propTypes = {
     index: PropTypes.number,
     message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired,
-    onOpenConnectionModal: PropTypes.func
+    onOpenConnectionModal: PropTypes.func,
+    showReconnect: PropTypes.bool.isRequired
 };
 
 export default connect(

src/reducers/alerts.js

@@ -15,12 +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;