Merge branch 'develop' into dependabot/npm_and_yarn/mongoose-5.13.20

Author: raclim

.storybook/preview.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router';
 
 import ThemeProvider from '../client/modules/App/components/ThemeProvider';
 import configureStore from '../client/store';
 import '../client/i18n-test';
-import '../client/styles/build/css/main.css'
+import '../client/styles/storybook.css'
 
 const initialState = window.__INITIAL_STATE__;
 
@@ -13,9 +14,11 @@ const store = configureStore(initialState);
 export const decorators = [
   (Story) => (
     <Provider store={store}>
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
+      <MemoryRouter>
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      </MemoryRouter>
     </Provider>
   ),
 ]

client/common/icons.jsx

@@ -24,6 +24,7 @@ import Folder from '../images/folder-padded.svg';
 import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
+import Cross from '../images/cross.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -94,9 +95,8 @@ export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
 export const SaveIcon = withLabel(Save);
-
 export const FolderIcon = withLabel(Folder);
-
+export const CrossIcon = withLabel(Cross);
 export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);

client/components/Nav/NavBar.jsx

@@ -6,6 +6,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import useKeyDownHandlers from '../../modules/IDE/hooks/useKeyDownHandlers';
 import { MenuOpenContext, NavBarContext } from './contexts';
 
 function NavBar({ children, className }) {
@@ -31,18 +32,9 @@ function NavBar({ children, className }) {
     };
   }, [nodeRef, setDropdownOpen]);
 
