diff --git a/web-app/src/components/Message/index.tsx b/web-app/src/components/Message/index.tsx
deleted file mode 100644
index 7d2f9a11..00000000
--- a/web-app/src/components/Message/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Message as AlifdMessage } from '@alifd/next'
-import * as React from 'react'
-
-interface Props {
- type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading' | 'hidden'
- shape?: 'inline' | 'addon' | 'toast'
- size?: 'medium' | 'large'
- title: string
- content?: string
- closed?: boolean
- closeable?: boolean
- onClose?: () => void
- handleClose?: () => void
- children?: React.ReactElement | null
-}
-
-const Message = (props: Props) => {
- const [visible, setVisible] = React.useState(true)
- if (props.type === 'hidden') {
- return null
- }
- function onClose() {
- if (props.onClose) {
- props.onClose()
- }
- setVisible(false)
- }
- return (
-
-
-
{props.content}
-
{props.children}
-
-
- )
-}
-
-export default Message
diff --git a/web-app/src/components/ProcessMessages/index.tsx b/web-app/src/components/ProcessMessages/index.tsx
index fe90888d..c1460319 100644
--- a/web-app/src/components/ProcessMessages/index.tsx
+++ b/web-app/src/components/ProcessMessages/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 (
{processes.map((process) => (
-
+
+ {process.description}
+
))}
)
diff --git a/web-app/src/containers/Tutorial/formatLevels.ts b/web-app/src/containers/Tutorial/formatLevels.ts
index 54fb443a..9002eb96 100644
--- a/web-app/src/containers/Tutorial/formatLevels.ts
+++ b/web-app/src/containers/Tutorial/formatLevels.ts
@@ -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 }
}),
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
index 2c5ddace..54df9770 100644
--- a/web-app/src/containers/Tutorial/index.tsx
+++ b/web-app/src/containers/Tutorial/index.tsx
@@ -179,8 +179,13 @@ const TutorialPage = (props: PageProps) => {
{/* Left */}
{DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
-
diff --git a/web-app/stories/Tutorial.stories.tsx b/web-app/stories/Tutorial.stories.tsx
index cc226800..6a70e54b 100644
--- a/web-app/stories/Tutorial.stories.tsx
+++ b/web-app/stories/Tutorial.stories.tsx
@@ -180,3 +180,12 @@ storiesOf('Tutorial', module)
}
return
})
+ .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
+ })