Modernize sorting and filtering in Your Work > Groups
Problem
Our filtering options are misaligned across the product. In Your Work > Groups, the sorting dropdown currently lists six items that could be condensed to three if we would also add the sorting element. See also: https://design.gitlab.com/components/sorting. This will help with the visual alignment across the product.
We should check what this looks like for self-managed users in relation to this issue.
Proposal
Following what we're doing with Your work > Projects and the other list pages, we propose to update the search and sort functionality on the Your work > Groups page. For a first pass, we'll just opt for updating the existing functionality. Currently, there is just basic search and sort so, in this issue, we'll focus just on updating those elements as follows:
This update includes the following changes:
- 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 still TBD, but may include role and visibility, as shown here.
- Replace the existing sort dropdown with the sorting component. Sort options will include
Name
,Created date
, andUpdated date
to match the other list pages.
Implementation Plan
- Create new shared HAML component
shared/groups_projects/filtered_search_and_sort.html.haml
- Add a single element in this component intended to bootstrap a JS application
- # shared/groups_projects/filtered_search_and_sort.html.haml #js-filtered-search-and-sort
- Replace
.top-area
inapp/views/dashboard/_groups_head.html.haml
with new HAML component created above. - Create new file
app/assets/javascripts/groups_projects/init_filtered_search_and_sort.js
- In new file, add Vue boostrapping logic for
#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
- Update docs - View groups, as an extension of the first step, for instance:
... select Search or go to. When searching for a group, you must enter at least three characters.
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.