[Dashboard] Feature Preview

Problem to solve

Currently, Feature Preview is a section within User Settings (/settings) which includes a checkbox that toggles the visibility of the Default IDE option below, lacks visual feedback upon enabling, and abruptly update the settings page to inject the Default IDE preference.

This is part of https://github.com/gitpod-io/gitpod/issues/3300. 🍕

User Experience goal

The user should be able to enable or disable the Feature Preview without abruptly updating the user interface.

Proposal

In this context, it seems optimal use a modal that describes Feature Preview and provides a single CTA button that toggles Feature Preview. This has the following benefits:

1. Allow the product to perform a page refresh if needed so that experimental features that change the user interface like Default IDE surface without surprising the user with hidden user interface options.
2. Make this action more prominent and provide better awareness for the users.
3. Let's use the user dropdown menu to host the Feature Preview item and use a modal.

In this first MVC (minimum viable change), we can do the following:

1. Add Feature Preview in the user menu.
2. Show a modal describing Feature Preview.

Components involved:

1. Button
2. Modal
3. Dropdown

Future steps

1. In the future, we could group the Default IDE with other user preferences like theme, click behavior for opening workspaces (see https://github.com/gitpod-io/gitpod/issues/2516), and more.

Designs

Dropdown	Enable	Disable	Spacing

See also design specs.

Documentation

No documentation changes are needed for this first iteration.

/cc @csweichel because Feature Preview

Start by reviewing the existing Feature Preview section in User Settings and the user dropdown. Compare the Button, Modal, and Dropdown behavior with the linked designs and design specs. Done means Feature Preview is available from the user menu and opens a modal describing it without an abrupt settings-page update.