-  // TODO: replace with `useKeyDownHandlers` after #2052 is merged
-  useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.keyCode === 27) {
-        setDropdownOpen('none');
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, false);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, false);
-    };
-  }, [setDropdownOpen]);
+  useKeyDownHandlers({
+    escape: () => setDropdownOpen('none')
+  });
 
   const clearHideTimeout = useCallback(() => {
     if (timerRef.current) {

client/images/cross.svg

@@ -4,19 +4,18 @@ import { withTranslation } from 'react-i18next';
 
 import browserHistory from '../../../browserHistory';
 import ExitIcon from '../../../images/exit.svg';
+import { DocumentKeyDown } from '../../IDE/hooks/useKeyDownHandlers';
 
 class Overlay extends React.Component {
   constructor(props) {
     super(props);
     this.close = this.close.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
-    this.keyPressHandle = this.keyPressHandle.bind(this);
   }
 
   componentWillMount() {
     document.addEventListener('mousedown', this.handleClick, false);
-    document.addEventListener('keydown', this.keyPressHandle);
   }
 
   componentDidMount() {
@@ -25,7 +24,6 @@ class Overlay extends React.Component {
 
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClick, false);
-    document.removeEventListener('keydown', this.keyPressHandle);
   }
 
   handleClick(e) {
@@ -40,14 +38,6 @@ class Overlay extends React.Component {
     this.close();
   }
 
-  keyPressHandle(e) {
-    // escape key code = 27.
-    // So here we are checking if the key pressed was Escape key.
-    if (e.keyCode === 27) {
-      this.close();
-    }
-  }
-
   close() {
     // Only close if it is the last (and therefore the topmost overlay)
     const overlays = document.getElementsByClassName('overlay');
@@ -90,6 +80,7 @@ class Overlay extends React.Component {
               </div>
             </header>
             {children}
+            <DocumentKeyDown handlers={{ escape: () => this.close() }} />
           </section>
         </div>
       </div>

client/modules/App/components/Overlay.jsx

@@ -13,7 +13,12 @@ import NavMenuItem from '../../../../components/Nav/NavMenuItem';
 import { prop, remSize } from '../../../../theme';
 import AsteriskIcon from '../../../../images/p5-asterisk.svg';
 import IconButton from '../../../../components/mobile/IconButton';
-import { AccountIcon, EditorIcon, MoreIcon } from '../../../../common/icons';
+import {
+  AccountIcon,
+  EditorIcon,
+  MoreIcon,
+  CrossIcon
+} from '../../../../common/icons';
 import {
   newFile,
   newFolder,
@@ -237,26 +242,40 @@ const MobileNav = () => {
           <h5>by {project?.owner?.username}</h5>
         )}
       </Title>
-      <Options>
-        {user.authenticated ? (
-          <AccountMenu />
-        ) : (
-          <div>
-            <Link to="/login">
-              <IconButton icon={AccountIcon} />
-            </Link>
-          </div>
-        )}
-        {title === project.name ? (
-          <MoreMenu />
-        ) : (
+
+      {/* check if the user is in login page */}
+      {pathname === '/login' || pathname === '/signup' ? (
+        // showing the login page
+        <Options>
           <div>
             <Link to={editorLink}>
-              <IconButton icon={EditorIcon} />
+              <IconButton icon={CrossIcon} />
             </Link>
           </div>
-        )}
-      </Options>
+        </Options>
+      ) : (
+        <Options>
+          {/* checking if user is logged in or not */}
+          {user.authenticated ? (
+            <AccountMenu />
+          ) : (
+            <div>
+              <Link to="/login">
+                <IconButton icon={AccountIcon} />
+              </Link>
+            </div>
+          )}
+          {title === project.name ? (
+            <MoreMenu />
+          ) : (
+            <div>
+              <Link to={editorLink}>
+                <IconButton icon={EditorIcon} />
+              </Link>
+            </div>
+          )}
+        </Options>
+      )}
     </Nav>
   );
 };

client/modules/IDE/components/Header/MobileNav.jsx

@@ -48,15 +48,15 @@ exports[`Nav renders dashboard version for mobile 1`] = `
 <DocumentFragment>
   <header>
     <nav
-      class="sc-giAqHp deBDHC"
+      class="sc-ezzafa bZzfr"
     >
       <div
-        class="sc-ezzafa bKgrFx"
+        class="sc-bYwzuL bIGdtt"
       >
         <test-file-stub />
       </div>
       <div
-        class="sc-bYwzuL lkVxhY"
+        class="sc-kLojOw btKDXx"
       >
         <h1>
           <span
@@ -89,14 +89,14 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         </h1>
       </div>
       <div
-        class="sc-kLojOw casOUg"
+        class="sc-iklJeh jupmlX"
       >
         <div>
           <a
             href="/login"
           >
             <button
-              class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+              class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
               display="inline"
               focusable="false"
               kind="primary"
@@ -112,7 +112,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         </div>
         <div>
           <button
-            class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+            class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
             display="inline"
             focusable="false"
             kind="primary"
@@ -459,15 +459,15 @@ exports[`Nav renders editor version for mobile 1`] = `
 <DocumentFragment>
   <header>
     <nav
-      class="sc-giAqHp deBDHC"
+      class="sc-ezzafa bZzfr"
     >
       <div
-        class="sc-ezzafa bKgrFx"
+        class="sc-bYwzuL bIGdtt"
       >
         <test-file-stub />
       </div>
       <div
-        class="sc-bYwzuL lkVxhY"
+        class="sc-kLojOw btKDXx"
       >
         <h1>
           <span
@@ -500,14 +500,14 @@ exports[`Nav renders editor version for mobile 1`] = `
         </h1>
       </div>
       <div
-        class="sc-kLojOw casOUg"
+        class="sc-iklJeh jupmlX"
       >
         <div>
           <a
             href="/login"
           >
             <button
-              class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+              class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
               display="inline"
               focusable="false"
               kind="primary"
@@ -523,7 +523,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         </div>
         <div>
           <button
-            class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
+            class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
             display="inline"
             focusable="false"
             kind="primary"

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateFileContent } from '../actions/files';
+import {
+  collapseConsole,
+  collapseSidebar,
+  expandConsole,
+  expandSidebar,
+  showErrorModal,
+  startSketch,
+  stopSketch
+} from '../actions/ide';
+import { setAllAccessibleOutput } from '../actions/preferences';
+import { cloneProject, saveProject } from '../actions/project';
+import useKeyDownHandlers from '../hooks/useKeyDownHandlers';
+import {
+  getAuthenticated,
+  getIsUserOwner,
+  getSketchOwner
+} from '../selectors/users';
+
+export const useIDEKeyHandlers = ({ getContent }) => {
+  const dispatch = useDispatch();
+
+  const sidebarIsExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
+  const consoleIsExpanded = useSelector((state) => state.ide.consoleIsExpanded);
+
+  const isUserOwner = useSelector(getIsUserOwner);
+  const isAuthenticated = useSelector(getAuthenticated);
+  const sketchOwner = useSelector(getSketchOwner);
+
+  const syncFileContent = () => {
+    const file = getContent();
+    dispatch(updateFileContent(file.id, file.content));
+  };
+
+  useKeyDownHandlers({
+    'ctrl-s': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isUserOwner || (isAuthenticated && !sketchOwner)) {
+        dispatch(saveProject(getContent()));
+      } else if (isAuthenticated) {
+        dispatch(cloneProject());
+      } else {
+        dispatch(showErrorModal('forceAuthentication'));
+      }
+    },
+    'ctrl-shift-enter': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dispatch(stopSketch());
+    },
+    'ctrl-enter': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      syncFileContent();
+      dispatch(startSketch());
+    },
+    'ctrl-shift-1': (e) => {
+      e.preventDefault();
+      dispatch(setAllAccessibleOutput(true));
+    },
+    'ctrl-shift-2': (e) => {
+      e.preventDefault();
+      dispatch(setAllAccessibleOutput(false));
+    },
+    'ctrl-b': (e) => {
+      e.preventDefault();
+      dispatch(
+        // TODO: create actions 'toggleConsole', 'toggleSidebar', etc.
+        sidebarIsExpanded ? collapseSidebar() : expandSidebar()
+      );
+    },
+    'ctrl-`': (e) => {
+      e.preventDefault();
+      dispatch(consoleIsExpanded ? collapseConsole() : expandConsole());
+    }
+  });
+};
+
+const IDEKeyHandlers = ({ getContent }) => {
+  useIDEKeyHandlers({ getContent });
+  return null;
+};
+
+// Most actions can be accessed via redux, but those involving the cmController
+// must be provided via props.
+IDEKeyHandlers.propTypes = {
+  getContent: PropTypes.func.isRequired
+};
+
+export default IDEKeyHandlers;