open continue on success

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/Routes.tsx

@@ -40,7 +40,7 @@ const Routes = () => {
         <LoadingPage text="Loading Level..." processes={context.processes} />
       </Route>
       <Route paths={{ Tutorial: { Level: true } }}>
-        <TutorialPage send={send} context={context} />
+        <TutorialPage send={send} context={context} state={route.replace('Tutorial.Level.', '')} />
       </Route>
       {/* Completed */}
       <Route paths={{ Tutorial: { Completed: true } }}>

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

@@ -20,11 +20,12 @@ interface Props {
   title: string
   current: number // level index
   max: number // level count
+  defaultOpen: boolean
   onContinue(): void
 }
 
 const Continue = (props: Props) => {
-  const [modalState, setModalState] = React.useState<'closed' | 'open'>('closed')
+  const [modalState, setModalState] = React.useState<'closed' | 'open'>(props.defaultOpen ? 'open' : 'closed')
 
   const onClose = () => {
     setModalState('closed')

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

@@ -11,7 +11,6 @@ import TestMessage from '../../components/TestMessage'
 import StepProgress from './components/StepProgress'
 import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
 import formatLevels from './formatLevels'
-// import SettingsPage from './containers/Settings'
 import Reset from './components/Reset'
 import Continue from './components/Continue'
 
@@ -69,6 +68,7 @@ const styles = {
 interface PageProps {
   context: T.MachineContext
   send(action: T.Action): void
+  state: string // 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'LevelComplete'
 }
 
 /**
@@ -111,6 +111,8 @@ const TutorialPage = (props: PageProps) => {
     testStatus,
   })
 
+  const disableOptions = processes.length > 0 && props.state === 'TestRunning'
+
   return (
     <div>
       <div>
@@ -141,26 +143,37 @@ const TutorialPage = (props: PageProps) => {
         {/* Left */}
         <div css={{ flex: 1 }}>
           {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
-            <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={processes.length > 0}>
+            <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={disableOptions}>
               Run
             </Button>
           ) : null}
         </div>
 
         {/* Center */}
         <div css={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
-          <Reset onReset={onReset} disabled={processes.length > 0} />
+          <Reset onReset={onReset} disabled={disableOptions} />
         </div>
 
         {/* Right */}
         <div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
-          {level.status === 'COMPLETE' || !level.steps.length ? (
+          {!level.steps.length ? (
+            <div css={{ marginRight: '0.5rem' }}>
+              <Continue
+                onContinue={onContinue}
+                current={levelIndex + 1}
+                max={levels.length}
+                title={tutorial.summary.title}
+                defaultOpen={false}
+              />
+            </div>
+          ) : props.state === 'LevelComplete' ? (
             <div css={{ marginRight: '0.5rem' }}>
               <Continue
                 onContinue={onContinue}
                 current={levelIndex + 1}
                 max={levels.length}
                 title={tutorial.summary.title}
+                defaultOpen={true}
               />
             </div>
           ) : level.steps.length > 1 ? (