Icons, Fonts & Notifications

package.json

@@ -20,7 +20,7 @@
     "build": "rm -rf build && npm run build:ext && npm run build:web",
     "build:ext": "tsc -p ./",
     "build:web": "cd web-app && npm run build",
-    "postbuild:web": "cp -R ./web-app/build/ ./build/",
+    "postbuild:web": "cp -R ./web-app/build/ ./build/ && node scripts/fixFontPaths.js",
     "postinstall": "node ./node_modules/vscode/bin/install",
     "lint": "eslint src/**/*ts",
     "machine": "node ./out/state/index.js",
@@ -41,7 +41,6 @@
     "@types/assert": "^1.4.5",
     "@types/chokidar": "^2.1.3",
     "@types/dotenv": "^8.2.0",
-    "@types/glob": "^7.1.1",
     "@types/jest": "^25.1.1",
     "@types/jsdom": "^12.2.4",
     "@types/node": "^13.5.3",

scripts/fixFontPaths.js

@@ -0,0 +1,26 @@
+/*
+ * css url font paths do not match up from the web-app as it is moved inside of build
+ * in order to load fonts and icons, these paths must be reconciled.
+ */
+const fs = require('fs') // eslint-disable-line
+
+// find the generated main css file
+const getMainCSSFile = () => {
+  const regex = /^main.[a-z0-9]+.chunk.css$/
+  const mainCss = fs.readdirSync('build/static/css').filter(filename => filename.match(regex))
+  if (!mainCss.length) {
+    throw new Error('No main.css file found in build/static/css')
+  }
+  return mainCss[0]
+}
+
+// remap the font paths from the borken /fonts/ => ../../fonts/
+const remapFontPaths = () => {
+  const mainCSSFile = getMainCSSFile()
+  const file = fs.readFileSync(`build/static/css/${mainCSSFile}`, 'utf8')
+  const fontUrlRegex = /url\(\/fonts\//g
+  const remappedFile = file.replace(fontUrlRegex, 'url(../../fonts/')
+  fs.writeFileSync(`build/static/css/${mainCSSFile}`, remappedFile)
+}
+
+remapFontPaths()

src/editor/commands.ts

@@ -57,14 +57,11 @@ export const createCommands = ({ extensionPath, workspaceState, workspaceRoot }:
       testRunner = createTestRunner(config, {
         onSuccess: (payload: Payload) => {
           // send test pass message back to client
-          notify({ message: 'PASS' })
           webview.send({ type: 'TEST_PASS', payload })
-          // update local storage
         },
         onFail: (payload: Payload, message: string) => {
-          // send test fail message back to client
-          notify({ message: `FAIL ${message}` })
-          webview.send({ type: 'TEST_FAIL', payload })
+          // send test fail message back to client with failure message
+          webview.send({ type: 'TEST_FAIL', payload: { ...payload, message } })
         },
         onError: (payload: Payload) => {
           // send test error message back to client

tsconfig.json

@@ -25,5 +25,5 @@
     "allowJs": true,
     "removeComments": true
   },
-  "exclude": ["node_modules", ".vscode-test", "build", "resources", "web-app", "*.js", "*.test.ts"]
+  "exclude": ["node_modules", ".vscode-test", "build", "resources", "web-app", "*.js", "*.test.ts", "scripts"]
 }

typings/index.d.ts

@@ -42,13 +42,20 @@ export interface ErrorMessage {
   description?: string
 }
 
+export interface TestStatus {
+  type: 'success' | 'warning' | 'error' | 'loading'
+  title: string
+  content?: string
+}
+
 export interface MachineContext {
   env: Environment
   error: ErrorMessage | null
   tutorial: G.Tutorial | null
   position: Position
   progress: Progress
   processes: ProcessEvent[]
+  testStatus: TestStatus | null
 }
 
 export interface MachineEvent {
@@ -83,7 +90,6 @@ export interface MachineStateSchema {
             TestRunning: {}
             TestPass: {}
             TestFail: {}
-            TestError: {}
             StepNext: {}
             LevelComplete: {}
           }

web-app/config-overrides.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path')
-const { addBabelPreset, addBabelPlugin, addWebpackModuleRule } = require('customize-cra')
+const { addBabelPreset, addWebpackModuleRule, addBabelPlugin } = require('customize-cra')
 
 module.exports = function override(config) {
   addWebpackModuleRule({

web-app/src/Routes.tsx

@@ -23,7 +23,7 @@ const Routes = () => {
         <Route path={['Start.LoadTutorialSummary', 'Start.LoadTutorialData', 'Start.SetupNewTutorial']}>
           <LoadingPage text="Loading Tutorial..." context={context} />
         </Route>
-        <Route path={'Start.Error'}>
+        <Route path="Start.Error">
           <LoadingPage text="Error" context={context} />
         </Route>
         <Route path="Start.SelectTutorial">
@@ -32,11 +32,11 @@ const Routes = () => {
         <Route path="Start.Summary">
           <OverviewPage send={send} context={context} />
         </Route>
-        <Route path="SetupNewTutorial">
+        <Route path="Start.SetupNewTutorial">
           <LoadingPage text="Configuring tutorial..." context={context} />
         </Route>
         {/* Tutorial */}
-        <Route path="Tutorial.LoadNext">
+        <Route path={['Tutorial.LoadNext', 'Tutorial.Level.Load']}>
           <LoadingPage text="Loading Level..." context={context} />
         </Route>
         <Route path="Tutorial.Level">

web-app/src/components/Button/index.tsx

@@ -7,10 +7,19 @@ interface Props {
   disabled?: boolean
   type?: 'primary' | 'secondary' | 'normal'
   onClick?: () => void
+  size?: 'small' | 'medium' | 'large'
+  iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'
 }
 
 const Button = (props: Props) => (
-  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
+  <AlifdButton
+    onClick={props.onClick}
+    type={props.type}
+    disabled={props.disabled}
+    style={props.style}
+    size={props.size}
+    iconSize={props.iconSize}
+  >
     {props.children}
   </AlifdButton>
 )

web-app/src/components/Checkbox/index.tsx

@@ -1,19 +1,5 @@
 import * as React from 'react'
-import { css, jsx } from '@emotion/core'
-
-const styles = {
-  box: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    border: '1px solid black',
-  },
-  loading: {
-    backgroundColor: 'red',
-  },
-}
+import { Checkbox as AlifdCheckbox } from '@alifd/next'
 
 interface Props {
   status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE'
@@ -26,13 +12,7 @@ const Checkbox = (props: Props) => {
 
   const checked = props.status === 'COMPLETE'
 
-  return (
-    <div css={styles.box}>
-      <label>
-        <input css={styles.input} type="checkbox" checked={checked} onChange={onChange} />
-      </label>
-    </div>
-  )
+  return <AlifdCheckbox checked={checked} onChange={onChange} />
 }
 
 export default Checkbox

web-app/src/components/Message/index.tsx

@@ -2,15 +2,35 @@ import { Message as AlifdMessage } from '@alifd/next'
 import * as React from 'react'
 
 interface Props {
-  type: 'error'
+  type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading'
+  shape?: 'inline' | 'addon' | 'toast'
+  size?: 'medium' | 'large'
   title: string
-  description?: string
+  content?: string
+  closed?: boolean
+  closeable?: boolean
+  onClose?: () => void
+  handleClose?: () => void
 }
 
 const Message = (props: Props) => {
+  const [visible, setVisible] = React.useState(true)
+  function onClose() {
+    if (props.onClose) {
+      props.onClose()
+    }
+    setVisible(false)
+  }
   return (
-    <AlifdMessage type={props.type} title={props.title}>
-      {props.description}
+    <AlifdMessage
+      type={props.type}
+      visible={props.closed ? !props.closed : visible}
+      title={props.title}
+      closeable={props.closeable}
+      onClose={onClose}
+      shape={props.shape}
+    >
+      {props.content}
     </AlifdMessage>
   )
 }

web-app/src/components/ProcessMessages/TestMessage.tsx

@@ -0,0 +1,43 @@
+import Message from '../Message'
+import * as React from 'react'
+import * as T from 'typings'
+import { css, jsx } from '@emotion/core'
+
+const durations = {
+  success: 1000,
+  warning: 4500,
+  error: 4500,
+  loading: 300000,
+}
+
+const useTimeout = ({ duration, key }: { duration: number; key: string }) => {
+  const [timeoutClose, setTimeoutClose] = React.useState(false)
+  React.useEffect(() => {
+    setTimeoutClose(false)
+    const timeout = setTimeout(() => {
+      setTimeoutClose(true)
+    }, duration)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [key])
+  return timeoutClose
+}
+
+const TestMessage = (props: T.TestStatus) => {
+  const duration = durations[props.type]
+  const timeoutClose = useTimeout({ duration, key: props.title })
+  return (
+    <Message
+      key={props.title}
+      type={props.type}
+      title={props.title}
+      closed={timeoutClose}
+      size="medium"
+      closeable={props.type !== 'loading'}
+      content={props.content}
+    />
+  )
+}
+
+export default TestMessage