[Dashboard] Increase IDE awareness during onboarding

[andreafalzetti]

Description

An experiment to try to increase the awareness of other IDEs besides VS Code.

Every selection from user will change User setting immediately

The approach used:

• Extract the "IDE selection" into a standalone component <SelectIDE>
• Introduced a new component <SelectIDEModal>
• Extracted the util updateUserIDEInfo from <SelectIDE> to its own file
• Re-use the <SelectIDE> in both the settings page and in SelectIDEModal
• <SelectIDEModal> will appear in the workspaces page, if the user isOnboardingUser

Related Issue(s)

Fixes #9433
Relates to #6707

How to test

The first thing to test is that workspaces started without this new preference, will default to VS Code browser. If you want to only test the onboarding flow, skip all [optional] steps below.

1. Sign-up in this preview environment
2. [optional] Before selecting an IDE, try creating a workspace appending the repo to the preview env URL. This will make sure that users who skip this selection, can still launch workspaces with code as default IDE.
3. [optional]Once the workspace starts, verify that VS Code Browser is the default IDE
4. [optional]Stop the workspace gp stop and go back to the dashboard and delete your workspace
5. [optional]Go back to the workspaces page
6. Choose your preferred IDE (e.g IntelliJ)
7. Start a workspace and verify that IntelliJ opens or options to download the JetBrains Gateway are presented

Test Cases

Every selection from user will change User setting immediately

1. Choose nothing, refresh page will see modal again
2. Choose nothing and click continue or X, DB go with code latest:false
3. Check use latest and click continue or X, DB go with code latest:true
4. Choose any IDE, DB will change

FYI: Check and reset your ide option

# check
SELECT id, name, additionalData->'$.ideSettings.defaultIde', additionalData->'$.ideSettings.useLatestVersion' FROM d_b_user WHERE id = '<your_user_id>';

# reset
UPDATE d_b_user SET additionalData='{"ideSettings":{},"emailNotificationSettings":{"allowsChangelogMail":true,"allowsDevXMail":true,"allowsOnboardingMail":true}}' WHERE id = '<your_user_id>';

Release Notes

Prompt first-time users to choose their default IDE 

Screenshots

Light	Dark

[andreafalzetti]

I've extracted the logic to present & save the IDE preference from the Preferences page into a dedicated component <SelectIDE>

[andreafalzetti]

updateUserIDEInfo was also moved to its own file, to allow reusability

[andreafalzetti]

/werft run with-vm=true

👍 started the job as gitpod-build-af-ide-discovery-6707.12
(with .werft/ from main)

[mustard-mh]

Maybe we can also track here about how many people visit this IDE options page in dashboard etc

cc @loujaybee @andreafalzetti

[iQQBot]

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-af-ide-discovery-6707.28
(with .werft/ from main)

[AlexTugarev]

Hi @andreafalzetti!

I tried to test this changes, but was not able to trigger the modal to be shown.

'Verified several times and re-created accounts on the preview env, and also deleted cookies in between.

'Trying to debug I could see that User.isOnboardingUser(user!) === true in Workspaces.tsx initially and the modal's frame is about to render, but the next thing this is updated and some default IDE settings are set. Is that expected? I suppose this is not intended.

[gtsiolis]

I tried to test this changes, but was not able to trigger the modal to be shown.

'Verified several times and re-created accounts on the preview env, and also deleted cookies in between.

Same here! Cc @AlexTugarev

[AlexTugarev]

LGTM!

I tested the new onboarding modal several times and it worked as advertised.

[akosyakov]

@mustard-mh @andreafalzetti Why did we pull it to protocol from dashboard?

[mustard-mh]

@akosyakov This? #9432 (comment)

[akosyakov]

reads like you agree to put it in dashboard though, not in protocol

[andreafalzetti]

we agreed to put it in protocol