Update team selection design for onboarding flow

[gtsiolis]

Problem to solve

The Select Team step in the New Project onboarding flow contains some rough edges.

In the example below, a user "John Smith" (user-id gptest1) has selected the "website" repo on the left. The next step is the page outlined in grey on the right.

1. The repo was selected in the previous step, but the 2nd line still says "Select a Git repository on github.com (change)". It would be nice to see where you are in the flow.

2. When this is a new user, there is no existing team to select. The actual choices are either to create a new team, or to skip team creation and add the new project under your personal account. It would help to make this explicit.

3. Showing just the name of a personal account can be confusing, since that is not recognizable as a choice of "team".

4. Without hovering, there is no visual indication that the personal account name John Smith is one of the two (selectable) options.

The current design is also using unnecessary borders and lacks some labels for differentiating the personal account from team entries.

Proposal

Splitting the designs from #4951 into a smaller MVC issue that contains updated designs specs and focuses solely on the omnboarding flow, let's update the team selection design for onboarding flow.

This does not take into account any changes that are needed for the header section of the onboarding flow but focuses on the team selection elements. 💡

This approach also removed the buttons, re-using the same pattern used elsewhere in modals for parallel workspaces, limits reached, and more.

Team Selection

See relevant specs (WIP).

[jldec]

Thanks for those designs @gtsiolis - I took the liberty of listing the rough edges I saw in the existing page and adding a screenshot in the description above.

[jldec]

@gtsiolis, please let me know if you have questions about the list I added to the issue desciption above.

[gtsiolis]

@jldec I think points [2], [3], and [4] are partially or fully addressed with the proposal in the issue description, right?

Currently, 🅰️ exploring ways to improve these issues using the existing proposal and 🅱️ thinking how we can resolve the first point regarding the misleading header and flow phase indicator. Let's meet when I'm back next week and sketch together. What do you think?

[jldec]

I would say 2, 3, 4 are all more important than 1
It would be good to address those explicitly.

[jldec]

Another interesting idea (credit @svenefftinge) to reduce the amount of cognitive load required from users:

How about providing a default selection/name (and offer a simpler [continue] button) so that you can get through this page without necessarily making a conscious selection decision.

The proposed default would be:

• select the personal account for personal repos
• select new team, pre-populated with the same name as the org, for org-owned repos

[svenefftinge]

FWIW I think we could stay with the current design if we just make the Continue button on the individual account always visible and prefill the team with the name of the org (adding a number, when there's a conflict).
Also, I too would be in favor of skipping the entire step when a user imports a personal project.

[jankeromnes]

Here is what I think is the simplest possible fix here: #6966

In summary:

• When clicking on New Project from a specific team, we don't ask (unchanged)
• When clicking on New Project from your personal account, we don't ask (new with above PR)
• When visiting /new without context, we ask under which team or personal account to create the Project (unchanged)

Happy to discuss tomorrow! 🙂

[loujaybee]

Relates to: #6969

[jldec]

Notes from sync with @jankeromnes and @gtsiolis

• Decision is to use a single-click in-list selection model (A) instead of 2-step select + [Continue] (B)
• Each list item has a small indicator to help users understand that it is selectable (part of the list) and shows the selection state.
• List items can be selected without any button showing on hover
• The last item "New Team" can show an input with dropdown (just like today)

Additional behaviors for defaults will require a separate issue and PR - possible inputs for default behavior are

1. project repository context - org/repo or user/repo
2. dashboard context - top level (personal) vs team

Note that the dashboard context is not available when the /new flow is initiated from outside the dashboard

[jldec]

/schedule

[roboquat]

@jldec: Issue scheduled in the meta team (WIP: 0)

In response to this:

/schedule

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[jankeromnes]

/assign