Add filtering to project dashboard
Description
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).
Solution
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.
![](/-/project/13083/uploads/604c57e06901a1c7efab75247af3442a/filtering__main-menu.png)
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 #54373 (moved) 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.
![](/-/project/13083/uploads/8a58c06bdecd6c2d449fd1db18ce3c0f/mobile.png)
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.