Modernize sorting and filtering in Admin Area > Projects
Problem
Our filtering options are misaligned across the product. In Admin Area > Projects, 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
To align with the other project list pages, we're proposing to update as follow:
- Making the visibility tabs a filter
- Introducing filtered search and sort
- Renaming "Largest repository" to "Repository size"
- Moving the "owned by..." filters to the filter bar
- Introducing tabs for "All" and "Inactive" projects. Inactive projects will include all of the archived projects. In the future, it will also include all of the projects that are "pending deletion" as well.
Implementation guide
- Add Vue mount element to app/views/admin/projects/_projects.html.haml#L1
- Create
app/assets/javascripts/admin/projects/components/app.vue
- Create
app/assets/javascripts/admin/projects/index.js
that mountsapp.vue
- in
app.vue
mountsapp/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
- When filter or sort is change reload the page with correct query params
- Use logic in app/assets/javascripts/pages/admin/projects/components/namespace_select.vue for namespace filter
Edited by Peter Hegman