[dashboard] increase IDE awareness for onboarding users when starting workspace #9663

mustard-mh · 2022-04-29T20:17:36Z

Description

🧪 This is a PLG experiment that aims to increase the awareness of IDE/editor variety on Gitpod, for first-time users.

With #9432, we've introduced the IDE/editor selection as one of the very first steps for new users. However, some users start using Gitpod without going through the Dashboard - for example by using the context URL: gitpod.io#REPO-URL

With this PR, we introduce the same modal UI component, but in the "Create Workspace" page (aka landing page when a context URL is used). This is only impacting users who want to start their first workspace, but don't have a preferred IDE/editor.

See GIF below, to preview the new UI

Related Issue(s)

Fixes #9534
Relates to #6707

How to test

Using this preview env: https://hw-9534-onboarding.staging.gitpod-dev.com#<REPO_URL>

Open workspace via URL

[After Reset Account] Default prefix /# will wait until Modal close or choose. After select, will open workspace with choosed IDE.
- Popup Modal and wait until close or select or continue
- Detail cases see TestCases section
- i.e. https://hw-9534-onboarding.staging.gitpod-dev.com/#https://github.com/gitpod-io/template-sveltejs
[After Reset Account] Prefix with special IDE /#referrer will set up user's defaultIde if it's not been set yet. Open with /#referrer is behave like open via JetBrains Gateway UI with choosen IDE.
- No modal, because gateway specified one
- If no defaultIde for user's setting, go with the one specified in URL
- If have defaultIde behave like before
- i.e. https://hw-9534-onboarding.staging.gitpod-dev.com/#referrer:jetbrains-gateway:pycharm/https://github.com/gitpod-io/template-python-flask (this one go with pycharm)
[After Reset Account] Prefix with special IDE /#referrer but args not correctly fit referrer required will use default ide code to start workspace
- No modal, because hash starts with referrer
- Workspace starts with IDE code
- User ideSettings still undefined
- Will show ide selection next time start a workspace too
- i.e. https://hw-9534-onboarding.staging.gitpod-dev.com/#referrer:/https://github.com/gitpod-io/template-python-flask
After setup defaultIde via prefix workspace starting page, onboarding aware on page /workspaces will not appear.
- Detail /workspaces PR see [Dashboard] Increase IDE awareness during onboarding #9432

Test Cases

Every selection from user will change User setting immediately

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

FYI: Check and reset your ide option

Check: go to preferences page to see current selection IDE

Reset: delete account on settings account page.

OR

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

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

Release Notes

Prompt onboarding users to choose default IDE during workspace starting

Documentation

Screenshots / GIF

/werft without-vm=true

components/server/src/workspace/context-parser.ts

akosyakov · 2022-05-02T08:23:02Z

@mustard-mh I don't understand which problem we are solving here? Could you elaborate in description what this PR does?

andreafalzetti · 2022-05-04T11:18:54Z

/werft run without-vm=true

👍 started the job as gitpod-build-hw-9534-onboarding.13
(with .werft/ from main)

andreafalzetti · 2022-05-04T11:24:22Z

I am rebasing and fixing merge conflicts

andreafalzetti · 2022-05-04T12:25:50Z

/werft run without-vm=true

👍 started the job as gitpod-build-hw-9534-onboarding.15
(with .werft/ from main)

andreafalzetti · 2022-05-04T14:10:36Z

@mustard-mh I don't understand which problem we are solving here? Could you elaborate in description what this PR does?

@akosyakov I've updated the PR description, in short: it's a follow-up improvement for our experiment around IDE awareness.

components/dashboard/src/start/CreateWorkspace.tsx

andreafalzetti

It works as advertised: As a first-time user, using a context URL, I am prompted to select my preferred IDE/editore before the workspace starts.

When I initially approached this task before this PR was even created, I tried using the information in context or making an additional call to know if workspaces existed, but I admit that this approach is better because it extends the current architecture.

Perhaps I would rename needOnboardingIde in needUserIdePreference. What do you think, @mustard-mh?

Approved - the rename is not a blocker for me, only a preference and suggestion. I look forward to seeing this in production 🚀

gtsiolis

UX looks flawless! ✨

Thanks, @mustard-mh! 💯

components/server/src/workspace/gitpod-server-impl.ts

loujaybee · 2022-05-05T10:33:02Z

Looks great @mustard-mh and co! I'm currently looking into measurement of the feature. I think there are some improvements that we can make, but I don't think it's necessary to block this from being merged / deployed, we can apply analytics improvements as an addition / follow up change.

components/server/src/workspace/gitpod-server-impl.ts

components/gitpod-protocol/src/protocol.ts

mustard-mh · 2022-05-05T15:48:05Z

[After Reset Account] Prefix with special IDE /#referrer but args not correctly fit referrer required will use default ide code to start workspace

Update PR description to add a new test, since our check conditions changed

mustard-mh · 2022-05-05T15:55:44Z

components/dashboard/src/App.tsx

