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 date
to match the other list pages. In addition, we propose to update theLargest group
sort option toRepository size
to make the filter option clearer, and better align it with the Admin project list page.
Implementation Plan
- Add
%h1.page-title
of 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-sort
and render theapp/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
component - Configure props to correctly match the design requirements
Edited by Zack Cuddy