Merge pull request #1696 from influxdata/dataloader/complete-step-progress-bar

Add completion step to progress bar in onboarding wizard

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

@@ -30,11 +30,10 @@ class ProgressBar extends PureComponent<Props, null> {
     const {stepStatuses, stepTitles, currentStepIndex} = this.props
 
     const lastIndex = stepStatuses.length - 1
-    const lastEleIndex = stepStatuses.length - 2
 
     const progressBar: JSX.Element[] = stepStatuses.reduce(
       (acc, stepStatus, i) => {
-        if (i === 0 || i === lastIndex) {
+        if (i === 0) {
           return [...acc]
         }
 
@@ -64,7 +63,7 @@ class ProgressBar extends PureComponent<Props, null> {
           </div>
         )
 
-        if (i === lastEleIndex) {
+        if (i === lastIndex) {
           return [...acc, stepEle]
         }
 
@@ -74,7 +73,7 @@ class ProgressBar extends PureComponent<Props, null> {
         if (i === currentStepIndex && stepStatus !== StepStatus.Error) {
           connectorStatus = ConnectorState.Some
         }
-        if (i === lastEleIndex || stepStatus === StepStatus.Complete) {
+        if (i === lastIndex || stepStatus === StepStatus.Complete) {
           connectorStatus = ConnectorState.Full
         }
         const connectorEle = (

ui/src/onboarding/components/CompletionStep.tsx

@@ -13,11 +13,14 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
   public componentDidMount() {
     window.addEventListener('keydown', this.handleKeydown)
   }
+
   public componentWillUnmount() {
     window.removeEventListener('keydown', this.handleKeydown)
   }
+
   public render() {
-    const {onExit} = this.props
+    const {onExit, onDecrementCurrentStepIndex} = this.props
+
     return (
       <div className="onboarding-step">
         <div className="splash-logo secondary" />
@@ -28,7 +31,7 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
             color={ComponentColor.Default}
             text="Back"
             size={ComponentSize.Medium}
-            onClick={this.props.onDecrementCurrentStepIndex}
+            onClick={onDecrementCurrentStepIndex}
           />
           <Button
             color={ComponentColor.Success}

ui/src/onboarding/containers/OnboardingWizard.tsx

@@ -156,10 +156,7 @@ class OnboardingWizard extends PureComponent<Props> {
       onSetCurrentStepIndex,
     } = this.props
 
-    if (
+    if (currentStepIndex === 0) {
-      currentStepIndex === 0 ||
-      currentStepIndex === stepStatuses.length - 1
-    ) {
       return <div className="wizard--progress-header hidden" />
     }