Skip to content

Modernize sorting and filtering in Admin Area > Groups

Problem

Our filtering options are misaligned across the product. In Admin Area > Groups, the sorting and filtering should be updated to follow the pattern used on other pages. This will help with the visual alignment across the product.

Proposal

Update the Admin group list sort/filter patterns to better align it with the planned updates to group lists elsewhere in the product. For a first pass, that would include the following changes:

Admin___Group__3_

  • Add a "Groups" header
  • Introduce filtered search component. For the first pass, this will be used for search only. Filters will be added in a follow-up iteration. Filters are TBD, but other group list filters may include role and visibility.
  • Replace the existing sort dropdown with the sorting component. Sort options will include Name, Created date, and Updated date to match the other list pages. In addition, we propose to update the Largest group sort option to Repository size to make the filter option clearer, and better align it with the Admin project list page.

Implementation Plan

  1. Add %h1.page-title of Groups to app/views/admin/groups/index.html.haml
  2. Update https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/admin/groups/index.html.haml#L6 to #js-filtered-search-and-sort and render the app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue component
  3. Configure props to correctly match the design requirements
Edited by Zack Cuddy