Executor Refactor (codesandbox#2060)

* Initial executor commit

* CLeanup

* Update the terminal logic

* Intermediate

* Update packages/app/src/app/components/Preview/DevTools/Terminal/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/Preview/DevTools/Terminal/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/store/modules/server/actions.js

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/Preview/DevTools/Terminal/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Fix syntax error

* Remove server logic from preview

* Fix rendering and moving of terminals

* Build executors in CI

* Fix terminal rendering

* Improve rendering and overlay messages of terminal

* Allow non-signed in users to see terminal

* Connect to stream

* Allow for custom URLs

* Move tabs logic to store

* Move DevTools logic to store

* Ports

* Fix embeds

* Reinitializing sandbox

* Fix container state

* Fix typecheck and test

* Allow executors to build

* Fix hibernate status

* Fix types

* Add savedCode to Module

* Apply suggestions from code review

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/Preview/DevTools/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Only show overlay for unrecoverable server errors

* Prisma extension

* Show container errors that are recoverable as warnings instead

* Server status: refactor messages.

* Close SSE websocket when sandbox hibernates.

* Update socket.io-client to 2.2.0.

* SSE: Show "sandbox started" message.

* Bump CircleCI cache keys version.

* Small syntax tweaks

* DevTools: refactor to flexbox.

* Remove unused heights.

* Fix terminal sizing initially and resize sending

* Save the workspace config in store if sandbox is not owned

* Make function implicit return

* sse-loading-screen updates:
- updated socket.io-client to 2.2.0
- added ports support

* Update browser tests to use sandboxes repository.

Author: CompuIves

package.json

@@ -8,7 +8,7 @@
     "build:prod": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build  --scope homepage --stream && lerna run build --scope app --stream && lerna run copy-assets --scope app --stream",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
-    "build:deps": "lerna run build:dev --scope codesandbox-api --scope @codesandbox/notifications && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks && lerna run build --scope codesandbox-deps",
+    "build:deps": "lerna run build:dev --scope codesandbox-api --scope @codesandbox/notifications --scope @codesandbox/executors && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks && lerna run build --scope codesandbox-deps",
     "build:common": "lerna run build:dev --scope @codesandbox/common --stream",
     "build:dynamic": "lerna run build --scope dynamic-pages --stream",
     "start": "yarn build:deps && yarn start:fast",
@@ -43,7 +43,8 @@
       "packages/react-embed",
       "packages/dynamic-pages",
       "packages/notifications",
-      "packages/deps"
+      "packages/deps",
+      "packages/executors"
     ],
     "nohoist": [
       "**/react-codemirror2",

packages/app/integration-tests/browser-tests/browsers.test.js

@@ -27,11 +27,15 @@ function getDriver(capabilities) {
 function testPageWitCapabilities(capabilities) {
   const driver = getDriver(getCapabilities(capabilities));
   // Test if a sandbox can be loaded on IE11
-  return driver.get('http://localhost:3002/#new').then(async () => {
-    const element = webdriver.By.css('h1');
-    await driver.wait(webdriver.until.elementLocated(element), 60000);
-    driver.quit();
-  });
+  return driver
+    .get(
+      'http://localhost:3002/#github/codesandbox/integration-sandboxes/tree/master/new'
+    )
+    .then(async () => {
+      const element = webdriver.By.css('h1');
+      await driver.wait(webdriver.until.elementLocated(element), 60000);
+      driver.quit();
+    });
 }
 
 const usedDescribe = process.env.BROWSER_STACK_KEY ? describe : describe.skip;

packages/app/package.json

@@ -130,6 +130,7 @@
     "@babel/preset-env": "^7.4.2",
     "@cerebral/http": "^4.0.0",
     "@cerebral/mobx-state-tree": "^3.0.0",
+    "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^0.5.0",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@svgr/core": "^2.4.1",

packages/app/scripts/start.js

@@ -229,7 +229,7 @@ function addMiddleware(devServer, index) {
     devServer.use(
       '/api',
       proxy({
-        target: 'https://codesandbox.io',
+        target: 'https://codesandbox.stream',
         changeOrigin: true,
       })
     );

packages/app/src/app/components/CodeEditor/index.tsx

@@ -65,7 +65,7 @@ type State = {
 export default class CodeEditor extends React.PureComponent<
   Props & {
     editor?: 'vscode' | 'monaco' | 'codemirror';
-    style: React.CSSProperties;
+    style?: React.CSSProperties;
   },
   State
 > {

packages/app/src/app/components/CodeEditor/types.ts

@@ -21,6 +21,8 @@ export type Settings = {
   experimentVSCode: boolean;
   prettierConfig: Object;
   zenMode: boolean;
+  livePreviewEnabled: boolean;
+  instantPreviewEnabled: boolean;
 };
 
 type ModuleTab = {
@@ -69,10 +71,10 @@ export interface Editor {
 
 export type Props = {
   currentModule: Module;
-  currentTab: Tab | undefined;
+  currentTab?: Tab;
   sandbox: Sandbox;
   isModuleSynced: (shortid: string) => boolean;
-  customEditorAPI: {
+  customEditorAPI?: {
     getCustomEditor: (
       path: string
     ) => (container: HTMLElement, extraProps: object) => void;
@@ -90,11 +92,11 @@ export type Props = {
   highlightedLines?: Array<number>;
   tsconfig?: Object;
   readOnly?: boolean;
-  isLive: boolean;
+  isLive?: boolean;
   sendTransforms?: (transform: any) => void;
   receivingCode?: boolean;
   onCodeReceived?: () => void;
-  onSelectionChanged: (d: { selection: any; moduleShortid: string }) => void;
+  onSelectionChanged?: (d: { selection: any; moduleShortid: string }) => void;
   onModuleStateMismatch?: () => void;
-  theme: any;
+  theme?: any;
 };

packages/app/src/app/components/Preview/DevTools/Browser/index.tsx

@@ -7,8 +7,7 @@ export const Container = styled.div`
   color: ${props =>
     props.theme['editor.foreground'] ||
     (props.theme.light ? '#636363' : 'rgba(255, 255, 255, 0.8)')};
-  width: 100%;
-  height: 100%;
+  flex: auto;
   display: flex;
   flex-direction: column;
   border-color: ${props => props.theme['statusBar.border'] || '#191C1D'};

packages/app/src/app/components/Preview/DevTools/Console/elements.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import PlusIcon from 'react-icons/lib/go/plus';
+import ContextMenu from 'app/components/ContextMenu';
+
+const Container = styled.button`
+  transition: 0.3s ease color;
+  display: flex;
+  height: 100%;
+
+  align-items: center;
+  font-size: 0.8rem;
+  padding: 0 1rem;
+
+  outline: none;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+
+  cursor: pointer;
+
+  &:hover {
+    color: white;
+  }
+`;
+
+export function AddTab() {
+  return (
+    <ContextMenu
+      childFunction
+      items={[
+        {
+          title: 'Browser Pane',
+          icon: PlusIcon,
+          action: () => {
+            alert('test');
+            return true;
+          },
+        },
+      ]}
+    >
+      {onContextMenu => (
+        <Container onClick={onContextMenu}>
+          <PlusIcon />
+        </Container>
+      )}
+    </ContextMenu>
+  );
+}

packages/app/src/app/components/Preview/DevTools/Tabs/AddTab.tsx

@@ -17,6 +17,7 @@ export const Tab = styled.div<{ active: boolean; isOver: boolean }>`
   display: flex;
   align-items: center;
   padding: 0 1.25rem;
+  width: max-content;
 
   padding-right: 1.75rem;
   height: 100%;