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' ? ( - ) : null}
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 + })