define processes

typings/index.d.ts

@@ -43,6 +43,7 @@ export interface MachineContext {
   tutorial: G.Tutorial | null
   position: Position
   progress: Progress
+  processes: ProcessEvent[]
 }
 
 export interface MachineEvent {
@@ -107,4 +108,5 @@ export type EditorDispatch = (type: string, payload?: MessageData | MessageState
 export interface ProcessEvent {
   title: string
   description: string
+  status: 'RUNNING' | 'SUCCESS' | 'FAIL' | 'ERROR'
 }

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

@@ -20,9 +20,6 @@ const styles = {
 
 // display a list of active processes
 const ProcessEvents = (props: Props) => {
-	if (!props.processes.length) {
-		return null
-	}
 	return (
 		<div style={styles.container}>
 			{props.processes.map(process => (

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

@@ -39,6 +39,9 @@ const styles = {
 		fontWeight: 'bold' as 'bold',
 		lineHeight: '1.2rem',
 	},
+	processes: {
+		padding: '0 1rem',
+	},
 	footer: {
 		height: '36px',
 		backgroundColor: 'black',
@@ -101,7 +104,11 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
 					</div>
 				)}
 
-				<ProcessEvents processes={processes} />
+				{processes.length && (
+					<div style={styles.processes}>
+						<ProcessEvents processes={processes} />
+					</div>
+				)}
 
 				<div>
 					<div style={styles.footer}>

web-app/src/containers/Tutorial/LevelPage/index.tsx

@@ -6,50 +6,50 @@ import * as selectors from '../../../services/selectors'
 import Level from './Level'
 
 interface PageProps {
-  context: T.MachineContext
-  send(action: T.Action): void
+	context: T.MachineContext
+	send(action: T.Action): void
 }
 
 const LevelSummaryPageContainer = (props: PageProps) => {
-  const { position, progress } = props.context
-
-  const version = selectors.currentVersion(props.context)
-  const levelData: G.Level = selectors.currentLevel(props.context)
-
-  const onContinue = (): void => {
-    props.send({
-      type: 'LEVEL_NEXT',
-      payload: {
-        LevelId: position.levelId,
-      },
-    })
-  }
-
-  const onLoadSolution = (): void => {
-    props.send({ type: 'STEP_SOLUTION_LOAD' })
-  }
-
-  const level: G.Level & {
-    status: T.ProgressStatus
-    index: number
-    steps: Array<G.Step & { status: T.ProgressStatus }>
-  } = {
-    ...levelData,
-    index: version.data.levels.findIndex((l: G.Level) => l.id === position.levelId),
-    status: progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE',
-    steps: levelData.steps.map((step: G.Step) => {
-      // label step status for step component
-      let status: T.ProgressStatus = 'INCOMPLETE'
-      if (progress.steps[step.id]) {
-        status = 'COMPLETE'
-      } else if (step.id === position.stepId) {
-        status = 'ACTIVE'
-      }
-      return { ...step, status }
-    }),
-  }
-
-  return <Level level={level} onContinue={onContinue} onLoadSolution={onLoadSolution} />
+	const { position, progress, processes } = props.context
+
+	const version = selectors.currentVersion(props.context)
+	const levelData: G.Level = selectors.currentLevel(props.context)
+
+	const onContinue = (): void => {
+		props.send({
+			type: 'LEVEL_NEXT',
+			payload: {
+				LevelId: position.levelId,
+			},
+		})
+	}
+
+	const onLoadSolution = (): void => {
+		props.send({ type: 'STEP_SOLUTION_LOAD' })
+	}
+
+	const level: G.Level & {
+		status: T.ProgressStatus
+		index: number
+		steps: Array<G.Step & { status: T.ProgressStatus }>
+	} = {
+		...levelData,
+		index: version.data.levels.findIndex((l: G.Level) => l.id === position.levelId),
+		status: progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE',
+		steps: levelData.steps.map((step: G.Step) => {
+			// label step status for step component
+			let status: T.ProgressStatus = 'INCOMPLETE'
+			if (progress.steps[step.id]) {
+				status = 'COMPLETE'
+			} else if (step.id === position.stepId) {
+				status = 'ACTIVE'
+			}
+			return { ...step, status }
+		}),
+	}
+
+	return <Level level={level} onContinue={onContinue} onLoadSolution={onLoadSolution} processes={processes} />
 }
 
 export default LevelSummaryPageContainer

web-app/src/services/state/machine.ts

@@ -20,6 +20,7 @@ export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.Mach
         steps: {},
         complete: false,
       },
+      processes: [],
     },
     states: {
       Start: {