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:
- 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, andUpdated dateto match the other list pages. In addition, we propose to update theLargest groupsort option toRepository sizeto make the filter option clearer, and better align it with the Admin project list page.
Implementation Plan
- Add
%h1.page-titleof Groups toapp/views/admin/groups/index.html.haml - Update https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/admin/groups/index.html.haml#L6 to
#js-filtered-search-and-sortand render theapp/assets/javascripts/groups_projects/components/filtered_search_and_sort.vuecomponent - Configure props to correctly match the design requirements
Edited by Zack Cuddy
