showing massive list of extensions does not scale - can we improve ?

[maxandersen]

Description

when starting on code.quarkus or in IDE or even on cli we currently default to show the full list of extensions with some grouping and basic filtering of non-user extensions.

That list can be quite daunting for new users.

Can we come up with a simpler initial experience ?

some constraints mentioned in offline discussions:

• having some grouping/bundles/archetype that defines a set of extension could work; show such grouping first but still allow adding/removing individual extension
• want to avoid just adding tons of extensions; we want to encourage simple/small dependency set
• having extension of extension could work but it prohibits/limits deselection since the pom/dependency chain would be fixed

[insectengine]

Main View: https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/

• Note: One planned interaction would be if you hover over a group link, you'd get a list of those extensions. You can see this by clicking on the top right "foo extensions" link (only way I could show this via the wireframe software).

GROUPED MODE VIEWS

Grouped View with Two Groups selected: https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/screen/95cf89eb-4a2d-4d54-aa76-023d55c3bb39

• The use can select one or more groups to combine. If they do so any groups will be disabled (greyed out).
• As they are selected, the associated extensions are added to the extension list on the left.
• at any time, they can select the search box or View full list to switch to full extension expert mode to view all extensions.

Grouped Extensions: Expert Mode https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/screen/f1c1ffb9-dc9e-477

• When the user goes to expert mode with selected groupings, their current selected extensions are checked.

EXPERT MODE VIEWS

• Expert mode is accessed via the main screen by 1) Clicking the search bar. 2) Clicking the "View Full List" link 3) Clicking the arrow at the bottom

Base Expert Mode: https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/screen/b5e4e782-10e9-4ab5-bd9f-99e5d7662e50

• functions like current extensions list on code.quarkus
• Search bar has pulldown filter with presets (TBD) to reduce full list into smaller sets. (Status, category, etc.)

Search Filter Applied: https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/screen/6c59b689-c89a-4b86-a154-e150e4bd581d

• When the filter is applied, this is visible below the search bar and is removable via clicking the "x".

Search Results: https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/screen/80f8f208-234a-40c7-aa58-7a808ad2566e

• Once the user types in parameters, they get a filtered list (scrollable)
• We also search the out of platform extensions and present a link to them above the search results. If the user selects the link, they get the out of platform modal overall (below)

OUT OF PLATFORM MODAL: https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/screen/b3b5d269-ff99-47a9-8d41-0d8fe85985ba

• The user sees a scrollable list of all applicable extensions that are out of platform (there is a visual indicator).
• The user can multi-select extensions and then hit "done" to get out of this screen and they are added to the "selected extensions" on the left (below)

OUT OF PLATFORM EXT added to list: https://xd.adobe.com/view/a207a421-e1b6-4a5e-9ef8-834c5ace662b-f754/screen/576288b2-cbc3-4a45-aa14-b7b3f035773b

• The OoP Extensions are added to the list but they have the visual indicator that they are different than regular extensions.

[insectengine]

Alternative: Light background.

I've created a version that has a light background to minimize the contrast between the left configure side verses the right extension side.

https://xd.adobe.com/view/912a7d79-0836-4e21-8987-fc4d8b5e07ae-c479/ (all of the screens are the same)

[insectengine]

Alternative: Light background with sticky generate bar.

I created a version with the light background but addresses the posted concern that the generate button isn't visible enough. This uses a sticky bar on that will align with the bottom of the user's screen.

https://xd.adobe.com/view/d97672f6-9a4f-4e1e-979d-71b90f2dd3bb-8c25/ (all of the screens are available as in the original posted wireframe)

[ebullient]

For CLI, see #16154 / #17765 (to at least allow viewing/filtering things by category)

[mkouba]

@maxandersen Any progress here? I've removed the needs-triage label because it seems that stakeholders agree that it should be improved somehow ;-)

[quarkus-bot[bot]]

/cc @ebullient