load machineId, sessionId on client from editor

Author: ShMcK

src/channel/index.ts

@@ -41,6 +41,17 @@ class Channel implements Channel {
 
 		// console.log('EDITOR RECEIVED:', actionType)
 		switch (actionType) {
+			case 'ENV_GET':
+				this.send({
+					type: 'ENV_LOAD',
+					payload: {
+						env: {
+							machineId: vscode.env.machineId,
+							sessionId: vscode.env.sessionId,
+						}
+					}
+				})
+				return
 			// continue from tutorial from local storage
 			case 'EDITOR_TUTORIAL_LOAD':
 				const tutorial: G.Tutorial | null = this.context.tutorial.get()
@@ -113,8 +124,10 @@ class Channel implements Channel {
 	}
 	// send to webview
 	public send = async (action: CR.Action) => {
-
-		switch (action.type) {
+		console.log(`EDITOR SEND ${action.type}`)
+		// action may be an object.type or plain string
+		const actionType: string = typeof action === 'string' ? action : action.type
+		switch (actionType) {
 			case 'TEST_PASS':
 				// update local storage stepProgress
 				const progress = this.context.progress.setStepComplete(action.payload.stepId)

typings/index.d.ts

@@ -119,7 +119,13 @@ export interface Action {
 	meta?: any
 }
 
+export interface Environment {
+	machineId: string
+	sessionId: string
+}
+
 export interface MachineContext {
+	env: Environment,
 	tutorial: G.Tutorial | null,
 	position: Position,
 	progress: Progress,
@@ -136,10 +142,11 @@ export interface MachineStateSchema {
 		Start: {
 			states: {
 				Startup: {}
+				NewOrContinue: {}
 				SelectTutorial: {}
 				ContinueTutorial: {}
-			}
-		}
+			},
+		},
 		Tutorial: {
 			states: {
 				Initialize: {}

web-app/src/Routes.tsx

@@ -19,7 +19,7 @@ const Routes = () => {
   return (
     <Workspace>
       <Router>
-        <Route path="Start.Startup">
+        <Route path={['Start.Startup', 'NewOrContinue']}>
           <LoadingPage text="Launching..." />
         </Route>
         <Route path="Start.SelectTutorial">

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

@@ -3,20 +3,23 @@ import * as G from 'typings/graphql'
 import * as CR from 'typings'
 
 interface Props {
-	state: string
-	tutorial: G.Tutorial
-	position: CR.Position
-	progress: CR.Progress
-	children: React.ReactElement
+  state: string
+  tutorial: G.Tutorial
+  env: CR.Environment
+  position: CR.Position
+  progress: CR.Progress
+  children: React.ReactElement
 }
 
-const Debugger = ({ state, children, position, progress, tutorial  }: Props) => (
+const Debugger = ({ state, children, env, position, progress, tutorial }: Props) => (
   <div style={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
     <h4>state: {state}</h4>
-		<p>tutorial: {tutorial ? tutorial.id : 'none'}</p>
+    <p>MachineId: {env.machineId}</p>
+    <p>SessionId: {env.sessionId}</p>
+    <p>tutorial: {tutorial ? tutorial.id : 'none'}</p>
     <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
-		<p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
-		{children}
+    <p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
+    {children}
   </div>
 )
 

web-app/src/components/Router/Route.tsx

@@ -1,6 +1,6 @@
 interface Props {
   children: any
-	path: string
+  path: string | string[]
 }
 
 const Route = ({ children }: Props) => children

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

@@ -32,7 +32,16 @@ const Router = ({ children }: Props): React.ReactElement<CloneElementProps> | nu
 
   const childArray = React.Children.toArray(children)
   for (const child of childArray) {
-    if (state.matches(child.props.path)) {
+    const { path } = child.props
+    let pathMatch
+    if (typeof path === 'string') {
+      pathMatch = state.matches(path)
+    } else if (Array.isArray(path)) {
+      pathMatch = path.some(p => state.matches(p))
+    } else {
+      throw new Error(`Invalid route path ${JSON.stringify(path)}`)
+    }
+    if (pathMatch) {
       const element = React.cloneElement<CloneElementProps>(child.props.children, { send, context: state.context })
       return debuggerWrapper(element, state)
     }

web-app/src/services/channel/index.ts

@@ -15,7 +15,9 @@ class Channel {
 			require('./mock')
 		}
 
+		// Loads VSCode webview connection with editor
 		const editor = acquireVsCodeApi()
+
 		this.editorSend = editor.postMessage
 	}
 	public machineSend = (action: Action | string) => { /* */}
@@ -25,13 +27,19 @@ class Channel {
 		this.machineSend = send
 	}
 	public receive = (event: ReceivedEvent) => {
+		// NOTE: must call event.data, cannot destructure. VSCode acts odd
 		const action = event.data
 
 		// @ts-ignore // ignore browser events from plugins
 		if (action.source) {return }
+
 		console.log(`CLIENT RECEIVE: ${action.type}`, action)
+
 		// messages from core
 		switch (action.type) {
+			case 'ENV_LOAD':
+				this.machineSend(action)
+				return
 			case 'TUTORIAL_LOADED':
 				// send action to state machine
 				this.machineSend('TUTORIAL_LOADED')

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

@@ -4,6 +4,11 @@ import * as CR from 'typings'
 import * as selectors from '../../selectors'
 
 export default {
+	setEnv: assign({
+		env: (context: CR.MachineContext, event: CR.MachineEvent) => {
+			return event.payload.env
+		}
+	}),
 	continueTutorial: assign({
 		tutorial: (context: CR.MachineContext, event: CR.MachineEvent) => {
 			return event.payload.tutorial

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

@@ -6,6 +6,11 @@ import client from '../../apollo'
 import tutorialQuery from '../../apollo/queries/tutorial'
 
 export default {
+	loadEnv() {
+		channel.editorSend({
+			type: 'ENV_GET'
+		})
+	},
 	loadStoredTutorial() {
 		// send message to editor to see if there is existing tutorial progress
 		// in local storage on the editor

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

@@ -12,6 +12,7 @@ export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.Mach
 		id: 'root',
 		initial: 'Start',
 		context: {
+			env: {machineId: '', sessionId: ''},
 			tutorial: null,
 			position: {levelId: '', stageId: '', stepId: ''},
 			progress: {
@@ -24,9 +25,18 @@ export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.Mach
 		states: {
 			Start: {
 				initial: 'Startup',
-				onEntry: ['loadStoredTutorial'],
 				states: {
 					Startup: {
+						onEntry: ['loadEnv'],
+						on: {
+							ENV_LOAD: {
+								target: 'NewOrContinue',
+								actions: ['setEnv'],
+							}
+						}
+					},
+					NewOrContinue: {
+						onEntry: ['loadStoredTutorial'],
 						on: {
 							CONTINUE_TUTORIAL: {
 								target: 'ContinueTutorial',