Epic: New Tasks Scheduler MVP

## Business Goal
**Product Brief**
https://docs.google.com/document/d/1-ldDvAMUuvRoYB_qLBxGIcU_hKesxps5ouQcVS16GEo/edit#heading=h.4xgv61fnmy5i

As of 10/24/22, most users use the dedicated tasks tab to create and save tasks, not the "save as" task option in the data explorer. Given this, our hypothesis is that allowing users to create tasks from saved scripts on the dedicated tasks tab will lead to an even easier-to-use system for task creation. Task creation directly correlates with increased usage and engagement and therefore increased revenue/growth.

Find user interaction data here: https://influxdata.domo.com/page/856789180.

filters: Event = data_explorer_script_save_as_task and valid_task_form_submitted

## Team
- Product: Amy Luckette and Vinay Kumar
- Design: Julia James and Daniel Campbell
- Engineering: Kristina Robinson, Bucky Schwarz, and Gavin Cabbage

## Design
**Figma**
https://www.figma.com/file/r91KxurPL3VQ7JMqc9Ldqo/New-Tasks-Experience?node-id=1655%3A28946

## User Stories & ACs

**User Story: Manage by Feature Flag**

ACs
- Manage by Feature Flag
- When the user clicks the tasks tab and then clicks "+ Create Task" only display the NEW task scheduler. Do not use a toggle on/off. We want users to create tasks using the NEW task scheduler.
- We will still need to maintain the old task scheduler so that users that created tasks using the old scheduler can edit their existing tasks.

**User Story: Schedule Task Page - Select a Script - Text and Dropdown Behavior**

ACs
- User Flow: Select the task tab from navigation > Display the task list page > click + create task > all users should then see the NEW Task scheduler. (NO Toggle for feature)
- The new tasks UI will have a header text of "Create Task" since that's the core user action for that page.
- The first main section of this page will be "Select a Script" as shown in Figma.
- There should be a dropdown underneath the text. There should be additional text inside the dropdown before the user clicks it that says "Select a Script*" with a red asterisk next to it indicating that it's a mandatory step. See Figma.
- If the user clicks on the "Select a Script" dropdown, there should be a search bar inside the dropdown with grey text indicating to the user that they can "Search Scripts".
- The dropdown should also display the option for users to "+ Create Script in Editor".
- Underneath the dropdown display the text "You can create or edit Scripts in the Script Editor" ...Script Editor should be hyperlinked and send the user to the NEW Data Explorer script editor (auto-toggle it on).
- If the user clicks on "+ Create Script in Editor, they should be navigated to the new query experience data explorer page. Deep link the data explorer text to navigate the user to the NEW query experience script editor. If the user has previously toggled off the new script editor, automatically toggle it on when you navigate the user to the NEW query experience script editor.
- The dropdown should display a scrollable list of all the saved scripts that belong to that organization. (Filterable list via a predictive text search bar, NOT typeahead dropdown)
- If the user chose a script that has parameters, then display the parameters value entry fields as sub-steps to the right of the page. Details for this behavior are outlined in another ticket/user story.
- If the user chose a script that does not have parameters, then do not display any parameter value fields to the right of the page.
- Underneath the "select a script" dropdown should be an "Edit Script" button. This button should remain disabled until the user selects a script.
- If the user selects a script and clicks the "Edit Script" button, the system should navigate the user to the NEW data explorer script editor (auto-toggle it on for the user). The script that the user selected should display in the script editor in the new data explorer script editor.

Implementation Details
- Contact @gavincabbage if any help is needed leveraging the Invokable Scripts APIs
- Figma: https://www.figma.com/file/r91KxurPL3VQ7JMqc9Ldqo/New-Tasks-Experience?node-id=1669%3A33743
- Use this to retrieve a list of scripts: /api/v2/scripts
- No need to parse the flux, you can pull the params from /api/v2/scripts/{scriptName}/params
- See Invokable Scripts API here: https://docs.influxdata.com/influxdb/cloud/api/#operation/PostScripts
- Request is out to the QX team to enable a way for users to navigate back to the tasks page from the new QX page: https://github.com/influxdata/ui/issues/6173

**User Story: Schedule a Task Page - Select a Script - Set Param Values**

ACs
- If the user selected a script with parameters, then dynamically display those parameters to the right of the screen as shown in Figma. https://www.figma.com/file/r91KxurPL3VQ7JMqc9Ldqo/New-Tasks-Experience?node-id=1669%3A33944
- On the right of the screen, display the name of the script that the user chose
- Below the Name, display the description of the script that the user chose
- Below that, display "Set Param Values" with text underneath it that says "Params is an InfluxDB object that defines runtime variables. You must provide values for params when you invoke a script. Learn More."
- "Learn More" should be hyperlinked and send the user here - in a separate tab: https://docs.influxdata.com/influxdb/cloud/api-guide/api-invokable-scripts/
- Display the parameters and value input boxes in a scrollable list based on the parameters returned from the API
- Display a red asterisk to the right of each parameter name to indicate that the user must input a value
- Display examples of values of the expected data type in grey inside each parameter value input box. Note: parameters can be integers, floats, or strings. See data types supported here: https://docs.influxdata.com/influxdb/cloud/query-data/parameterized-queries/#supported-parameter-data-types

