Skip to content

Modernize sorting and filtering in Group overview

Problem

Our filtering options are misaligned across the product. In Groups, the sorting and filtering already follows a more modern pattern. However, the search bar is very small and the whole search and filter element could be extended to follow the page spanning design used on other pages. This will help with the visual alignment across the product.

Screenshot_2024-01-03_at_13.43.05

Proposal

  • Change Archived projects tab to Inactive: #436392 (closed)
  • Update the wording of the sort options to align with how we present them on other pages (see mockup)
    • Change Created to Created date
    • Change Updated to Updated date
  • Move search element underneath tabs and span the same width of the page as used for the group list (see mockup)
  • Have the timestamps match the sorting, so that the last updated date is shown when sorting by updated_at and the created date is shown when sorting by created_at.

image

Implementation guide

  1. Switch app/assets/javascripts/groups/components/overview_tabs.vue#L228 to ~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
  2. Use CSS to move the filter and sort below the tabs
  3. Update sort options names in app/assets/javascripts/groups/constants.js#L34

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.

Edited by Christina Lohr