From 514ade253a99fad02971fe1de0158c08eef31779 Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond <evhan55@gmail.com> Date: Wed, 14 Nov 2018 15:07:42 -0500 Subject: [PATCH] Adding localization to extension alerts. --- src/components/alerts/alert.jsx | 17 +++++++++++++++-- src/components/alerts/alerts.jsx | 1 + src/components/gui/gui.css | 1 + src/containers/alert.jsx | 3 +++ src/reducers/alerts.js | 8 +++++--- 5 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 78b7163ec..aaf63bca4 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 0ae89dfb0..b2b14a638 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 3e4d763c4..1e4785a53 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 9235d8d8a..3aefc70b2 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 693b444ec..ca2fd64c3 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(); -- GitLab