Consolidate onboarding, connect to Studio, settings & walkthrough

[mattseddon]

There are a lot of small disparate screens related to onboarding (Setp webview) and connecting to Studio (Connect webview). There are also buttons associated with these screens in the sidebar. We also have a separate walkthrough (uses VS Code API) which users will see on first-install. The purpose of this ticket is to discuss and then implement a consolidation of this information into a single place.

My idea for an initial implementation involves reusing the layout from the plots webview. Namely this (without the ribbon):

To begin with, we can start by moving the existing sections within this layout. We can also add a new section that links to the walkthrough.

During that process, we can discuss the next steps.

Please LMK your thoughts on

• Initial section titles.
• Name for the view (Setup?).
• Whether or not we will need to expose all steps at the same time (i.e do we continue to show things like initialize Git once the action has been completed?)
• Final layout after initial implementation
• Alternatives

Note: We need to drop the code that automatically opens the walkthrough on first-install.

Related to #3331

Tasks

All Sections

• Introduce Redux to Setup state (Show DVC Cli Details in DVC Setup #3688 (comment))
• Add some indicator as to whether sections are optional/completed to section titles.
• Have a section automatically close and open another when setup finished (Add Setup DVC Section #3655 (comment))
• Review sections, making them more static (for example, setup steps should aim to have only one paragraph of text and one row of buttons)
• Stop recreating all setup data in every test in setup/components/App.test.tsx(Add completion status to setup sections #3823 (comment))

DVC Section

• Have DVC section steps show more details about the dvc cli version (number, location, etc.) (Add Setup DVC Section #3655 (review))
• Add LATEST_TESTED_VERSION to DVC env details, removing or simplifying Toast that is currently used
• Have other references to DVC not setup, like toasts and DVC extension button, point towards the setup section (Add Setup DVC Section #3655 (review))
• Take a look at On DVC status bar click open quick panel with available commands #1645
• Add "Upgrade" button that helps user install a newer version of DVC (shown when the user has an outdated version of DVC)
• Remove MAX_VERSION from dvc cli details #3918
• Make it more obvious when a user's DVC version is below the latest tested (Update DVC Setup Version Details #3850 (comment))
• Add ":" after DVC table titles

- [ ] Improve our "DVC unavailable" section, making recommended steps to install DVC more clear (#3434 (comment)) Replaced by #3935

Get Started Section

• Add a reference to the walkthrough to a new "Get Started" section on the page.
• Look into moving our walkthrough into "Get Started" section instead of just adding a reference to it

Experiments Section

• Add a reminder of how to use DVCLive in the Setup Complete step of the Experiments section.
• Remove extra spacing below "Setup Complete" section

Plots Section

- [ ] Add plots section ( #3434 (comment) ) Replaced by #3934

[mattseddon]

Some next steps:

• Add a reference to the walkthrough to a new section on the page.
• Split CLI setup out from the Experiments section (add into new DVC section)
• Add a reminder of how to use DVCLive in the Setup Complete step of the Experiments section.
• Add some indicator as to whether sections are optional/completed to section titles.

[julieg18]

Add a reference to the walkthrough to a new section on the page.

Do we have an idea on what we want this new section to consist of? Did we want something simple like:

Or would there be more to it?

Add a reminder of how to use DVCLive in the Setup Complete step of the Experiments section.

When we say "reminder", are we just think of adding an extra sentence with a doc link or did we want to add more content like our dvclive framework tabs?

[mattseddon]

Add a reference to the walkthrough to a new section on the page.

Do we have an idea on what we want this new section to consist of? Did we want something simple like:

Or would there be more to it?

I think we will want to get rid of the walkthrough altogether but let's start with this. There will be circular references where the walkthrough reference the setup page and visa versa. Look out for these and let's see if we can remove them.

Add a reminder of how to use DVCLive in the Setup Complete step of the Experiments section.

When we say "reminder", are we just think of adding an extra sentence with a doc link or did we want to add more content like our dvclive framework tabs?

It will be a modified version of the DVCLive frameworks tabs, yes.

[mattseddon]

Note from retro: Setup should have a plots section that will help a user to get started with plots, show some snippets they can add to their dvc.yaml and also a button to create custom plots. Don't need to start on this until everything else is done. Could be a quick win before starting on remote setup.

[shcheklein]

On the DVC CLI section. When there is no virtual environment the screen is a bit confusing and dangerous:

1. Minor. Can we add : after the Version (and the other table titles) please.
2. It suggests to install it into a global (user? will it add -u?) Python env which is not a good practice. What does Jupyter extension do in this case?
3. We need to have a way to change the Python env and make it clear that this env is what Python ext selected by default. Maybe also show a way to install DVC from binaries, etc.

To describe it in a different way. I would never hit Install in this case - too dangerous. Configure button is also not very explanatory (Auto mode goes into selecting an env but it's not obvious). Would be nice to have a create env flow, or at least notify. Need to think about this.

[shcheklein]

Here is the "Create an env" flow in the Jupyter extension: (fails since I picked to install all the requirements, but idea behind create an env is clear):

Screen.Recording.2023-05-11.at.3.27.39.PM.mov

[julieg18]

Reviewed the remaining steps in this issue, considering time, priority, etc., and put together some next steps.

• Remove extra spacing below "Setup Complete" section
• Add a reference to the walkthrough to a new "Get Started" section on the page.
• Add a reminder of how to use DVCLive in the Setup Complete step of the Experiments section.

These tasks seem straightforward and should be quick to implement. I'll get started on them in the order above ^

• Review sections, making them more static (for example, setup steps should aim to have only one paragraph of text and one row of buttons)
• Look into moving our walkthrough into "Get Started" section instead of just adding a reference to it

These tasks will take some time and discussion, but I think they are of higher priority in comparison to the rest. Will start these after the smaller tasks mentioned above.

• Add plots section ( Consolidate onboarding, connect to Studio, settings & walkthrough #3434 (comment) )
• Improve our "DVC unavailable" section, making recommended steps to install DVC more clear (Consolidate onboarding, connect to Studio, settings & walkthrough #3434 (comment))

I think we should move the "plots section" task along with the "dvc installation" task to their own issues to make discussion on more concrete next steps easier (with over 10 tasks done already, this issue has gotten quite large 📜 ).

[shcheklein]

@julieg18 this plan sounds good to me.

[julieg18]

Working on the "Get Started" section and thought about some solutions to avoid circular references and to further consolidate our Setup and walkthrough.

1. Add a more clear separation between the two pages

Keep our "Get Started" walkthrough focused solely on walking through the extension features and the Setup would be focused on getting the user started with DVC installation. To do this:

• The "Install DVC" step in the walkthrough would be deleted and we just add a brief mention in the beginning that tells you that you need to install DVC first before going through the walkthrough.
• A user doesn't see the walkthrough first when they first install the extension, instead they would see Setup first. The "Get Started" section would be "disabled" saying you should install DVC first. User goes through steps in the DVC section, then can go to the walkthrough and learn about the extension.
• Update links accordingly

2. Move Walkthrough into Setup

Delete our "Get Started" walkthrough, showing a walkthrough inside of the Setup "Get Started" section. To do this:

• Design a way to show a walkthrough inside the section. We'd most likely would need to simplify our walkthrough steps since we now have less space to show images/text.
• Delete walkthrough entirely
• Update links accordingly

Personally, I like the first option more since we don't need to redesign/rewrite our walkthrough, but if we want our walkthrough simplified anyway and everything within "Setup", the second option would be the better way to go. Or maybe someone else has a better idea in mind :)

I'll start working on the first option for now though!

[shcheklein]

Yes, I also think the first option is better and it makes sense to me to try to make it more and more like a features overview.