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

# Conflicts:
#	client/components/Nav/NavBar.jsx
#	client/modules/App/components/Overlay.jsx
#	client/modules/IDE/pages/IDEView.jsx

Author: lindapaiste

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<script>
+    // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
+    window.$RefreshReg$ = () => {};
+    window.$RefreshSig$ = () => () => {};
+</script>

.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/ButtonOrLink.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '../test-utils';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
 import ButtonOrLink from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
@@ -25,8 +25,12 @@ describe('ButtonOrLink', () => {
     expect(link).toHaveAttribute('href', 'https://p5js.org');
   });
 
-  it('can render an internal link with react-router', () => {
+  it('can render an internal link with react-router', async () => {
     render(<ButtonOrLink href="/about">About</ButtonOrLink>);
-    // TODO: how can this be tested? Needs a router provider?
+
+    const link = screen.getByText('About');
+    fireEvent.click(link);
+
+    await waitFor(() => expect(history.location.pathname).toEqual('/about'));
   });
 });

client/common/icons.jsx

@@ -13,15 +13,18 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
 import More from '../images/more.svg';
+import Editor from '../images/editor.svg';
+import Account from '../images/account.svg';
 import Code from '../images/code.svg';
 import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
-
 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 Add from '../images/add.svg';
+import Filter from '../images/filter.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
@@ -83,16 +86,19 @@ export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
 export const ExitIcon = withLabel(Exit);
+export const EditorIcon = withLabel(Editor);
+export const AccountIcon = withLabel(Account);
 export const DropdownArrowIcon = withLabel(DropdownArrow);
 export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);
 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);
+export const AddIcon = withLabel(Add);
+export const FilterIcon = withLabel(Filter);

client/common/useKeyDownHandlers.js

@@ -0,0 +1,61 @@
+import mapKeys from 'lodash/mapKeys';
+import PropTypes from 'prop-types';
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Attaches keydown handlers to the global document.
+ *
+ * Handles Mac/PC switching of Ctrl to Cmd.
+ *
+ * @param {Record<string, (e: KeyboardEvent) => void>} keyHandlers - an object
+ * which maps from the key to its event handler.  The object keys are a combination
+ * of the key and prefixes `ctrl-` `shift-` (ie. 'ctrl-f', 'ctrl-shift-f')
+ * and the values are the function to call when that specific key is pressed.
+ */
+export default function useKeyDownHandlers(keyHandlers) {
+  /**
+   * Instead of memoizing the handlers, use a ref and call the current
+   * handler at the time of the event.
+   */
+  const handlers = useRef(keyHandlers);
+
+  useEffect(() => {
+    handlers.current = mapKeys(keyHandlers, (value, key) => key?.toLowerCase());
+  }, [keyHandlers]);
+
+  /**
+   * Will call all matching handlers, starting with the most specific: 'ctrl-shift-f' => 'ctrl-f' => 'f'.
+   * Can use e.stopPropagation() to prevent subsequent handlers.
+   * @type {(function(KeyboardEvent): void)}
+   */
+  const handleEvent = useCallback((e) => {
+    if (!e.key) return;
+    const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
+    const isCtrl = isMac ? e.metaKey : e.ctrlKey;
+    if (e.shiftKey && isCtrl) {
+      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+    } else if (isCtrl) {
+      handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
+    }
+    handlers.current[e.key?.toLowerCase()]?.(e);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEvent);
+
+    return () => document.removeEventListener('keydown', handleEvent);
+  }, [handleEvent]);
+}
+
+/**
+ * Component version can be used in class components where hooks can't be used.
+ *
+ * @param {Record<string, (e: KeyboardEvent) => void>} handlers
+ */
+export const DocumentKeyDown = ({ handlers }) => {
+  useKeyDownHandlers(handlers);
+  return null;
+};
+DocumentKeyDown.propTypes = {
+  handlers: PropTypes.objectOf(PropTypes.func)
+};

client/common/useModalClose.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+import useKeyDownHandlers from './useKeyDownHandlers';
 
 /**
  * Common logic for Modal, Overlay, etc.
@@ -24,27 +25,21 @@ export default function useModalClose(onClose, passedRef) {
   useEffect(() => {
     modalRef.current?.focus();
 
-    function handleKeyDown(e) {
-      if (e.key === 'Escape') {
-        onClose?.();
-      }
-    }
-
     function handleClick(e) {
       // ignore clicks on the component itself
       if (modalRef.current && !modalRef.current.contains(e.target)) {
         onClose?.();
       }
     }
 
-    document.addEventListener('mousedown', handleClick, false);
-    document.addEventListener('keydown', handleKeyDown, false);
+    document.addEventListener('click', handleClick, false);
 
     return () => {
-      document.removeEventListener('mousedown', handleClick, false);
-      document.removeEventListener('keydown', handleKeyDown, false);
+      document.removeEventListener('click', handleClick, false);
     };
   }, [onClose, modalRef]);
 
+  useKeyDownHandlers({ escape: onClose });
+
   return modalRef;
 }