request workspace on completion

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

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

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import { Icon } from '@alifd/next'
+import { Button, Icon } from '@alifd/next'
 
 const styles = {
   banner: {
     height: 'auto',
     width: '100%',
     backgroundColor: 'rgb(85, 132, 255)',
     color: 'white',
-    padding: '0.5rem',
+    padding: '0.5rem 1rem',
   },
   header: {
     position: 'relative' as 'relative',
@@ -26,32 +26,53 @@ const styles = {
   section: {
     padding: '0rem 0.5rem 1rem 0.5rem',
   },
+  options: {
+    display: 'flex' as 'flex',
+    flexDirection: 'row' as 'row',
+    flexWrap: 'wrap' as 'wrap',
+  },
+  optionsLeft: {
+    flex: 3,
+  },
+  optionsRight: {
+    flex: 1,
+    display: 'flex' as 'flex',
+    justifyContent: 'flex-end' as 'flex-end',
+    alignItems: 'flex-end' as 'flex-end',
+  },
 }
 
 interface Props {
   title: string
+  onRequestWorkspace(): void
 }
 
 const CompletedBanner = (props: Props) => {
   return (
     <div css={styles.banner}>
       <div css={styles.header}>
-        {/* <div css={styles.close} onClick={() => setOpen(false)}>
-          <Icon type="close" size="xs" />
-        </div> */}
         <h3>
           <Icon type="success-filling" size="large" />
           <span css={styles.headerMessage}>Congratulations on completing "{props.title}"!</span>
         </h3>
       </div>
       <div css={styles.section}>
         <h5>You've reached the end of the road...</h5>
-        <p>To go down another path:</p>
-        <ul>
-          <li>- open a new VSCode workspace</li>
-          <li>- relaunch the CodeRoad app</li>
-          <li>- select a new tutorial</li>
-        </ul>
+        <div css={styles.options}>
+          <div css={styles.optionsLeft}>
+            <p>To go down another path:</p>
+            <ul>
+              <li>- open a new VSCode workspace</li>
+              <li>- relaunch the CodeRoad app</li>
+              <li>- select a new tutorial</li>
+            </ul>
+          </div>
+          <div css={styles.optionsRight}>
+            <Button type="primary" ghost="dark" onClick={props.onRequestWorkspace}>
+              Open New Workspace
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   )

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

@@ -124,8 +124,6 @@ const TutorialPage = (props: PageProps) => {
 
   const disableOptions = processes.length > 0 || props.state === 'Level.TestRunning'
 
-  console.log(`STATE: ${props.state}`)
-
   return (
     <div>
       <div css={styles.page}>
@@ -150,7 +148,10 @@ const TutorialPage = (props: PageProps) => {
 
       {props.state === 'Completed' ? (
         <div css={styles.completeFooter}>
-          <CompletedBanner title={tutorial.summary.title || 'Unknown'} />
+          <CompletedBanner
+            title={tutorial.summary.title || 'Unknown'}
+            onRequestWorkspace={() => props.send({ type: 'REQUEST_WORKSPACE' })}
+          />
         </div>
       ) : (
         <div css={styles.footer}>

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

@@ -253,6 +253,9 @@ export const createMachine = (options: any) => {
                   target: '#select-new-tutorial',
                   actions: ['reset'],
                 },
+                REQUEST_WORKSPACE: {
+                  actions: 'requestWorkspaceSelect',
+                },
               },
             },
           },