feat(firstMile): nodejs wizard - install dependencies (#4297)

Author: hoorayimhelping

src/homepageExperience/components/steps/nodejs/InstallDependencies.tsx

@@ -0,0 +1,34 @@
+import React, {PureComponent} from 'react'
+import CodeSnippet from 'src/shared/components/CodeSnippet'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
+import {event} from 'src/cloud/utils/reporting'
+
+export class InstallDependencies extends PureComponent {
+  private logCopyCodeSnippet = () => {
+    event('firstMile.nodeJSWizard.installDependencies.code.copied')
+  }
+  render() {
+    return (
+      <>
+        <h1>Install Dependencies</h1>
+        <p>
+          First, you need to install the{' '}
+          <code style={{color: '#B7B8FF'}}>@influxdata/influxdb-client</code>{' '}
+          module. Run the command below in your terminal.
+        </p>
+        <CodeSnippet
+          text="npm install --save @influxdata/influxdb-client"
+          onCopy={this.logCopyCodeSnippet}
+        />
+        <p style={{fontStyle: 'italic'}}>
+          You’ll need to have{' '}
+          <SafeBlankLink href="https://nodejs.org/download/release/latest-v14.x/">
+            Node.js v14 LTS
+          </SafeBlankLink>{' '}
+          or higher installed.
+        </p>
+      </>
+    )
+  }
+}

src/homepageExperience/components/steps/ExecuteAggregateQuery.tsx renamed to src/homepageExperience/components/steps/python/ExecuteAggregateQuery.tsx

@@ -9,14 +9,14 @@ import {
   SubwayNav,
 } from '@influxdata/clockface'
 
-import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
+import {InstallDependencies} from 'src/homepageExperience/components/steps/nodejs/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 {InitalizeClient} from 'src/homepageExperience/components/steps/python/InitalizeClient'
+import {WriteData} from 'src/homepageExperience/components/steps/python/WriteData'
+import {ExecuteQuery} from 'src/homepageExperience/components/steps/python/ExecuteQuery'
+import {Finish} from 'src/homepageExperience/components/steps/python/Finish'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuery'
 
 import {NodejsIcon} from 'src/homepageExperience/components/HomepageIcons'
 

src/homepageExperience/components/steps/ExecuteQuery.tsx renamed to src/homepageExperience/components/steps/python/ExecuteQuery.tsx

@@ -9,14 +9,14 @@ import {
   SubwayNav,
 } from '@influxdata/clockface'
 
-import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
+import {InstallDependencies} from 'src/homepageExperience/components/steps/python/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 {InitalizeClient} from 'src/homepageExperience/components/steps/python/InitalizeClient'
+import {WriteData} from 'src/homepageExperience/components/steps/python/WriteData'
+import {ExecuteQuery} from 'src/homepageExperience/components/steps/python/ExecuteQuery'
+import {Finish} from 'src/homepageExperience/components/steps/python/Finish'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuery'
 
 import {PythonIcon} from 'src/homepageExperience/components/HomepageIcons'