Jul 25, 2020 · Jul 25, 2020 · Jul 25, 2020 · Jul 25, 2020
diff --git a/web-app/src/components/Message/index.tsx b/web-app/src/components/Message/index.tsx
diff --git a/web-app/src/components/ProcessMessages/index.tsx b/web-app/src/components/ProcessMessages/index.tsx
 importMessagefrom'../Message'
 import{Message}from'@alifd/next'
 import*asReactfrom'react'
 import*asTfrom'typings'
 import{css,jsx}from'@emotion/core'
 return(
 <divcss={styles.container}>
 {processes.map((process)=>(
 <Messagekey={process.title}type="loading"size="medium"title={process.title}content={process.description}/>
 <Messagekey={process.title}type="notice"iconType="loading"size="medium"title={process.title}>
 {process.description}
 </Message>
 ))}
 </div>
 )
diff --git a/web-app/src/containers/Tutorial/formatLevels.ts b/web-app/src/containers/Tutorial/formatLevels.ts
 status='ACTIVE'
 }
 if(step.subtasks&&step.subtasks){
 subtasks=step.subtasks.map((subtask:string,subtaskIndex:number)=>{
 letsubtaskStatus: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
 }elseif(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)=>{
 letsubtaskStatus: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
 }elseif(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
          {/* 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>
diff --git a/web-app/stories/Tutorial.stories.tsx b/web-app/stories/Tutorial.stories.tsx
 }
 return<Tutorialstate="Completed"context={lastLevel}send={action('send')}/>
 })
 .add('1.1 Loading',()=>{
 constfirstLevel={
      ...context,
 processes:[{title:'Process',description:'A process here',status:'RUNNING'}],
 position:{levelId:'1',stepId:'1.2'},
 progress:{levels:{},steps:{},complete:false},
 }
 return<Tutorialstate="Level.Normal"context={firstLevel}send={action('send')}/>
 })
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		importMessagefrom'../Message'
		import{Message}from'@alifd/next'
		import*asReactfrom'react'
		import*asTfrom'typings'
		import{css,jsx}from'@emotion/core'
Expand All		@@ -22,7 +22,9 @@ const ProcessMessages = ({ processes }: Props) => {
		return(
		<divcss={styles.container}>
		{processes.map((process)=>(
		<Messagekey={process.title}type="loading"size="medium"title={process.title}content={process.description}/>
		<Messagekey={process.title}type="notice"iconType="loading"size="medium"title={process.title}>
		{process.description}
		</Message>
		))}
		</div>
		)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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)=>{
		letsubtaskStatus: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
		}elseif(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)=>{
		letsubtaskStatus: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
		}elseif(status==='ACTIVE'){
		subtaskStatus=!!(testStatus?.summary&&testStatus.summary[subtaskIndex]) ?'COMPLETE' :'ACTIVE'
		}
		return{
		name:subtask,
		status:subtaskStatus,
		}
		})
		}
		}
		return{ ...step, status, subtasks}
		}),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -180,3 +180,12 @@ storiesOf('Tutorial', module)
		}
		return<Tutorialstate="Completed"context={lastLevel}send={action('send')}/>
		})
		.add('1.1 Loading',()=>{
		constfirstLevel={
		...context,
		processes:[{title:'Process',description:'A process here',status:'RUNNING'}],
		position:{levelId:'1',stepId:'1.2'},
		progress:{levels:{},steps:{},complete:false},
		}
		return<Tutorialstate="Level.Normal"context={firstLevel}send={action('send')}/>
		})