🔀 merge from develop

client/components/AddRemoveButton.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
 
 import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
-const AddRemoveButton = ({ type, onClick }) => {
-  const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
+const AddRemoveButton = ({ type, onClick, t }) => {
+  const alt = type === 'add' ? t('AddRemoveButton.AltAddARIA') : t('AddRemoveButton.AltRemoveARIA');
   const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (
@@ -22,6 +24,7 @@ const AddRemoveButton = ({ type, onClick }) => {
 AddRemoveButton.propTypes = {
   type: PropTypes.oneOf(['add', 'remove']).isRequired,
   onClick: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default AddRemoveButton;
+export default withTranslation()(AddRemoveButton);

client/components/Nav.jsx

@@ -5,7 +5,7 @@ import { withRouter } from 'react-router';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import i18next from 'i18next';
+import { languageKeyToLabel } from '../i18n';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
 import * as projectActions from '../modules/IDE/actions/project';
@@ -549,7 +549,7 @@ class Nav extends React.PureComponent {
 
   renderLanguageMenu(navDropdownState) {
     return (
-      <ul className="nav__items-right" title="user-menu">
+      <React.Fragment>
         <li className={navDropdownState.lang}>
           <button
             onClick={this.toggleDropdownForLang}
@@ -561,7 +561,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
+            <span className="nav__item-header"> {languageKeyToLabel(this.props.language)}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -597,7 +597,7 @@ class Nav extends React.PureComponent {
             </li>
           </ul>
         </li>
-      </ul>
+      </React.Fragment>
     );
   }
 
@@ -605,6 +605,7 @@ class Nav extends React.PureComponent {
   renderUnauthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
             <span className="nav__item-header">{this.props.t('Nav.Login')}</span>
@@ -623,10 +624,7 @@ class Nav extends React.PureComponent {
   renderAuthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
-        <li className="nav__item">
-          <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
-        </li>
-        <span className="nav__item-spacer">|</span>
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className={navDropdownState.account}>
           <button
             className="nav__item-header"
@@ -639,7 +637,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            {this.props.t('Nav.Auth.MyAccount')}
+            <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -755,7 +753,6 @@ class Nav extends React.PureComponent {
       <header>
         <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
           {this.renderLeftLayout(navDropdownState)}
-          {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
           {this.renderUserMenu(navDropdownState)}
         </nav>
       </header>
@@ -809,6 +806,7 @@ Nav.propTypes = {
   }),
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
 };
 
 Nav.defaultProps = {
@@ -829,7 +827,8 @@ function mapStateToProps(state) {
     project: state.project,
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
-    rootFile: state.files.filter(file => file.name === 'root')[0]
+    rootFile: state.files.filter(file => file.name === 'root')[0],
+    language: state.preferences.language
   };
 }
 

client/components/PreviewNav.jsx

@@ -1,22 +1,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project }) => (
+const PreviewNav = ({ owner, project, t }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+        <LogoIcon role="img" aria-label={t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
-      <p className="toolbar__project-owner">by</p>
+      <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
       <Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
     </div>
     <div className="nav__items-right">
-      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
+      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label={t('PreviewNav.EditSketchARIA')} >
         <CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
       </Link>
     </div>
@@ -31,6 +32,7 @@ PreviewNav.propTypes = {
     name: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
   }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default PreviewNav;
+export default withTranslation()(PreviewNav);

client/components/__test__/Nav.test.jsx

@@ -46,7 +46,8 @@ describe('Nav', () => {
       id: 'root-file'
     },
     t: jest.fn(),
-    setLanguage: jest.fn()
+    setLanguage: jest.fn(),
+    language: 'en-US'
   };
 
   it('renders correctly', () => {

client/i18n-test.js

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translations from '../translations/locales/en-US/translations.json';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    lng: 'en-US',
+    fallbackLng: 'en-US',
+
+    // have a common namespace used around the full app
+    ns: ['translations'],
+    defaultNS: 'translations',
+
+    debug: false,
+
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+    },
+
+    resources: { 'en-US': { translations } },
+  });
+
+
+export default i18n;

client/i18n.js

@@ -6,6 +6,14 @@ import Backend from 'i18next-http-backend';
 const fallbackLng = ['en-US'];
 const availableLanguages = ['en-US', 'es-419'];
 
+export function languageKeyToLabel(lang) {
+  const languageMap = {
+    'en-US': 'English',
+    'es-419': 'Español'
+  };
+  return languageMap[lang];
+}
+
 const options = {
   loadPath: '/locales/{{lng}}/translations.json',
   requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })

client/jest.setup.js

@@ -3,21 +3,3 @@ import '@babel/polyfill';
 // See: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
-
-import lodash from 'lodash';
-
-// For testing, we use en-US and provide a mock implementation
-// of t() that finds the correct translation
-import translations from '../translations/locales/en-US/translations.json';
-
-// This function name needs to be prefixed with "mock" so that Jest doesn't
-// complain that it's out-of-scope in the mock below
-const mockTranslate = key => lodash.get(translations, key);
-
-jest.mock('react-i18next', () => ({
-  // this mock makes sure any components using the translate HoC receive the t function as a prop
-  withTranslation: () => (Component) => {
-    Component.defaultProps = { ...Component.defaultProps, t: mockTranslate };
-    return Component;
-  },
-}));

client/modules/IDE/components/AssetList.jsx

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';
 import { Helmet } from 'react-helmet';
 import prettyBytes from 'pretty-bytes';
+import { withTranslation } from 'react-i18next';
 
 import Loader from '../../App/components/loader';
 import * as AssetActions from '../actions/assets';
@@ -85,7 +86,7 @@ class AssetListRowBase extends React.Component {
             onClick={this.toggleOptions}
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
-            aria-label="Toggle Open/Close Asset Options"
+            aria-label={this.props.t('AssetList.ToggleOpenCloseARIA')}
           >
             <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
           </button>
@@ -100,7 +101,7 @@ class AssetListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Delete
+                  {this.props.t('AssetList.Delete')}
                 </button>
               </li>
               <li>
@@ -111,7 +112,7 @@ class AssetListRowBase extends React.Component {
                   onFocus={this.onFocusComponent}
                   className="asset-table__action-option"
                 >
-                  Open in New Tab
+                  {this.props.t('AssetList.OpenNewTab')}
                 </Link>
               </li>
             </ul>}
@@ -131,7 +132,8 @@ AssetListRowBase.propTypes = {
     size: PropTypes.number.isRequired
   }).isRequired,
   deleteAssetRequest: PropTypes.func.isRequired,
-  username: PropTypes.string.isRequired
+  username: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapStateToPropsAssetListRow(state) {
@@ -153,7 +155,7 @@ class AssetList extends React.Component {
   }
 
   getAssetsTitle() {
-    return 'p5.js Web Editor | My assets';
+    return this.props.t('AssetList.Title');
   }
 
   hasAssets() {
@@ -167,13 +169,13 @@ class AssetList extends React.Component {
 
   renderEmptyTable() {
     if (!this.props.loading && this.props.assetList.length === 0) {
-      return (<p className="asset-table__empty">No uploaded assets.</p>);
+      return (<p className="asset-table__empty">{this.props.t('AssetList.NoUploadedAssets')}</p>);
     }
     return null;
   }
 
   render() {
-    const { assetList } = this.props;
+    const { assetList, t } = this.props;
     return (
       <article className="asset-table-container">
         <Helmet>
@@ -185,9 +187,9 @@ class AssetList extends React.Component {
           <table className="asset-table">
             <thead>
               <tr>
-                <th>Name</th>
-                <th>Size</th>
-                <th>Sketch</th>
+                <th>{t('AssetList.HeaderName')}</th>
+                <th>{t('AssetList.HeaderSize')}</th>
+                <th>{t('AssetList.HeaderSketch')}</th>
                 <th scope="col"></th>
               </tr>
             </thead>
@@ -212,7 +214,8 @@ AssetList.propTypes = {
     sketchId: PropTypes.string
   })).isRequired,
   getAssets: PropTypes.func.isRequired,
-  loading: PropTypes.bool.isRequired
+  loading: PropTypes.bool.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
@@ -227,4 +230,4 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(Object.assign({}, AssetActions), dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AssetList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(AssetList));

client/modules/IDE/components/CopyableInput.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Clipboard from 'clipboard';
 import classNames from 'classnames';
+import { withTranslation } from 'react-i18next';
 
 import ShareIcon from '../../../images/share.svg';
 
@@ -45,7 +46,7 @@ class CopyableInput extends React.Component {
       <div className={copyableInputClass}>
         <div
           className="copyable-input__value-container tooltipped-no-delay"
-          aria-label="Copied to Clipboard!"
+          aria-label={this.props.t('CopyableInput.CopiedARIA')}
           ref={(element) => { this.tooltip = element; }}
           onMouseLeave={this.onMouseLeaveHandler}
         >
@@ -69,7 +70,7 @@ class CopyableInput extends React.Component {
             rel="noopener noreferrer"
             href={value}
             className="copyable-input__preview"
-            aria-label={`Open ${label} view in new tab`}
+            aria-label={this.props.t('CopyableInput.CopiedARIA', { label })}
           >
             <ShareIcon focusable="false" aria-hidden="true" />
           </a>
@@ -82,11 +83,12 @@ class CopyableInput extends React.Component {
 CopyableInput.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  hasPreviewLink: PropTypes.bool
+  hasPreviewLink: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 CopyableInput.defaultProps = {
   hasPreviewLink: false
 };
 
-export default CopyableInput;
+export default withTranslation()(CopyableInput);

client/modules/IDE/components/EditableInput.jsx

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import { withTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import EditIcon from '../../../images/pencil.svg';
 
+
 // TODO I think this needs a description prop so that it's accessible
 function EditableInput({
   validate,
@@ -58,7 +60,7 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={`Edit ${displayValue} value`}
+        aria-label={this.props.t('EditableInput.EditValue', { display: displayValue })}
       >
         <span>{displayValue}</span>
         <EditIcon
@@ -84,7 +86,7 @@ function EditableInput({
 }
 
 EditableInput.defaultProps = {
-  emptyPlaceholder: 'No value',
+  emptyPlaceholder: i18next.t('EditableInput.EmptyPlaceholder'),
   InputComponent: 'input',
   inputProps: {},
   validate: () => true,
@@ -99,6 +101,7 @@ EditableInput.propTypes = {
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
   value: PropTypes.string,
+  t: PropTypes.func.isRequired
 };
 
-export default EditableInput;
+export default withTranslation()(EditableInput);

client/modules/IDE/components/Editor.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
 import beautifyJS from 'js-beautify';
+import { withTranslation } from 'react-i18next';
 import 'codemirror/mode/css/css';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/lint/lint';
@@ -148,7 +149,7 @@ class Editor extends React.Component {
     }, 1000));
 
     this._cm.on('keyup', () => {
-      const temp = `line ${parseInt((this._cm.getCursor().line) + 1, 10)}`;
+      const temp = this.props.t('Editor.KeyUpLineNumber', { lineNumber: parseInt((this._cm.getCursor().line) + 1, 10) });
       document.getElementById('current-line').innerHTML = temp;
     });
 
@@ -329,14 +330,14 @@ class Editor extends React.Component {
       <section className={editorSectionClass} >
         <header className="editor__header">
           <button
-            aria-label="Open Sketch files navigation"
+            aria-label={this.props.t('Editor.OpenSketchARIA')}
             className="sidebar__contract"
             onClick={this.props.collapseSidebar}
           >
             <LeftArrowIcon focusable="false" aria-hidden="true" />
           </button>
           <button
-            aria-label="Close sketch files navigation"
+            aria-label={this.props.t('Editor.CloseSketchARIA')}
             className="sidebar__expand"
             onClick={this.props.expandSidebar}
           >
@@ -347,7 +348,7 @@ class Editor extends React.Component {
               {this.props.file.name}
               <span className="editor__unsaved-changes">
                 {this.props.unsavedChanges ?
-                  <UnsavedChangesDotIcon role="img" aria-label="Sketch has unsaved changes" focusable="false" /> :
+                  <UnsavedChangesDotIcon role="img" aria-label={this.props.t('Editor.UnsavedChangesARIA')} focusable="false" /> :
                   null}
               </span>
             </span>
@@ -415,7 +416,8 @@ Editor.propTypes = {
   showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
   runtimeErrorWarningVisible: PropTypes.bool.isRequired,
-  provideController: PropTypes.func.isRequired
+  provideController: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 Editor.defaultProps = {
@@ -466,4 +468,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Editor);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Editor));

client/modules/IDE/components/EditorAccessibility.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 class EditorAccessibility extends React.Component {
   componentDidMount() {
@@ -17,14 +18,14 @@ class EditorAccessibility extends React.Component {
           </li>));
       });
     } else {
-      messages.push(<li key={0}> There are no lint messages </li>);
+      messages.push(<li key={0}>{this.props.t('EditorAccessibility.NoLintMessages')}</li>);
     }
     return (
       <div className="editor-accessibility">
         <ul className="editor-lintmessages" title="lint messages">
           {messages}
         </ul>
-        <p> Current line
+        <p> {this.props.t('EditorAccessibility.CurrentLine')}
           <span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> </span>
         </p>
       </div>
@@ -39,6 +40,7 @@ EditorAccessibility.propTypes = {
     message: PropTypes.string.isRequired,
     id: PropTypes.number.isRequired
   })).isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default EditorAccessibility;
+export default withTranslation()(EditorAccessibility);

client/modules/IDE/components/Feedback.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import GitHubLogo from '../../../images/github.svg';
 
 function Feedback(props) {
   return (
     <div className="feedback__content">
       <Helmet>
-        <title>p5.js Web Editor | Feedback</title>
+        <title>{this.props.t('Feedback.Title')}</title>
       </Helmet>
       <div className="feedback__content-pane">
         <h2 className="feedback__content-pane-header">
@@ -47,4 +48,4 @@ function Feedback(props) {
   );
 }
 
-export default Feedback;
+export default withTranslation()(Feedback);

client/modules/IDE/components/FileNode.jsx

@@ -67,7 +67,7 @@ FileName.propTypes = {
   name: PropTypes.string.isRequired
 };
 
-export class FileNode extends React.Component {
+class FileNode extends React.Component {
   constructor(props) {
     super(props);
 
@@ -419,4 +419,7 @@ const TranslatedFileNode = withTranslation()(FileNode);
 
 const ConnectedFileNode = connect(mapStateToProps, mapDispatchToProps)(TranslatedFileNode);
 
-export default ConnectedFileNode;
+export {
+  TranslatedFileNode as FileNode,
+  ConnectedFileNode as default
+};

client/modules/IDE/components/FileNode.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+
+import { fireEvent, render, screen, waitFor, within } from '../../../test-utils';
 import { FileNode } from './FileNode';
 
 describe('<FileNode />', () => {

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -8,7 +8,7 @@ import Icons from './Icons';
 const Item = ({
   isAdded, onSelect, name, url, t
 }) => {
-  const buttonLabel = isAdded ? 'Remove from collection' : 'Add to collection';
+  const buttonLabel = isAdded ? t('QuickAddList.ButtonRemoveARIA') : t('QuickAddList.ButtonAddToCollectionARIA');
   return (
     <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
       <button className="quick-add__item-toggle" onClick={onSelect} aria-label={buttonLabel}>

client/modules/IDE/components/Searchbar/Collection.jsx

@@ -1,14 +1,16 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import i18next from 'i18next';
 import * as SortingActions from '../../actions/sorting';
 
 import Searchbar from './Searchbar';
 
+
 const scope = 'collection';
 
 function mapStateToProps(state) {
   return {
-    searchLabel: 'Search collections...',
+    searchLabel: i18next.t('Searchbar.SearchCollection'),
     searchTerm: state.search[`${scope}SearchTerm`],
   };
 }

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { throttle } from 'lodash';
-
+import { withTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
+
 class Searchbar extends React.Component {
   constructor(props) {
     super(props);
@@ -50,7 +52,7 @@ class Searchbar extends React.Component {
         <button
           className="searchbar__clear-button"
           onClick={this.handleResetSearch}
-        >clear
+        >{this.props.t('Searchbar.ClearTerm')}
         </button>
       </div>
     );
@@ -62,10 +64,11 @@ Searchbar.propTypes = {
   setSearchTerm: PropTypes.func.isRequired,
   resetSearchTerm: PropTypes.func.isRequired,
   searchLabel: PropTypes.string,
+  t: PropTypes.func.isRequired
 };
 
 Searchbar.defaultProps = {
-  searchLabel: 'Search sketches...',
+  searchLabel: i18next.t('Searchbar.SearchSketch')
 };
 
-export default Searchbar;
+export default withTranslation()(Searchbar);

client/modules/IDE/components/Searchbar/Sketch.jsx

@@ -1,5 +1,6 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import i18next from 'i18next';
 import * as SortingActions from '../../actions/sorting';
 
 import Searchbar from './Searchbar';
@@ -8,6 +9,7 @@ const scope = 'sketch';
 
 function mapStateToProps(state) {
   return {
+    searchLabel: i18next.t('Searchbar.SearchSketch'),
     searchTerm: state.search[`${scope}SearchTerm`],
   };
 }

client/modules/IDE/components/Timer.jsx

@@ -3,6 +3,7 @@ import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 class Timer extends React.Component {
   constructor(props) {
@@ -23,17 +24,19 @@ class Timer extends React.Component {
   showSavedTime() {
     const now = new Date();
     if (Math.abs(differenceInMilliseconds(now, this.props.projectSavedTime) < 10000)) {
-      return 'Saved: just now';
+      return this.props.t('Timer.SavedJustNow');
     } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 20000) {
-      return 'Saved: 15 seconds ago';
+      return this.props.t('Timer.Saved15Seconds');
     } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 30000) {
-      return 'Saved: 25 seconds ago';
+      return this.props.t('Timer.Saved25Seconds');
     } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 46000) {
-      return 'Saved: 35 seconds ago';
+      return this.props.t('Timer.Saved35Seconds');
     }
-    return `Saved: ${distanceInWordsToNow(this.props.projectSavedTime, {
+
+    const timeAgo = distanceInWordsToNow(this.props.projectSavedTime, {
       includeSeconds: true
-    })} ago`;
+    });
+    return this.props.t('Timer.SavedAgo', { timeAgo });
   }
 
   render() {
@@ -51,11 +54,12 @@ class Timer extends React.Component {
 
 Timer.propTypes = {
   projectSavedTime: PropTypes.string.isRequired,
-  isUserOwner: PropTypes.bool
+  isUserOwner: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 Timer.defaultProps = {
   isUserOwner: false
 };
 
-export default Timer;
+export default withTranslation()(Timer);

client/modules/IDE/components/Toolbar.jsx

@@ -86,7 +86,7 @@ class Toolbar extends React.Component {
             this.props.setTextOutput(true);
             this.props.setGridOutput(true);
           }}
-          aria-label="Play sketch"
+          aria-label={this.props.t('Toolbar.PlaySketchARIA')}
           disabled={this.props.infiniteLoop}
         >
           <PlayIcon focusable="false" aria-hidden="true" />
@@ -94,7 +94,7 @@ class Toolbar extends React.Component {
         <button
           className={playButtonClass}
           onClick={this.props.startSketch}
-          aria-label="Play only visual sketch"
+          aria-label={this.props.t('Toolbar.PlayOnlyVisualSketchARIA')}
           disabled={this.props.infiniteLoop}
         >
           <PlayIcon focusable="false" aria-hidden="true" />
@@ -102,7 +102,7 @@ class Toolbar extends React.Component {
         <button
           className={stopButtonClass}
           onClick={this.props.stopSketch}
-          aria-label="Stop sketch"
+          aria-label={this.props.t('Toolbar.StopSketchARIA')}
         >
           <StopIcon focusable="false" aria-hidden="true" />
         </button>
@@ -129,7 +129,7 @@ class Toolbar extends React.Component {
               }
             }}
             disabled={!canEditProjectName}
-            aria-label="Edit sketch name"
+            aria-label={this.props.t('Toolbar.EditSketchARIA')}
           >
             <span>{this.props.project.name}</span>
             {
@@ -145,7 +145,7 @@ class Toolbar extends React.Component {
             type="text"
             maxLength="128"
             className="toolbar__project-name-input"
-            aria-label="New sketch name"
+            aria-label={this.props.t('Toolbar.NewSketchNameARIA')}
             value={this.state.projectNameInputValue}
             onChange={this.handleProjectNameChange}
             ref={(element) => { this.projectNameInput = element; }}
@@ -165,7 +165,7 @@ class Toolbar extends React.Component {
         <button
           className={preferencesButtonClass}
           onClick={this.props.openPreferences}
-          aria-label="Open Preferences"
+          aria-label={this.props.t('Toolbar.OpenPreferencesARIA')}
         >
           <PreferencesIcon focusable="false" aria-hidden="true" />
         </button>
@@ -200,6 +200,7 @@ Toolbar.propTypes = {
   saveProject: PropTypes.func.isRequired,
   currentUser: PropTypes.string,
   t: PropTypes.func.isRequired
+
 };
 
 Toolbar.defaultProps = {
@@ -225,6 +226,5 @@ const mapDispatchToProps = {
   ...projectActions,
 };
 
-export const ToolbarComponent = Toolbar;
-// export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
-export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Toolbar));
+export const ToolbarComponent = withTranslation()(Toolbar);
+export default connect(mapStateToProps, mapDispatchToProps)(ToolbarComponent);

client/modules/IDE/components/Toolbar.test.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import lodash from 'lodash';
 
-
+import { fireEvent, render, screen, waitFor } from '../../../test-utils';
 import { ToolbarComponent } from './Toolbar';
 
 const renderComponent = (extraProps = {}) => {

client/test-utils.js

@@ -0,0 +1,40 @@
+/**
+ * This file re-exports @testing-library but ensures that
+ * any calls to render have translations available.
+ *
+ * This means tested components will be able to call
+ * `t()` and have the translations of the default
+ * language
+ *
+ * See: https://react.i18next.com/misc/testing#testing-without-stubbing
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render } from '@testing-library/react';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n-test';
+
+// re-export everything
+// eslint-disable-next-line import/no-extraneous-dependencies
+export * from '@testing-library/react';
+
+const Providers = ({ children }) => (
+  // eslint-disable-next-line react/jsx-filename-extension
+  <I18nextProvider i18n={i18n}>
+    {children}
+  </I18nextProvider>
+);
+
+Providers.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+const customRender = (ui, options) =>
+  render(ui, { wrapper: Providers, ...options });
+
+// override render method
+export { customRender as render };

client/utils/consoleUtils.js

@@ -38,6 +38,22 @@ export const hijackConsoleErrorsScript = (offs) => {
         }], '*');
       return false;
     };
+    // catch rejected promises
+    window.onunhandledrejection = function (event) {
+      if (event.reason && event.reason.message && event.reason.stack){
+        var errorNum = event.reason.stack.split('about:srcdoc:')[1].split(':')[0];
+        var fileInfo = getScriptOff(errorNum);
+        var data = event.reason.message + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
+        window.parent.postMessage([{
+          log: [{
+            method: 'error',
+            data: [data],
+            id: Date.now().toString()
+          }],
+          source: fileInfo[1]
+        }], '*');
+      }
+    };
   `;
   return s;
 };
@@ -46,7 +62,7 @@ export const startTag = '@fs-';
 
 export const getAllScriptOffsets = (htmlFile) => {
   const offs = [];
-  const hijackConsoleErrorsScriptLength = 36;
+  const hijackConsoleErrorsScriptLength = 52;
   const embeddedJSStart = 'script crossorigin=""';
   let foundJSScript = true;
   let foundEmbeddedJS = true;

translations/locales/en-US/translations.json

@@ -341,6 +341,30 @@
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
   },
+  "AssetList": {
+    "Title": "p5.js Web Editor | My assets",
+    "ToggleOpenCloseARIA": "Toggle Open/Close Asset Options",
+    "Delete": "Delete",
+    "OpenNewTab": "Open in New Tab",
+    "NoUploadedAssets": "No uploaded assets.",
+    "HeaderName": "Name",
+    "HeaderSize": "Size",
+    "HeaderSketch": "Sketch"
+  },
+  "Feedback": {
+    "Title": "p5.js Web Editor | Feedback",
+    "ViaGithubHeader": "Via Github Issues",
+    "ViaGithubDescription": "If you're familiar with Github, this is our preferred method for receiving bug reports and feedback.",
+    "GoToGithub": "Go to Github",
+    "ViaGoogleHeader": "Via Google Form",
+    "ViaGoogleDescription": "You can also submit this quick form.",
+    "GoToForm": "Go to Form"
+  },
+  "Searchbar": {
+    "SearchSketch": "Search sketches...",
+    "SearchCollection": "Search collections...",
+    "ClearTerm": "clear"
+  },
   "UploadFileModal": {
     "Title": "Upload File",
     "CloseButtonARIA": "Close upload file modal",
@@ -444,8 +468,8 @@
     "AriaLabel": "Close {{title}} overlay"
   },
   "QuickAddList":{
-    "ButtonLabelRemove": "Remove from collection",
-    "ButtonLabelAddToCollection": "Add to collection",
+    "ButtonRemoveARIA": "Remove from collection",
+    "ButtonAddToCollectionARIA": "Add to collection",
     "View": "View"
   },
   "SketchList": {
@@ -474,5 +498,38 @@
     "Title": "p5.js Web Editor | My sketches",
     "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s sketches",
     "NoCollections": "No collections."
+  },
+  "Editor": {
+    "OpenSketchARIA": "Open Sketch files navigation",
+    "CloseSketchARIA": "Close Sketch files navigation",
+    "UnsavedChangesARIA": "Sketch has unsaved changes",
+    "KeyUpLineNumber": "line {{lineNumber}}"
+  },
+  "EditorAccessibility": {
+    "NoLintMessages": "There are no lint messages ",
+    "CurrentLine": " Current line"
+  },
+  "Timer": {
+    "SavedJustNow": "Saved: just now",
+    "Saved15Seconds": "Saved: 15 seconds ago",
+    "Saved25Seconds": "Saved: 25 seconds ago",
+    "Saved35Seconds": "Saved: 35 seconds ago",
+    "SavedAgo": "Saved: {{timeAgo}} ago"
+  },
+  "AddRemoveButton": {
+    "AltAddARIA": "Add to collection",
+    "AltRemoveARIA": "Remove from collection"
+  },
+  "CopyableInput": {
+    "CopiedARIA": "Copied to Clipboard!",
+    "OpenViewTabARIA": "Open {{label}} view in new tab"
+  },
+  "EditableInput": {
+    "EditValue": "Edit {{display}} value",
+    "EmptyPlaceholder": "No value"
+  },
+  "PreviewNav": {
+    "EditSketchARIA": "Edit Sketch",
+    "ByUser": "by"
   }
 }

translations/locales/es-419/translations.json

@@ -341,6 +341,30 @@
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
   },
+  "AssetList": {
+    "Title": "Editor Web p5.js | Mis assets",
+    "ToggleOpenCloseARIA": "Alternar Abrir/Cerrar Opciones de Asset",
+    "Delete": "Borrar",
+    "OpenNewTab": "Abrir en Nueva Pestaña",
+    "NoUploadedAssets": "No has subido archivos.",
+    "HeaderName": "Nombre",
+    "HeaderSize": "Tamaño",
+    "HeaderSketch": "Bosquejo"
+  },
+  "Feedback": {
+    "Title": "Editor Web p5.js | Retroalimentación",
+    "ViaGithubHeader": "Vía Github Issues",
+    "ViaGithubDescription": " Si estas familiarizado con Github, este es nuestro método favorito para recibir reporte de errores y retroalimentación.",
+    "GoToGithub": "Ir a Github",
+    "ViaGoogleHeader": "Vía Formulario de Google",
+    "ViaGoogleDescription": "También puedes enviar tu retroalimetnación usando esta vía rapida.",
+    "GoToForm": "Ir a Formulario"
+  },
+  "Searchbar": {
+    "SearchSketch": "Buscar en bosquejos...",
+    "SearchCollection": "Buscar en colecciones...",
+    "ClearTerm": "limpiar"
+  },
   "UploadFileModal": {
     "Title": "Subir Archivo",
     "CloseButtonARIA": "Cerrar diálogo para subir archivo",
@@ -444,8 +468,8 @@
     "AriaLabel": "Cerrar la capa {{title}}"
   },
   "QuickAddList":{
-    "ButtonLabelRemove": "Remove from collection",
-    "ButtonLabelAddToCollection": "Add to collection",
+    "ButtonRemoveARIA": "Remover de colección",
+    "ButtonAddToCollectionARIA": "Agregar a colección",
     "View": "Ver"
   },
   "SketchList": {
@@ -474,5 +498,38 @@
     "Title": "p5.js Web Editor | Mis bosquejos",
     "AnothersTitle": "Editor Web p5.js | Bosquejos de {{anotheruser}}",
     "NoCollections": "No hay colecciones."
+  },
+  "Editor": {
+    "OpenSketchARIA": "Abrir navegación de archivos de bosquejo",
+    "CloseSketchARIA": "Cerrar navegación de archivos de bosquejo",
+    "UnsavedChangesARIA": "El bosquejo tiene cambios sin guardar",
+    "KeyUpLineNumber": "línea {{lineNumber}}"
+  },
+  "EditorAccessibility": {
+    "NoLintMessages": "No hay mensajes de Lint",
+    "CurrentLine": " Línea actual"
+  },
+  "Timer": {
+    "SavedJustNow": "Guardado: justo ahora",
+    "Saved15Seconds": "Guardado: hace 15 segundos",
+    "Saved25Seconds": "Guardado: hace 25 segundos",
+    "Saved35Seconds": "Guardado: hace 35 segundos",
+    "SavedAgo": "Guardado: hace {{timeAgo}}"
+  },
+  "AddRemoveButton": {
+    "AltAddARIA": "Agregar a colección",
+    "AltRemoveARIA": "Remover de colección"
+  },
+  "CopyableInput": {
+    "CopiedARIA": "¡Copiado en el portapapeles!",
+    "OpenViewTabARIA": "Abrir la vista {{label}} en nueva pestaña"
+  },
+  "EditableInput": {
+    "EditValue": "Editar valor de {{display}}",
+    "EmptyPlaceholder": "Sin valor"
+  },
+  "PreviewNav": {
+    "EditSketchARIA": "Editar Bosquejo",
+    "ByUser": "por"
   }
 }