Implementation
- Engineering to determine the best way to render a scrollable list of parameter value input boxes given the variation in parameter volumes per script.

**User Story: Schedule a Task Page - Schedule the Task**

ACs
- The second substep on the "Schedule a Task Page" is "Schedule the Task" (See Figma)
- Display the text "Schedule the Task" underneath the 'Edit Script' button that's below the 'select a script' drop-down.
- Below the "Schedule the Task" text, display the text "Set the interval at which the task runs and an optional time delay."
- Below that text should be the "Every" and "Cron" tab options. See Figma.
- Below that, display the "Every" and "Offset" text and input boxes
- The "Every" input should have a red asterisk to the right of it indicating that it's a mandatory field
- Both the "Every" and "Offset" input text should have a grey question mark tooltip to the right of it so that the users can learn more about those fields.
- The tooltip text expected for the "Every" question mark is: "The is the interval at which the task runs. It also determines when the task first starts to run, depending on the specified time (in duration literal). [Learn More](https://docs.influxdata.com/influxdb/cloud/process-data/task-options/#every)
- The tooltip text expected for the "Offset" question mark is: "Offset delays the execution of the task but preserves the original time range. [Learn More](https://docs.influxdata.com/influxdb/cloud/process-data/task-options/#offset).
- There should be examples of the expected values inside the "Every" and "Offset" input boxes so that the user knows what's expected of them. For example 3h30s or 20m
- If the user chooses the "Cron" tab, then display the "Cron" text and input field.
- Cron should have a red asterisk to the right of it indicating that it's required
- Cron should also display a grey question mark tooltip. Text expected for the "Cron" tooltip is: Cron is an expression that defines the schedule on which the task runs. Cron scheduling is based on system time. [Learn More](https://docs.influxdata.com/influxdb/cloud/process-data/task-options/#cron).
- Inside the "Cron" input box, display an example of the data type expected (String): 02***

Implementation
- When Figma designs show Clockface 4 components - don't worry about using Clockface 4 if it's not ready by implementation time. Just use the Clockface component and when Clockface 4 drops, these will automatically get updated

**User Story: Schedule a Task Page - Name the Task**

ACs
- The last sub-step of the 'Schedule a Task' page should be "Name the Task"
- Display the text "Name the Task"
- Display the "Name" text and input box below the "Name the Task" section
- Display a red asterisk to the right of the "Name" to indicate that name is required
- The bottom of the screen should display the "Cancel" and "Schedule Task" buttons
- "Schedule Task" should be disabled until all required fields are filled in
- See Figma https://www.figma.com/file/r91KxurPL3VQ7JMqc9Ldqo/New-Tasks-Experience?node-id=1669%3A33944

**User Story: Toast Notification**

ACs
- When the user clicks on either "+ Create Script in Editor" in the Select a Script drop-down, or the "Edit Script" button, navigate the user to the script editor AND display a dismissable toast notification on the script editor screen.
- Toast message should say: "Complete your Task after you’ve created and saved a new script."
- The toast notification should have a blue "i" icon indicating that it's an informative message.
- "Complete your Task" should deep-link the user back to their 'Schedule a task' page.
- On the tasks page, autoselect the script that the user just created and saved.

**User Story: Editing Saved Tasks**

ACs
- If the user would like to edit the task, allow them to click "Edit Task" on the existing task list the same way they do today.
- Upon clicking edit task, if the saved task was created via the NEW task scheduler, then bring the user to NEW Tasks scheduler UI
- Once the user arrives at the NEW task scheduler UI via the "edit task" path, the header of the page should be "Edit Task". Additionally, the 'Edit Script' button below the "select a script" dropdown should be enabled. Lastly, the 'Schedule Task' button at the bottom of the page should display instead as "Update Task"
- If the user clicks on "Update Task" they should be navigated back to the task list that exists today
- If the user clicks on the "edit script" button, take them to their script in the NEW script editor page (auto-toggle it on for the user and display their script).
- This should also trigger the informational toast notification on the new script editor "Complete your task after you save your script"
- Upon clicking edit task, if the saved task was created via the OLD task UI, then navigate the user to the OLD UI. No changes are needed to the old UI as it will someday be sunset.

Implementation
- Keep track of whether or not tasks were created via the new task scheduler vs. the old task scheduler.
- Edit Task Figma: https://www.figma.com/file/r91KxurPL3VQ7JMqc9Ldqo/New-Tasks-Experience?node-id=1754%3A42541

**User Story: End-to-End Testing**

ACs
- End to End testing

**User Story: UI Eventing**

ACs
- DO NOT use the word "new" when describing events as someday it will no longer be 'new.' Consult with @kristinarobinson on event names and event properties
- Events TBD

Implementation
- New Tasks events will be sent to Rudderstack > Snowflake > Domo and filterable in the UI Events Domo Dashboard.
- Find some preliminary counts here: https://influxdata.domo.com/page/856789180. filters: Event = data_explorer_script_save_as_task and valid_task_form_submitted
- As of 10/24/22, most users use the dedicated tasks tab to create and save tasks, not the "save as" task option in the data explorer.

**User Story: Remove Feature Flag**

ACs
- Do not remove the feature flag until receiving approval from both product management and engineering leadership.