Merge branch 'develop' into fix/s3v4

Author: catarak

client/components/Nav.jsx

@@ -566,16 +566,6 @@ class Nav extends React.PureComponent {
           </button>
           <ul className="nav__dropdown">
 
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="it"
-                onClick={e => this.handleLangSelection(e)}
-              >
-                Italian (Test Fallback)
-              </button>
-            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}

client/components/NavBasic.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import ArrowIcon from '../images/triangle-arrow-left.svg';
@@ -14,7 +15,7 @@ class NavBasic extends React.PureComponent {
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
         <ul className="nav__items-left">
           <li className="nav__item-logo">
-            <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+            <LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
           </li>
           { this.props.onBack && (
             <li className="nav__item">
@@ -34,6 +35,7 @@ class NavBasic extends React.PureComponent {
 
 NavBasic.propTypes = {
   onBack: PropTypes.func,
+  t: PropTypes.func.isRequired
 };
 
-export default NavBasic;
+export default withTranslation()(NavBasic);

client/modules/IDE/components/AssetList.jsx

@@ -61,13 +61,13 @@ class AssetListRowBase extends React.Component {
   handleAssetDelete = () => {
     const { key, name } = this.props.asset;
     this.closeOptions();
-    if (window.confirm(`Are you sure you want to delete "${name}"?`)) {
+    if (window.confirm(this.props.t('Common.DeleteConfirmation', { name }))) {
       this.props.deleteAssetRequest(key);
     }
   }
 
   render() {
-    const { asset, username } = this.props;
+    const { asset, username, t } = this.props;
     const { optionsOpen } = this.state;
     return (
       <tr className="asset-table__row" key={asset.key}>
@@ -86,7 +86,7 @@ class AssetListRowBase extends React.Component {
             onClick={this.toggleOptions}
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
-            aria-label={this.props.t('AssetList.ToggleOpenCloseARIA')}
+            aria-label={t('AssetList.ToggleOpenCloseARIA')}
           >
             <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
           </button>
@@ -101,7 +101,7 @@ class AssetListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  {this.props.t('AssetList.Delete')}
+                  {t('AssetList.Delete')}
                 </button>
               </li>
               <li>
@@ -112,7 +112,7 @@ class AssetListRowBase extends React.Component {
                   onFocus={this.onFocusComponent}
                   className="asset-table__action-option"
                 >
-                  {this.props.t('AssetList.OpenNewTab')}
+                  {t('AssetList.OpenNewTab')}
                 </Link>
               </li>
             </ul>}
@@ -194,7 +194,7 @@ class AssetList extends React.Component {
               </tr>
             </thead>
             <tbody>
-              {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)}
+              {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} t={t} />)}
             </tbody>
           </table>}
       </article>

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -140,7 +140,7 @@ class CollectionList extends React.Component {
         {this._renderLoader()}
         {this._renderEmptyTable()}
         {this.hasCollections() &&
-          <table className="sketches-table" summary="table containing all collections">
+          <table className="sketches-table" summary={this.props.t('CollectionList.TableSummary')}>
             <thead>
               <tr>
                 {this._renderFieldHeader('name', this.props.t('CollectionList.HeaderName'))}

client/modules/IDE/components/EditableInput.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import EditIcon from '../../../images/pencil.svg';
 
@@ -22,7 +22,7 @@ function EditableInput({
     isEditing ? 'is-editing' : 'is-not-editing'
   } editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
   const inputRef = React.createRef();
-
+  const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
       inputRef.current.focus();
@@ -60,7 +60,7 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={this.props.t('EditableInput.EditValue', { display: displayValue })}
+        aria-label={t('EditableInput.EditValue', { display: displayValue })}
       >
         <span>{displayValue}</span>
         <EditIcon
@@ -101,7 +101,6 @@ EditableInput.propTypes = {
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
   value: PropTypes.string,
-  t: PropTypes.func.isRequired
 };
 
-export default withTranslation()(EditableInput);
+export default EditableInput;

client/modules/IDE/components/NewFileModal.jsx

@@ -20,10 +20,23 @@ class NewFileModal extends React.Component {
   constructor(props) {
     super(props);
     this.focusOnModal = this.focusOnModal.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
   }
 
   componentDidMount() {
     this.focusOnModal();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.modal)) return;
+
+    this.props.closeNewFileModal();
   }
 
   focusOnModal() {

client/modules/IDE/components/NewFolderModal.jsx

@@ -8,8 +8,25 @@ import NewFolderForm from './NewFolderForm';
 import ExitIcon from '../../../images/exit.svg';
 
 class NewFolderModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+
   componentDidMount() {
     this.newFolderModal.focus();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.newFolderModal)) return;
+
+    this.props.closeModal();
   }
 
   render() {

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

@@ -19,7 +19,7 @@ const Item = ({
         className="quick-add__item-view"
         to={url}
         target="_blank"
-        onClick={e => e.stopPropogation()}
+        onClick={e => e.stopPropagation()}
       >
         {t('QuickAddList.View')}
       </Link>

client/modules/IDE/components/SketchList.jsx

@@ -433,7 +433,7 @@ class SketchList extends React.Component {
         {this._renderLoader()}
         {this._renderEmptyTable()}
         {this.hasSketches() &&
-          <table className="sketches-table" summary="table containing all saved projects">
+          <table className="sketches-table" summary={this.props.t('SketchList.TableSummary')}>
             <thead>
               <tr>
                 {this._renderFieldHeader('name', this.props.t('SketchList.HeaderName'))}

client/modules/IDE/components/Toolbar.jsx

@@ -156,7 +156,7 @@ class Toolbar extends React.Component {
             if (this.props.owner) {
               return (
                 <p className="toolbar__project-owner">
-                  by <Link to={`/${this.props.owner.username}/sketches`}>{this.props.owner.username}</Link>
+                  {this.props.t('Toolbar.By')} <Link to={`/${this.props.owner.username}/sketches`}>{this.props.owner.username}</Link>
                 </p>
               );
             }