Feature/workspace empty

src/channel/index.ts

@@ -8,6 +8,7 @@ import tutorialConfig from '../actions/tutorialConfig'
 import { COMMANDS } from '../editor/commands'
 import logger from '../services/logger'
 import Context from './context'
+import { openWorkspace, checkWorkspaceEmpty } from '../services/workspace'
 
 interface Channel {
   receive(action: T.Action): Promise<void>
@@ -108,6 +109,18 @@ class Channel implements Channel {
         // update the current stepId on startup
         vscode.commands.executeCommand(COMMANDS.SET_CURRENT_STEP, action.payload)
         return
+      case 'EDITOR_CHECK_WORKSPACE':
+        const isEmptyWorkspace = await checkWorkspaceEmpty(this.workspaceRoot.uri.path)
+        if (isEmptyWorkspace) {
+          this.send({ type: 'IS_EMPTY_WORKSPACE' })
+        } else {
+          this.send({ type: 'NOT_EMPTY_WORKSPACE' })
+        }
+        return
+      case 'EDITOR_REQUEST_WORKSPACE':
+        console.log('request workspace')
+        openWorkspace()
+        return
       // load step actions (git commits, commands, open files)
       case 'SETUP_ACTIONS':
         await vscode.commands.executeCommand(COMMANDS.SET_CURRENT_STEP, action.payload)

src/services/testRunner/index.ts

@@ -1,5 +1,5 @@
-import node from '../../services/node'
-import logger from '../../services/logger'
+import node from '../node'
+import logger from '../logger'
 import parser from './parser'
 import { debounce, throttle } from './throttle'
 import onError from '../sentry/onError'

src/services/workspace/index.ts

@@ -0,0 +1,17 @@
+import * as vscode from 'vscode'
+import * as fs from 'fs'
+
+export const openWorkspace = () => {
+  const openInNewWindow = false
+  vscode.commands.executeCommand('vscode.openFolder', undefined, openInNewWindow)
+}
+
+export const checkWorkspaceEmpty = async (dirname: string) => {
+  let files
+  try {
+    files = await fs.promises.readdir(dirname)
+  } catch (error) {
+    throw new Error('Failed to check workspace')
+  }
+  return files.length === 0
+}

typings/index.d.ts

@@ -73,6 +73,8 @@ export interface MachineStateSchema {
         Error: {}
         LoadStoredTutorial: {}
         Start: {}
+        CheckEmptyWorkspace: {}
+        NonEmptyWorkspace: {}
         SelectTutorial: {}
         LoadTutorialSummary: {}
         Summary: {}

web-app/src/Routes.tsx

@@ -7,14 +7,15 @@ import SelectTutorialPage from './containers/SelectTutorial'
 import OverviewPage from './containers/Overview'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
+import SelectEmptyWorkspace from './containers/Check/SelectWorkspace'
 
 const Routes = () => {
   const { context, send, Router, Route } = useRouter()
   return (
     <Workspace>
       <Router>
         {/* Setup */}
-        <Route path={['Setup.Startup', 'Setup.Authenticate', 'Setup.LoadStoredTutorial']}>
+        <Route path={['Setup.Startup', 'Setup.Authenticate', 'Setup.LoadStoredTutorial', 'Setup.CheckEmptyWorkspace']}>
           <LoadingPage text="Launching..." context={context} />
         </Route>
         <Route path="Setup.Start">
@@ -23,6 +24,9 @@ const Routes = () => {
         <Route path={['Setup.LoadTutorialSummary', 'Setup.LoadTutorialData', 'Setup.SetupNewTutorial']}>
           <LoadingPage text="Loading Tutorial..." context={context} />
         </Route>
+        <Route path={['Setup.NonEmptyWorkspace', 'Setup.RequestEmptyWorkspace']}>
+          <SelectEmptyWorkspace send={send} />
+        </Route>
         <Route path="Setup.Error">
           <LoadingPage text="Error" context={context} />
         </Route>

web-app/src/containers/Check/SelectWorkspace.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import * as T from 'typings'
+import { css, jsx } from '@emotion/core'
+import Button from '../../components/Button'
+
+const styles = {
+  container: {
+    padding: '1rem',
+  },
+}
+
+type Props = {
+  send: (action: T.Action) => void
+}
+
+const SelectWorkspace = (props: Props) => {
+  const onOpenWorkspace = () => props.send({ type: 'REQUEST_WORKSPACE' })
+  return (
+    <div css={styles.container}>
+      <h3>Select An Empty VSCode Workspace</h3>
+      <p>Start a project in an empty folder.</p>
+      <p>Once selected, the extension will close and need to be re-started.</p>
+      <br />
+      <Button type="secondary" onClick={onOpenWorkspace}>
+        Open a Workspace
+      </Button>
+    </div>
+  )
+}
+
+export default SelectWorkspace

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

@@ -70,4 +70,14 @@ export default (editorSend: any) => ({
   clearStorage(): void {
     editorSend({ type: 'TUTORIAL_CLEAR' })
   },
+  checkEmptyWorkspace() {
+    editorSend({
+      type: 'EDITOR_CHECK_WORKSPACE',
+    })
+  },
+  requestWorkspaceSelect() {
+    editorSend({
+      type: 'EDITOR_REQUEST_WORKSPACE',
+    })
+  },
 })

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

@@ -68,13 +68,29 @@ export const createMachine = (options: any) => {
             },
             Start: {
               on: {
-                NEW_TUTORIAL: 'SelectTutorial',
+                NEW_TUTORIAL: 'CheckEmptyWorkspace',
                 CONTINUE_TUTORIAL: {
                   target: '#tutorial-level',
                   actions: ['continueConfig'],
                 },
               },
             },
+            CheckEmptyWorkspace: {
+              onEntry: ['checkEmptyWorkspace'],
+              on: {
+                IS_EMPTY_WORKSPACE: 'SelectTutorial',
+                NOT_EMPTY_WORKSPACE: 'NonEmptyWorkspace',
+              },
+            },
+            NonEmptyWorkspace: {
+              on: {
+                REQUEST_WORKSPACE: {
+                  target: 'NonEmptyWorkspace',
+                  actions: 'requestWorkspaceSelect',
+                },
+                WORKSPACE_LOADED: 'CheckEmptyWorkspace',
+              },
+            },
             SelectTutorial: {
               onEntry: ['clearStorage'],
               id: 'select-new-tutorial',

web-app/stories/Check.stories.tsx

@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import { css, jsx } from '@emotion/core'
+import SelectWorkspace from '../src/containers/Check/SelectWorkspace'
+import SideBarDecorator from './utils/SideBarDecorator'
+
+const styles = {
+  container: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+}
+
+storiesOf('Check', module)
+  .addDecorator(SideBarDecorator)
+  .add('Select Workspace', () => (
+    <div css={styles.container}>
+      <SelectWorkspace send={action('send')} />
+    </div>
+  ))