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 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 #54373 (moved) 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.