jordanliu
diff --git a/‎web-app/src/Routes.tsx
Lines changed: 2 additions & 2 deletions b/‎web-app/src/Routes.tsx
Lines changed: 2 additions & 2 deletions
diff --git a/‎web-app/src/containers/New/NewPage.tsx
Lines changed: 0 additions & 43 deletions b/‎web-app/src/containers/New/NewPage.tsx
Lines changed: 0 additions & 43 deletions
diff --git a/‎web-app/src/containers/New/TutorialList/index.tsx
Lines changed: 0 additions & 34 deletions b/‎web-app/src/containers/New/TutorialList/index.tsx
Lines changed: 0 additions & 34 deletions
diff --git a/‎web-app/src/containers/SelectTutorial/SelectTutorial.tsx
Lines changed: 62 additions & 0 deletions b/‎web-app/src/containers/SelectTutorial/SelectTutorial.tsx
Lines changed: 62 additions & 0 deletions
diff --git a/‎web-app/src/containers/New/TutorialList/TutorialItem.tsx renamed to ‎web-app/src/containers/SelectTutorial/TutorialItem.tsx
Lines changed: 2 additions & 2 deletions b/‎web-app/src/containers/New/TutorialList/TutorialItem.tsx renamed to ‎web-app/src/containers/SelectTutorial/TutorialItem.tsx
Lines changed: 2 additions & 2 deletions
diff --git a/‎web-app/src/containers/New/index.tsx renamed to ‎web-app/src/containers/SelectTutorial/index.tsx
Lines changed: 4 additions & 4 deletions b/‎web-app/src/containers/New/index.tsx renamed to ‎web-app/src/containers/SelectTutorial/index.tsx
Lines changed: 4 additions & 4 deletions
diff --git a/‎web-app/stories/New.stories.tsx renamed to ‎web-app/stories/SelectTutorial.stories.tsx
Lines changed: 4 additions & 8 deletions b/‎web-app/stories/New.stories.tsx renamed to ‎web-app/stories/SelectTutorial.stories.tsx
Lines changed: 4 additions & 8 deletions
@@ -3,7 +3,7 @@ import useRouter from './components/Router'
 import Workspace from './components/Workspace'
 import LoadingPage from './containers/Loading'
 import StartPage from './containers/Start'
-import NewPage from './containers/New'
+import SelectTutorialPage from './containers/SelectTutorial'
 import OverviewPage from './containers/Overview'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
@@ -27,7 +27,7 @@ const Routes = () => {
           <LoadingPage text="Error" context={context} />
         </Route>
         <Route path="Setup.SelectTutorial">
-          <NewPage send={send} context={context} />
+          <SelectTutorialPage send={send} context={context} />
         </Route>
         <Route path="Setup.Summary">
           <OverviewPage send={send} context={context} />
 
@@ -0,0 +1,62 @@
+import * as React from 'react'
+import * as T from 'typings'
+import * as G from 'typings/graphql'
+import { css, jsx } from '@emotion/core'
+import TutorialItem from './TutorialItem'
+
+const styles = {
+  page: {
+    position: 'relative' as 'relative',
+    width: '100%',
+  },
+  header: {
+    height: '2rem',
+    backgroundColor: '#EBEBEB',
+    fontSize: '1rem',
+    lineHeight: '1rem',
+    padding: '10px 1rem',
+  },
+  banner: {
+    height: '3rem',
+    fontSize: '1rem',
+    padding: '1rem',
+  },
+}
+
+interface Props {
+  send(action: T.Action): void
+  tutorialList: G.Tutorial[]
+}
+
+const SelectTutorial = (props: Props) => {
+  const onSelect = (tutorial: G.Tutorial) => {
+    props.send({
+      type: 'SELECT_TUTORIAL',
+      payload: {
+        tutorial,
+      },
+    })
+  }
+  return (
+    <div css={styles.page}>
+      <div css={styles.header}>
+        <span>CodeRoad</span>
+      </div>
+      <div css={styles.banner}>
+        <span>Select a tutorial to launch in this workspace:</span>
+      </div>
+      <div>
+        {props.tutorialList.map((tutorial: G.Tutorial) => (
+          <TutorialItem
+            key={tutorial.id}
+            onSelect={() => onSelect(tutorial)}
+            title={tutorial.summary.title || ''}
+            description={tutorial.summary.description || ''}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default SelectTutorial
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import Card from '../../../components/Card'
-import Markdown from '../../../components/Markdown'
+import Card from '../../components/Card'
+import Markdown from '../../components/Markdown'
 
 const styles = {
   card: {
 
@@ -5,7 +5,7 @@ import * as G from 'typings/graphql'
 import ErrorView from '../../components/Error'
 import queryTutorials from '../../services/apollo/queries/tutorials'
 import LoadingPage from '../Loading'
-import NewPage from './NewPage'
+import SelectTutorial from './SelectTutorial'
 
 interface ContainerProps {
   send(action: T.Action): void
@@ -16,7 +16,7 @@ interface TutorialsData {
   tutorials: G.Tutorial[]
 }
 
-const NewPageContainer = (props: ContainerProps) => {
+const SelectPageContainer = (props: ContainerProps) => {
   const { data, loading, error } = useQuery<TutorialsData>(queryTutorials, {
     fetchPolicy: 'no-cache',
   })
@@ -33,7 +33,7 @@ const NewPageContainer = (props: ContainerProps) => {
     return null
   }
 
-  return <NewPage tutorialList={data.tutorials} send={props.send} />
+  return <SelectTutorial tutorialList={data.tutorials} send={props.send} />
 }
 
-export default NewPageContainer
+export default SelectPageContainer
@@ -1,9 +1,8 @@
 import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import NewPage from '../src/containers/New/NewPage'
-import TutorialList from '../src/containers/New/TutorialList'
-import TutorialItem from '../src/containers/New/TutorialList/TutorialItem'
+import SelectTutorial from '../src/containers/SelectTutorial/SelectTutorial'
+import TutorialItem from '../src/containers/SelectTutorial/TutorialItem'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 const tutorialList = [
@@ -25,11 +24,8 @@ const tutorialList = [
 
 storiesOf('Select Tutorial', module)
   .addDecorator(SideBarDecorator)
-  .add('New Page', () => {
-    return <NewPage tutorialList={tutorialList} />
-  })
-  .add('Tutorial List', () => {
-    return <TutorialList tutorialList={tutorialList} />
+  .add('Select Tutorial Page', () => {
+    return <SelectTutorial tutorialList={tutorialList} send={action('send')} />
   })
   .add('Tutorial Item', () => {
     const tutorial = tutorialList[0]