setup load solution from client to server

typings/graphql.d.ts

@@ -136,7 +136,7 @@ export type Stage = {
 	step?: Maybe<Step>,
 	steps: Array<Step>,
 	setup?: Maybe<StepActions>,
-	status: string
+	status: 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
 };
 
 
@@ -151,8 +151,8 @@ export type Step = {
 	text: Scalars['String'],
 	setup: StepActions,
 	solution: StepActions,
-	status: string
-};
+	status: 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
+}
 
 export type StepActions = {
 	__typename?: 'StepActions',

web-app/src/containers/Tutorial/StagePage/Stage/StepDescription/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import Markdown from '../../../../../components/Markdown'
+import { Button } from '@alifd/next'
 
 const styles = {
   // active: {
@@ -12,16 +13,18 @@ const styles = {
 
 interface Props {
   text?: string | null
-  hide: boolean
+  mode: 'INCOMPLETE' | 'ACTIVE' | 'COMPLETE'
+  onLoadSolution(): void
 }
 
-const StepDescription = ({ text, hide }: Props) => {
-  if (hide) {
+const StepDescription = ({ text, mode, onLoadSolution }: Props) => {
+  if (mode === 'INCOMPLETE') {
     return null
   }
   return (
     <div style={styles.card}>
       <Markdown>{text || ''}</Markdown>
+      {mode === 'ACTIVE' && <Button onClick={onLoadSolution}>Load Solution</Button>}
     </div>
   )
 }

web-app/src/containers/Tutorial/StagePage/Stage/index.tsx

@@ -24,11 +24,12 @@ const styles = {
 
 interface Props {
   stage: T.Stage
-	onContinue(): void
-	onSave(): void
+  onContinue(): void
+  onSave(): void
+  onLoadSolution(): void
 }
 
-const Stage = ({ stage, onContinue, onSave }: Props) => {
+const Stage = ({ stage, onContinue, onSave, onLoadSolution }: Props) => {
   if (!stage.steps) {
     throw new Error('No Stage steps found')
   }
@@ -50,12 +51,11 @@ const Stage = ({ stage, onContinue, onSave }: Props) => {
             if (!step) {
               return null
             }
-            const hide = step.status === 'INCOMPLETE'
             return (
               <Step.Item
                 key={step.id}
                 title={step.title || `Step ${index + 1}`}
-                content={<StepDescription text={step.text} hide={hide} />}
+                content={<StepDescription text={step.text} mode={step.status} onLoadSolution={onLoadSolution} />}
               />
             )
           })}
@@ -67,10 +67,10 @@ const Stage = ({ stage, onContinue, onSave }: Props) => {
           <Button onClick={onContinue}>Continue</Button>
         </div>
       ) : (
-				<div style={styles.options}>
+        <div style={styles.options}>
           <Button onClick={onSave}>Save</Button>
         </div>
-			)}
+      )}
     </div>
   )
 }

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

@@ -33,6 +33,10 @@ const StageSummaryPageContainer = (props: PageProps) => {
     })
   }
 
+  const onLoadSolution = (): void => {
+    props.send({ type: 'STEP_SOLUTION_LOAD' })
+  }
+
   stage.steps.forEach((step: G.Step) => {
     if (progress.steps[step.id]) {
       step.status = 'COMPLETE'
@@ -44,7 +48,7 @@ const StageSummaryPageContainer = (props: PageProps) => {
   })
   stage.status = progress.stages[position.stageId] ? 'COMPLETE' : 'ACTIVE'
 
-  return <Stage stage={stage} onContinue={onContinue} onSave={onSave} />
+  return <Stage stage={stage} onContinue={onContinue} onSave={onSave} onLoadSolution={onLoadSolution} />
 }
 
 export default StageSummaryPageContainer

web-app/src/services/state/actions/editor.ts

@@ -97,6 +97,17 @@ export default {
 			})
 		}
 	},
+	editorLoadSolution(context: CR.MachineContext): void {
+		const step: G.Step = selectors.currentStep(context)
+		// tell editor to load solution commit
+		channel.editorSend({
+			type: 'SOLUTION_ACTIONS',
+			payload: {
+				stepId: step.id,
+				...step.solution,
+			}
+		})
+	},
 	clearStorage(): void {
 		channel.editorSend({type: 'TUTORIAL_CLEAR'})
 	}

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

@@ -113,7 +113,7 @@ export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.Mach
 								on: {
 									TEST_RUN: 'TestRunning',
 									STEP_SOLUTION_LOAD: {
-										actions: ['callSolution'],
+										actions: ['editorLoadSolution'],
 									},
 								},
 							},