Merge branch 'develop' into chore/toast-tests

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/components/Nav/NavBar.jsx

@@ -6,9 +6,10 @@ import React, {
   useRef,
   useState
 } from 'react';
+import useKeyDownHandlers from '../../modules/IDE/hooks/useKeyDownHandlers';
 import { MenuOpenContext, NavBarContext } from './contexts';
 
-function NavBar({ children }) {
+function NavBar({ children, className }) {
   const [dropdownOpen, setDropdownOpen] = useState('none');
 
   const timerRef = useRef(null);
@@ -31,18 +32,9 @@ function NavBar({ children }) {
     };
   }, [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) {
@@ -55,6 +47,15 @@ function NavBar({ children }) {
     timerRef.current = setTimeout(() => setDropdownOpen('none'), 10);
   }, [timerRef, setDropdownOpen]);
 
+  const toggleDropdownOpen = useCallback(
+    (dropdown) => {
+      setDropdownOpen((prevState) =>
+        prevState === dropdown ? 'none' : dropdown
+      );
+    },
+    [setDropdownOpen]
+  );
+
   const contextValue = useMemo(
     () => ({
       createDropdownHandlers: (dropdown) => ({
@@ -64,9 +65,7 @@ function NavBar({ children }) {
           );
         },
         onClick: () => {
-          setDropdownOpen((prevState) =>
-            prevState === 'none' ? dropdown : 'none'
-          );
+          toggleDropdownOpen(dropdown);
         },
         onBlur: handleBlur,
         onFocus: clearHideTimeout
@@ -80,15 +79,16 @@ function NavBar({ children }) {
           clearHideTimeout();
           setDropdownOpen(dropdown);
         }
-      })
+      }),
+      toggleDropdownOpen
     }),
-    [setDropdownOpen, clearHideTimeout, handleBlur]
+    [setDropdownOpen, toggleDropdownOpen, clearHideTimeout, handleBlur]
   );
 
   return (
     <NavBarContext.Provider value={contextValue}>
       <header>
-        <nav className="nav" ref={nodeRef}>
+        <nav className={className} ref={nodeRef}>
           <MenuOpenContext.Provider value={dropdownOpen}>
             {children}
           </MenuOpenContext.Provider>
@@ -99,11 +99,13 @@ function NavBar({ children }) {
 }
 
 NavBar.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  className: PropTypes.string
 };
 
 NavBar.defaultProps = {
-  children: null
+  children: null,
+  className: 'nav'
 };
 
 export default NavBar;

client/components/Nav/NavDropdownMenu.jsx

@@ -4,7 +4,7 @@ import React, { useContext, useMemo } from 'react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
 
-function NavDropdownMenu({ id, title, children }) {
+export function useMenuProps(id) {
   const activeMenu = useContext(MenuOpenContext);
 
   const isOpen = id === activeMenu;
@@ -16,6 +16,12 @@ function NavDropdownMenu({ id, title, children }) {
     id
   ]);
 
+  return { isOpen, handlers };
+}
+
+function NavDropdownMenu({ id, title, children }) {
+  const { isOpen, handlers } = useMenuProps(id);
+
   return (
     <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
       <button {...handlers}>

client/components/Nav/NavMenuItem.jsx

@@ -3,7 +3,7 @@ import React, { useContext, useMemo } from 'react';
 import ButtonOrLink from '../../common/ButtonOrLink';
 import { NavBarContext, ParentMenuContext } from './contexts';
 
-function NavMenuItem({ hideIf, ...rest }) {
+function NavMenuItem({ hideIf, className, ...rest }) {
   const parent = useContext(ParentMenuContext);
 
   const { createMenuItemHandlers } = useContext(NavBarContext);
@@ -18,7 +18,7 @@ function NavMenuItem({ hideIf, ...rest }) {
   }
 
   return (
-    <li className="nav__dropdown-item">
+    <li className={className}>
       <ButtonOrLink {...rest} {...handlers} />
     </li>
   );
@@ -31,13 +31,15 @@ NavMenuItem.propTypes = {
   /**
    * Provides a way to deal with optional items.
    */
-  hideIf: PropTypes.bool
+  hideIf: PropTypes.bool,
+  className: PropTypes.string
 };
 
 NavMenuItem.defaultProps = {
   onClick: null,
   value: null,
-  hideIf: false
+  hideIf: false,
+  className: 'nav__dropdown-item'
 };
 
 export default NavMenuItem;

client/components/Nav/contexts.jsx

@@ -6,5 +6,6 @@ export const MenuOpenContext = createContext('none');
 
 export const NavBarContext = createContext({
   createDropdownHandlers: () => ({}),
-  createMenuItemHandlers: () => ({})
+  createMenuItemHandlers: () => ({}),
+  toggleDropdownOpen: () => {}
 });

client/components/RootPage.jsx

@@ -4,10 +4,16 @@ import { prop } from '../theme';
 const RootPage = styled.div`
   min-height: 100%;
   display: flex;
+  justify-content: start;
   flex-direction: column;
   color: ${prop('primaryTextColor')};
   background-color: ${prop('backgroundColor')};
   height: ${({ fixedHeight }) => fixedHeight || 'initial'};
+
+  @media (max-width: 770px) {
+    height: 100%;
+    overflow: hidden;
+  }
 `;
 
 export default RootPage;

client/constants.js

@@ -30,8 +30,6 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
 export const RESET_PROJECT = 'RESET_PROJECT';
-export const SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME';
-export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';