Epic: firstMile - MQTT Onboarding Wizard

As a Builder using the MQTT method of Data Acquisition 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 MQTT method of Data Acquisition

## Core Team
- Design Lead: Tara Kirkland
- Engineering Leadership: Kristina Robinson & Bucky S.
- Product Lead: Amy Luckette (Onboarding) + Samantha Wang (Data Acquisition)

## Design Notes
https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10781


## User Stories & Acceptance Criteria

**User Story: Home Page**

ACs
- Update the homepage to match Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1419%3A6436
- Order of Client Library Options at the top:

Python, Arduino, JavaScript.Node.js, GO

- Underneath client library options should be a link to "view more" which takes users to the existing load data page
- Underneath the client library options should be a page break then:

Native MQTT
Connect to your MQTT subscription in the cloud

InfluxDB's CLI
Write and query data using the Influx command line interface. Supports CSV and line protocol.

Server Agent (Telegraf)
Easily collect and write data using custom standalone agent plugins

**User Story: Wizard Structure**

ACs
- Establish the basic structure of the MQTT Onboarding Wizard:

Overview
Connect to Broker
Subscribe to Topic
Define Data Parsing Rules
Finish

Dev Notes
- Note: The Dumplings team will own & maintain the "Overview" page and the "Finish" page. The Data Acquisition with own and maintain the middle steps. Any improvements/changes to the middle steps will be implemented by the Data Acquisition team. (Their PM is Samantha Wang, and their lead dev is Gene Hynson)

**User Story: User Navigation**

ACs
- Match the navigation that the Data Acquisition team already created for their MQTT Wizard. That is, keep all content on 1 page. No need for a "next" button, the user should be able to scroll to proceed.
- The wizard step icons should indicate when the user progresses to the next step via the wizard and via scrolling
- The wizard icons should turn blue and contain a white checkmark once completed/scrolled past
- If the user chooses to navigate using the wizard icons, bring the user to the corresponding wizard section with that section displaying at the top of the screen.
- See Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10781
- Coordinate w/ Gene Hynson as needed (Data Acquisition dev lead)

**User Story: Overview**

ACs
- Reuse the same overview page components as the previous wizards
- Everything should remain the same EXCEPT:

- The text under the welcome statement should say "In the next 5 minutes, you will connect to your MQTT data and define parsing rules."

- The user won't need to see a "next" button to proceed, they can simply scroll down or use the wizard to proceed to next.

Dev Notes
- See Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10781

**User Story: Native MQTT Wizards Steps**

ACs
- The DA team will own and maintain the Native MQTT Steps of the wizard, however, we need to make sure that the overview page leads the user seamlessly into the Native MQTT Steps from the overview step. Native MQTT steps for MVP MQTT Onboarding wizard:

Connect to a Broker
Subscribe to Topic
Define Data Parsing Riles

Dev Notes
- Note: The Dumplings team will own & maintain the "Overview" page and the "Finish" page. The Data Acquisition with own and maintain the middle steps. Any improvements/changes to the middle steps will be implemented by the Data Acquisition team. (Their PM is Samantha Wang, and their lead dev is Gene Hynson)
- Ideally, we want to code this in a way that allows the DA team to make changes that automatically get reflected in the onboarding flow. Team w/ the DA team as needed to determine the best way to implement.

**User Story: Finish**

ACs
- Finish page should have similar components as the other wizards (Congrats, Confetti, Thumbs up / Thumbs down component, Key Concepts, and InfluxDB University)
- Text underneath "Congrats" should say "You completed connecting to your MQTT broker and writing data to InfluxDB Cloud"
- One of the UI boxes should be the option to see an "MQTT Blog Article"
- See Figma: https://www.figma.com/file/JfGYCOb7ZyQ8JHSqeu4fma/Onboarding?node-id=1810%3A10782

Dev Notes
- We're still waiting on the MQTT Blog Article to be published. Gary Fowler drafted the blog on 8/15/22.

**User Story: Set up User Pilot Survey**

ACs
- Tara (Designer) will configure the user pilot survey when the dev team is close to launching.

**User Story: 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: Update/Create Deep Links**

**User Story: Manage via Feature Flag**

**User Story: End to End Testing**

**User Story: Remove Feature Flag**