Redesign Editor (codesandbox#341)

* Start of redesign

* Adjust entry icons

* Tabs

* Basic Tab functionality

* More tab support

* Fix tab closing

* Open editor on file click

* Embed support

* Fix scrolling in embeds

* Fix icon artifact for firefox

* Adjust tab spacing

* Remove wrapper divs

* Fix Monaco editor size

* Fix scrolling for safari

* Fix linting errors

* Fix initial currentmodule

* Use new snapshots

* Fix prop checks

* Scroll to when opened

* Design adjustments and new icons

* Add image icon

* Add icons to embed

* Update snapshots

* Fix linting errors

* Enable prettify on save by default

* Fix Monaco editor size

Author: CompuIves

packages/app/.flowconfig

@@ -4,6 +4,7 @@
 .*/node_modules/*
 
 [include]
+.*/node_modules/common*
 
 [libs]
 # This is were your own flow-typed libdefs go

packages/app/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

packages/app/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

packages/app/package.json

@@ -90,6 +90,7 @@
     "webpack-manifest-plugin": "^1.3.2",
     "webpack-merge": "^4.1.0",
     "whatwg-fetch": "^2.0.3",
+    "why-did-you-update": "^0.1.0",
     "worker-loader": "^0.8.1"
   },
   "dependencies": {
@@ -148,6 +149,7 @@
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "16",
+    "react-draggable-tabs": "^1.0.7",
     "react-error-overlay": "^1.0.10",
     "react-icons": "^2.2.7",
     "react-inspector": "^2.2.0",
@@ -181,7 +183,8 @@
     "transformIgnorePatterns": ["node_modules/(?!(common))"],
     "moduleNameMapper": {
       "\\.css$": "<rootDir>/__mocks__/styleMock.js",
-      "\\.html$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.html$": "<rootDir>/__mocks__/styleMock.js",
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
     },
     "transform": {
       "^.+\\.js$": "babel-jest"

packages/app/src/app/components/sandbox/CodeEditor/CodeMirror.js

@@ -11,7 +11,6 @@ import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/tern/tern';
 
-import Header from './Header';
 import FuzzySearch from './FuzzySearch';
 
 const documentCache = {};
@@ -21,25 +20,22 @@ type Props = {
   errors: ?Array<ModuleError>,
   id: string,
   title: string,
-  modulePath: string,
   changeCode: (id: string, code: string) => Object,
   saveCode: () => void,
-  canSave: boolean,
   preferences: Preferences,
-  onlyViewMode: boolean,
   setCurrentModule: ?(sandboxId: string, moduleId: string) => void,
   sandboxId: string,
   modules: Array,
   directories: Array,
   hideNavigation: boolean,
   highlightedLines: ?Array<string>,
+  onlyViewMode: ?boolean,
 };
 
 const Container = styled.div`
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
+  overflow: auto;
 `;
 
 const fadeInAnimation = keyframes`
@@ -228,7 +224,6 @@ export default class CodeEditor extends React.Component<Props, State> {
     return (
       nextProps.id !== this.props.id ||
       nextProps.errors !== this.props.errors ||
-      this.props.canSave !== nextProps.canSave ||
       this.props.preferences !== nextProps.preferences
     );
   }
@@ -529,9 +524,6 @@ export default class CodeEditor extends React.Component<Props, State> {
 
   render() {
     const {
-      canSave,
-      onlyViewMode,
-      modulePath,
       preferences,
       modules,
       directories,
@@ -541,13 +533,6 @@ export default class CodeEditor extends React.Component<Props, State> {
 
     return (
       <Container>
-        {!hideNavigation && (
-          <Header
-            saveComponent={canSave && !onlyViewMode && this.handleSaveCode}
-            prettify={!onlyViewMode && this.prettify}
-            path={modulePath}
-          />
-        )}
         <CodeContainer
           fontFamily={preferences.fontFamily}
           lineHeight={preferences.lineHeight}
@@ -563,7 +548,10 @@ export default class CodeEditor extends React.Component<Props, State> {
             />
           )}
           <div
-            style={{ height: '100%', fontSize: preferences.fontSize || 14 }}
+            style={{
+              height: '100%',
+              fontSize: preferences.fontSize || 14,
+            }}
             ref={this.getCodeMirror}
           />
         </CodeContainer>

packages/app/src/app/components/sandbox/CodeEditor/FuzzySearch/index.js

@@ -4,6 +4,7 @@ import { sortBy, groupBy, flatten } from 'lodash';
 import Downshift from 'downshift';
 import matchSorter from 'match-sorter';
 import type { Module, Directory } from 'common/types';
+import NotSyncedIcon from 'react-icons/lib/go/primitive-dot';
 
 import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
 import Input from 'app/components/Input';
@@ -53,7 +54,11 @@ const Entry = styled.div`
   cursor: pointer;
 
   ${({ isNotSynced }) =>
-    isNotSynced && css`padding-left: 2rem;`} color: rgba(255, 255, 255, 0.8);
+    isNotSynced &&
+    css`
+      padding-left: 2rem;
+    `};
+  color: rgba(255, 255, 255, 0.8);
 
   ${({ isActive }) =>
     isActive &&
@@ -62,14 +67,26 @@ const Entry = styled.div`
     `};
 `;
 
+const NotSyncedIconWithMargin = styled(NotSyncedIcon)`
+  position: absolute;
+  left: 0.75rem;
+  top: 0;
+  color: ${props => props.theme.templateColor || props.theme.secondary};
+  vertical-align: middle;
+
+  margin-top: 6px;
+`;
+
 const CurrentModuleText = styled.div`
   position: absolute;
   right: 0.75rem;
   font-weight: 500;
   color: ${props => props.theme.secondary};
 `;
 
-const Name = styled.span`margin: 0 0.5rem;`;
+const Name = styled.span`
+  margin: 0 0.5rem;
+`;
 
 const Path = styled.span`
   margin: 0 0.25rem;
@@ -173,9 +190,10 @@ export default class FuzzySearch extends React.PureComponent<Props> {
                     key={item.m.id}
                     isNotSynced={item.m.isNotSynced}
                   >
+                    {item.m.isNotSynced && <NotSyncedIconWithMargin />}
                     <EntryIcons
                       isNotSynced={item.m.isNotSynced}
-                      type={getType(item.m)}
+                      type={getType(item.m.title, item.m.code)}
                       error={item.m.errors && item.m.errors.length > 0}
                     />
                     <Name>{item.m.title}</Name>

packages/app/src/app/components/sandbox/CodeEditor/Header.js

@@ -5,9 +5,10 @@ import Centered from 'common/components/flex/Centered';
 import Input from 'app/components/Input';
 import Button from 'app/components/buttons/Button';
 
-const Container = styled(Centered)`
+const Container = Centered.extend`
   height: 100%;
   color: rgba(255, 255, 255, 0.9);
+  overflow: auto;
 `;
 
 const Title = styled.div`

packages/app/src/app/components/sandbox/CodeEditor/ImageViewer.js

@@ -20,7 +20,6 @@ import LinterWorker from 'worker-loader?name=monaco-linter.[hash].worker.js!./mo
 import TypingsFetcherWorker from 'worker-loader?name=monaco-typings-ata.[hash].worker.js!./monaco/workers/fetch-dependency-typings';
 /* eslint-enable import/no-webpack-loader-syntax */
 
-import Header from './Header';
 import MonacoEditor from './monaco/MonacoReactComponent';
 import FuzzySearch from './FuzzySearch/index';
 
@@ -37,12 +36,9 @@ type Props = {
   id: string,
   sandboxId: string,
   title: string,
-  modulePath: string,
   changeCode: (id: string, code: string) => Object,
   saveCode: ?() => void,
-  canSave: boolean,
   preferences: Preferences,
-  onlyViewMode: boolean,
   modules: Array<Module>,
   directories: Array<Directory>,
   dependencies: ?Object,
@@ -54,10 +50,8 @@ type Props = {
 
 const Container = styled.div`
   width: 100%;
-  height: 100%;
+  height: 100vh;
   z-index: 30;
-  display: flex;
-  flex-direction: column;
 `;
 
 /*
@@ -73,8 +67,8 @@ const fontFamilies = (...families) =>
 const CodeContainer = styled.div`
   position: relative;
   width: 100%;
+  height: 100%;
   z-index: 30;
-  flex: 1 1 auto;
 
   .margin-view-overlays {
     background: ${theme.background2()};
@@ -279,7 +273,10 @@ export default class CodeEditor extends React.Component<Props, State> {
     this.setupSyntaxWorker();
 
     if (this.props.preferences.lintEnabled) {
-      this.setupLintWorker();
+      // Delay this one, as initialization is very heavy
+      setTimeout(() => {
+        this.setupLintWorker();
+      }, 5000);
     }
 
     if (this.props.preferences.autoDownloadTypes) {
@@ -417,7 +414,6 @@ export default class CodeEditor extends React.Component<Props, State> {
       nextProps.id !== this.props.id ||
       nextProps.errors !== this.props.errors ||
       nextProps.corrections !== this.props.corrections ||
-      this.props.canSave !== nextProps.canSave ||
       this.props.preferences !== nextProps.preferences
     );
   }
@@ -931,28 +927,12 @@ export default class CodeEditor extends React.Component<Props, State> {
   };
 
   render() {
-    const {
-      canSave,
-      modules,
-      directories,
-      onlyViewMode,
-      modulePath,
-      hideNavigation,
-    } = this.props;
+    const { modules, directories, hideNavigation } = this.props;
 
     const options = this.getEditorOptions();
 
     return (
       <Container>
-        {!hideNavigation && (
-          <Header
-            saveComponent={
-              canSave && !onlyViewMode ? this.handleSaveCode : null
-            }
-            prettify={!onlyViewMode && this.prettify}
-            path={modulePath}
-          />
-        )}
         <CodeContainer hideNavigation={hideNavigation}>
           {this.state.fuzzySearchEnabled && (
             <FuzzySearch