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.
The changes included:
- Removing the double tabs under
Yours
and movingPersonal
to the main tab selection. There should be one line of tabs:Yours
,Most starred
,Personal
andInactive
. - 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) andRole
. 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 includeStatus
(archived and pending deletion) andRole
(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
andStars
. - 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)
- 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
-
Name
andName, descending
get merged toName
. Ascending and descending will be handled by the sorting component. -
Updated date
andOldest updated
get merged toUpdated
. Ascending and descending will be handled by the sorting component. -
Most stars
gets converted toStars
. Ascending and descending will be handled by the sorting component. -
Last created
andOldest created
get merged toCreated
. Ascending and descending will be handled by the sorting component. - The result should be in line with the sorting behaviour for groups:
Add a full-width search bar with smart filter capabilities below the first-level tab bar.
Tab | Current | Design |
---|---|---|
Your projects | ![]() |
![]() |
Starred projects | ![]() |
![]() |
Explore projects | ![]() |
![]() |
The changes to be made are:
- Second level of tabs: This secondary tab bar currently displayed under
Your projects
andExplore 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…
- The placeholder will be changed to
- 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.
- Format:
- 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.
- Format:
- 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.
- Format:
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
, andExplore 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
- Add new count instance variable
@all_personal_projects
inProjectsController.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))
- Update
is_your_projects_path
variable indashboard/_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?
-
Delete HAML partial render for
'nav'
indashboard/projects/index.html.haml
to remove reference to inner All | Personal nav. -
Delete HAML partial
dashboard/projects/_nav.html.haml
-
Remove reference to old search
'search_form'
indashboard/_projects_head.html.haml
-
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
-
Add new HAML partial created above below the
= render 'dashboard/projects_head'
indashboard/projects/index.html.haml
-
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 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.