Merge develop

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}
@@ -797,6 +794,7 @@ Nav.propTypes = {
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,
+  isUserOwner: PropTypes.bool.isRequired
 };
 
 Nav.defaultProps = {
@@ -818,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/mobile/Explorer.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Sidebar from './Sidebar';
 import ConnectedFileNode from '../../modules/IDE/components/FileNode';
 
 
-const Explorer = ({ id, canEdit, onPressClose }) => (
-  <Sidebar title="Files" onPressClose={onPressClose}>
-    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
-  </Sidebar>
-);
+const Explorer = ({ id, canEdit, onPressClose }) => {
+  const { t } = useTranslation();
+  return (
+    <Sidebar title={t('Explorer.Files')} onPressClose={onPressClose}>
+      <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
+    </Sidebar>
+  );
+};
 
 Explorer.propTypes = {
   id: PropTypes.number.isRequired,

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/i18n.js

@@ -2,6 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { enUS, es } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
 const availableLanguages = ['en-US', 'es-419'];
@@ -14,6 +15,18 @@ export function languageKeyToLabel(lang) {
   return languageMap[lang];
 }
 
+export function languageKeyToDateLocale(lang) {
+  const languageMap = {
+    'en-US': enUS,
+    'es-419': es
+  };
+  return languageMap[lang];
+}
+
+export function currentDateLocale() {
+  return languageKeyToDateLocale(i18n.language);
+}
+
 const options = {
   loadPath: '/locales/{{lng}}/translations.json',
   requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })

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/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/CollectionList/CollectionListRow.jsx

@@ -1,4 +1,3 @@
-import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -9,11 +8,10 @@ import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
+import dates from '../../../../utils/formatDate';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
 
-const formatDateCell = (date, mobile = false) => format(new Date(date), 'MMM D, YYYY');
-
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
     return collection.items.find(item => item.project.id === project.id) != null;
@@ -214,8 +212,8 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        <td>{mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
-        <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
+        <td>{mobile && 'Created: '}{dates.format(collection.createdAt)}</td>
+        <td>{mobile && 'Updated: '}{dates.format(collection.updatedAt)}</td>
         <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}

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';
@@ -412,7 +413,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,
@@ -422,7 +423,6 @@ Editor.propTypes = {
 };
 
 Editor.defaultProps = {
-  isUserOwner: false,
   consoleEvents: [],
 };
 
@@ -448,7 +448,8 @@ function mapStateToProps(state) {
     ...state.project,
     ...state.editorAccessibility,
     isExpanded: state.ide.sidebarIsExpanded,
-    projectSavedTime: state.project.updatedAt
+    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);