UX: Dropdowns with many items

,

Hello,

we see a common pattern across Foreman UI which is a dropdown with many options. For example on Operating Systems page there is a selection of Family. I almost always pick Red Hat from that list while other user might be setting Debian, Ubuntu or Windows. However we have several dozens of operating systems in that dropdown.

There is the search capability which is a huge improvement, but I was thinking if we can go step further implementing some kind of bookmarking capability, LRU (last recently used) and predefined top entries as well. Any combination or just a one of the mentioned three solution would be much better user experience than scrolling the list or reaching out for a keyboard.

What you think? @ui_ux

1 Like

Patternfly has a dropdown with sections that would work well for this: https://www.patternfly.org/v4/documentation/core/components/dropdown#with-groups-and-dividers-between-groups

Predefined top entries seems like it would be pretty straightforward to add, as a starting point.

Sounds like a good compromise, e.g. for Family we would top Debian, Ubuntu and Red Hat I guess. The only issue is that these are not searchable, we’d need to keep this feature.

Anyway I created a RM ticket:

https://projects.theforeman.org/issues/30812

Sounds like a great addition,
maybe until that feature will be added we could write a seed to add those to the search’s bookmarks,
something like: https://github.com/theforeman/foreman-tasks/blob/master/db/seeds.d/61-foreman_tasks_bookmarks.rb

1 Like

I agree that for the first cut this would be a good feature. We can extend this later with LRU client-side cache or user-defined ones later on, this is a really good start.

Alternatively this could be a global setting, we do have a good setting editor which allows even JSON or YAML. So we could have one setting that users would override with default items for several places.

I think changing the order is a confusing experience. Would favorites be a better solution?

Why? My expectation is to differentiate them from the ordered list, maybe a “star” icon plus a divider so it’s obvious.

I think a visual indicator that they’re different from the static list would help.