feat: add prepare ide step to arduino onboarding (#5356)

* feat: add prepare ide step to arduino onboarding

Author: david-rusnak

src/homepageExperience/components/steps/arduino/PrepareIde.tsx

@@ -0,0 +1,53 @@
+// Libraries
+import React from 'react'
+
+const listStyle = {
+  fontSize: '16px',
+  fontWeight: 'normal',
+}
+
+export const PrepareIde = () => {
+  return (
+    <>
+      <h1>Prepare Arduino IDE</h1>
+      <p>
+        The easiest way to get started with the InfluxDB Arduino client is with
+        the ESP8266 or ESP32 board.
+      </p>
+      <p>
+        If you haven't already, add the board you wish to use (ESP8266 or ESP32)
+        to the Arduino IDE by following these steps:
+      </p>
+      <p>
+        <b>For ESP8266:</b>
+      </p>
+      <ol style={listStyle}>
+        <li>Open the Arduino Preferences (Arduino &rarr; Preferences) </li>
+        <li>
+          Look for "Additional Boards Manager URLs" input box and paste
+          "http://arduino.esp8266.com/stable/package_esp8266com_index.json" in
+          it.
+        </li>
+        <li>Click OK.</li>
+        <li>Then under Tools &rarr; Boards: , click on Boards Manager.</li>
+        <li>Search for ESP8266 in the boards.</li>
+        <li>Install the ESP8266 board by ESP8266 Community.</li>
+      </ol>
+      <p>
+        <b>For ESP32:</b>
+      </p>
+      <ol style={listStyle}>
+        <li>Open the Arduino Preferences (Arduino &rarr; Preferences) </li>
+        <li>
+          Look for "Additional Boards Manager URLs" input box and paste
+          "https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json"
+          in it.
+        </li>
+        <li>Click OK.</li>
+        <li>Then under Tools &rarr; Boards: , click on Boards Manager.</li>
+        <li>Search for ESP32 in the boards.</li>
+        <li>Install the ESP32 board by ESP32 Community.</li>
+      </ol>
+    </>
+  )
+}

src/homepageExperience/containers/ArduinoWizard.tsx

@@ -20,12 +20,13 @@ import {Finish} from 'src/homepageExperience/components/steps/Finish'
 import {InitializeClient} from 'src/homepageExperience/components/steps/arduino/InitializeClient'
 import {InstallDependencies} from 'src/homepageExperience/components/steps/arduino/InstallDependencies'
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
+import {PrepareIde} from 'src/homepageExperience/components/steps/arduino/PrepareIde'
 import {WriteData} from 'src/homepageExperience/components/steps/arduino/WriteData'
 import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
-import {HOMEPAGE_NAVIGATION_STEPS_SHORT} from 'src/homepageExperience/utils'
+import {HOMEPAGE_NAVIGATION_STEPS_ARDUINO} from 'src/homepageExperience/utils'
 import {normalizeEventName} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 
@@ -67,7 +68,7 @@ export class ArduinoWizard extends PureComponent<{}, State> {
       {
         currentStep: Math.min(
           this.state.currentStep + 1,
-          HOMEPAGE_NAVIGATION_STEPS_SHORT.length
+          HOMEPAGE_NAVIGATION_STEPS_ARDUINO.length
         ),
       },
       () => {
@@ -76,10 +77,10 @@ export class ArduinoWizard extends PureComponent<{}, State> {
           {},
           {
             clickedButtonAtStep: normalizeEventName(
-              HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep - 1].name
+              HOMEPAGE_NAVIGATION_STEPS_ARDUINO[this.state.currentStep - 1].name
             ),
             currentStep: normalizeEventName(
-              HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep].name
+              HOMEPAGE_NAVIGATION_STEPS_ARDUINO[this.state.currentStep].name
             ),
           }
         )
@@ -96,10 +97,10 @@ export class ArduinoWizard extends PureComponent<{}, State> {
           {},
           {
             clickedButtonAtStep: normalizeEventName(
-              HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep - 1].name
+              HOMEPAGE_NAVIGATION_STEPS_ARDUINO[this.state.currentStep - 1].name
             ),
             currentStep: normalizeEventName(
-              HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep].name
+              HOMEPAGE_NAVIGATION_STEPS_ARDUINO[this.state.currentStep].name
             ),
           }
         )
@@ -114,7 +115,7 @@ export class ArduinoWizard extends PureComponent<{}, State> {
       {},
       {
         currentStep: normalizeEventName(
-          HOMEPAGE_NAVIGATION_STEPS_SHORT[clickedStep - 1].name
+          HOMEPAGE_NAVIGATION_STEPS_ARDUINO[clickedStep - 1].name
         ),
       }
     )
@@ -126,9 +127,12 @@ export class ArduinoWizard extends PureComponent<{}, State> {
         return <Overview wizard="arduinoWizard" />
       }
       case 2: {
-        return <InstallDependencies />
+        return <PrepareIde />
       }
       case 3: {
+        return <InstallDependencies />
+      }
+      case 4: {
         return (
           <InitializeClient
             setTokenValue={this.setTokenValue}
@@ -137,16 +141,16 @@ export class ArduinoWizard extends PureComponent<{}, State> {
           />
         )
       }
-      case 4: {
+      case 5: {
         return <WriteData bucket={this.state.selectedBucket} />
       }
-      case 5: {
+      case 6: {
         return <ExecuteQuery bucket={this.state.selectedBucket} />
       }
-      case 6: {
+      case 7: {
         return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
       }
-      case 7: {
+      case 8: {
         return (
           <Finish
             wizardEventName="arduinoWizard"
@@ -178,7 +182,7 @@ export class ArduinoWizard extends PureComponent<{}, State> {
                 <SubwayNav
                   currentStep={this.state.currentStep}
                   onStepClick={this.handleNavClick}
-                  navigationSteps={HOMEPAGE_NAVIGATION_STEPS_SHORT}
+                  navigationSteps={HOMEPAGE_NAVIGATION_STEPS_ARDUINO}
                   settingUpIcon={ArduinoIcon}
                   settingUpText="Arduino"
                   setupTime="5 minutes"
@@ -193,7 +197,7 @@ export class ArduinoWizard extends PureComponent<{}, State> {
                     verticallyCentered:
                       this.state.currentStep === 1 ||
                       this.state.currentStep ===
-                        HOMEPAGE_NAVIGATION_STEPS_SHORT.length,
+                        HOMEPAGE_NAVIGATION_STEPS_ARDUINO.length,
                   }
                 )}
               >

src/homepageExperience/utils.ts

@@ -65,3 +65,38 @@ export const HOMEPAGE_NAVIGATION_STEPS_SHORT = [
     glyph: IconFont.StarSmile,
   },
 ]
+
+export const HOMEPAGE_NAVIGATION_STEPS_ARDUINO = [
+  {
+    name: 'Overview',
+    glyph: IconFont.BookOutline,
+  },
+  {
+    name: 'Prepare\n Arduino IDE',
+    glyph: IconFont.Braces,
+  },
+  {
+    name: 'Install\n Dependencies',
+    glyph: IconFont.Install,
+  },
+  {
+    name: 'Initialize\n Client',
+    glyph: IconFont.CogSolid_New,
+  },
+  {
+    name: 'Write\n Data',
+    glyph: IconFont.Pencil,
+  },
+  {
+    name: 'Execute\n Flux Query',
+    glyph: IconFont.Play,
+  },
+  {
+    name: 'Execute\n Aggregate',
+    glyph: IconFont.Play,
+  },
+  {
+    name: 'Finished!',
+    glyph: IconFont.StarSmile,
+  },
+]