Epic: firstMile: Arduino Onboarding Wizard

As a Builder using the Arduino Client Library in InfluxDB Cloud, I want to write and query my data in less than 5 minutes so that I can quickly learn the basic functionality of InfluxDB Cloud without spending excess time heads-down in the documentation.

## Business Goal
[Product Brief](https://docs.google.com/document/d/1DX694KomEeJqEXkJBwme3uAQGOH7BAeOqKyiI7I7Hm8/edit#)

## Target Audience
- Builders using the Arduino Client Library

## Core Team
- Design Lead: Tara Kirkland
- Engineering Lead: Bucky Schwarz
- Product Lead: Amy Luckette

## Design Notes
[Link to Prototype in Figma](https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding-Exploration?node-id=430%3A1741)

Note: There is not a separate Figma for the Arduino flow. Update the text, links, and code snippets according to the snippets provided by @ChitlangeSahas as our Arduino SME.

## User Stories & Acceptance Criteria

**User Story: Home Page**
As a user, after sign-up, I want to be navigated to a newly designed Home page so that I can choose my preferred language to get started.

ACs
- Add a UI component for Arduino before the "More" component.

**User Story: Arduino Setup Structure**
As a user, after selecting Arduino as my preferred language, I want to be navigated to the Arduino setup wizard so that I can view the basic structure and steps of the setup wizard.

ACs
- User can view all the steps of the setup wizard on the left side of the screen; the steps are "Overview, Install Dependencies, Create a Token, Initialize Client, Write Data, Execute a Flux Query, Execute an Aggregate, Finish"
- The screen has a "Setting Up: Arduino" Icon (Arduino Icon) and Text
- The screen has a "5 minutes" Icon (clock Icon) and Text

Dev Notes
- The "Setting Up: Arduino" icon and text can be a separate component from the wizard itself.
- The "5 Minutes" icon and text can be a separate component from the wizard itself.

**User Story: User Navigation**

ACs
- Users should have the option to backtrack through the wizard via the "Previous" button OR by clicking on the step links in the wizard
- Once a user completes a step in the wizard, replace that step's icon with a blue checkmark
- The step that the user is currently on should be highlighted

**User Story: Step 1: Overview**

ACs
- The overview page should match the overview pages on the previous wizards exactly...same text, same, video, same links. See previous onboarding wizards (Python, Go, node.js, CLI)

**User Story: Step 2: Install Dependencies**

ACs
- When the user is on the install dependencies step, highlight that portion of the wizard
- Display the same text that's on the other wizards - unless advised otherwise by Sahas; note: the text may contain links
- The user can use a copy code component to copy/paste code snippets
- When the user clicks the "Next" button, navigate the user to the next step in the wizard and checkmark the overview step as being completed (blue checkmark)
- When the user clicks the "PREVIOUS" button, navigate the user to the previous step in the wizard

**User Story: Step 3: Create a Token**

ACs
- When the user is on the create a Token step, highlight that portion of the wizard
- Display the same text that's on the other wizards - unless advised otherwise by Sahas; note: the text may contain links
- When the user clicks a link, open a new tab
- The user can click a "GENERATE TOKEN" button that will pop up the existing generate token modal. (Reuse existing general token modal functionality)
- Once the generate token modal generates the token, automatically place the token inside the copy code component in the appropriate spot
- When the user clicks the "Next" button, navigate the user to the next step in the wizard and checkmark the overview step as being completed (blue checkmark)
- When the user clicks the "PREVIOUS" button, navigate the user to the previous step in the wizard

**User Story: Step 4: Initialize Client**

ACs
- When the user is on the Initialize Client step, highlight that portion of the wizard
- Display the same text that's on the other wizards - unless advised otherwise by Sahas; note: the text may contain links
- The user can use a copy code component to copy/paste code snippets
- When the user clicks the "Next" button, navigate the user to the next step in the wizard and checkmark the overview step as being completed (blue checkmark)
- When the user clicks the "PREVIOUS" button, navigate the user to the previous step in the wizard

**User Story: Step 5: Write Data**

ACs
- When the user is on the Write Data step, highlight that portion of the wizard
- Display the same text that's on the other wizards - unless advised otherwise by Sahas; note: the text may contain links
- The user can use a copy code component to copy/paste code snippets
- The user can click the "Create Bucket" button to create a bucket
- The user can select a bucket if they already have one
- The user can see whether their data has been written or if the system is still "listening for data..."
- When the user clicks the "Next" button, navigate the user to the next step in the wizard and checkmark the overview step as being completed (blue checkmark)
- When the user clicks the "PREVIOUS" button, navigate the user to the previous step in the wizard

Dev Notes
- Reuse the existing create bucket component
- Reuse the select a bucket component
- The listening for data component will resemble the telegraf testing configuration overlay

**User Story: Step 6: Execute a Flux Query**

ACs
- When the user is on the Execute a Flux Query step, highlight that portion of the wizard
- Display the same text that's on the other wizards - unless advised otherwise by Sahas; note: the text may contain links
- The user can use a copy code component to copy/paste code snippets
- When the user clicks the "Next" button, navigate the user to the next step in the wizard and checkmark the overview step as being completed (blue checkmark)
- When the user clicks the "PREVIOUS" button, navigate the user to the previous step in the wizard

**User Story: Step 7: Execute an Aggregate**

ACs
- When the user is on the Execute an Aggregate step, highlight that portion of the wizard
- Display the same text that's on the other wizards - unless advised otherwise by Sahas; note: the text may contain links
- The user can use a copy code component to copy/paste code snippets
- When the user clicks the "Next" button, navigate the user to the next step in the wizard and checkmark the overview step as being completed (blue checkmark)
- When the user clicks the "PREVIOUS" button, navigate the user to the previous step in the wizard

**User Story: Step 8: Finish**

ACs
- When the user is on the Finish step, highlight that portion of the wizard
- Display the text from the other wizards; i.e., "Congrats" ...
- Show confetti
- Thumbs up / Thumbs down component
- Display a feedback/survey link: user-pilot
- Display link to Influx DB University: http://university.influxdata.com/
- Display link to key concepts: https://docs.influxdata.com/influxdb/v2.2/reference/key-concepts/

Dev Notes

**User Story: Arduino UI Eventing**

ACs
- Capture all the same events that are captured for the other wizards.
- See our UI Eventing Dictionary here: https://influxdb.atlassian.net/wiki/spaces/IPO/pages/2530574337/UI+Eventing+Dictionary

Dev Notes
- Eventually, this should end up in Domo for PM and Analytics to create visuals

**User Story: End to End Testing**

**User Story: Deep Links**

**User Story: Arduino Boilerplate App**

**User Story: Arduino IoT Sample App**

**User Story: Managed by Feature Flag**

**User Story: Remove Feature Flag**