feat(firstMile): make subway navigation links clickable (#4186)

Author: hoorayimhelping

src/homepageExperience/components/HomepageExperience.scss

@@ -63,6 +63,7 @@ $pool-fill: #00a3ff;
 }
 
 .subway-navigation-step-flex-wrapper {
+  cursor: pointer;
   display: flex;
   flex-direction: column;
 

src/homepageExperience/components/Navigation.tsx

@@ -9,9 +9,14 @@ import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
 
 interface OwnProps {
   currentStep: number
+  onClick: (number) => void
 }
 
 export class Navigation extends PureComponent<OwnProps> {
+  handleClick = (step: number) => {
+    this.props.onClick(step)
+  }
+
   render() {
     return (
       <div className="subway-navigation-container">
@@ -29,11 +34,14 @@ export class Navigation extends PureComponent<OwnProps> {
           </div>
           {HOMEPAGE_NAVIGATION_STEPS.map((value, index) => (
             <Step
+              icon={value.icon}
+              key={value.name}
+              onClick={() => {
+                this.handleClick(index + 1)
+              }}
               stepIsActive={index === this.props.currentStep - 1}
               stepIsComplete={index < this.props.currentStep - 1}
-              icon={value.icon}
               text={value.name}
-              key={index}
             />
           ))}
         </div>

src/homepageExperience/components/steps/Step.tsx

@@ -6,14 +6,15 @@ import {InfluxColors} from '@influxdata/clockface'
 import {StepCompleteIcon} from 'src/homepageExperience/components/HomepageIcons'
 
 type StepProps = {
+  icon: JSX.Element
+  onClick: () => void
   stepIsActive: boolean
   stepIsComplete: boolean
-  icon: JSX.Element
   text: string
 }
 
 const Step = (props: StepProps) => {
-  const {text, icon, stepIsActive, stepIsComplete} = props
+  const {icon, onClick, stepIsActive, stepIsComplete, text} = props
   const iconAndTextColor =
     stepIsActive || stepIsComplete ? InfluxColors.Pool : InfluxColors.Grey95
 
@@ -22,6 +23,7 @@ const Step = (props: StepProps) => {
       className={classnames('subway-navigation-step-flex-wrapper', {
         stepIsComplete: stepIsComplete,
       })}
+      onClick={onClick}
     >
       <div
         className={classnames('subway-navigation-step', {

src/homepageExperience/containers/HomepagePythonWizard.tsx

@@ -34,6 +34,10 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
     selectedBucket: '',
   }
 
+  private handleSelectBucket = (bucketName: string) => {
+    this.setState({selectedBucket: bucketName})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -57,9 +61,10 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
     )
   }
 
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
+  handleNavClick = (clickedStep: number) => {
+    this.setState({currentStep: clickedStep})
   }
+
   renderStep = () => {
     switch (this.state.currentStep) {
       case 1: {
@@ -99,7 +104,10 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
       <div className="homepage-wizard-container">
         <aside className="homepage-wizard-container--subway">
           <div style={{width: '100%'}}>
-            <Navigation currentStep={this.state.currentStep} />
+            <Navigation
+              currentStep={this.state.currentStep}
+              onClick={this.handleNavClick}
+            />
           </div>
         </aside>
         <div className="homepage-wizard-container--main">