May 4, 2020 · May 3, 2020 · May 3, 2020 · May 3, 2020 · May 4, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
 - Continue an incomplete tutorial started in the same workspace. Choose the "continue" path from the start screen. Progress is stored in local storage in the workspace.

 ![continue tutorial](./docs/images/continue-tutorial.png)

 ## [0.5.0]

 - Show error messages in the webview UI

 ![fail message in webview](./docs/images/fail-message-in-webview.png)
diff --git a/docs/images/fail-message-in-webview.png b/docs/images/fail-message-in-webview.png
diff --git a/src/channel/index.ts b/src/channel/index.ts
 import { readFile } from 'fs'
 import { join } from 'path'
 import { promisify } from 'util'
 import { showOutput } from '../services/testRunner/output'
 import { WORKSPACE_ROOT } from '../environment'

 const readFileAsync = promisify(readFile)
        // update progress when a level is deemed complete in the client
        await this.context.progress.syncProgress(action.payload.progress)
        return

      case 'EDITOR_OPEN_LOGS':
        const channel = action.payload.channel
        await showOutput(channel)
      default:
        logger(`No match for action type: ${actionType}`)
        return
diff --git a/src/editor/commands.ts b/src/editor/commands.ts
 import * as vscode from 'vscode'
 import createTestRunner from '../services/testRunner'
 import { setupActions } from '../actions/setupActions'
 import createWebView from '../webview'
 import createWebView from '../services/webview'
 import logger from '../services/logger'

 export const COMMANDS = {
          // send test pass message back to client
          webview.send({ type: 'TEST_PASS', payload: { position } })
        },
        onFail: (position: T.Position,message: string) => {
        onFail: (position: T.Position,failSummary: T.TestFail): void => {
          // send test fail message back to client with failure message
          webview.send({ type: 'TEST_FAIL', payload: { position,message } })
          webview.send({ type: 'TEST_FAIL', payload: { position,fail: failSummary } })
        },
        onError: (position: T.Position) => {
          // TODO: send test error message back to client
diff --git a/src/environment.ts b/src/environment.ts
 export const NODE_ENV: Env = process.env.NODE_ENV || 'production'

 // toggle logging in development
 export const LOG =false
 export const LOG =true

 // error logging tool
 export const SENTRY_DSN: string | null = null
diff --git a/src/services/testRunner/formatOutput.ts b/src/services/testRunner/formatOutput.ts
 // export const formatSuccessOutput = (tap: ParserOutput): string => {}

 export const formatFailOutput = (tap: ParserOutput): string => {
  let output = `FAILEDTESTS\n`
  let output = `FAILEDTEST LOG\n`
  tap.failed.forEach((fail: Fail) => {
    const details = fail.details ? `\n${fail.details}\n` : ''
    const logs = fail.logs ? `\n${fail.logs.join('\n')}\n` : ''
diff --git a/src/services/testRunner/index.ts b/src/services/testRunner/index.ts
 import parser from './parser'
 import { debounce, throttle } from './throttle'
 import onError from '../sentry/onError'
 import { clearOutput,displayOutput } from './output'
 import { clearOutput,addOutput } from './output'
 import { formatFailOutput } from './formatOutput'

 interface Callbacks {
  onSuccess(position: T.Position): void
  onFail(position: T.Position,message: string): void
  onFail(position: T.Position,failSummary: T.TestFail): void
  onRun(position: T.Position): void
  onError(position: T.Position): void
 }

    const tap = parser(stdout || '')

 displayOutput({ channel: logChannelName, text: tap.logs.join('\n'), show: false })
 addOutput({ channel: logChannelName, text: tap.logs.join('\n'), show: false })

    if (stderr) {
      // FAIL also trigger stderr
      if (stdout && stdout.length && !tap.ok) {
        const firstFailMessage = tap.failed[0].message
        callbacks.onFail(position, firstFailMessage)
        const firstFail = tap.failed[0]
        const failSummary = {
          title: firstFail.message || 'Test Failed',
          description: firstFail.details || 'Unknown error',
        }
        callbacks.onFail(position, failSummary)
        const output = formatFailOutput(tap)
 displayOutput({ channel: failChannelName, text: output, show: true })
 addOutput({ channel: failChannelName, text: output, show: true })
        return
      } else {
        callbacks.onError(position)
        // open terminal with error string
 displayOutput({ channel: failChannelName, text: stderr, show: true })
 addOutput({ channel: failChannelName, text: stderr, show: true })
        return
      }
    }
diff --git a/src/services/testRunner/output.ts b/src/services/testRunner/output.ts
  return channels[name]
 }

 interfaceDisplayOutput {
 interfaceChannelOutput {
  channel: string
  text: string
  show?: boolean
 }

 export constdisplayOutput = (params:DisplayOutput) => {
 export constaddOutput = (params:ChannelOutput) => {
  const channel = getOutputChannel(params.channel)
  channel.clear()
  channel.show(params.show || false)
  channel.append(params.text)
 }

 export const showOutput = (channelName: string) => {
  const channel = getOutputChannel(channelName)
  channel.show()
 }

 export const clearOutput = (channelName: string) => {
  const channel = getOutputChannel(channelName)
  channel.show(false)
  channel.clear()
  channel.hide()
 }
diff --git a/src/webview/index.ts → src/services/webview/index.ts b/src/webview/index.ts → src/services/webview/index.ts
 import * as path from 'path'
 import { Action } from 'typings'
 import * as vscode from 'vscode'
 import Channel from '../channel'
 import Channel from '../../channel'
 import render from './render'

 interface ReactWebViewProps {
diff --git a/src/webview/render.ts → src/services/webview/render.ts b/src/webview/render.ts → src/services/webview/render.ts
 import { JSDOM } from 'jsdom'
 import * as path from 'path'
 import * as vscode from 'vscode'
 import onError from '../services/sentry/onError'
 import onError from '../sentry/onError'

 const getNonce = (): string => {
  let text = ''
diff --git a/typings/index.d.ts b/typings/index.d.ts
  type: 'success' | 'warning' | 'error' | 'loading'
  title: string
  content?: string
  timeout?: number
 }

 export interface MachineContext {
  description: string
  status: 'RUNNING' | 'SUCCESS' | 'FAIL' | 'ERROR'
 }

 export type TestFail = {
  title: string
  description: string
 }
diff --git a/web-app/src/components/Message/index.tsx b/web-app/src/components/Message/index.tsx
  closeable?: boolean
  onClose?: () => void
  handleClose?: () => void
  children?: React.ReactElement | null
 }

 const Message = (props: Props) => {
      onClose={onClose}
      shape={props.shape}
    >
      {props.content}
      <div>
        <div>{props.content}</div>
        <div>{props.children}</div>
      </div>
    </AlifdMessage>
  )
 }
diff --git a/web-app/src/components/ProcessMessages/TestMessage.tsx b/web-app/src/components/ProcessMessages/TestMessage.tsx

 const durations = {
  success: 1000,
  warning:4500,
  warning:20000,
  error: 4500,
  loading: 300000,
 }
  return timeoutClose
 }

 const TestMessage = (props: T.TestStatus) => {
 const TestMessage = (props: T.TestStatus & { children?: React.ReactElement | null }) => {
  const duration = durations[props.type]
  const timeoutClose = useTimeout({ duration, key: props.title })
  return (
      size="medium"
      closeable={props.type !== 'loading'}
      content={props.content}
    />
    >
      {props.children}
    </Message>
  )
 }

diff --git a/web-app/src/components/ProcessMessages/index.tsx b/web-app/src/components/ProcessMessages/index.tsx
 import Message from '../Message'
 import * as React from 'react'
 import * as T from 'typings'
 import Button from '../Button'
 import { css, jsx } from '@emotion/core'
 import TestMessage from './TestMessage'

 interface Props {
  testStatus?: T.TestStatus | null
  processes: T.ProcessEvent[]
  onOpenLogs?: (channel: string) => void
 }

 const styles = {
 }

 // display a list of active processes
 const ProcessMessages = ({ processes, testStatus }: Props) => {
 const ProcessMessages = ({ processes, testStatus, onOpenLogs }: Props) => {
  if (testStatus) {
    return <TestMessage {...testStatus} />
    return (
      <TestMessage {...testStatus}>
        {testStatus.type === 'warning' ? (
          <Button
            onClick={() => onOpenLogs && onOpenLogs('CodeRoad (Tests)')}
            type="normal"
            style={{ marginTop: '0.8rem' }}
          >
            Open Logs
          </Button>
        ) : null}
      </TestMessage>
    )
  }
  if (!processes.length) {
    return null
diff --git a/web-app/src/containers/Tutorial/components/Level.tsx b/web-app/src/containers/Tutorial/components/Level.tsx
  testStatus: T.TestStatus | null
  onContinue(): void
  onLoadSolution(): void
  onOpenLogs(channel: string): void
 }

 const Level = ({
  status,
  onContinue,
  onLoadSolution,
  onOpenLogs,
  processes,
  testStatus,
 }: Props) => {

        {(testStatus || processes.length > 0) && (
          <div css={styles.processes}>
            <ProcessMessages processes={processes} testStatus={testStatus} />
            <ProcessMessages processes={processes} testStatus={testStatus}onOpenLogs={onOpenLogs}/>
          </div>
        )}

diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
    props.send({ type: 'STEP_SOLUTION_LOAD' })
  }

  const onOpenLogs = (channel: string): void => {
    props.send({ type: 'OPEN_LOGS', payload: { channel } })
  }

  const steps = levelData.steps.map((step: TT.Step) => {
    // label step status for step component
    let status: T.ProgressStatus = 'INCOMPLETE'
      status={progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'}
      onContinue={onContinue}
      onLoadSolution={onLoadSolution}
      onOpenLogs={onOpenLogs}
      processes={processes}
      testStatus={testStatus}
    />
diff --git a/web-app/src/services/state/actions/editor.ts b/web-app/src/services/state/actions/editor.ts
 import * asCR from 'typings'
 import * asT from 'typings'
 import * as TT from 'typings/tutorial'
 import * as selectors from '../../selectors'

      type: 'EDITOR_STARTUP',
    })
  },
  configureNewTutorial(context:CR.MachineContext) {
  configureNewTutorial(context:T.MachineContext) {
    editorSend({
      type: 'EDITOR_TUTORIAL_CONFIG',
      payload: {
      },
    })
  },
  continueConfig(context:CR.MachineContext) {
  continueConfig(context:T.MachineContext) {
    editorSend({
      type: 'EDITOR_TUTORIAL_CONTINUE_CONFIG',
      payload: {
      },
    })
  },
  loadLevel(context:CR.MachineContext): void {
  loadLevel(context:T.MachineContext): void {
    const level: TT.Level = selectors.currentLevel(context)
    const step: TT.Step | null = selectors.currentStep(context)
    // load step actions
      },
    })
  },
  loadStep(context:CR.MachineContext): void {
  loadStep(context:T.MachineContext): void {
    const step: TT.Step | null = selectors.currentStep(context)
    if (step && step.setup) {
      // load step actions
      })
    }
  },
  editorLoadSolution(context:CR.MachineContext): void {
  editorLoadSolution(context:T.MachineContext): void {
    const step: TT.Step | null = selectors.currentStep(context)
    // tell editor to load solution commit
    if (step && step.solution) {
      })
    }
  },
  syncLevelProgress(context:CR.MachineContext): void {
  syncLevelProgress(context:T.MachineContext): void {
    editorSend({
      type: 'EDITOR_SYNC_PROGRESS',
      payload: {
      type: 'EDITOR_REQUEST_WORKSPACE',
    })
  },
  editorOpenLogs(context: T.MachineContext, event: T.MachineEvent): void {
    editorSend({
      type: 'EDITOR_OPEN_LOGS',
      payload: { channel: event.payload.channel },
    })
  },
 })
diff --git a/web-app/src/services/state/actions/testNotify.ts b/web-app/src/services/state/actions/testNotify.ts
  testFail: assign({
    testStatus: (context, event) => ({
      type: 'warning',
      title:'Fail!',
      content: event.payload.message,
      title:event.payload.fail.title,
      content: event.payload.fail.description,
    }),
  }),
  // @ts-ignore
Original file line number	Diff line number	Diff line change
Expand Up		@@ -101,3 +101,9 @@ Resulting in a folder structure like the following:
		- Continue an incomplete tutorial started in the same workspace. Choose the "continue" path from the start screen. Progress is stored in local storage in the workspace.

		![continue tutorial](./docs/images/continue-tutorial.png)

		## [0.5.0]

		- Show error messages in the webview UI

		![fail message in webview](./docs/images/fail-message-in-webview.png)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,6 +14,7 @@ import { openWorkspace, checkWorkspaceEmpty } from '../services/workspace'
		import { readFile } from 'fs'
		import { join } from 'path'
		import { promisify } from 'util'
		import { showOutput } from '../services/testRunner/output'
		import { WORKSPACE_ROOT } from '../environment'

		const readFileAsync = promisify(readFile)
Expand DownExpand Up		@@ -300,7 +301,9 @@ class Channel implements Channel {
		// update progress when a level is deemed complete in the client
		await this.context.progress.syncProgress(action.payload.progress)
		return

		case 'EDITOR_OPEN_LOGS':
		const channel = action.payload.channel
		await showOutput(channel)
		default:
		logger(`No match for action type: ${actionType}`)
		return
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import * as TT from 'typings/tutorial'
		import * as vscode from 'vscode'
		import createTestRunner from '../services/testRunner'
		import { setupActions } from '../actions/setupActions'
		import createWebView from '../webview'
		import createWebView from '../services/webview'
		import logger from '../services/logger'

		export const COMMANDS = {
Expand DownExpand Up		@@ -62,9 +62,9 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP
		// send test pass message back to client
		webview.send({ type: 'TEST_PASS', payload: { position } })
		},
		onFail: (position: T.Position,message: string) => {
		onFail: (position: T.Position,failSummary: T.TestFail): void => {
		// send test fail message back to client with failure message
		webview.send({ type: 'TEST_FAIL', payload: { position,message } })
		webview.send({ type: 'TEST_FAIL', payload: { position,fail: failSummary } })
		},
		onError: (position: T.Position) => {
		// TODO: send test error message back to client
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,7 @@ export type Env = 'test' \| 'local' \| 'development' \| 'production'
		export const NODE_ENV: Env = process.env.NODE_ENV \|\| 'production'

		// toggle logging in development
		export const LOG =false
		export const LOG =true

		// error logging tool
		export const SENTRY_DSN: string \| null = null
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,7 +4,7 @@ import { ParserOutput, Fail } from './parser'
		// export const formatSuccessOutput = (tap: ParserOutput): string => {}

		export const formatFailOutput = (tap: ParserOutput): string => {
		let output = `FAILEDTESTS\n`
		let output = `FAILEDTEST LOG\n`
		tap.failed.forEach((fail: Fail) => {
		const details = fail.details ? `\n${fail.details}\n` : ''
		const logs = fail.logs ? `\n${fail.logs.join('\n')}\n` : ''
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,12 +5,12 @@ import logger from '../logger'
		import parser from './parser'
		import { debounce, throttle } from './throttle'
		import onError from '../sentry/onError'
		import { clearOutput,displayOutput } from './output'
		import { clearOutput,addOutput } from './output'
		import { formatFailOutput } from './formatOutput'

		interface Callbacks {
		onSuccess(position: T.Position): void
		onFail(position: T.Position,message: string): void
		onFail(position: T.Position,failSummary: T.TestFail): void
		onRun(position: T.Position): void
		onError(position: T.Position): void
		}
Expand DownExpand Up		@@ -51,20 +51,24 @@ const createTestRunner = (config: TT.TutorialTestRunnerConfig, callbacks: Callba

		const tap = parser(stdout \|\| '')

		displayOutput({ channel: logChannelName, text: tap.logs.join('\n'), show: false })
		addOutput({ channel: logChannelName, text: tap.logs.join('\n'), show: false })

		if (stderr) {
		// FAIL also trigger stderr
		if (stdout && stdout.length && !tap.ok) {
		const firstFailMessage = tap.failed[0].message
		callbacks.onFail(position, firstFailMessage)
		const firstFail = tap.failed[0]
		const failSummary = {
		title: firstFail.message \|\| 'Test Failed',
		description: firstFail.details \|\| 'Unknown error',
		}
		callbacks.onFail(position, failSummary)
		const output = formatFailOutput(tap)
		displayOutput({ channel: failChannelName, text: output, show: true })
		addOutput({ channel: failChannelName, text: output, show: true })
		return
		} else {
		callbacks.onError(position)
		// open terminal with error string
		displayOutput({ channel: failChannelName, text: stderr, show: true })
		addOutput({ channel: failChannelName, text: stderr, show: true })
		return
		}
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,22 +9,25 @@ const getOutputChannel = (name: string): vscode.OutputChannel => {
		return channels[name]
		}

		interfaceDisplayOutput {
		interfaceChannelOutput {
		channel: string
		text: string
		show?: boolean
		}

		export constdisplayOutput = (params:DisplayOutput) => {
		export constaddOutput = (params:ChannelOutput) => {
		const channel = getOutputChannel(params.channel)
		channel.clear()
		channel.show(params.show \|\| false)
		channel.append(params.text)
		}

		export const showOutput = (channelName: string) => {
		const channel = getOutputChannel(channelName)
		channel.show()
		}

		export const clearOutput = (channelName: string) => {
		const channel = getOutputChannel(channelName)
		channel.show(false)
		channel.clear()
		channel.hide()
		}
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import * as path from 'path'
		import { Action } from 'typings'
		import * as vscode from 'vscode'
		import Channel from '../channel'
		import Channel from '../../channel'
		import render from './render'

		interface ReactWebViewProps {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import { JSDOM } from 'jsdom'
		import * as path from 'path'
		import * as vscode from 'vscode'
		import onError from '../services/sentry/onError'
		import onError from '../sentry/onError'

		const getNonce = (): string => {
		let text = ''
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,6 +42,7 @@ export interface TestStatus {
		type: 'success' \| 'warning' \| 'error' \| 'loading'
		title: string
		content?: string
		timeout?: number
		}

		export interface MachineContext {
Expand DownExpand Up		@@ -116,3 +117,8 @@ export interface ProcessEvent {
		description: string
		status: 'RUNNING' \| 'SUCCESS' \| 'FAIL' \| 'ERROR'
		}

		export type TestFail = {
		title: string
		description: string
		}