Merge remote-tracking branch 'upstream/develop' into refactor/dropdown

Author: lindapaiste

client/components/Nav.jsx

@@ -6,8 +6,24 @@ export function hideToast() {
   };
 }
 
-export function showToast(time) {
+/**
+ * Temporary fix until #2206 is merged.
+ * Supports legacy two-action syntax:
+ *    dispatch(setToastText('Toast.SketchFailedSave'));
+ *    dispatch(showToast(1500));
+ * And also supports proposed single-action syntax with message and optional timeout.
+ *    dispatch(showToast('Toast.SketchFailedSave'));
+ *    dispatch(showToast('Toast.SketchSaved', 5500));
+ */
+export function showToast(textOrTime, timeout = 1500) {
   return (dispatch) => {
+    let time = timeout;
+    if (typeof textOrTime === 'string') {
+      // eslint-disable-next-line no-use-before-define
+      dispatch(setToastText(textOrTime));
+    } else {
+      time = textOrTime;
+    }
     dispatch({
       type: ActionTypes.SHOW_TOAST
     });

client/components/Nav.unit.test.jsx

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
-
+import styled from 'styled-components';
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
@@ -13,10 +13,24 @@ import * as SortingActions from '../actions/sorting';
 import getSortedCollections from '../selectors/collections';
 import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
+import { remSize } from '../../../theme';
 
 const projectInCollection = (project, collection) =>
   collection.items.find((item) => item.projectId === project.id) != null;
 
+export const CollectionAddSketchWrapper = styled.div`
+  width: ${remSize(600)};
+  max-width: 100%;
+  overflow: auto;
+`;
+
+export const QuickAddWrapper = styled.div`
+  width: ${remSize(600)};
+  max-width: 100%;
+  padding: ${remSize(24)};
+  height: 100%;
+`;
+
 class CollectionList extends React.Component {
   constructor(props) {
     super(props);
@@ -85,15 +99,14 @@ class CollectionList extends React.Component {
     }
 
     return (
-      <div className="collection-add-sketch">
-        <div className="quick-add-wrapper">
+      <CollectionAddSketchWrapper>
+        <QuickAddWrapper>
           <Helmet>
             <title>{this.getTitle()}</title>
           </Helmet>
-
           {content}
-        </div>
-      </div>
+        </QuickAddWrapper>
+      </CollectionAddSketchWrapper>
     );
   }
 }

client/modules/IDE/actions/toast.js

@@ -12,6 +12,10 @@ import * as SortingActions from '../actions/sorting';
 import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
+import {
+  CollectionAddSketchWrapper,
+  QuickAddWrapper
+} from './AddToCollectionList';
 
 class SketchList extends React.Component {
   constructor(props) {
@@ -81,14 +85,14 @@ class SketchList extends React.Component {
     }
 
     return (
-      <div className="collection-add-sketch">
-        <div className="quick-add-wrapper">
+      <CollectionAddSketchWrapper>
+        <QuickAddWrapper>
           <Helmet>
             <title>{this.getSketchesTitle()}</title>
           </Helmet>
           {content}
-        </div>
-      </div>
+        </QuickAddWrapper>
+      </CollectionAddSketchWrapper>
     );
   }
 }

client/modules/IDE/components/AddToCollectionList.jsx

@@ -44,6 +44,7 @@ import '../../../utils/htmlmixed';
 import '../../../utils/p5-javascript';
 import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
+import { selectActiveFile } from '../selectors/files';
 import AssetPreview from './AssetPreview';
 import { metaKey } from '../../../utils/metaKey';
 import './show-hint';
@@ -605,10 +606,7 @@ Editor.propTypes = {
 function mapStateToProps(state) {
   return {
     files: state.files,
-    file:
-      state.files.find((file) => file.isSelectedFile) ||
-      state.files.find((file) => file.name === 'sketch.js') ||
-      state.files.find((file) => file.name !== 'root'),
+    file: selectActiveFile(state),
     htmlFile: getHTMLFile(state.files),
     ide: state.ide,
     preferences: state.preferences,