open logs from error message

Signed-off-by: shmck <[email protected]>

Author: ShMcK

src/channel/index.ts

@@ -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)
@@ -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

src/environment.ts

@@ -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

src/services/testRunner/index.ts

@@ -5,7 +5,7 @@ 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 {
@@ -51,7 +51,7 @@ 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
@@ -63,12 +63,12 @@ const createTestRunner = (config: TT.TutorialTestRunnerConfig, callbacks: Callba
         }
         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
       }
     }

src/services/testRunner/output.ts

@@ -9,18 +9,23 @@ const getOutputChannel = (name: string): vscode.OutputChannel => {
   return channels[name]
 }
 
-interface DisplayOutput {
+interface ChannelOutput {
   channel: string
   text: string
   show?: boolean
 }
 
-export const displayOutput = (params: DisplayOutput) => {
+export const addOutput = (params: ChannelOutput) => {
   const channel = getOutputChannel(params.channel)
   channel.clear()
   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.clear()

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

@@ -11,6 +11,7 @@ interface Props {
   closeable?: boolean
   onClose?: () => void
   handleClose?: () => void
+  children?: React.ReactElement | null
 }
 
 const Message = (props: Props) => {
@@ -30,7 +31,10 @@ const Message = (props: Props) => {
       onClose={onClose}
       shape={props.shape}
     >
-      {props.content}
+      <div>
+        <div>{props.content}</div>
+        <div>{props.children}</div>
+      </div>
     </AlifdMessage>
   )
 }

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

@@ -24,7 +24,7 @@ const useTimeout = ({ duration, key }: { duration: number; key: string }) => {
   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 (
@@ -36,7 +36,9 @@ const TestMessage = (props: T.TestStatus) => {
       size="medium"
       closeable={props.type !== 'loading'}
       content={props.content}
-    />
+    >
+      {props.children}
+    </Message>
   )
 }
 

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

@@ -1,12 +1,14 @@
 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 = {
@@ -17,9 +19,21 @@ 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

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

@@ -96,6 +96,7 @@ interface Props {
   testStatus: T.TestStatus | null
   onContinue(): void
   onLoadSolution(): void
+  onOpenLogs(channel: string): void
 }
 
 const Level = ({
@@ -107,6 +108,7 @@ const Level = ({
   status,
   onContinue,
   onLoadSolution,
+  onOpenLogs,
   processes,
   testStatus,
 }: Props) => {
@@ -170,7 +172,7 @@ const Level = ({
 
         {(testStatus || processes.length > 0) && (
           <div css={styles.processes}>
-            <ProcessMessages processes={processes} testStatus={testStatus} />
+            <ProcessMessages processes={processes} testStatus={testStatus} onOpenLogs={onOpenLogs} />
           </div>
         )}
 

web-app/src/containers/Tutorial/components/Level.tsx

@@ -32,6 +32,10 @@ const TutorialPage = (props: PageProps) => {
     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'
@@ -61,6 +65,7 @@ const TutorialPage = (props: PageProps) => {
       status={progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'}
       onContinue={onContinue}
       onLoadSolution={onLoadSolution}
+      onOpenLogs={onOpenLogs}
       processes={processes}
       testStatus={testStatus}
     />