Adding a custom extension image to alerts, etc.

src/components/alerts/alerts.jsx

 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 
@@ -21,6 +22,9 @@ const Alerts = ({
                 key={index}
             >
                 <div className={styles.alertMessage}>
+                    <img
+                        src={a.iconURL}
+                    />
                     {a.message}
                 </div>
                 <Button

src/containers/alerts.jsx

@@ -9,7 +9,6 @@ import AlertsComponent from '../components/alerts/alerts.jsx';
 
 const mapStateToProps = state => ({
     visible: state.scratchGui.alerts.visible,
-    message: state.scratchGui.alerts.message,
     alertsList: state.scratchGui.alerts.alertsList
 });
 

src/lib/vm-listener-hoc.jsx

@@ -139,8 +139,8 @@ const vmListenerHOC = function (WrappedComponent) {
         onProjectRunStop: () => dispatch(setRunningState(false)),
         onTurboModeOn: () => dispatch(setTurboState(true)),
         onTurboModeOff: () => dispatch(setTurboState(false)),
-        onShowAlert: () => {
-            dispatch(showAlert('Scratch has lost connection to peripheral.'));
+        onShowAlert: data => {
+            dispatch(showAlert(data));
         }
     });
     return connect(

src/reducers/alerts.js

+import extensionData from '../lib/libraries/extensions/index.jsx';
+
 const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
 const SHOW_ALERT = 'scratch-gui/alerts/SHOW_ALERT';
 
@@ -11,7 +13,14 @@ const reducer = function (state, action) {
     switch (action.type) {
     case SHOW_ALERT: {
         const newList = state.alertsList.slice();
-        newList.push({message: action.message});
+        const newAlert = {message: action.data.message};
+        if (action.data.extensionId) {
+            const extension = extensionData.find(ext => ext.extensionId === action.data.extensionId);
+            if (extension && extension.smallPeripheralImage) {
+                newAlert.iconURL = extension.smallPeripheralImage;
+            }
+        }
+        newList.push(newAlert);
         return Object.assign({}, state, {
             alertsList: newList
         });
@@ -35,10 +44,10 @@ const closeAlert = function (index) {
     };
 };
 
-const showAlert = function (message) {
+const showAlert = function (data) {
     return {
         type: SHOW_ALERT,
-        message
+        data
     };
 };