Merge branch 'develop' into project-og-title

client/common/icons.jsx

@@ -18,12 +18,13 @@ 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
@@ -94,9 +95,10 @@ 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,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) {
@@ -79,7 +71,10 @@ function NavBar({ children, className }) {
         onFocus: clearHideTimeout
       }),
       createMenuItemHandlers: (dropdown) => ({
-        onMouseUp: () => {
+        onMouseUp: (e) => {
+          if (e.button === 2) {
+            return;
+          }
           setDropdownOpen('none');
         },
         onBlur: handleBlur,

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

@@ -59,6 +59,7 @@ describe('index.jsx integration', () => {
   // spy on this function and wait for it to be called before making assertions
   const spy = jest.spyOn(Actions, 'getUser');
 
+  window.process.env.PREVIEW_URL = 'http://localhost:8002';
   beforeEach(async () => {
     act(() => {
       subject();

client/jest.setup.js

@@ -1,3 +1,5 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'jest-styled-components';
 import 'regenerator-runtime/runtime';
 
 // See: https://github.com/testing-library/jest-dom

client/modules/App/components/Overlay.jsx

@@ -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/IDE/actions/assets.js

@@ -11,20 +11,18 @@ function setAssets(assets, totalSize) {
 }
 
 export function getAssets() {
-  return (dispatch) => {
+  return async (dispatch) => {
     dispatch(startLoader());
-    apiClient
-      .get('/S3/objects')
-      .then((response) => {
-        dispatch(setAssets(response.data.assets, response.data.totalSize));
-        dispatch(stopLoader());
-      })
-      .catch(() => {
-        dispatch({
-          type: ActionTypes.ERROR
-        });
-        dispatch(stopLoader());
+    try {
+      const response = await apiClient.get('/S3/objects');
+      dispatch(setAssets(response.data.assets, response.data.totalSize));
+      dispatch(stopLoader());
+    } catch (error) {
+      dispatch({
+        type: ActionTypes.ERROR
       });
+      dispatch(stopLoader());
+    }
   };
 }
 
@@ -36,16 +34,14 @@ export function deleteAsset(assetKey) {
 }
 
 export function deleteAssetRequest(assetKey) {
-  return (dispatch) => {
-    apiClient
-      .delete(`/S3/${assetKey}`)
-      .then((response) => {
-        dispatch(deleteAsset(assetKey));
-      })
-      .catch(() => {
-        dispatch({
-          type: ActionTypes.ERROR
-        });
+  return async (dispatch) => {
+    try {
+      await apiClient.delete(`/S3/${assetKey}`);
+      dispatch(deleteAsset(assetKey));
+    } catch (error) {
+      dispatch({
+        type: ActionTypes.ERROR
       });
+    }
   };
 }

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -11,6 +11,10 @@ import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
+import MoreIconSvg from '../../../../images/more.svg';
+
+const formatDateCell = (date, mobile = false) =>
+  dates.format(date, { showTime: !mobile });
 
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
@@ -146,7 +150,11 @@ class CollectionListRowBase extends React.Component {
             'CollectionListRow.ToggleCollectionOptionsARIA'
           )}
         >
-          <DownFilledTriangleIcon title="Menu" />
+          {this.props.mobile ? (
+            <MoreIconSvg focusable="false" aria-hidden="true" />
+          ) : (
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+          )}
         </button>
         {optionsOpen && (
           <ul className="sketch-list__action-dialogue">
@@ -228,16 +236,10 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
+        <td>{formatDateCell(collection.createdAt, mobile)}</td>
+        <td>{formatDateCell(collection.updatedAt, mobile)}</td>
         <td>
-          {mobile && 'Created: '}
-          {dates.format(collection.createdAt)}
-        </td>
-        <td>
-          {mobile && 'Updated: '}
-          {dates.format(collection.updatedAt)}
-        </td>
-        <td>
-          {mobile && '# sketches: '}
+          {mobile && 'sketches: '}
           {(collection.items || []).length}
         </td>
         <td className="sketch-list__dropdown-column">{this.renderActions()}</td>

client/modules/IDE/components/Editor.unit.test.jsx → client/modules/IDE/components/Editor/Editor.unit.test.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { act } from 'react-dom/test-utils';
-import Editor from './Editor';
-import { reduxRender } from '../../../test-utils';
-import { initialTestState } from '../../../testData/testReduxStore';
+import Editor from '.';
+import { reduxRender } from '../../../../test-utils';
+import { initialTestState } from '../../../../testData/testReduxStore';
 
-jest.mock('../../../i18n');
+jest.mock('../../../../i18n');
 
 describe('<Editor />', () => {
   const mockStore = configureStore([thunk]);

client/modules/IDE/components/Editor/MobileEditor.jsx

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { prop, remSize } from '../../../../theme';
+
+export const EditorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-bottom: 5rem;
+  transform: ${(props) =>
+    props.expanded ? 'translateX(50%)' : 'translateX(0)'};
+
+  > header {
+    display: flex;
+    ${prop('MobilePanel.secondary')}
+    > span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: ${remSize(10)};
+      font-weight: bold;
+      ${prop('MobilePanel.default')}
+    }
+  }
+
+  > section {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100vw;
+    overflow-y: auto;
+  }
+`;
+
+export const EditorHolder = styled.div`
+  min-height: 100%;
+`;
+
+export const PreviewWrapper = styled.div`
+  display: ${(props) => (props.show ? 'block' : 'none')};
+  position: relative;
+  height: 100vh;
+  min-width: 100%;
+
+  .preview-console {
+    z-index: 1;
+  }
+`;
+
+export const EditorSidebarWrapper = styled.div`
+  display: ${(props) => (props.show ? 'block' : 'none')};
+  height: 100%;
+  position: relative;
+`;
+
+export const FileDrawer = styled.div`
+  height: 100%;
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  /* z-index: 10; */
+  background: ${prop('backgroundColor')};
+
+  > button[data-backdrop='filedrawer'] {
+    position: absolute;
+    background-color: #0005;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    transform: translateX(100%);
+  }
+
+  @media (min-width: 770px) {
+    width: 100%;
+    > button[data-backdrop='filedrawer'] {
+      display: none;
+    }
+  }
+`;