Skip to content

Filter out all settings sections and show empty state if nothing matches search

Thomas Hutterer requested to merge 326749-settings-search-results-don-t-filter-out-all-sections into master

What does this MR do and why?

Resolves #326749 (closed) by adding the .js-search-settings-section to all settings section that haven't had it already, incl settings pages that only have a single section.

Also, settings search now shows an GlEmptyState for empty search results when all sections got filtered out.

Finally, this teaches the SearchSettings component to watch the number of visible sections and if that is 0 it will also hide all elements with a .js-hide-when-nothing-matches-search CSS class. The reason we need this is that some settings pages (like http://gdk.test:3000/-/profile/applications) have many sections, but only one form submit button at the bottom. So far, hiding all sections kept the row with the submit button visible, which looked odd. Now we can add this CSS class to these rows and they will automatically be hidden when everything else is hidden.

Screenshots or screen recordings

Before After
before_settings_search after_settings_search

How to set up and validate locally

Reviewing this is easy, but a bit tedious, as almost 20 different settings pages needed to be touched, and for a full review I'd advise to actually click through all settings pages, not only the changed ones, to make sure I haven't missed anything.

  • Go through all settings pages, for each do the following:
    • Search for something like "a", then "as", then "asdf".
    • You should see sections that don't contain your search term disappear. When nothing matches ("asdf") all sections should be gone, and instead there should be an empty state, asking you to change your search term.
    • Make sure nothing else (no dangling buttons, no sections) is around when we show the empty state.
    • Change your search term back to something that matches ("a"). The empty state should disappear again.

For your convenience, this is the list of places that I've touched, but please note that the new empty state behavior is active on all settings pages, so it'd be best if you just click through them top to bottom. Thank you! 🙇

User Settings

Project settings

Group settings

Admin > Application Settings

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Thomas Hutterer

Merge request reports