feat(firstMile): add first structure for nodejs (#4284)

* chore: rename JavascriptNodeJsIcon => NodejsIcon

Author: hoorayimhelping

src/homepageExperience/components/HomepageIcons.tsx

@@ -44,7 +44,7 @@ export const PythonIcon = (
   </svg>
 )
 
-export const JavascriptNodeJsIcon = (
+export const NodejsIcon = (
   <svg
     width="108"
     height="66"

src/homepageExperience/containers/HomepageContainer.tsx

@@ -24,7 +24,7 @@ import {getOrg} from 'src/organizations/selectors'
 import {
   CLIIcon,
   GoIcon,
-  JavascriptNodeJsIcon,
+  NodejsIcon,
   PythonIcon,
   TelegrafIcon,
 } from 'src/homepageExperience/components/HomepageIcons'
@@ -99,7 +99,7 @@ export const HomepageContainer: FC = () => {
                         <Link to={javaScriptNodeLink} style={linkStyle}>
                           <div className="homepage-wizard-language-tile">
                             <h5>JavaScript/Node.js</h5>
-                            {JavascriptNodeJsIcon}
+                            {NodejsIcon}
                           </div>
                         </Link>
                       </ResourceCard>

src/homepageExperience/containers/HomepageNodejsWizard.tsx

@@ -0,0 +1,154 @@
+import React, {PureComponent} from 'react'
+import classnames from 'classnames'
+
+import {
+  Button,
+  ComponentColor,
+  ComponentSize,
+  ComponentStatus,
+  SubwayNav,
+} from '@influxdata/clockface'
+
+import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
+import {Overview} from 'src/homepageExperience/components/steps/Overview'
+import {CreateToken} from 'src/homepageExperience/components/steps/CreateToken'
+import {InitalizeClient} from 'src/homepageExperience/components/steps/InitalizeClient'
+import {WriteData} from 'src/homepageExperience/components/steps/WriteData'
+import {ExecuteQuery} from 'src/homepageExperience/components/steps/ExecuteQuery'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/ExecuteAggregateQuery'
+
+import {NodejsIcon} from 'src/homepageExperience/components/HomepageIcons'
+
+import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+
+interface State {
+  currentStep: number
+  selectedBucket: string
+}
+
+export class HomepageNodejsWizard extends PureComponent<null, State> {
+  state = {
+    currentStep: 1,
+    selectedBucket: 'my-bucket',
+  }
+
+  private handleSelectBucket = (bucketName: string) => {
+    this.setState({selectedBucket: bucketName})
+  }
+
+  handleNextClick = () => {
+    this.setState(
+      {
+        currentStep: Math.min(
+          this.state.currentStep + 1,
+          HOMEPAGE_NAVIGATION_STEPS.length
+        ),
+      },
+      () => {
+        event('firstMile.nodejsWizard.next.clicked')
+      }
+    )
+  }
+
+  handlePreviousClick = () => {
+    this.setState(
+      {currentStep: Math.max(this.state.currentStep - 1, 1)},
+      () => {
+        event('firstMile.nodejsWizard.previous.clicked')
+      }
+    )
+  }
+
+  handleNavClick = (clickedStep: number) => {
+    this.setState({currentStep: clickedStep})
+  }
+
+  renderStep = () => {
+    switch (this.state.currentStep) {
+      case 1: {
+        return <Overview />
+      }
+      case 2: {
+        return <InstallDependencies />
+      }
+      case 3: {
+        return <CreateToken />
+      }
+      case 4: {
+        return <InitalizeClient />
+      }
+      case 5: {
+        return <WriteData onSelectBucket={this.handleSelectBucket} />
+      }
+      case 6: {
+        return <ExecuteQuery bucket={this.state.selectedBucket} />
+      }
+      case 7: {
+        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+      }
+      case 8: {
+        return <Finish />
+      }
+      default: {
+        return <Overview />
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div className="homepage-wizard-container">
+        <aside className="homepage-wizard-container--subway">
+          <div style={{width: '100%'}}>
+            <SubwayNav
+              currentStep={this.state.currentStep}
+              onStepClick={this.handleNavClick}
+              navigationSteps={HOMEPAGE_NAVIGATION_STEPS}
+              settingUpIcon={NodejsIcon}
+              settingUpText="Nodejs"
+              setupTime="5 minutes"
+            />
+          </div>
+        </aside>
+        <div className="homepage-wizard-container--main">
+          <div
+            className={classnames('homepage-wizard-container--main-wrapper', {
+              overviewSection: this.state.currentStep === 1,
+            })}
+          >
+            {this.renderStep()}
+          </div>
+
+          <div className="homepage-wizard-container-footer">
+            <Button
+              onClick={this.handlePreviousClick}
+              text="Previous"
+              size={ComponentSize.Large}
+              color={ComponentColor.Tertiary}
+              status={
+                this.state.currentStep > 1
+                  ? ComponentStatus.Default
+                  : ComponentStatus.Disabled
+              }
+            />
+            <Button
+              onClick={this.handleNextClick}
+              text="Next"
+              size={ComponentSize.Large}
+              color={ComponentColor.Primary}
+              status={
+                this.state.currentStep < 8
+                  ? ComponentStatus.Default
+                  : ComponentStatus.Disabled
+              }
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/shared/containers/SetOrg.tsx

@@ -21,6 +21,7 @@ import {
   FlowPage,
   FlowsIndex,
   HomepageContainer,
+  HomepageNodejsWizard,
   HomepagePythonWizard,
   LabelsIndex,
   MembersIndex,
@@ -295,11 +296,18 @@ const SetOrg: FC = () => {
           )}
 
           {isFlagEnabled('firstMile') && (
-            <Route
-              exact
-              path="/orgs/:orgID/new-user-wizard/python"
-              component={HomepagePythonWizard}
-            />
+            <>
+              <Route
+                exact
+                path="/orgs/:orgID/new-user-wizard/python"
+                component={HomepagePythonWizard}
+              />
+              <Route
+                exact
+                path="/orgs/:orgID/new-user-wizard/nodejs"
+                component={HomepageNodejsWizard}
+              />
+            </>
           )}
 
           <Route component={NotFound} />

src/shared/containers/index.tsx

@@ -114,3 +114,9 @@ export const HomepagePythonWizard = lazy(() =>
     'src/homepageExperience/containers/HomepagePythonWizard'
   ).then(module => ({default: module.HomepagePythonWizard}))
 )
+
+export const HomepageNodejsWizard = lazy(() =>
+  import(
+    'src/homepageExperience/containers/HomepageNodejsWizard'
+  ).then(module => ({default: module.HomepageNodejsWizard}))
+)