Add deploy to staging with terraform (#120)

* Add terraform and deployment scripts

* Hotfix errors due to minifying js assets

1. It seems that using shorthand generator function definitions in objects (for
   src/slang/interpreter.ts) will result in a minified file where the generator
   method replaced by a function. `yield` calls in this generator therefore
   raise an uncaught syntax error in the browser. See:
   webpack/webpack#7566
2. A known issue with causes reuse of const variables in the same scope. See:
   mishoo/UglifyJS#2842

* Fix workspace-green css

* Add profile variable to terraform config

* Fix runInContext not finishing in minified js

* Fix more instances of method shorthand bugs

* Use dynamic class name for greenscreen

* Format playground component

* Add console.log to report version

Author: ning-y

.env.example

@@ -1 +1,2 @@
 REACT_APP_IVLE_KEY=your_ivle_key_here
+REACT_APP_VERSION=$npm_package_version

.gitignore

@@ -10,6 +10,9 @@
 /build
 src/styles/*.css
 
+# deployment
+terraform*
+
 # misc
 .DS_Store
 .env.local

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "cadet-frontend",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "scripts-info": {
     "format": "Format source code",
     "start": "Start the Webpack development server",
@@ -10,7 +10,7 @@
     "update-ui-snapshots": "Update UI test snapshots"
   },
   "scripts": {
-    "build": "build-css && build-js",
+    "build": "node-sass-chokidar src/ -o src/ && react-scripts-ts build",
     "build-css": "node-sass-chokidar src/ -o src/",
     "build-js": "react-scripts-ts build",
     "coverage": "./scripts/coverage-fix.sh do && react-scripts-ts test --env=jsdom --coverage && ./scripts/coverage-fix.sh undo",
@@ -83,12 +83,14 @@
     "@types/react-router-redux": "^5.0.13",
     "@types/react-test-renderer": "^16.0.1",
     "@types/redux-mock-store": "^0.0.13",
+    "babel-core": "6",
+    "babel-runtime": "^6.23.0",
     "coveralls": "^3.0.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "husky": "^1.0.0-rc.6",
     "prettier": "^1.12.0",
-    "react-scripts-ts": "^2.15.1",
+    "react-scripts-ts": "^2.16.0",
     "react-test-renderer": "^16.3.1",
     "typescript": "^2.8.1"
   }

src/components/Playground.tsx

@@ -11,16 +11,40 @@ import { SideContentTab } from './workspace/side-content'
 
 export type PlaygroundProps = RouteComponentProps<{}>
 
-const Playground: React.SFC<PlaygroundProps> = props => {
-  return (
-    <HotKeys className="Playground pt-dark" keyMap={keyMap}>
-      <WorkspaceContainer
-        libQuery={parseLibrary(props)}
-        prgrmQuery={parsePrgrm(props)}
-        sideContentTabs={[playgroundIntroduction]}
-      />
-    </HotKeys>
-  )
+type PlaygroundState = {
+  isGreen: boolean
+}
+
+class Playground extends React.Component<PlaygroundProps, PlaygroundState> {
+  private keyMap = { goGreen: 'h u l k' }
+
+  private handlers = { goGreen: () => {} }
+
+  constructor(props: PlaygroundProps) {
+    super(props)
+    this.state = { isGreen: false }
+    this.handlers.goGreen = this.toggleIsGreen.bind(this)
+  }
+
+  public render() {
+    return (
+      <HotKeys
+        className={'Playground pt-dark' + (this.state.isGreen ? ' GreenScreen' : '')}
+        keyMap={this.keyMap}
+        handlers={this.handlers}
+      >
+        <WorkspaceContainer
+          libQuery={parseLibrary(this.props)}
+          prgrmQuery={parsePrgrm(this.props)}
+          sideContentTabs={[playgroundIntroduction]}
+        />
+      </HotKeys>
+    )
+  }
+
+  private toggleIsGreen() {
+    this.setState({ isGreen: !this.state.isGreen })
+  }
 }
 
 const parsePrgrm = (props: PlaygroundProps) => {
@@ -35,10 +59,6 @@ const parseLibrary = (props: PlaygroundProps) => {
   return sourceChapters.includes(lib) ? lib : undefined
 }
 
-const keyMap = {
-  goGreen: 'h u l k'
-}
-
 const SICP_SITE = 'http://www.comp.nus.edu.sg/~henz/sicp_js/'
 const CHAP = '\xa7'
 const playgroundIntroduction: SideContentTab = {

src/components/__tests__/__snapshots__/Playground.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Playground renders correctly 1`] = `
-"<HotKeys className=\\"Playground pt-dark\\" keyMap={{...}}>
+"<HotKeys className=\\"Playground pt-dark\\" keyMap={{...}} handlers={{...}}>
   <Connect(Workspace) libQuery={[undefined]} prgrmQuery={[undefined]} sideContentTabs={{...}} />
 </HotKeys>"
 `;

src/components/workspace/index.tsx

@@ -1,7 +1,6 @@
 import { decompressFromEncodedURIComponent } from 'lz-string'
 import Resizable, { ResizableProps, ResizeCallback } from 're-resizable'
 import * as React from 'react'
-import { HotKeys } from 'react-hotkeys'
 
 import ControlBarContainer from '../../containers/workspace/ControlBarContainer'
 import EditorContainer from '../../containers/workspace/EditorContainer'
@@ -60,7 +59,7 @@ class Workspace extends React.Component<WorkspaceProps, {}> {
    */
   public render() {
     return (
-      <HotKeys className="workspace" handlers={handlers}>
+      <div className="workspace">
         <ControlBarContainer {...this.props.controlBarOptions} />
         <div className="row workspace-parent">
           <div className="editor-divider" ref={e => (this.editorDividerDiv = e!)} />
@@ -75,7 +74,7 @@ class Workspace extends React.Component<WorkspaceProps, {}> {
             <ReplContainer />
           </div>
         </div>
-      </HotKeys>
+      </div>
     )
   }
 
@@ -154,10 +153,6 @@ class Workspace extends React.Component<WorkspaceProps, {}> {
   }
 }
 
-const handlers = {
-  goGreen: () => require('../../styles/workspace-green.css')
-}
-
 const rightResizeOnly = {
   top: false,
   right: true,

src/index.tsx

@@ -6,13 +6,20 @@ import { ConnectedRouter } from 'react-router-redux'
 
 import ApplicationContainer from './containers/ApplicationContainer'
 import { store } from './createStore'
+import { VERSION } from './utils/constants'
 import { history } from './utils/history'
 import registerServiceWorker from './utils/registerServiceWorker'
 
 import './styles/index.css'
 
 const rootContainer = document.getElementById('root') as HTMLElement
 ;(window as any).__REDUX_STORE__ = store // need this for slang's display
+// tslint:disable-next-line
+console.log(
+  `%c Source Academy v${VERSION}; ` +
+    'Please visit https://github.com/source-academy/cadet-frontend/issues to report bugs or issues.',
+  'font-weight: bold;'
+)
 
 render(
   <Provider store={store}>

src/sagas/index.ts

@@ -8,8 +8,8 @@ import * as actionTypes from '../actions/actionTypes'
 import { mockAssessmentOverviews, mockAssessments } from '../mocks/api'
 import { IState } from '../reducers/states'
 import { Context, interrupt, runInContext } from '../slang'
+import { IVLE_KEY } from '../utils/constants'
 import { showSuccessMessage, showWarningMessage } from '../utils/notification'
-import { IVLE_KEY } from '../utils/secrets'
 
 function* mainSaga() {
   yield* apiFetchSaga()
@@ -105,7 +105,7 @@ function* workspaceSaga(): SagaIterator {
 
 function* evalCode(code: string, context: Context) {
   const { result, interrupted } = yield race({
-    result: call(runInContext, code, context),
+    result: call(runInContext, code, context, { scheduler: 'async' }),
     interrupted: take(actionTypes.INTERRUPT_EXECUTION)
   })
   if (result) {

src/slang/interpreter.ts

@@ -1,4 +1,5 @@
 /* tslint:disable: max-classes-per-file */
+/* tslint:disable: object-literal-shorthand*/
 import * as es from 'estree'
 import * as constants from './constants'
 import { toJS } from './interop'
@@ -124,31 +125,41 @@ function* getArgs(context: Context, call: es.CallExpression) {
 
 export type Evaluator<T extends es.Node> = (node: T, context: Context) => IterableIterator<Value>
 
+/**
+ * WARNING: Do not use object literal shorthands, e.g.
+ *   {
+ *     *Literal(node: es.Literal, ...) {...},
+ *     *ThisExpression(node: es.ThisExpression, ..._ {...},
+ *     ...
+ *   }
+ * They do not minify well, raising uncaught syntax errors in production.
+ * See: https://github.com/webpack/webpack/issues/7566
+ */
 export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
   /** Simple Values */
-  *Literal(node: es.Literal, context: Context) {
+  Literal: function*(node: es.Literal, context: Context) {
     return node.value
   },
-  *ThisExpression(node: es.ThisExpression, context: Context) {
+  ThisExpression: function*(node: es.ThisExpression, context: Context) {
     return context.runtime.frames[0].thisContext
   },
-  *ArrayExpression(node: es.ArrayExpression, context: Context) {
+  ArrayExpression: function*(node: es.ArrayExpression, context: Context) {
     const res = []
     for (const n of node.elements) {
       res.push(yield* evaluate(n, context))
     }
     return res
   },
-  *FunctionExpression(node: es.FunctionExpression, context: Context) {
+  FunctionExpression: function*(node: es.FunctionExpression, context: Context) {
     return new Closure(node, currentFrame(context), context)
   },
-  *ArrowFunctionExpression(node: es.Function, context: Context) {
+  ArrowFunctionExpression: function*(node: es.Function, context: Context) {
     return new ArrowClosure(node, currentFrame(context), context)
   },
-  *Identifier(node: es.Identifier, context: Context) {
+  Identifier: function*(node: es.Identifier, context: Context) {
     return getVariable(context, node.name)
   },
-  *CallExpression(node: es.CallExpression, context: Context) {
+  CallExpression: function*(node: es.CallExpression, context: Context) {
     const callee = yield* evaluate(node.callee, context)
     const args = yield* getArgs(context, node)
     let thisContext
@@ -158,7 +169,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     const result = yield* apply(context, callee, args, node, thisContext)
     return result
   },
-  *NewExpression(node: es.NewExpression, context: Context) {
+  NewExpression: function*(node: es.NewExpression, context: Context) {
     const callee = yield* evaluate(node.callee, context)
     const args = []
     for (const arg of node.arguments) {
@@ -174,7 +185,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     }
     return obj
   },
-  *UnaryExpression(node: es.UnaryExpression, context: Context) {
+  UnaryExpression: function*(node: es.UnaryExpression, context: Context) {
     const value = yield* evaluate(node.argument, context)
 
     const error = rttc.checkUnaryExpression(context, node.operator, value)
@@ -191,7 +202,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
       return +value
     }
   },
-  *BinaryExpression(node: es.BinaryExpression, context: Context) {
+  BinaryExpression: function*(node: es.BinaryExpression, context: Context) {
     const left = yield* evaluate(node.left, context)
     const right = yield* evaluate(node.right, context)
 
@@ -241,10 +252,10 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     }
     return result
   },
-  *ConditionalExpression(node: es.ConditionalExpression, context: Context) {
+  ConditionalExpression: function*(node: es.ConditionalExpression, context: Context) {
     return yield* this.IfStatement(node, context)
   },
-  *LogicalExpression(node: es.LogicalExpression, context: Context) {
+  LogicalExpression: function*(node: es.LogicalExpression, context: Context) {
     const left = yield* evaluate(node.left, context)
     let error = rttc.checkLogicalExpression(context, left, true)
     if (error) {
@@ -264,20 +275,20 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
       return left
     }
   },
-  *VariableDeclaration(node: es.VariableDeclaration, context: Context) {
+  VariableDeclaration: function*(node: es.VariableDeclaration, context: Context) {
     const declaration = node.declarations[0]
     const id = declaration.id as es.Identifier
     const value = yield* evaluate(declaration.init!, context)
     defineVariable(context, id.name, value)
     return undefined
   },
-  *ContinueStatement(node: es.ContinueStatement, context: Context) {
+  ContinueStatement: function*(node: es.ContinueStatement, context: Context) {
     return new ContinueValue()
   },
-  *BreakStatement(node: es.BreakStatement, context: Context) {
+  BreakStatement: function*(node: es.BreakStatement, context: Context) {
     return new BreakValue()
   },
-  *ForStatement(node: es.ForStatement, context: Context) {
+  ForStatement: function*(node: es.ForStatement, context: Context) {
     if (node.init) {
       yield* evaluate(node.init, context)
     }
@@ -305,7 +316,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     }
     return value
   },
-  *MemberExpression(node: es.MemberExpression, context: Context) {
+  MemberExpression: function*(node: es.MemberExpression, context: Context) {
     let obj = yield* evaluate(node.object, context)
     if (obj instanceof Closure) {
       obj = obj.fun
@@ -322,7 +333,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
       }
     }
   },
-  *AssignmentExpression(node: es.AssignmentExpression, context: Context) {
+  AssignmentExpression: function*(node: es.AssignmentExpression, context: Context) {
     if (node.left.type === 'MemberExpression') {
       const left = node.left
       const obj = yield* evaluate(left.object, context)
@@ -342,7 +353,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     setVariable(context, id.name, value)
     return value
   },
-  *FunctionDeclaration(node: es.FunctionDeclaration, context: Context) {
+  FunctionDeclaration: function*(node: es.FunctionDeclaration, context: Context) {
     const id = node.id as es.Identifier
     // tslint:disable-next-line:no-any
     const closure = new Closure(node as any, currentFrame(context), context)
@@ -366,7 +377,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
       return undefined
     }
   },
-  *ExpressionStatement(node: es.ExpressionStatement, context: Context) {
+  ExpressionStatement: function*(node: es.ExpressionStatement, context: Context) {
     return yield* evaluate(node.expression, context)
   },
   *ReturnStatement(node: es.ReturnStatement, context: Context) {
@@ -382,7 +393,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
       return new ReturnValue(undefined)
     }
   },
-  *WhileStatement(node: es.WhileStatement, context: Context) {
+  WhileStatement: function*(node: es.WhileStatement, context: Context) {
     let value: any // tslint:disable-line
     let test
     while (
@@ -399,7 +410,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     }
     return value
   },
-  *ObjectExpression(node: es.ObjectExpression, context: Context) {
+  ObjectExpression: function*(node: es.ObjectExpression, context: Context) {
     const obj = {}
     for (const prop of node.properties) {
       let key
@@ -412,7 +423,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     }
     return obj
   },
-  *BlockStatement(node: es.BlockStatement, context: Context) {
+  BlockStatement: function*(node: es.BlockStatement, context: Context) {
     let result: Value
     for (const statement of node.body) {
       result = yield* evaluate(statement, context)
@@ -426,7 +437,7 @@ export const evaluators: { [nodeType: string]: Evaluator<es.Node> } = {
     }
     return result
   },
-  *Program(node: es.BlockStatement, context: Context) {
+  Program: function*(node: es.BlockStatement, context: Context) {
     let result: Value
     for (const statement of node.body) {
       result = yield* evaluate(statement, context)