Epic: firstMile - Get Javascript Builders to Setup

As a Builder using the Javascript 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 documentation.

Business Goal

Product Brief

Target Audience

Builders using the Javascript Client Library

Core Team

Design Lead: Andy Moon
Engineering Lead: Bucky Schwarz
Product Lead: Amy Luckette

Extended Team

Analytics: Mona Sami, Favian Tirado
Support: Marc Kaplan, Veeresh Hosakere
Marketing: Brian Mullen, Chris Churillo
Pricing/Offers/Vendor Relationships: Rob Kramer
Documentation: Kelly Seivert, William Pierce
Community/Developer Advocates: Michael Hall, Zoe Steinkamp
Growth: Jill Guest
Design: Daniel Campbell, Andy Moon, Julia James
Product: Amy Luckette, Balaji Palani
Engineering: Kristina Robinson, Rick Spencer, Bucky Schwarz

Initial Design Team

Engineering: Kristina Robinson, Rick Spencer
Product: Balaji Palani
Design: Daniel Campbell, Andy Moon, Julia James
Documentation: Will Pierce

Design Notes

Link to Prototype in Figma

Note: There is not a separate Figma for the Javascript setup flow. Update text, links, and code snippets accordingly.

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
    - The welcome page displays a welcome message "Get Started" with sub-text "Write and query data in the language of your choice"
    - The welcome page displays 4 horizontal elements icon and text: Python, JavaScript/Node.js, Go, More.
    - When the user clicks the Python element, the system navigates the user to the Python Setup page.
    - When the user clicks on the Javascript/Node.js element, the system navigates the user to the Load Data page for the Javascript Client library.
    - When the user clicks on the Go element. the system navigates the user to  Load Data page for the Go Client library.
    - When the user click on the More element, the system navigates the user to  Load Data page.
    - The Welcome page displays 2 vertical elements with icon and text: CLI and Server Agent (Telegraf). 
    - When the user clicks on the CLI element. the system navigates the user to https://docs.influxdata.com/influxdb/v2.1/install/ 
    - When the user clicks on the Server agent element. the system navigates the user to the Create Telegraf Configuration modal, which will allow the user to create/choose a bucket, create/choose a token, choose/configure a telegraf plug-in and finally save that configuration.
    - Maintain the presence and placement of the "Upgrade Now" button
    - Maintain the presence and placement of the Search Bar; "Search Data Writing Methods..."; Useful Links

User Story: Javascript Setup Structure As a user, after selecting Javascript as my preferred language, I want to be navigated to the Javascript 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: Javascript" Icon (Javascript Icon) and Text
    - The screen has a "5 minutes" Icon (clock Icon) and Text

   Dev Notes
    - The "Setting Up: Javascript" icon and text can be a separate component than the wizard itself. 
    - The "5 Minutes" icon and text can be a separate component than 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
    - When the user is on the overview step, highlight that portion of the wizard
    - Display the text from the Figma Prototype; the text may contain links
    - When the user clicks a link, open a new tab
    - 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)

User Story: Step 2: Install Dependencies

    ACs
    - When the user is on the install dependencies step, highlight that portion of the wizard
    - Display the text from the Figma Prototype
    - The user can use a copy code component to copy/paste code snippets as written in the Figma prototype
    - 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 text from the Figma Prototype, 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)
    - NEW - 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 text from the Figma Prototype
    - The user can use a copy code component to copy/paste code snippets as written in the Figma prototype
    -  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 text from the Figma Prototype, text may contain links
    - The user can use a copy code component to copy/paste code snippets as written in the Figma prototype
    - 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 text from the Figma Prototype
    - The user can use a copy code component to copy/paste code snippets as written in the Figma prototype
    -  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 text from the Figma Prototype
    - The user can use a copy code component to copy/paste code snippets as written in the Figma prototype
    -  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 Figma Prototype; i.e., "Congrats" ...
    - The screen displays elements according to Figma with Icon and Text.
    - When the user clicks on the element, the system will have the ability to do one of the following, depending on defined requirements (link to a specific URL or link to a defined URL within the application)
    - Display a feedback link, which will utilize a Survey Monkey link

   Dev Notes
   - Create these components in Clockface rather than UI
   - If Help Bar is complete, then use Help Bar for the feedback mechanism

User Story: Measure Launch Success - Set up Eventing

  ACs
   - Track # accounts per next step selection 
   - Track the time to completion per account
   - Track % accounts complete wizard (% accounts complete setup)
   - Track time per step so that we can see where users are getting "Stuck" 
   - Track how many times the user click the "previous" button per session
   - Track if a user clicks the documentation link per step/screen
   - Track if a user clicked on the copy/code snippet per step/screen; where applicable
   - Track Upgrade Now clicks before vs after completing wizard

  Dev Notes
    - We might use Amplitude
    - We might use InfluxDB
    - Eventually this should end up in Domo for PM and Analytics to create visuals

User Story: End to End Testing

User Story: Managed by Feature Flag

User Story: Remove Feature Flag

influxdata / ui