display all review level/steps

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/containers/Tutorial/components/Step.tsx

@@ -8,6 +8,7 @@ interface Props {
   content: string
   status: T.ProgressStatus
   subtasks: { name: string; pass: boolean }[] | null
+  displayAll: boolean
 }
 
 const styles = {
@@ -40,7 +41,7 @@ const styles = {
 }
 
 const Step = (props: Props) => {
-  const showStep = props.status !== 'INCOMPLETE'
+  const showStep = props.displayAll || props.status !== 'INCOMPLETE'
   if (!showStep) {
     return null
   }

web-app/src/containers/Tutorial/components/Steps.tsx

@@ -6,6 +6,7 @@ import Hints from './Hints'
 
 interface Props {
   steps: TT.Step[]
+  displayAll: boolean
 }
 
 const styles = {
@@ -27,7 +28,13 @@ const Steps = (props: Props) => {
         }
         return (
           <div key={step.id}>
-            <Step key={step.id} status={step.status || 'INCOMPLETE'} content={step.content} subtasks={step.subtasks} />
+            <Step
+              key={step.id}
+              status={step.status || 'INCOMPLETE'}
+              displayAll={props.displayAll}
+              content={step.content}
+              subtasks={step.subtasks}
+            />
             <Hints hints={step.hints || []} />
           </div>
         )

web-app/src/containers/Tutorial/components/TestStatusIcon.tsx

@@ -19,12 +19,16 @@ const styles = {
     icon: 'warning',
     color: '#ff9300',
   },
+  incomplete: {
+    icon: 'lock',
+    color: 'lightgrey',
+  },
 }
 
 const TestStatusIcon = (props: Props) => {
   // @ts-ignore
   const style: { icon: string; color: string } = styles[props.status.toLowerCase()]
-  return <Icon type="success-filling" size={props.size} style={{ color: style.color }} />
+  return <Icon type={style.icon} size={props.size} style={{ color: style.color }} />
 }
 
 export default TestStatusIcon

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

@@ -35,7 +35,7 @@ const ReviewPage = (props: Props) => {
         <div key={level.id}>
           <div>
             <Content title={level.title} content={level.content} />
-            <Steps steps={level.steps} />
+            <Steps steps={level.steps} displayAll />
           </div>
           {/* divider */}
           {index < props.levels.length - 1 ? <hr /> : null}