From 7497a0fdcaccc3cdd9ab42cf4cb055f6516b706e Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sat, 8 Aug 2020 15:13:54 -0700
Subject: [PATCH 1/2] hide run when no steps

Signed-off-by: shmck <shawn.j.mckay@gmail.com>
---
 web-app/src/containers/Tutorial/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
index 5cb12c26..c6f4b0d4 100644
--- a/web-app/src/containers/Tutorial/index.tsx
+++ b/web-app/src/containers/Tutorial/index.tsx
@@ -181,7 +181,7 @@ const TutorialPage = (props: PageProps) => {
           )}
           {/* Left */}
           <div css={{ flex: 1 }}>
-            {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
+            {DISPLAY_RUN_TEST_BUTTON && level.steps.length && level.status !== 'COMPLETE' ? (
               <Button
                 style={{ marginLeft: '1rem', width: '57px' }}
                 type="primary"

From 93b5e783cf73b9348876bfa8c0e7797f3c694041 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sat, 8 Aug 2020 15:44:15 -0700
Subject: [PATCH 2/2] fix step progress bar

Signed-off-by: shmck <shawn.j.mckay@gmail.com>
---
 .../containers/Tutorial/components/StepProgress.tsx | 13 +++++++++----
 web-app/src/containers/Tutorial/formatLevels.ts     |  6 +++++-
 web-app/src/containers/Tutorial/index.tsx           |  2 +-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/web-app/src/containers/Tutorial/components/StepProgress.tsx b/web-app/src/containers/Tutorial/components/StepProgress.tsx
index fdc7037d..796c8ed1 100644
--- a/web-app/src/containers/Tutorial/components/StepProgress.tsx
+++ b/web-app/src/containers/Tutorial/components/StepProgress.tsx
@@ -9,13 +9,14 @@ const styles = {
     display: 'flex' as 'flex',
     justifyContent: 'flex-end' as 'flex-end',
     alignItems: 'center' as 'center',
-    width: '10rem',
+    width: '150px',
     color: theme['$color-white'],
+    marginRight: '-16px',
   }),
   text: (theme: Theme) => ({
     color: theme['$color-white'],
-    marginRight: '0.5rem',
-    fontSize: '80%',
+    marginRight: '5px',
+    fontSize: '10px',
   }),
 }
 
@@ -28,7 +29,11 @@ const StepProgress = (props: Props) => {
   const theme: Theme = useTheme()
   const isWide = useMedia({ minWidth: '340px' })
 
-  const Text = `${props.current} of ${props.max}`
+  const Text = (
+    <span style={styles.text(theme)}>
+      {props.current} of {props.max}
+    </span>
+  )
 
   if (isWide) {
     return (
diff --git a/web-app/src/containers/Tutorial/formatLevels.ts b/web-app/src/containers/Tutorial/formatLevels.ts
index 46d8aff1..724474b9 100644
--- a/web-app/src/containers/Tutorial/formatLevels.ts
+++ b/web-app/src/containers/Tutorial/formatLevels.ts
@@ -36,6 +36,10 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => {
     stepIndex = levels[levelIndex].steps.length
   }
 
+  if (position.complete) {
+    stepIndex += 1
+  }
+
   // current level
   const levelUI: T.LevelUI = {
     ...currentLevel,
@@ -44,7 +48,7 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => {
       // label step status for step component
       let status: T.ProgressStatus = 'INCOMPLETE'
       let subtasks
-      if (index < stepIndex || (index === stepIndex && position.complete)) {
+      if (index < stepIndex) {
         status = 'COMPLETE'
       } else if (index === stepIndex) {
         status = 'ACTIVE'
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
index c6f4b0d4..1ffa20d8 100644
--- a/web-app/src/containers/Tutorial/index.tsx
+++ b/web-app/src/containers/Tutorial/index.tsx
@@ -221,7 +221,7 @@ const TutorialPage = (props: PageProps) => {
                 />
               </div>
             ) : level.steps.length > 1 ? (
-              <StepProgress current={stepIndex + 1} max={level.steps.length} />
+              <StepProgress current={stepIndex} max={level.steps.length} />
             ) : null}
           </div>
         </footer>