+            );
+        } else {
+            toRender = <CreateWorkspace contextUrl={hash} />;
+        }
    } else if (isWsStart) {
        toRender = <StartWorkspace {...parseProps(hash, window.location.search)} />;


We don't need to show Modal while restarting a workspace, because createWorkspace covered most cases

mustard-mh · 2022-05-09T08:41:11Z

~~Initially, this PR was created as a quick fix for this bug, as it was simple to modify and would be much sooner than the PR #9663 for review.~~

~~In reality, both PRs have been in the review state for a long time.~~

~~if #9663 can be merged first, we can close this one.~~

Reply in wrong place 🙈

mustard-mh · 2022-05-09T08:46:10Z

@AlexTugarev Any other input about this PR 🙏?

AlexTugarev · 2022-05-09T10:41:56Z

/werft run

👍 started the job as gitpod-build-hw-9534-onboarding.21
(with .werft/ from main)

AlexTugarev · 2022-05-09T11:35:05Z

components/dashboard/src/App.tsx

+    // We don't need to show IDE preference in this case
+    const shouldUserIdePreferenceShown = User.isOnboardingUser(user) && !hash.startsWith(ContextURL.REFERRER_PREFIX);
+    if (shouldUserIdePreferenceShown !== showUserIdePreference) {
+        setShowUserIdePreference(shouldUserIdePreferenceShown);


setting a state here will result in an additional render cycle, AFAIC.

you can simplify with a const here:

const showUserIdePreference = shouldUserIdePreferenceShown !== showUserIdePreference;

@AlexTugarev Go with const 👍 and removed state.

Update: ‼️ Sorry for not being more cautious. We need state to re-render page, otherwise it'll cause some bugs like this one #9979

@AlexTugarev ~~Prev solution is because we have this one in App.tsx, maybe need to change it later?~~ No, we need state to re-render page

gitpod/components/dashboard/src/App.tsx

Lines 331 to 334 in b294096

const shouldWhatsNewShown = shouldSeeWhatsNew(user);

if (shouldWhatsNewShown !== isWhatsNewShown) {

setWhatsNewShown(shouldWhatsNewShown);

}

AlexTugarev

That works nicely!

Left a comment.

/hold
if you want to address anything else.

…workspace

mustard-mh · 2022-05-09T12:59:40Z

/hold

Wait for my final test after built

mustard-mh · 2022-05-09T13:18:31Z

/unhold

mustard-mh · 2022-05-09T13:19:35Z

It's dangerous that after new commit pushed, review won't dismiss. It means I can rm -rf or change some small things() 🙈

loujaybee · 2022-05-09T14:34:15Z

FYI: @mustard-mh some context on the decision to remove re-approve here

mustard-mh requested a review from a team April 29, 2022 20:17

roboquat added release-note size/M labels Apr 29, 2022

github-actions bot added the team: webapp Issue belongs to the WebApp team label Apr 29, 2022

mustard-mh commented Apr 29, 2022

View reviewed changes

components/server/src/workspace/context-parser.ts Outdated Show resolved Hide resolved

andreafalzetti force-pushed the hw/9534-onboarding branch from 9780f27 to 5e66880 Compare May 4, 2022 11:24

andreafalzetti reviewed May 4, 2022

View reviewed changes

components/dashboard/src/start/CreateWorkspace.tsx Outdated Show resolved Hide resolved

andreafalzetti approved these changes May 4, 2022

View reviewed changes

gtsiolis requested a review from a team May 4, 2022 15:57

github-actions bot added the team: product-design label May 4, 2022

gtsiolis approved these changes May 4, 2022

View reviewed changes

akosyakov reviewed May 5, 2022

View reviewed changes

components/server/src/workspace/gitpod-server-impl.ts Outdated Show resolved Hide resolved

loujaybee added the team: IDE label May 5, 2022

mustard-mh force-pushed the hw/9534-onboarding branch from 5e66880 to a2011ac Compare May 5, 2022 10:00

roboquat added size/S and removed size/M labels May 5, 2022

mustard-mh force-pushed the hw/9534-onboarding branch from a2011ac to 6caab87 Compare May 5, 2022 10:23

This was referenced May 5, 2022

Analytics: Track modal dismissal #9790

Closed

Analytics: Extend ide_configuration_changed analytics event with location (e.g. dashboard, preferences, workspace start) #9791

Closed

mustard-mh force-pushed the hw/9534-onboarding branch from 6caab87 to 58c70e2 Compare May 5, 2022 13:30

AlexTugarev reviewed May 5, 2022

View reviewed changes

components/server/src/workspace/gitpod-server-impl.ts Outdated Show resolved Hide resolved

AlexTugarev reviewed May 5, 2022

View reviewed changes

components/gitpod-protocol/src/protocol.ts Outdated Show resolved Hide resolved

mustard-mh force-pushed the hw/9534-onboarding branch from 58c70e2 to f8a81e1 Compare May 5, 2022 15:31

mustard-mh force-pushed the hw/9534-onboarding branch from f8a81e1 to 2e186af Compare May 5, 2022 15:53

mustard-mh commented May 5, 2022

View reviewed changes

mustard-mh removed team: IDE team: product-design labels May 5, 2022

mustard-mh requested a review from AlexTugarev May 6, 2022 08:19

gtsiolis mentioned this pull request May 6, 2022

[dashboard] fix onboarding modal show with workspaces exists #9665

Closed

mustard-mh closed this May 9, 2022

mustard-mh reopened this May 9, 2022

AlexTugarev reviewed May 9, 2022

View reviewed changes

AlexTugarev approved these changes May 9, 2022

View reviewed changes

roboquat added the do-not-merge/hold label May 9, 2022

[dashboard] increase IDE awareness for onboarding user when starting …

8857762

…workspace

mustard-mh force-pushed the hw/9534-onboarding branch from 2e186af to 8857762 Compare May 9, 2022 12:53

roboquat removed the do-not-merge/hold label May 9, 2022

roboquat merged commit 037a480 into main May 9, 2022

roboquat deleted the hw/9534-onboarding branch May 9, 2022 13:19

mustard-mh mentioned this pull request May 12, 2022

[dashboard] fix workspace start stuck in checking during ide onboarding #9979

Merged

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels May 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] increase IDE awareness for onboarding users when starting workspace #9663

[dashboard] increase IDE awareness for onboarding users when starting workspace #9663

mustard-mh commented Apr 29, 2022 •

edited

Loading

akosyakov commented May 2, 2022

andreafalzetti commented May 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

andreafalzetti commented May 4, 2022

andreafalzetti commented May 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

andreafalzetti commented May 4, 2022 •

edited

Loading

andreafalzetti left a comment

gtsiolis left a comment

loujaybee commented May 5, 2022

mustard-mh commented May 5, 2022 •

edited

Loading

mustard-mh May 5, 2022

mustard-mh commented May 9, 2022 •

edited

Loading

mustard-mh commented May 9, 2022 •

edited by werft-gitpod-dev-com bot

Loading

AlexTugarev commented May 9, 2022 •

edited by werft-gitpod-dev-com bot

Loading

AlexTugarev May 9, 2022

mustard-mh May 9, 2022 •

edited

Loading

mustard-mh May 9, 2022 •

edited

Loading

AlexTugarev left a comment

mustard-mh commented May 9, 2022

mustard-mh commented May 9, 2022

mustard-mh commented May 9, 2022 •

edited

Loading

loujaybee commented May 9, 2022 •

edited

Loading

	const shouldWhatsNewShown = shouldSeeWhatsNew(user);
	if (shouldWhatsNewShown !== isWhatsNewShown) {
	setWhatsNewShown(shouldWhatsNewShown);
	}

[dashboard] increase IDE awareness for onboarding users when starting workspace #9663

[dashboard] increase IDE awareness for onboarding users when starting workspace #9663

Conversation

mustard-mh commented Apr 29, 2022 • edited Loading

Description

Related Issue(s)

How to test

Test Cases

FYI: Check and reset your ide option

Release Notes

Documentation

Screenshots / GIF

akosyakov commented May 2, 2022

andreafalzetti commented May 4, 2022 • edited by werft-gitpod-dev-com bot Loading

andreafalzetti commented May 4, 2022

andreafalzetti commented May 4, 2022 • edited by werft-gitpod-dev-com bot Loading

andreafalzetti commented May 4, 2022 • edited Loading

andreafalzetti left a comment

Choose a reason for hiding this comment

gtsiolis left a comment

Choose a reason for hiding this comment

loujaybee commented May 5, 2022

mustard-mh commented May 5, 2022 • edited Loading

mustard-mh May 5, 2022

Choose a reason for hiding this comment

mustard-mh commented May 9, 2022 • edited Loading

mustard-mh commented May 9, 2022 • edited by werft-gitpod-dev-com bot Loading

AlexTugarev commented May 9, 2022 • edited by werft-gitpod-dev-com bot Loading

AlexTugarev May 9, 2022

Choose a reason for hiding this comment

mustard-mh May 9, 2022 • edited Loading

Choose a reason for hiding this comment

mustard-mh May 9, 2022 • edited Loading

Choose a reason for hiding this comment

AlexTugarev left a comment

Choose a reason for hiding this comment

mustard-mh commented May 9, 2022

mustard-mh commented May 9, 2022

mustard-mh commented May 9, 2022 • edited Loading

loujaybee commented May 9, 2022 • edited Loading

mustard-mh commented Apr 29, 2022 •

edited

Loading

andreafalzetti commented May 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

andreafalzetti commented May 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

andreafalzetti commented May 4, 2022 •

edited

Loading

mustard-mh commented May 5, 2022 •

edited

Loading

mustard-mh commented May 9, 2022 •

edited

Loading

mustard-mh commented May 9, 2022 •

edited by werft-gitpod-dev-com bot

Loading

AlexTugarev commented May 9, 2022 •

edited by werft-gitpod-dev-com bot

Loading

mustard-mh May 9, 2022 •

edited

Loading

mustard-mh May 9, 2022 •

edited

Loading

mustard-mh commented May 9, 2022 •

edited

Loading

loujaybee commented May 9, 2022 •

edited

Loading