fix(ui/onboarding): Prevent unskippable steps from being skipped with progress bar

ui/src/clockface/components/wizard/ProgressBar.scss

@@ -84,6 +84,10 @@
   }
 }
 
+.unclickable {
+  cursor: default;
+}
+
 .wizard--progress-connector {
   min-width: 20px;
   width: 100%;

ui/src/clockface/components/wizard/ProgressBar.tsx

@@ -13,6 +13,7 @@ interface Props {
   handleSetCurrentStep: (stepNumber: number) => void
   stepStatuses: StepStatus[]
   stepTitles: string[]
+  stepSkippable: boolean[]
 }
 
 @ErrorHandling
@@ -21,11 +22,51 @@ class ProgressBar extends PureComponent<Props, null> {
     return <div className="wizard--progress-bar">{this.WizardProgress}</div>
   }
 
-  private handleSetCurrentStep = i => () => {
-    const {handleSetCurrentStep} = this.props
+  private handleSetCurrentStep = (i: number) => () => {
+    const {handleSetCurrentStep, currentStepIndex} = this.props
+
+    const isAfterCurrentUnskippableStep =
+      !this.isStepSkippable && i > currentStepIndex
+    const isAfterNextUnskippableStep =
+      this.nextNonSkippableStep !== -1 && i > this.nextNonSkippableStep
+
+    const preventSkip =
+      isAfterCurrentUnskippableStep || isAfterNextUnskippableStep
+
+    if (preventSkip) {
+      return
+    }
+
     handleSetCurrentStep(i)
   }
 
+  private get nextNonSkippableStep(): number {
+    const {currentStepIndex, stepSkippable, stepStatuses} = this.props
+    return _.findIndex(stepSkippable, (isSkippable, i) => {
+      return (
+        !isSkippable &&
+        i > currentStepIndex &&
+        stepStatuses[i] !== StepStatus.Complete
+      )
+    })
+  }
+
+  private get isStepSkippable(): boolean {
+    const {stepSkippable, stepStatuses, currentStepIndex} = this.props
+
+    return (
+      stepSkippable[currentStepIndex] ||
+      stepStatuses[currentStepIndex] === StepStatus.Complete
+    )
+  }
+
+  private getStepClass(i: number): string {
+    if (!this.isStepSkippable && i > this.props.currentStepIndex) {
+      return 'wizard--progress-button unclickable'
+    }
+    return 'wizard--progress-button'
+  }
+
   private get WizardProgress(): JSX.Element[] {
     const {stepStatuses, stepTitles, currentStepIndex} = this.props
 
@@ -47,7 +88,7 @@ class ProgressBar extends PureComponent<Props, null> {
         const stepEle = (
           <div
             key={`stepEle${i}`}
-            className="wizard--progress-button"
+            className={this.getStepClass(i)}
             onClick={this.handleSetCurrentStep(i)}
           >
             <span

ui/src/onboarding/containers/OnboardingWizard.tsx

@@ -105,7 +105,7 @@ class OnboardingWizard extends PureComponent<Props> {
     'Complete',
   ]
 
-  public stepSkippable = [false, false, false, false, false, false]
+  public stepSkippable = [true, false, true, true, true, true]
 
   constructor(props: Props) {
     super(props)
@@ -190,6 +190,7 @@ class OnboardingWizard extends PureComponent<Props> {
           handleSetCurrentStep={onSetCurrentStepIndex}
           stepStatuses={stepStatuses}
           stepTitles={this.stepTitles}
+          stepSkippable={this.stepSkippable}
         />
       </WizardProgressHeader>
     )