Merge branch 'master' into add-readme-ko-translation

Author: min-kim42

client/components/Nav.jsx

@@ -227,7 +227,7 @@ class Nav extends React.PureComponent {
 
   renderDashboardMenu(navDropdownState) {
     return (
-      <ul className="nav__items-left" title="project-menu">
+      <ul className="nav__items-left">
         <li className="nav__item-logo">
           <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
         </li>
@@ -245,7 +245,7 @@ class Nav extends React.PureComponent {
 
   renderProjectMenu(navDropdownState) {
     return (
-      <ul className="nav__items-left" title="project-menu">
+      <ul className="nav__items-left">
         <li className="nav__item-logo">
           <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
         </li>

client/components/NavBasic.jsx

@@ -13,7 +13,7 @@ class NavBasic extends React.PureComponent {
   render() {
     return (
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
-        <ul className="nav__items-left" title="project-menu">
+        <ul className="nav__items-left">
           <li className="nav__item-logo">
             <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
           </li>

client/components/__test__/__snapshots__/Nav.test.jsx.snap

@@ -7,7 +7,6 @@ exports[`Nav renders correctly 1`] = `
 >
   <ul
     className="nav__items-left"
-    title="project-menu"
   >
     <li
       className="nav__item-logo"

client/modules/IDE/actions/collections.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { browserHistory } from 'react-router';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 import { setToastText, showToast } from './toast';
@@ -47,20 +48,22 @@ export function createCollection(collection) {
         });
         dispatch(stopLoader());
 
-        const collectionName = response.data.name;
-        dispatch(setToastText(`Created "${collectionName}"`));
+        const newCollection = response.data;
+        dispatch(setToastText(`Created "${newCollection.name}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
-        return response.data;
+        const pathname = `/${newCollection.owner.username}/collections/${newCollection.id}`;
+        const location = { pathname, state: { skipSavingPath: true } };
+
+        browserHistory.push(location);
       })
       .catch((response) => {
+        console.error('Error creating collection', response.data);
         dispatch({
           type: ActionTypes.ERROR,
           error: response.data
         });
         dispatch(stopLoader());
-
-        return response.data;
       });
   };
 }

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -74,6 +74,12 @@ function KeyboardShortcutModal() {
         </span>
         <span>Turn off Accessible Output</span>
       </li>
+      <li className="keyboard-shortcut-item">
+        <span className="keyboard-shortcut__command">
+          {metaKeyName} + B
+        </span>
+        <span>Toggle Sidebar</span>
+      </li>
     </ul>
   );
 }

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

@@ -53,7 +53,8 @@ const QuickAddList = ({
       {...item}
       onSelect={
         (event) => {
-          event.target.blur();
+          event.stopPropagation();
+          event.currentTarget.blur();
           handleAction(item);
         }
       }

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

@@ -26,12 +26,13 @@ class Searchbar extends React.Component {
 
   handleSearchEnter = (e) => {
     if (e.key === 'Enter') {
-      this.props.setSearchTerm(this.state.searchValue);
+      this.searchChange();
     }
   }
 
-  searchChange = (value) => {
-    this.props.setSearchTerm(this.state.searchValue);
+  searchChange = () => {
+    if (this.state.searchValue.trim().length === 0) return;
+    this.props.setSearchTerm(this.state.searchValue.trim());
   };
 
   handleSearchChange = (e) => {

client/modules/IDE/pages/IDEView.jsx

@@ -156,6 +156,13 @@ class IDEView extends React.Component {
     } else if (e.keyCode === 49 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
       e.preventDefault();
       this.props.setAllAccessibleOutput(true);
+    } else if (e.keyCode === 66 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
+      e.preventDefault();
+      if (!this.props.ide.sidebarIsExpanded) {
+        this.props.expandSidebar();
+      } else {
+        this.props.collapseSidebar();
+      }
     }
   }
 

client/modules/User/components/Collection.jsx

@@ -380,15 +380,15 @@ Collection.propTypes = {
   }).isRequired,
   getCollections: PropTypes.func.isRequired,
   collection: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    name: PropTypes.string,
     slug: PropTypes.string,
     description: PropTypes.string,
     owner: PropTypes.shape({
-      username: PropTypes.string.isRequired,
+      username: PropTypes.string,
     }).isRequired,
     items: PropTypes.arrayOf(PropTypes.shape({})),
-  }).isRequired,
+  }),
   username: PropTypes.string,
   loading: PropTypes.bool.isRequired,
   toggleDirectionForField: PropTypes.func.isRequired,
@@ -401,7 +401,14 @@ Collection.propTypes = {
 };
 
 Collection.defaultProps = {
-  username: undefined
+  username: undefined,
+  collection: {
+    id: undefined,
+    items: [],
+    owner: {
+      username: undefined
+    }
+  }
 };
 
 function mapStateToProps(state, ownProps) {

client/modules/User/components/CollectionCreate.jsx

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
-import { browserHistory } from 'react-router';
 import { bindActionCreators } from 'redux';
 import * as CollectionsActions from '../../IDE/actions/collections';
 
@@ -39,19 +38,7 @@ class CollectionCreate extends React.Component {
   handleCreateCollection = (event) => {
     event.preventDefault();
 
-    this.props.createCollection(this.state.collection)
-      .then(({ id, owner }) => {
-        const pathname = `/${owner.username}/collections/${id}`;
-        const location = { pathname, state: { skipSavingPath: true } };
-
-        browserHistory.replace(location);
-      })
-      .catch((error) => {
-        console.error('Error creating collection', error);
-        this.setState({
-          creationError: error,
-        });
-      });
+    this.props.createCollection(this.state.collection);
   }
 
   render() {
@@ -107,12 +94,7 @@ CollectionCreate.propTypes = {
     username: PropTypes.string,
     authenticated: PropTypes.bool.isRequired
   }).isRequired,
-  createCollection: PropTypes.func.isRequired,
-  collection: PropTypes.shape({}).isRequired, // TODO
-  sorting: PropTypes.shape({
-    field: PropTypes.string.isRequired,
-    direction: PropTypes.string.isRequired
-  }).isRequired
+  createCollection: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state, ownProps) {