Merge pull request #102 from ShMcK/feature/notify

Icons, Fonts & Notifications

Author: ShMcK

package-lock.json

@@ -20,7 +20,7 @@
     "build": "rm -rf build && npm run build:ext && npm run build:web",
     "build:ext": "tsc -p ./",
     "build:web": "cd web-app && npm run build",
-    "postbuild:web": "cp -R ./web-app/build/ ./build/",
+    "postbuild:web": "cp -R ./web-app/build/ ./build/ && node scripts/fixFontPaths.js",
     "postinstall": "node ./node_modules/vscode/bin/install",
     "lint": "eslint src/**/*ts",
     "machine": "node ./out/state/index.js",
@@ -41,7 +41,6 @@
     "@types/assert": "^1.4.5",
     "@types/chokidar": "^2.1.3",
     "@types/dotenv": "^8.2.0",
-    "@types/glob": "^7.1.1",
     "@types/jest": "^25.1.1",
     "@types/jsdom": "^12.2.4",
     "@types/node": "^13.5.3",

package.json

@@ -0,0 +1,26 @@
+/*
+ * css url font paths do not match up from the web-app as it is moved inside of build
+ * in order to load fonts and icons, these paths must be reconciled.
+ */
+const fs = require('fs') // eslint-disable-line
+
+// find the generated main css file
+const getMainCSSFile = () => {
+  const regex = /^main.[a-z0-9]+.chunk.css$/
+  const mainCss = fs.readdirSync('build/static/css').filter(filename => filename.match(regex))
+  if (!mainCss.length) {
+    throw new Error('No main.css file found in build/static/css')
+  }
+  return mainCss[0]
+}
+
+// remap the font paths from the borken /fonts/ => ../../fonts/
+const remapFontPaths = () => {
+  const mainCSSFile = getMainCSSFile()
+  const file = fs.readFileSync(`build/static/css/${mainCSSFile}`, 'utf8')
+  const fontUrlRegex = /url\(\/fonts\//g
+  const remappedFile = file.replace(fontUrlRegex, 'url(../../fonts/')
+  fs.writeFileSync(`build/static/css/${mainCSSFile}`, remappedFile)
+}
+
+remapFontPaths()

resources/public/favicon.ico

@@ -57,14 +57,11 @@ export const createCommands = ({ extensionPath, workspaceState, workspaceRoot }:
       testRunner = createTestRunner(config, {
         onSuccess: (payload: Payload) => {
           // send test pass message back to client
-          notify({ message: 'PASS' })
           webview.send({ type: 'TEST_PASS', payload })
-          // update local storage
         },
         onFail: (payload: Payload, message: string) => {
-          // send test fail message back to client
-          notify({ message: `FAIL ${message}` })
-          webview.send({ type: 'TEST_FAIL', payload })
+          // send test fail message back to client with failure message
+          webview.send({ type: 'TEST_FAIL', payload: { ...payload, message } })
         },
         onError: (payload: Payload) => {
           // send test error message back to client

resources/public/index.html

@@ -25,5 +25,5 @@
     "allowJs": true,
     "removeComments": true
   },
-  "exclude": ["node_modules", ".vscode-test", "build", "resources", "web-app", "*.js", "*.test.ts"]
+  "exclude": ["node_modules", ".vscode-test", "build", "resources", "web-app", "*.js", "*.test.ts", "scripts"]
 }

resources/public/manifest.json

@@ -42,13 +42,20 @@ export interface ErrorMessage {
   description?: string
 }
 
+export interface TestStatus {
+  type: 'success' | 'warning' | 'error' | 'loading'
+  title: string
+  content?: string
+}
+
 export interface MachineContext {
   env: Environment
   error: ErrorMessage | null
   tutorial: G.Tutorial | null
   position: Position
   progress: Progress
   processes: ProcessEvent[]
+  testStatus: TestStatus | null
 }
 
 export interface MachineEvent {
@@ -83,7 +90,6 @@ export interface MachineStateSchema {
             TestRunning: {}
             TestPass: {}
             TestFail: {}
-            TestError: {}
             StepNext: {}
             LevelComplete: {}
           }

scripts/fixFontPaths.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path')
-const { addBabelPreset, addBabelPlugin, addWebpackModuleRule } = require('customize-cra')
+const { addBabelPreset, addWebpackModuleRule, addBabelPlugin } = require('customize-cra')
 
 module.exports = function override(config) {
   addWebpackModuleRule({

src/editor/commands.ts

@@ -23,7 +23,7 @@ const Routes = () => {
         <Route path={['Start.LoadTutorialSummary', 'Start.LoadTutorialData', 'Start.SetupNewTutorial']}>
           <LoadingPage text="Loading Tutorial..." context={context} />
         </Route>
-        <Route path={'Start.Error'}>
+        <Route path="Start.Error">
           <LoadingPage text="Error" context={context} />
         </Route>
         <Route path="Start.SelectTutorial">
@@ -32,11 +32,11 @@ const Routes = () => {
         <Route path="Start.Summary">
           <OverviewPage send={send} context={context} />
         </Route>
-        <Route path="SetupNewTutorial">
+        <Route path="Start.SetupNewTutorial">
           <LoadingPage text="Configuring tutorial..." context={context} />
         </Route>
         {/* Tutorial */}
-        <Route path="Tutorial.LoadNext">
+        <Route path={['Tutorial.LoadNext', 'Tutorial.Level.Load']}>
           <LoadingPage text="Loading Level..." context={context} />
         </Route>
         <Route path="Tutorial.Level">

tsconfig.json

@@ -7,10 +7,19 @@ interface Props {
   disabled?: boolean
   type?: 'primary' | 'secondary' | 'normal'
   onClick?: () => void
+  size?: 'small' | 'medium' | 'large'
+  iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'
 }
 
 const Button = (props: Props) => (
-  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
+  <AlifdButton
+    onClick={props.onClick}
+    type={props.type}
+    disabled={props.disabled}
+    style={props.style}
+    size={props.size}
+    iconSize={props.iconSize}
+  >
     {props.children}
   </AlifdButton>
 )

typings/index.d.ts

@@ -1,19 +1,5 @@
 import * as React from 'react'
-import { css, jsx } from '@emotion/core'
-
-const styles = {
-  box: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  input: {
-    border: '1px solid black',
-  },
-  loading: {
-    backgroundColor: 'red',
-  },
-}
+import { Checkbox as AlifdCheckbox } from '@alifd/next'
 
 interface Props {
   status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE'
@@ -26,13 +12,7 @@ const Checkbox = (props: Props) => {
 
   const checked = props.status === 'COMPLETE'
 
-  return (
-    <div css={styles.box}>
-      <label>
-        <input css={styles.input} type="checkbox" checked={checked} onChange={onChange} />
-      </label>
-    </div>
-  )
+  return <AlifdCheckbox checked={checked} onChange={onChange} />
 }
 
 export default Checkbox

web-app/config-overrides.js

@@ -2,15 +2,35 @@ import { Message as AlifdMessage } from '@alifd/next'
 import * as React from 'react'
 
 interface Props {
-  type: 'error'
+  type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading'
+  shape?: 'inline' | 'addon' | 'toast'
+  size?: 'medium' | 'large'
   title: string
-  description?: string
+  content?: string
+  closed?: boolean
+  closeable?: boolean
+  onClose?: () => void
+  handleClose?: () => void
 }
 
 const Message = (props: Props) => {
+  const [visible, setVisible] = React.useState(true)
+  function onClose() {
+    if (props.onClose) {
+      props.onClose()
+    }
+    setVisible(false)
+  }
   return (
-    <AlifdMessage type={props.type} title={props.title}>
-      {props.description}
+    <AlifdMessage
+      type={props.type}
+      visible={props.closed ? !props.closed : visible}
+      title={props.title}
+      closeable={props.closeable}
+      onClose={onClose}
+      shape={props.shape}
+    >
+      {props.content}
     </AlifdMessage>
   )
 }

web-app/src/Routes.tsx

@@ -0,0 +1,43 @@
+import Message from '../Message'
+import * as React from 'react'
+import * as T from 'typings'
+import { css, jsx } from '@emotion/core'
+
+const durations = {
+  success: 1000,
+  warning: 4500,
+  error: 4500,
+  loading: 300000,
+}
+
+const useTimeout = ({ duration, key }: { duration: number; key: string }) => {
+  const [timeoutClose, setTimeoutClose] = React.useState(false)
+  React.useEffect(() => {
+    setTimeoutClose(false)
+    const timeout = setTimeout(() => {
+      setTimeoutClose(true)
+    }, duration)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [key])
+  return timeoutClose
+}
+
+const TestMessage = (props: T.TestStatus) => {
+  const duration = durations[props.type]
+  const timeoutClose = useTimeout({ duration, key: props.title })
+  return (
+    <Message
+      key={props.title}
+      type={props.type}
+      title={props.title}
+      closed={timeoutClose}
+      size="medium"
+      closeable={props.type !== 'loading'}
+      content={props.content}
+    />
+  )
+}
+
+export default TestMessage

web-app/src/components/Button/index.tsx

@@ -1,9 +1,11 @@
-import { Message as AlifdMessage } from '@alifd/next'
+import Message from '../Message'
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
+import TestMessage from './TestMessage'
 
 interface Props {
+  testStatus: T.TestStatus | null
   processes: T.ProcessEvent[]
 }
 
@@ -15,19 +17,20 @@ const styles = {
 }
 
 // display a list of active processes
-const ProcessEvents = ({ processes }: Props) => {
+const ProcessMessages = ({ processes, testStatus }: Props) => {
+  if (testStatus) {
+    return <TestMessage {...testStatus} />
+  }
   if (!processes.length) {
     return null
   }
   return (
     <div css={styles.container}>
       {processes.map(process => (
-        <AlifdMessage key={process.title} type="loading" size="medium" title={process.title}>
-          {process.description}
-        </AlifdMessage>
+        <Message key={process.title} type="loading" size="medium" title={process.title} content={process.description} />
       ))}
     </div>
   )
 }
 
-export default ProcessEvents
+export default ProcessMessages

web-app/src/components/Checkbox/index.tsx

@@ -25,7 +25,7 @@ const LoadingPage = ({ text, context }: Props) => {
   if (error) {
     return (
       <div css={styles.page}>
-        <Message type="error" title={error.title} description={error.description} />
+        <Message type="error" title={error.title} content={error.description} />
       </div>
     )
   }

web-app/src/components/Message/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as G from 'typings/graphql'
 import Button from '../../components/Button'
+import Icon from '../../components/Icon'
 import Markdown from '../../components/Markdown'
 
 const footerHeight = '3rem'
@@ -23,11 +24,13 @@ const styles = {
     fontSize: '1rem',
   },
   header: {
+    display: 'flex',
     height: '2rem',
     backgroundColor: '#EBEBEB',
     fontSize: '1rem',
     lineHeight: '1rem',
     padding: '10px 1rem',
+    alignItems: 'center',
   },
   levelList: {
     padding: '0rem 1rem',
@@ -61,7 +64,10 @@ const Summary = ({ title, description, levels, onNext, onBack }: Props) => (
   <div css={styles.page}>
     <div>
       <div css={styles.header}>
-        <button onClick={onBack}>Back</button>
+        <button onClick={onBack}>
+          <Icon type="arrow-left" size="xxs" />
+        </button>
+        <span>&nbsp;&nbsp;</span>
         <span>CodeRoad</span>
       </div>
       <div css={styles.summary}>

web-app/src/components/ProcessMessages/TestMessage.tsx

@@ -5,6 +5,7 @@ import * as G from 'typings/graphql'
 import ErrorView from '../../components/Error'
 import queryTutorial from '../../services/apollo/queries/tutorial'
 import OverviewPage from './OverviewPage'
+import LoadingPage from '../../containers/LoadingPage'
 
 interface PageProps {
   context: CR.MachineContext
@@ -35,7 +36,7 @@ const Overview = (props: PageProps) => {
   })
 
   if (loading) {
-    return <div>Loading Summary...</div>
+    return <LoadingPage text="Loading Summary..." context={props.context} />
   }
 
   if (error) {

web-app/src/components/ProcessEvents/index.tsx renamed to web-app/src/components/ProcessMessages/index.tsx

@@ -4,7 +4,7 @@ import * as G from 'typings/graphql'
 import { css, jsx } from '@emotion/core'
 import Button from '../../../components/Button'
 import Markdown from '../../../components/Markdown'
-import ProcessEvents from '../../../components/ProcessEvents'
+import ProcessMessages from '../../../components/ProcessMessages'
 import Step from './Step'
 
 const styles = {
@@ -68,11 +68,12 @@ const styles = {
 interface Props {
   level: G.Level & { status: T.ProgressStatus; index: number; steps: Array<G.Step & { status: T.ProgressStatus }> }
   processes: T.ProcessEvent[]
+  testStatus: T.TestStatus | null
   onContinue(): void
   onLoadSolution(): void
 }
 
-const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
+const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Props) => {
   if (!level.steps) {
     throw new Error('No Stage steps found')
   }
@@ -107,9 +108,9 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
         </div>
       </div>
 
-      {processes.length > 0 && (
+      {(testStatus || processes.length > 0) && (
         <div css={styles.processes}>
-          <ProcessEvents processes={processes} />
+          <ProcessMessages processes={processes} testStatus={testStatus} />
         </div>
       )}
 

web-app/src/containers/LoadingPage.tsx

@@ -10,7 +10,7 @@ interface PageProps {
 }
 
 const LevelSummaryPageContainer = (props: PageProps) => {
-  const { position, progress, processes, error } = props.context
+  const { position, progress, processes, testStatus, error } = props.context
 
   const version = selectors.currentVersion(props.context)
   const levelData: G.Level = selectors.currentLevel(props.context)
@@ -48,7 +48,15 @@ const LevelSummaryPageContainer = (props: PageProps) => {
     }),
   }
 
-  return <Level level={level} onContinue={onContinue} onLoadSolution={onLoadSolution} processes={processes} />
+  return (
+    <Level
+      level={level}
+      onContinue={onContinue}
+      onLoadSolution={onLoadSolution}
+      processes={processes}
+      testStatus={testStatus}
+    />
+  )
 }
 
 export default LevelSummaryPageContainer

web-app/src/containers/Overview/OverviewPage.tsx

@@ -0,0 +1,13 @@
+import editorActions from './editor'
+import commandActions from './command'
+import contextActions from './context'
+import testActions from './test'
+
+const createActions = (editorSend: any) => ({
+  ...editorActions(editorSend),
+  ...commandActions,
+  ...contextActions,
+  ...testActions,
+})
+
+export default createActions

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

@@ -0,0 +1,29 @@
+import * as CR from 'typings'
+import { assign, ActionFunctionMap } from 'xstate'
+
+const testActions: ActionFunctionMap<CR.MachineContext, CR.MachineEvent> = {
+  // @ts-ignore
+  testStart: assign({
+    testStatus: () => ({
+      type: 'loading',
+      title: 'Test running...',
+    }),
+  }),
+  // @ts-ignore
+  testPass: assign({
+    testStatus: () => ({
+      type: 'success',
+      title: 'Success!',
+    }),
+  }),
+  // @ts-ignore
+  testFail: assign({
+    testStatus: (context, event) => ({
+      type: 'warning',
+      title: 'Fail!',
+      content: event.payload.message,
+    }),
+  }),
+}
+
+export default testActions

web-app/src/containers/Tutorial/LevelPage/Level.tsx

@@ -1,17 +1,11 @@
 import * as CR from 'typings'
 import { assign, Machine, MachineOptions } from 'xstate'
-import editorActions from './actions/editor'
-import commandActions from './actions/command'
-import contextActions from './actions/context'
+import createActions from './actions'
 import * as services from './services'
 
 const createOptions = ({ editorSend }: any): MachineOptions<CR.MachineContext, CR.MachineEvent> => ({
   activities: {},
-  actions: {
-    ...editorActions(editorSend),
-    ...contextActions,
-    ...commandActions,
-  },
+  actions: createActions(editorSend),
   guards: {},
   services: {},
   delays: {},
@@ -33,6 +27,7 @@ export const createMachine = (options: any) => {
           complete: false,
         },
         processes: [],
+        testStatus: null,
       },
       states: {
         Start: {
@@ -130,7 +125,7 @@ export const createMachine = (options: any) => {
             ContinueTutorial: {
               on: {
                 TUTORIAL_START: {
-                  target: '#tutorial',
+                  target: '#tutorial-level',
                   actions: ['continueConfig'],
                 },
                 TUTORIAL_SELECT: 'SelectTutorial',
@@ -195,16 +190,16 @@ export const createMachine = (options: any) => {
                   on: {
                     TEST_PASS: {
                       target: 'TestPass',
-                      actions: ['updateStepProgress'],
+                      actions: ['updateStepProgress', 'testPass'],
+                    },
+                    TEST_FAIL: {
+                      target: 'TestFail',
+                      actions: ['testFail'],
+                    },
+                    TEST_ERROR: {
+                      target: 'TestFail',
+                      actions: ['testFail'],
                     },
-                    TEST_FAIL: 'TestFail',
-                    TEST_ERROR: 'TestError',
-                  },
-                },
-                TestError: {
-                  onEntry: ['testFail'],
-                  after: {
-                    0: 'Normal',
                   },
                 },
                 TestPass: {
@@ -214,7 +209,6 @@ export const createMachine = (options: any) => {
                   },
                 },
                 TestFail: {
-                  onEntry: ['testFail'],
                   after: {
                     0: 'Normal',
                   },

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

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: 'NextIcon';
+  src: url('~resources/fonts/next-icon.woff2') format('woff2'),
+    url('~resources/fonts/next-icon.svg#NextIcon') format('svg');
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('~resources/fonts/roboto-thin.woff2') format('woff2');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('~resources/fonts/roboto-light.woff2') format('woff2');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('~resources/fonts/roboto-regular.woff2') format('woff2');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('~resources/fonts/roboto-medium.woff2') format('woff2');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('~resources/fonts/roboto-bold.woff2') format('woff2');
+  font-weight: 700;
+}

web-app/src/resources/fonts/next-icon.svg

@@ -1,4 +1,6 @@
-@import '~@alifd/theme-4/dist/next.css';
+@import '~@alifd/next/dist/next.min.css';
+/* @import '~@alifd/theme-4/dist/next.css'; */
+@import './font.css';
 
 html {
   height: 100%;

web-app/src/resources/fonts/next-icon.woff2

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import ProcessEvents from '../src/components/ProcessEvents'
+import ProcessMessages from '../src/components/ProcessMessages'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 const styles = {
@@ -13,7 +13,8 @@ const styles = {
 storiesOf('Components', module)
   .addDecorator(SideBarDecorator)
   .add('Processes', () => (
-    <ProcessEvents
+    <ProcessMessages
+      testStatus={null}
       processes={[
         {
           title: 'npm install',
@@ -26,3 +27,31 @@ storiesOf('Components', module)
       ]}
     />
   ))
+  .add('Test Start', () => (
+    <ProcessMessages
+      testStatus={{
+        type: 'loading',
+        title: 'Test running...',
+      }}
+      processes={[]}
+    />
+  ))
+  .add('Test Pass', () => (
+    <ProcessMessages
+      testStatus={{
+        type: 'success',
+        title: 'Success!',
+      }}
+      processes={[]}
+    />
+  ))
+  .add('Test Fail', () => (
+    <ProcessMessages
+      testStatus={{
+        type: 'warning',
+        title: 'Fail!',
+        content: 'Test failed for some reason',
+      }}
+      processes={[]}
+    />
+  ))