Setup Wizard: Paper cuts UI/UX umbrella

[vovakulikov]

@almeidapaulooliveira recently conducted a design review of the newly implemented Setup Wizard and gathered a few important, and a few minor paper cuts issues; the full presentation you can find here

• Add lock mode to the navigation in the edit UI
• Remove add more code host button/link
• Original issue use radio buttons instead of checkboxes for code host repositories setup. This actually was made intentionally because this is how our existing external services work; you can select the affiliated repositories checkbox, and on top of this, you can pick any other repositories on top of this, yeah the problem exists that if you pick affiliated repositories, then your organisations will be included automatically, but you can pick any other repositories that are not part of your organisations or repositories that are not affiliated with your account. Also, what if you switch to configuration and set affiliated repositories and a few customs repositories? How should UI render this case with radio buttons? This is why I made them checkboxes. We can follow up on this in the next version of this if there is a need for this.
• Use repositories count instead of code host count to disable/enable the next button
• You can create an external service duplicate (code host with the same token). I actually don't see this as a problem, but even if it was a problem, I don't see how we can solve this; code host repositories access tokens are encrypted, so there is no good solution to check the duplicate.
• Repository search issue, but by default, we provide a list of repositories that are from your account but you're searching something this search is global (i think we still try to find repositories from your account first but not sure cc @gl-srgr can you take a look at this)
• Setting button on the sync repositories step leads to the page outside of the wizard. I think having subroute here is too expensive for the first version I'm afraid. But it might be a good follow-up.
• A better error UI for code host connection, originally in designs we have error UI in the footer next to action buttons, but due to lack of space there we have to find a better place for this kind of information
• Small paper cuts
  • The last step icon should be ✔️
  • The access token field should be masked with dots (type="password")
  • The setup wizard navigation button should have different wording

[gl-srgr]

You can create an external service duplicate (code host with the same token).

Agreed, I don't believe we should limit how often a user passes the same token for external service creation

[gl-srgr]

Repository search issue, but by default, we provide a list of repositories that are from your account but you're searching something this search is global (i think we still try to find repositories from your account first but not sure cc @gl-srgr can you take a look at this)

The github search apis we use are always global. Also the results are ranked by github so the user's affiliations will not affect the ranking/sorting of results.

If we want to rank the results by affiliation or filter results by affiliation we will need to implement some pre-processing of the query or post processing of the results. I believe these enhancements are worth considering long term but they won't get implemented soon.

[almeidapaulooliveira]

[Setting button on the sync repositories step leads to the page outside of the wizard...I think having subroute here is too expensive for the first version I'm afraid. But it might be a good follow-up.

I think the settings button should've been shown here. Users didn't finish the wizard yet; they didn't get in touch with the product. They didn't experience a first search. A user has a lot to learn in their onboarding.

Let's let users settle on Sourcegraph first, and they can go to the admin panel for further settings later.

[almeidapaulooliveira]

we provide a list of repositories that are from your account but you're searching something this search is global

We have different problems here. There's the technical side of the problem (global search) and the experience side of the problem:
I, as a user, want to search inside the scope of my organization (the token I am affiliated with).

If we list repositories that they aren't familiar with and don't know where they come from, they will be confused:

• Did I provide the wrong token?
• Did GitHub mess up my repository list?
• Is Sourcegraph having trouble reading my repository list? Is this a bug?

The user doesn't know what technical issues we have. That's why this is a usability issue to consider.

[almeidapaulooliveira]

This actually was made intentionally because this is how our existing external services work; you can select the affiliated repositories checkbox, and on top of this, you can pick any other repositories on top of this, yeah the problem exists that if you pick affiliated repositories, then your organisations will be included automatically, but you can pick any other

We're considering the technical side of a problem, not our users' experience. The user doesn't know how our external services work.

If we let users select Add all my repositories and then select Add selected repositories to only pick two repos to sync will lead to confusion:

• What action will the system take? All or just the two I choose?

Those options are excluded. If you're syncing all, you can't choose only two. Not even our system can't resolve that. Indeed, he ignores the selection and syncs all.

Besides being confusing, the experience here will be perceived as a bug.

[vovakulikov]

If we let users select Add all my repositories and then select Add selected repositories to only pick two repos to sync will lead to confusion:

I don't think this is a fair example, to be honest. I think, in this case, it's clear that these modes work as a superset of all picked repositories. Even if we could implement radio buttons now (and just to be clear, we can't), I don't think it will provide a better experience; as I said, there are many cases where this radio buttons approach doesn't work, for instance.

• I picked my affiliated repositories; how can I pick some other repositories that are not affiliated with me?
• I picked organisation, but not sure the repo I want to have is there; how can I pick org and this repo?

None of this is possible with radio buttons, but with a checkbox, it should be clear to cover. I didn't realise tech problems with this at the beginning during the initial design review. I own you an apology for that, but how it works at the moment makes sense IMO, let have a user testing and validate that this is a problem