Explore richer quick-pick support

[chrmarti]

Related: #238, #11468, #16445, #20944, #21372, #23633, #34088, #35785, #35993, #38225, #39969, #45214, #45466, #45583.

[chrmarti]

Collecting a few recordings of current workarounds in OneNote.

Some obvious issue:

• Select subscriptions in Azure Account extension:

  • Flickers because the Quick-Pick is reopened after each selection.
  • Lost scroll state because Quick-Pick is reopened.
  • No 'OK' button to confirm.
  • No 'Cancel' button to bail.
  • No native checkboxes.

• Create & deploy website in App Service extension:

  • Flicker between steps.
  • No 'Next'/'Finish' button to confirm.
  • No 'Cancel' button to bail.
  • No 'Back' button to reconsider previous step.
  • Lost state when closing QuickPick inadvertently or for researching some input.
  • Message boxes appear bottom right of the window, other steps are top center.
  • No progress indication between steps when a long operation is running.

[chrmarti]

Moqups:

• multi-select-moqup.pdf
• create-website-moqup.pdf

[eamodio]

Any chance #45869 can be included in the investigation/exploration?

[chrmarti]

@eamodio We'll keep that in mind, but it won't make the high priority list at this time.

Everyone: Here are some variations on the single item picker in the multi step flow:

• The first one comes with just 'Back' and 'New' buttons at the bottom, omitting 'Next' and 'Cancel' which can be reached by selecting an item with a left mouse click or the Enter key and clicking outside the picker or the Escape key.
• The second one improves on the actions as list items by separating them as their own 'group'.
• The third and fourth show the actions as action bar items at the top in different positions.

I also include the previous variants at the end for reference.

single-item-picker-in-multi-step-flow.pdf

[eamodio]

@chrmarti Thanks.

My 2c — I much prefer the 2nd option (grouped actions) as it is easier to navigate with the keyboard and feels more extensible. At the same time, the 3rd option is also interesting, especially if it can be mixed with the 2nd option (if desired).

It seems like option 2 adds support to the quick pick for grouping, while option 3 adds support for a navigation group. Both of which I can see being useful (and also very similar in to menu commands).

[ejizba]

A few things:

1. I love groupings for quick picks. That being said, I think we also need to consider inputBoxes and groupings wouldn't really help in that situation. For example, the first thing I do after selecting "New Resource Group..." is enter the new name in an input box. I think having a "back" button like in the 1st or 3rd options would make the most sense for both input boxes and quick picks (although I don't think the "new" button is necessary for input boxes)
2. Not a fan of "New" as the bottom right button in option 1. I'm just too used to that location being the "confirm" button and so I feel like people would click it all the time as if it were the "next" button without reading the name

[chrmarti]

Good points. It has been pointed out that one issue with 1) is that the buttons change vertical position when the list is filtered and when moving between steps. That makes 3) and maybe 4) the preferred options for now. I will do some more mockups.

[chrmarti]

Going with the toolbar to the right of the filter field for now. Here are two more sets of mockups: Both show the 3 input types (single-select, multi-select and single-line text) after each other as they might appear in a multi-step input sequence. The second one adds a title area that holds the title the number of steps and the toolbar.

• multi-step-with-toolbar.pdf
• multi-step-with-title.pdf

[eamodio]

How extensible will those options be? Is it similar to the navigation group for menus? Will things need to be known completely up-front or will you be able to control/change them at each step? I can see some of this being applicable to GitLens, but in my case there isn't a known number of steps.

[chrmarti]

I haven't spent much time thinking about the API yet. You would probably pass the actions with each step, with the back and forward actions being given. The number of steps could be updated along the way or omitted.

[HoboKristian]

Would it also be possible to make it more decorable? Something like adding a small color-indicator next to items.

[chrmarti]

@HoboKristian That is very likely beyond the scope of this issue. Please check if any of the issues listed above in the description cover your case and create a new issue if not. Thanks.

[ArthurMa1978]

Would it support cross extension navigation? like extension A invoke a command of extension B, then the 'back' Button / Action can pull back to extension A.

[chrmarti]

Implemented the multi-select picker and did mockups for multi-step input for March. Closing as this concludes the exploration. Will track additional work in new issues.

[chrmarti]

@ArthurMa1978 Cross-extension navigation might be possible with the close cooperation of both extensions. But I don't have a draft of the API yet, so it is hard to tell for sure at the moment.

[ArthurMa1978]

@chrmarti got it, let's check once the API is ready, thanks a lot !

[chrmarti]

Join the API discussion here: #49340