[dashboard] Re-implement default IDE switch for new dashboard

[jankeromnes]

Also fix styling of Account and other Settings pages.

TODOs:

• Reimplement a global Settings commit mechanism to actually change values for the user

[jankeromnes]

Werft already called it a day 😂

/werft run

👍 started the job as gitpod-build-jx-dash2-default-ide.5

[jankeromnes]

Now looks good and has a few other visual improvements.

It's just lacking a global Settings commit mechanism to actually change the value on the user.

[svenefftinge]

👍
Some comments:

• Please remove the third option and the possibility specify an image.
• No need to tell users that Gitpod uses code as default (there is no default as I have to choose between the two).
• please add cursor-pointer to the cards.

[jankeromnes]

Thanks!

Please remove the third option and the possibility specify an image.

I can hide it when ide-settings permission is off (as in the old dashboard) EDIT: ✅

No need to tell users that Gitpod uses code as default (there is no default as I have to choose between the two).

I agree. @gtsiolis do you have an alternative sub-text in mind? Maybe something like "Choose which IDE your workspaces should use."? EDIT: ✅

[svenefftinge]

Choose which IDE your workspaces should use.

It's not the workspace that uses an IDE but the user. So how about:

Choose which IDE you want to use.

[jankeromnes]

Ok, the page now actually changes the user settings in the DB:

mysql> select * from d_b_user;
+--------------------------------------+--------------------------+----------------------------------------------------+--------------------------+----------------+------------------------------+---------+----------------------------+------------+---------------+-----------------+--------------+--------------------------+---------------------------------------+
| id                                   | creationDate             | avatarUrl                                          | name                     | fullName       | allowsMarketingCommunication | blocked | _lastModified              | privileged | markedDeleted | noReleasePeriod | featureFlags | rolesOrPermissions       | additionalData                        |
+--------------------------------------+--------------------------+----------------------------------------------------+--------------------------+----------------+------------------------------+---------+----------------------------+------------+---------------+-----------------+--------------+--------------------------+---------------------------------------+
| 2f49d29c-1f44-453f-ae9a-1fe2d3a46d49 | 2021-03-18T16:03:55.544Z | https://avatars.githubusercontent.com/u/599268?v=4 | jankeromnes              | Jan Keromnes   |                            0 |       0 | 2021-03-18 18:21:29.138004 |          0 |             0 |               0 | NULL         | ["admin","ide-settings"] | {"ideSettings":{"defaultIde":"code"}} |
+--------------------------------------+--------------------------+----------------------------------------------------+--------------------------+----------------+------------------------------+---------+----------------------------+------------+---------------+-----------------+--------------+--------------------------+---------------------------------------+

However, my new workspaces still all start with Theia for some reason. 🤔

EDIT: Maybe it still needs "featurePreview":true to work? Confirmed & fixed in #3495 ✅

TODO: Disable on click, re-enable on server response. Maybe also drive-by fix Create > New Workspace button.

[svenefftinge]

Please remove the image form.

Also, please make it so that new users use VS Code as default.

[svenefftinge]

Is that bg-white based on a design I missed?

[jankeromnes]

That's a secondary button (outline vs plain color), cc @gtsiolis

Currently, it seems that all <button> have bg-green-600 by default:

gitpod/components/dashboard/src/index.css

Lines 31 to 33 in 8ff6ed7

	button {
	@apply cursor-pointer px-3 py-1 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm rounded-md;
	}

[gtsiolis]

For more context, see relevant specs in #3395.

[jankeromnes]

Please remove the image form.

How do you get to see that? Here's what I see:

[svenefftinge]

How do you get to see that? Here's what I see:

I don't know I just see it :-)

But you can really remove all the code around a custom IDE image for now, as we are not sure we want to go down that path.

[jankeromnes]

Works well now!