[dashboard] Improve team selection UX in new Project flow

[jankeromnes]

Description

Improves the team selection UX in new Project flow

Related Issue(s)

Fixes #6686

How to test

1. https://jx-improve-team-select.staging.gitpod-dev.com/new
2. Select any repository

Release Notes

[dashboard] Improve team selection UX in new Project flow

Documentation

/uncc

[jankeromnes]

Work in progress:

[jankeromnes]

New work in progress:

[jankeromnes]

Okay, I think is good enough for now. It's not 100% aligned with the spec, but should give a pretty good idea of what option A feels like (and I almost feel like shipping this as is 🚢).

@gtsiolis @jldec please take a look when you have time. 🙏

[jldec]

I think there is still some test-team UI left over in the code
I created a team called test-team and it shows 23 members (only in the team-select page) just like your yolo team

[jldec]

General feedback: I think this is much easier to use - definitely a huge improvement.

I'm still a bit unsure about the auto-select personal account for any new project started from the dashboard when you're not under a team. I think users will not intuitively know when they're in a personal account context (and creating projects there). Going to /new isn't easy to do manually unless you're in the know.

[jankeromnes]

I think there is still some test-team UI left over in the code
I created a team called test-team and it shows 23 members (only in the team-select page) just like your yolo team

Oh no 🙈 good catch! I'll fix that.

I'm still a bit unsure about the auto-select personal account for any new project started from the dashboard when you're not under a team. I think users will not intuitively know when they're in a personal account context (and creating projects there). Going to /new isn't easy to do manually unless you're in the know.

Hmm, I agree. It's orthogonal to this PR, but seems to be worth a follow-up issue. For what it's worth, I think we have these possible fixes:

a. Re-instate team selection when you create a new project from your personal account context (i.e. revert #6966)
b. Make it easy to move a project from a personal account to a team
c. Implement some UI shortcuts e.g. to "Share access to this project with collaborators" (which could do "create a new team" and "move personal project to that new team" behind the scenes)

... or a combination of a/b/c.

[jankeromnes]

I think there is still some test-team UI left over in the code
I created a team called test-team and it shows 23 members (only in the team-select page) just like your yolo team

Fixed ✅

Ready to be merged if UX works well 👍

Please approve @jldec / @gtsiolis

[jldec]

/lgtm

[roboquat]

LGTM label has been added.

Git tree hash: 9254053cb99d81a3a29a4ec13eb237eced479fb4

[roboquat]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jldec

Associated issue: #6686

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• components/dashboard/OWNERS [jldec]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment