Merge pull request #388 from coderoad/feature/on-reset

Feature/on reset

Author: ShMcK

src/channel/index.ts

@@ -8,14 +8,15 @@ import saveCommit from '../actions/saveCommit'
 import { setupActions, solutionActions } from '../actions/setupActions'
 import tutorialConfig from '../actions/tutorialConfig'
 import { COMMANDS } from '../editor/commands'
-import logger from '../services/logger'
 import Context from './context'
-import { version, compareVersions } from '../services/dependencies'
-import { openWorkspace, checkWorkspaceEmpty } from '../services/workspace'
 import { readFile } from 'fs'
 import { join } from 'path'
 import { promisify } from 'util'
+import logger from '../services/logger'
+import { version, compareVersions } from '../services/dependencies'
+import { openWorkspace, checkWorkspaceEmpty } from '../services/workspace'
 import { showOutput } from '../services/testRunner/output'
+import { exec } from '../services/node'
 import { WORKSPACE_ROOT, TUTORIAL_URL } from '../environment'
 
 const readFileAsync = promisify(readFile)
@@ -319,6 +320,17 @@ class Channel implements Channel {
       case 'EDITOR_RUN_TEST':
         vscode.commands.executeCommand(COMMANDS.RUN_TEST, action?.payload)
         return
+      case 'EDITOR_RUN_RESET_SCRIPT':
+        const tutorial: TT.Tutorial | null = this.context.tutorial.get()
+        // if tutorial.config.reset.command, run it
+        if (tutorial?.config?.reset?.command) {
+          await exec({ command: tutorial.config.reset.command })
+        }
+        return
+      case 'EDITOR_RUN_RESET_TO_LAST_PASS':
+        return
+      case 'EDITOR_RUN_RESET_TO_TIMELINE':
+        return
       default:
         logger(`No match for action type: ${actionType}`)
         return

src/services/git/lastPass.ts

@@ -0,0 +1,12 @@
+import * as TT from '../../../typings/tutorial'
+import * as T from '../../../typings'
+
+const getLastPassCommitHash = (position: T.Position, levels: TT.Level[]) => {
+  // get previous position
+  const { levelId, stepId } = position
+
+  // get solution hash if it exists
+  // else get setup hash
+}
+
+export default getLastPassCommitHash

typings/tutorial.d.ts

@@ -2,11 +2,16 @@ import { ProgressStatus } from './index'
 
 export type Maybe<T> = T | null
 
+export type ConfigReset = {
+  command?: string
+}
+
 export type TutorialConfig = {
-  appVersions: TutorialAppVersions
+  appVersions?: TutorialAppVersions
   testRunner: TestRunnerConfig
   repo: TutorialRepo
   dependencies?: TutorialDependency[]
+  reset?: ConfigReset
 }
 
 /** Logical groupings of tasks */

web-app/package.json

@@ -39,6 +39,7 @@
     "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.13.1",
     "reselect": "^4.0.0",
+    "use-media": "^1.4.0",
     "xstate": "^4.11.0"
   },
   "devDependencies": {

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

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Dialog } from '@alifd/next'
+import Button from '../../../components/Button'
+import Markdown from '../../../components/Markdown'
+
+interface Props {
+  disabled: boolean
+  onReset(): void
+}
+
+const Reset = (props: Props) => {
+  const [modalState, setModalState] = React.useState<'none' | 'confirm' | 'progress'>('none')
+
+  const onClose = () => {
+    setModalState('none')
+  }
+
+  const onOk = () => {
+    setModalState('progress')
+    props.onReset()
+    return setTimeout(() => {
+      setModalState('none')
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="secondary" size="medium" onClick={() => setModalState('confirm')} disabled={props.disabled}>
+        Reset
+      </Button>
+      <Dialog
+        title="Reset"
+        visible={modalState === 'confirm'}
+        onOk={onOk}
+        onCancel={onClose}
+        onClose={onClose}
+        footerActions={['ok', 'cancel']}
+      >
+        <Markdown>
+          {`Are you sure you want to reset your progress? 
+Resetting progress will remove the commits you have made and replace them with the tutorial commit timeline. Your code may look different after resetting.`}
+        </Markdown>
+      </Dialog>
+      <Dialog
+        title="Resetting..."
+        visible={modalState === 'progress'}
+        footer={false}
+        onClose={onClose}
+        closeable={false}
+      >
+        Reverting progress to an earlier commit...
+      </Dialog>
+    </>
+  )
+}
+
+export default Reset

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

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { Progress } from '@alifd/next'
+import useMedia from 'use-media'
+
+const styles = {
+  progress: {
+    display: 'flex' as 'flex',
+    justifyContent: 'flex-end' as 'flex-end',
+    alignItems: 'center' as 'center',
+    width: '10rem',
+    color: 'white',
+  },
+  text: { color: 'white' },
+}
+
+interface Props {
+  current: number
+  max: number
+}
+
+const StepProgress = (props: Props) => {
+  const Text = (
+    <span style={styles.text}>
+      {props.current} of {props.max}
+    </span>
+  )
+
+  const isWide = useMedia({ minWidth: '340px' })
+
+  if (isWide) {
+    return (
+      <Progress
+        state="success"
+        progressive
+        percent={(props.current / props.max) * 100}
+        shape="line"
+        color="rgb(85, 132, 255)"
+        css={styles.progress}
+        textRender={() => {
+          return Text
+        }}
+      />
+    )
+  }
+  return <div css={{ marginRight: '0.5rem', fontSize: '80%' }}>{Text}</div>
+}
+
+export default StepProgress

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

@@ -4,14 +4,15 @@ import * as selectors from '../../services/selectors'
 import SideMenu from './components/SideMenu'
 import Level from './components/Level'
 import Icon from '../../components/Icon'
-import SettingsPage from './containers/Settings'
 import ReviewPage from './containers/Review'
 import Button from '../../components/Button'
 import ProcessMessages from '../../components/ProcessMessages'
 import TestMessage from '../../components/TestMessage'
-import { Progress } from '@alifd/next'
+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'
 
 const styles = {
   header: {
@@ -47,13 +48,6 @@ const styles = {
     right: 0,
     color: 'white',
   },
-  taskProgress: {
-    display: 'flex' as 'flex',
-    justifyContent: 'flex-end' as 'flex-end',
-    alignItems: 'center' as 'center',
-    width: '10rem',
-    color: 'white',
-  },
   processes: {
     padding: '0 1rem',
     position: 'fixed' as 'fixed',
@@ -100,6 +94,10 @@ const TutorialPage = (props: PageProps) => {
     props.send({ type: 'RUN_TEST' })
   }
 
+  const onReset = (): void => {
+    // TODO
+  }
+
   const [menuVisible, setMenuVisible] = React.useState(false)
 
   const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
@@ -140,39 +138,27 @@ const TutorialPage = (props: PageProps) => {
           </div>
         )}
         {/* Left */}
-        {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
-          <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={processes.length > 0}>
-            Run
-          </Button>
-        ) : (
-          <div />
-        )}
+        <div css={{ flex: 1 }}>
+          {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
+            <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={processes.length > 0}>
+              Run
+            </Button>
+          ) : null}
+        </div>
 
         {/* Center */}
-        <div />
+        <div css={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+          {/* <Reset onReset={onReset} disabled={processes.length > 0} /> */}
+        </div>
 
         {/* Right */}
-        <div>
+        <div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
           {level.status === 'COMPLETE' || !level.steps.length ? (
             <Button style={{ marginRight: '1rem' }} type="primary" onClick={onContinue}>
               Continue
             </Button>
           ) : (
-            <Progress
-              state="success"
-              progressive
-              percent={(stepIndex / level.steps.length) * 100}
-              shape="line"
-              color="rgb(85, 132, 255)"
-              css={styles.taskProgress}
-              textRender={() => {
-                return (
-                  <span style={{ color: 'white' }}>
-                    {stepIndex} of {level.steps.length}
-                  </span>
-                )
-              }}
-            />
+            <StepProgress current={stepIndex} max={level.steps.length} />
           )}
         </div>
       </div>

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

@@ -117,4 +117,9 @@ export default (editorSend: any) => ({
       payload: { position: context.position },
     })
   },
+  runResetScript() {
+    editorSend({
+      type: 'EDITOR_RUN_RESET_SCRIPT',
+    })
+  },
 })

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

@@ -168,6 +168,9 @@ export const createMachine = (options: any) => {
                     RUN_TEST: {
                       actions: ['runTest'],
                     },
+                    RESET_SCRIPT: {
+                      actions: ['runResetScript'],
+                    },
                   },
                 },
                 TestRunning: {

web-app/stories/Review.stories.tsx

@@ -142,16 +142,5 @@ storiesOf('Review', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Example', () => {
-    const progress = {
-      levels: {
-        '1': true,
-      },
-      steps: {
-        '1.1': true,
-        '1.2': true,
-        '1.3': true,
-        '2.1': true,
-      },
-    }
-    return <Review levels={levels} progress={progress} />
+    return <Review levels={levels} />
   })

web-app/stories/Tests.stories.tsx

@@ -5,4 +5,4 @@ import SideBarDecorator from './utils/SideBarDecorator'
 
 storiesOf('Test Message', module)
   .addDecorator(SideBarDecorator)
-  .add('Fail', () => <TestMessage content={'Test failed for some reason'} />)
+  .add('Fail', () => <TestMessage message={'Test failed for some reason'} />)