Merge pull request #3209 from evhan55/multiple-alerts

Show multiple alerts in a stack and allow for custom alert icons.

package.json

@@ -102,7 +102,7 @@
     "scratch-render": "0.1.0-prerelease.20180918201144",
     "scratch-storage": "1.0.2",
     "scratch-svg-renderer": "0.2.0-prerelease.20180926143036",
-    "scratch-vm": "0.2.0-prerelease.20180918201814",
+    "scratch-vm": "0.2.0-prerelease.20180925190229",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",

src/components/alerts/alert.css

@@ -13,6 +13,12 @@
     border-radius: 8px;
     padding: 12px;
     box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
+    margin-bottom: 7px;
+}
+
+.alert-icon {
+    vertical-align: middle;
+    margin-right: 5px;
 }
 
 .alert-message {

src/components/alerts/alerts.jsx → src/components/alerts/alert.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';
 
 import styles from './alert.css';
 
-const Alerts = ({
-    className,
+const AlertComponent = ({
+    iconURL,
     message,
     onCloseAlert
 }) => (
     <Box
-        bounds="parent"
-        className={classNames(className)}
+        className={styles.alert}
     >
-        <Box
-            className={styles.alert}
+        <div className={styles.alertMessage}>
+            {iconURL ? (
+                <img
+                    className={styles.alertIcon}
+                    src={iconURL}
+                />
+            ) : null}
+            {message}
+        </div>
+        <Button
+            className={styles.alertRemoveButton}
+            onClick={onCloseAlert}
         >
-            <div className={styles.alertMessage}>
-                {message}
-            </div>
-            <Button
-                className={styles.alertRemoveButton}
-                onClick={onCloseAlert}
-            >
-                { /* eslint-disable react/jsx-no-literals */ }
-                x
-            </Button>
-        </Box>
+            {'x'}
+        </Button>
     </Box>
 );
 
-Alerts.propTypes = {
-    className: PropTypes.string,
-    message: PropTypes.string.isRequired,
+AlertComponent.propTypes = {
+    iconURL: PropTypes.string,
+    message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired
 };
 
-export default Alerts;
+export default AlertComponent;

src/containers/alert.jsx

+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+
+import AlertComponent from '../components/alerts/alert.jsx';
+
+class Alert extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleOnCloseAlert'
+        ]);
+    }
+    handleOnCloseAlert () {
+        this.props.onCloseAlert(this.props.index);
+    }
+    render () {
+        return (
+            <AlertComponent
+                iconURL={this.props.iconURL}
+                message={this.props.message}
+                onCloseAlert={this.handleOnCloseAlert}
+            />
+        );
+    }
+}
+
+Alert.propTypes = {
+    iconURL: PropTypes.string,
+    index: PropTypes.number,
+    message: PropTypes.string,
+    onCloseAlert: PropTypes.func.isRequired
+};
+
+export default Alert;

src/containers/alerts.jsx

+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
 import {
-    showAlert,
     closeAlert
 } from '../reducers/alerts';
 
-import AlertsComponent from '../components/alerts/alerts.jsx';
+import Box from '../components/box/box.jsx';
+import Alert from '../containers/alert.jsx';
+
+const Alerts = ({
+    alertsList,
+    className,
+    onCloseAlert
+}) => (
+    <Box
+        bounds="parent"
+        className={classNames(className)}
+    >
+        {alertsList.map((a, index) => (
+            <Alert
+                iconURL={a.iconURL}
+                index={index}
+                key={index}
+                message={a.message}
+                onCloseAlert={onCloseAlert}
+            />
+        ))}
+    </Box>
+);
+
+Alerts.propTypes = {
+    alertsList: PropTypes.arrayOf(PropTypes.object),
+    className: PropTypes.string,
+    onCloseAlert: PropTypes.func
+};
 
 const mapStateToProps = state => ({
-    visible: state.scratchGui.alerts.visible,
-    message: state.scratchGui.alerts.message
+    alertsList: state.scratchGui.alerts.alertsList
 });
 
 const mapDispatchToProps = dispatch => ({
-    onShowAlert: () => dispatch(showAlert()),
-    onCloseAlert: () => dispatch(closeAlert())
+    onCloseAlert: index => dispatch(closeAlert(index))
 });
 
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(AlertsComponent);
+)(Alerts);

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';
 
 const initialState = {
-    message: '',
-    visible: false
+    visible: true,
+    alertsList: []
 };
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
-    case SHOW_ALERT:
+    case SHOW_ALERT: {
+        const newList = state.alertsList.slice();
+        const newAlert = {message: action.data.message};
+        const extensionId = action.data.extensionId;
+        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.message = `${newAlert.message} ${extension.name}.`;
+            }
+            if (extension && extension.smallPeripheralImage) {
+                newAlert.iconURL = extension.smallPeripheralImage;
+            }
+        }
+        // TODO: add cases for other kinds of alerts here?
+        newList.push(newAlert);
         return Object.assign({}, state, {
-            visible: true,
-            message: action.message
+            alertsList: newList
         });
-    case CLOSE_ALERT:
+    }
+    case CLOSE_ALERT: {
+        const newList = state.alertsList.slice();
+        newList.splice(action.index, 1);
         return Object.assign({}, state, {
-            visible: false
+            alertsList: newList
         });
+    }
     default:
         return state;
     }
 };
 
-const closeAlert = function () {
-    return {type: CLOSE_ALERT};
+/**
+ * Function to close an alert with the given index.
+ *
+ * @param {object} index - the index of the alert to close.
+ * @return {object} - an object to be passed to the reducer.
+ */
+const closeAlert = function (index) {
+    return {
+        type: CLOSE_ALERT,
+        index
+    };
 };
 
-const showAlert = function (message) {
+/**
+ * Function to show an alert with the given input data.
+ *
+ * @param {object} data - data with the following props: {message, extensionId=null}
+ * @return {object} - an object to be passed to the reducer.
+ */
+const showAlert = function (data) {
     return {
         type: SHOW_ALERT,
-        message
+        data
     };
 };