Merge pull request #406 from coderoad/feature/style-improvements

Feature/style improvements

Author: ShMcK

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

@@ -1,4 +1,4 @@
-import Message from '../Message'
+import { Message } from '@alifd/next'
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
@@ -22,7 +22,9 @@ const ProcessMessages = ({ processes }: Props) => {
   return (
     <div css={styles.container}>
       {processes.map((process) => (
-        <Message key={process.title} type="loading" size="medium" title={process.title} content={process.description} />
+        <Message key={process.title} type="notice" iconType="loading" size="medium" title={process.title}>
+          {process.description}
+        </Message>
       ))}
     </div>
   )

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

@@ -45,20 +45,33 @@ const formatLevels = ({ progress, position, levels, testStatus }: Input): Output
         status = 'ACTIVE'
       }
       if (step.subtasks && step.subtasks) {
-        subtasks = step.subtasks.map((subtask: string, subtaskIndex: number) => {
-          let subtaskStatus: T.ProgressStatus = 'INCOMPLETE'
-          // task is complete, subtasks must be complete
-          if (status === 'COMPLETE') {
-            subtaskStatus = 'COMPLETE'
-            // task is active, check which are complete from test results
-          } else if (status === 'ACTIVE') {
-            subtaskStatus = !!(testStatus?.summary && testStatus.summary[subtaskIndex]) ? 'COMPLETE' : 'ACTIVE'
-          }
-          return {
-            name: subtask,
-            status: subtaskStatus,
-          }
-        })
+        if (Object.keys(testStatus?.summary || {}).length !== step.subtasks.length) {
+          // test result count and subtask count don't match
+          // something is wrong with the tutorial
+          // NOTE: hacky temp solution as should be caught by tutorial creators / build tools
+          subtasks = [
+            {
+              name:
+                'ERROR: subtasks and test results have a different number of results. This is likely an error with the tutorial.',
+              status: 'ACTIVE' as 'ACTIVE',
+            },
+          ]
+        } else {
+          subtasks = step.subtasks.map((subtask: string, subtaskIndex: number) => {
+            let subtaskStatus: T.ProgressStatus = 'INCOMPLETE'
+            // task is complete, subtasks must be complete
+            if (status === 'COMPLETE') {
+              subtaskStatus = 'COMPLETE'
+              // task is active, check which are complete from test results
+            } else if (status === 'ACTIVE') {
+              subtaskStatus = !!(testStatus?.summary && testStatus.summary[subtaskIndex]) ? 'COMPLETE' : 'ACTIVE'
+            }
+            return {
+              name: subtask,
+              status: subtaskStatus,
+            }
+          })
+        }
       }
       return { ...step, status, subtasks }
     }),

web-app/src/containers/Tutorial/formatLevels.ts

@@ -179,8 +179,13 @@ const TutorialPage = (props: PageProps) => {
           {/* Left */}
           <div css={{ flex: 1 }}>
             {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
-              <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={disableOptions}>
-                Run
+              <Button
+                style={{ marginLeft: '1rem', width: '3rem' }}
+                type="primary"
+                onClick={onRunTest}
+                disabled={disableOptions}
+              >
+                {props.state === 'Level.TestRunning' ? <Icon type="loading" size="small" /> : 'Run'}
               </Button>
             ) : null}
           </div>

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

@@ -180,3 +180,12 @@ storiesOf('Tutorial', module)
     }
     return <Tutorial state="Completed" context={lastLevel} send={action('send')} />
   })
+  .add('1.1 Loading', () => {
+    const firstLevel = {
+      ...context,
+      processes: [{ title: 'Process', description: 'A process here', status: 'RUNNING' }],
+      position: { levelId: '1', stepId: '1.2' },
+      progress: { levels: {}, steps: {}, complete: false },
+    }
+    return <Tutorial state="Level.Normal" context={firstLevel} send={action('send')} />
+  })