Skip to content

Modernize sorting and filtering in Your Work > Projects

Problem

The project dashboard at /dashboard/projects is intended to help with project search and discoverability. Currently, it uses a two-level tab design pattern to accomplish this. This is limited; the search options we offer only allow filtering by name, and this leaves room for improvement on large instances (esp. at the scale of GitLab.com).

Also, the sort element on the projects page is a dropdown, but it should be a sort component.

While working on this issue, please keep in mind that there is additional functionality in development that might impact the design. A project language filter is in development at the moment, and additional build status filter is planned for the future.

Proposal

Introduce filtered search on the project list page. Replace the existing sort dropdown with the sorting component. A prototype of how this will work and look is available here.

This change will improve the ability to search and filter the list page, create an opportunity to introduce additional filter options in future, and will better align the experience on the project list with the other list pages in the product, for example, the issue and MR lists.

Screenshot_2024-02-29_at_10.34.14_AM

The changes included:

  • Removing the double tabs under Yours and moving Personal to the main tab selection. There should be one line of tabs: Yours, Most starred, Personal and Inactive.
  • Replacing current name search with the filtered search component. The first-pass filters for Yours, Starred, Personal, and Inactive tabs will include Language (using the existing language filter options) and Role. For the first pass, the role filter will narrow options by owner only; we'll add filters for additional roles as part of a follow-up. The filters for the Inactive tab will include Status (archived and pending deletion) and Role (owner). Future iteration could include a visibility filter.
  • Updating to the sort component. Sort options for all tabs will include Name, Created date, Updated date and Stars.
  • Update documentation: https://docs.gitlab.com/ee/user/project/working_with_projects.html#search-in-projects

Note that tabs on this list page are being updated as part of Make "Your projects" more focused on "you" (#18354 - closed), so that work isn't included as part of the work on this issue.

Figma -- [Final designs in Design tab]

Old Proposals

Filtering

The segmented control (all / personal) that has been suggested further below is a deprecated component. We could get around this by removing that all together and in the filter have a token that represents personal projects. Perhaps it could be combined with owner and slightly renamed, like:

  • project type = owned by me (I am the owner of a project, but the project can be under any namespace)
  • project type = personal (I am the owner of the project and it is in my personal namespace)

👆🏻 : the wording here might need to be improved. That means we have a only a filter bar and a sort component.

  • Move options to show/hide archived projects and options about ownership that are currently listed in the dropdown to filter component:
    • project type = archived
    • owner = me

Sorting

  • Update sorting to sort component Screen_Shot_2022-09-23_at_12.04.40
  • Name and Name, descending get merged to Name. Ascending and descending will be handled by the sorting component.
  • Updated date and Oldest updated get merged to Updated. Ascending and descending will be handled by the sorting component.
  • Most stars gets converted to Stars. Ascending and descending will be handled by the sorting component.
  • Last created and Oldest created get merged to Created. Ascending and descending will be handled by the sorting component.
  • The result should be in line with the sorting behaviour for groups: Screenshot_2022-12-06_at_19.10.45

Add a full-width search bar with smart filter capabilities below the first-level tab bar.

Tab Current Design
Your projects your-projects--current your-projects
Starred projects starred-projects--current starred-projects
Explore projects explore-projects--current explore-projects

The changes to be made are:

  • Second level of tabs: This secondary tab bar currently displayed under Your projects and Explore projects will be replaced with a segmented control to the left of the search bar. Clicking on the segmented control should automatically alter the list below.
  • 'Most stars' view: Under 'Explore projects' there is currently a 'Most stars' view. This simply orders the list of public projects by star number. We will remove this option from the segmented control and rely on the sorting dropdown to achieve this ordering.
  • Visibility dropdown: This dropdown will be removed, as it will be replaced with tokens in the search bar.
  • Search bar: The current search bar performs the search as the user types. Since we will now have tokens, we should wait for the user to hit Enter or press the magnifying glass button to perform the search.
    • The placeholder will be changed to Search or filter projects…
  • Background color: Change the background color of the whole section to #fafafa to match the search in othe places, like Issues and MRs.
  • Sorting dropdown: Add a Sort by label to its left and append an ascending/descending order button to its right. This will require a change to the options inside the dropdown:
Current New
Last updated
Oldest updated		 Last updated + ↑/↓
Last created
Oldest created		 Created date + ↑/↓
Name Name + ↑/↓
Most stars Stars + ↑/↓

Filtering

When the user starts typing, a dropdown with suggestions for the different filter types will pop up.

Filtering will be done through tokens. The three types of filtering available will be:

  • Visibility: Public, Internal or Private.
    • Format: visibility:level
    • Token format: Icon + visibilty level.
    • Note: Visibilty filtering is currently only available under Explore projects. We need to make sure this can be applied to all tabs.
  • Group: The group the project belongs to.
    • Format: group:@group
    • Token format: Avatar + full group name.
    • Note: Should this be changed to Namespace? Projects can belong to users, not only groups.
  • Topic: Project topics.
    • Format: topic:topic
    • Token format: Plain text.
    • Note: These are not currently displayed in the list. Perhaps we should wait until gitlab-ce#54373 to add this type of filtering.

Since projects can only have one visibility level and parent group, once one these filters is applied, the corresponding option should be removed from the main menu. Only topic filtering accepts multiple values.

Filter Menu Token
Visibility
Group
Topic

Mobile

On mobile, the segmented control, search bar and sorting dropdown will all become full-width and appear stacked.

Original proposal

  • Introduce a filter bar below the three Your projects, Starred projects, and Explore projects options.
  • The filter bar should use the same pattern we use in issues and boards.
  • Users should be able to filter the project list by:
    • Group
    • Project topic
    • Visibility level

Please see the related issues below for specific issues for UX and FE. Once all issues have been closed, this issue may also be closed.

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.

Implementation Plan

  1. Add new count instance variable @all_personal_projects in ProjectsController.load_projects for tab count.
    @all_personal_projects = ProjectsFinder.new(params: { personal: true, non_public: true, archived: false, not_aimed_for_deletion: true }, current_user: current_user).execute

2.. Add new menu item Personal to dashboard/_projects_nav.html.haml using tab count and route.

  = gl_tab_link_to filter_projects_path(personal: true), { item_active: params[:personal].present?, class: 'shortcuts-activity', data: { placement: 'right' } } do
    = s_("ProjectList|Personal")
    = gl_tab_counter_badge(limited_counter_with_delimiter(@all_personal_projects))
  1. Update is_your_projects_path variable in dashboard/_projects_nav.html.haml to differentiate between Yours and Personal
- is_your_projects_path = (current_page?(dashboard_projects_path) || current_page?(root_path)) && !params[:personal].present?

  1. Delete HAML partial render for 'nav' in dashboard/projects/index.html.haml to remove reference to inner All | Personal nav.

  2. Delete HAML partial dashboard/projects/_nav.html.haml

  3. Remove reference to old search 'search_form' in dashboard/_projects_head.html.haml

  4. Create new shared HAML component shared/groups_projects/filtered_search_and_sort.html.haml

  5. 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

  6. Add new HAML partial created above below the = render 'dashboard/projects_head' in dashboard/projects/index.html.haml

  7. Create new file app/assets/javascripts/groups_projects/init_filtered_search_and_sort.js

  8. In new file, add Vue boostrapping logic for #js-filtered-search-and-sort and render the app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue component

  9. Configure props to correctly match the design requirements

  10. Update docs - View projects, as an extension of the first step, for instance: ... select Search or go to. When searching for a project, you must enter at least three characters.

Edited by Peter Hegman