diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 78b7163ec2bf007223fb3767fa53689cd9c9b174..aaf63bca407ebed35c6f1478f9f575c7acacaf98 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -18,6 +18,7 @@ const closeButtonColors = { const AlertComponent = ({ content, closeButton, + extensionName, iconSpinner, iconURL, level, @@ -39,7 +40,18 @@ const AlertComponent = ({ /> )} <div className={styles.alertMessage}> - {content} + {extensionName ? ( + <FormattedMessage + defaultMessage="Scratch lost connection to {extensionName}" + description="Message indicating that an extension peripheral has been disconnected" + id="gui.alerts.peripheraldisconnect" + values={{ + extensionName: ( + `${extensionName}` + ) + }} + /> + ) : content} </div> {showReconnect && ( <button @@ -70,7 +82,8 @@ const AlertComponent = ({ AlertComponent.propTypes = { closeButton: PropTypes.bool, - content: PropTypes.element, + content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), + extensionName: PropTypes.string, iconSpinner: PropTypes.bool, iconURL: PropTypes.string, level: PropTypes.string, diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx index 0ae89dfb0539eb7c2c7508616c4547d444df17c6..b2b14a6384c207b825c5361f3b00b20204619e27 100644 --- a/src/components/alerts/alerts.jsx +++ b/src/components/alerts/alerts.jsx @@ -18,6 +18,7 @@ const AlertsComponent = ({ closeButton={a.closeButton} content={a.content} extensionId={a.extensionId} + extensionName={a.extensionName} iconSpinner={a.iconSpinner} iconURL={a.iconURL} index={index} diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 3e4d763c4817107abd738ec6c4c8367aae8246d6..1e4785a531bdf15fb15d705d000e28b0bd19947e 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -304,6 +304,7 @@ $fade-out-distance: 15px; .alerts-container { width: 448px; + min-width: 448px; z-index: $z-index-alerts; left: 0; right: 0; diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx index 9235d8d8a7cbb555256bc01916ccceefbcaa32d9..3aefc70b22aba900b013e64b5a8bfe75dc7e852c 100644 --- a/src/containers/alert.jsx +++ b/src/containers/alert.jsx @@ -26,6 +26,7 @@ class Alert extends React.Component { const { closeButton, content, + extensionName, index, // eslint-disable-line no-unused-vars level, iconSpinner, @@ -37,6 +38,7 @@ class Alert extends React.Component { <AlertComponent closeButton={closeButton} content={content} + extensionName={extensionName} iconSpinner={iconSpinner} iconURL={iconURL} level={level} @@ -62,6 +64,7 @@ Alert.propTypes = { closeButton: PropTypes.bool, content: PropTypes.element, extensionId: PropTypes.string, + extensionName: PropTypes.string, iconSpinner: PropTypes.bool, iconURL: PropTypes.string, index: PropTypes.number, diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js index 693b444ecfefd4d6b838df8a1b9307b14481d4cd..ca2fd64c38b983860dac94b12f622ee50b0074da 100644 --- a/src/reducers/alerts.js +++ b/src/reducers/alerts.js @@ -70,11 +70,12 @@ const reducer = function (state, action) { extensionId: extensionId, showReconnect: true }; + newAlert.extensionId = extensionId; + newAlert.showReconnect = true; const extension = extensionData.find(ext => ext.extensionId === extensionId); if (extension) { if (extension.name) { - // TODO: make translate-friendly - newAlert.content = `${action.data.message} ${extension.name}`; + newAlert.extensionName = extension.name; } if (extension.smallPeripheralImage) { newAlert.iconURL = extension.smallPeripheralImage; @@ -82,11 +83,12 @@ const reducer = function (state, action) { newAlert.closeButton = true; } newList.push(newAlert); + return Object.assign({}, state, { alertsList: newList }); } - return state; // if extension not found, show nothing + return state; // if alert not found, show nothing } case CLOSE_ALERT: { const newList = state.alertsList.slice();