Merge branch 'develop' into feature/Internationalize-mobile-text

Author: catarak

client/components/Nav.jsx

@@ -14,6 +14,7 @@ import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
 import { metaKeyName, } from '../utils/metaKey';
+import { getIsUserOwner } from '../modules/IDE/selectors/users';
 
 import CaretLeftIcon from '../images/left-arrow.svg';
 import TriangleIcon from '../images/down-filled-triangle.svg';
@@ -215,10 +216,6 @@ class Nav extends React.PureComponent {
     }
   }
 
-  isUserOwner() {
-    return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
-  }
-
   handleFocus(dropdown) {
     this.clearHideTimeout();
     this.setDropdown(dropdown);
@@ -283,7 +280,7 @@ class Nav extends React.PureComponent {
                 {this.props.t('Nav.File.New')}
               </button>
             </li>
-            { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
+            { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.props.isUserOwner) &&
             <li className="nav__dropdown-item">
               <button
                 onClick={this.handleSave}
@@ -566,16 +563,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}
@@ -807,6 +794,7 @@ Nav.propTypes = {
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,
+  isUserOwner: PropTypes.bool.isRequired
 };
 
 Nav.defaultProps = {
@@ -828,7 +816,8 @@ function mapStateToProps(state) {
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
     rootFile: state.files.filter(file => file.name === 'root')[0],
-    language: state.preferences.language
+    language: state.preferences.language,
+    isUserOwner: getIsUserOwner(state)
   };
 }
 

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/components/mobile/MobileScreen.jsx

@@ -1,19 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
 
-const Screen = ({ children, fullscreen }) => (
-  <div className={fullscreen && 'fullscreen-preview'}>
+const ScreenWrapper = styled.div`
+  .toast {
+    font-size: ${remSize(12)};
+    padding: ${remSize(8)};
+
+    border-radius: ${remSize(4)};
+    width: 92%;
+    top: unset;
+    min-width: unset;
+    bottom: ${remSize(64)}
+  }
+`;
+
+const Screen = ({ children, fullscreen, slimheader }) => (
+  <ScreenWrapper className={fullscreen && 'fullscreen-preview'} slimheader={slimheader}>
     {children}
-  </div>
+  </ScreenWrapper>
 );
 
 Screen.defaultProps = {
-  fullscreen: false
+  fullscreen: false,
+  slimheader: false,
 };
 
 Screen.propTypes = {
   children: PropTypes.node.isRequired,
-  fullscreen: PropTypes.bool
+  fullscreen: PropTypes.bool,
+  slimheader: PropTypes.bool
 };
 
 export default Screen;

client/modules/App/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/actions/uploader.js

@@ -77,9 +77,6 @@ export function dropzoneSendingCallback(file, xhr, formData) {
       Object.keys(file.postData).forEach((key) => {
         formData.append(key, file.postData[key]);
       });
-      formData.append('Content-type', file.type);
-      formData.append('Content-length', '');
-      formData.append('acl', 'public-read');
     }
   };
 }

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/Editor.jsx

@@ -43,6 +43,7 @@ import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
 import RightArrowIcon from '../../../images/right-arrow.svg';
 import LeftArrowIcon from '../../../images/left-arrow.svg';
 import { getHTMLFile } from '../reducers/files';
+import { getIsUserOwner } from '../selectors/users';
 
 import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
@@ -411,7 +412,7 @@ Editor.propTypes = {
   isExpanded: PropTypes.bool.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
-  isUserOwner: PropTypes.bool,
+  isUserOwner: PropTypes.bool.isRequired,
   clearConsole: PropTypes.func.isRequired,
   showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
@@ -421,7 +422,6 @@ Editor.propTypes = {
 };
 
 Editor.defaultProps = {
-  isUserOwner: false,
   consoleEvents: [],
 };
 
@@ -446,8 +446,9 @@ function mapStateToProps(state) {
     ...state.ide,
     ...state.project,
     ...state.editorAccessibility,
-    isExpanded: state.ide.consoleIsExpanded,
-    projectSavedTime: state.project.updatedAt
+    isExpanded: state.ide.sidebarIsExpanded,
+    projectSavedTime: state.project.updatedAt,
+    isUserOwner: getIsUserOwner(state)
   };
 }
 

client/modules/IDE/components/ErrorModal.jsx

@@ -15,6 +15,19 @@ class ErrorModal extends React.Component {
     );
   }
 
+  oauthError() {
+    const { t, service } = this.props;
+    const serviceLabels = {
+      github: 'GitHub',
+      google: 'Google'
+    };
+    return (
+      <p>
+        {t('ErrorModal.LinkMessage', { serviceauth: serviceLabels[service] })}
+      </p>
+    );
+  }
+
   staleSession() {
     return (
       <p>
@@ -42,6 +55,8 @@ class ErrorModal extends React.Component {
             return this.staleSession();
           } else if (this.props.type === 'staleProject') {
             return this.staleProject();
+          } else if (this.props.type === 'oauthError') {
+            return this.oauthError();
           }
         })()}
       </div>
@@ -52,7 +67,12 @@ class ErrorModal extends React.Component {
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
   closeModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  service: PropTypes.string
+};
+
+ErrorModal.defaultProps = {
+  service: ''
 };
 
 export default withTranslation()(ErrorModal);