## 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](https://gitlab.com/gitlab-org/gitlab/-/issues/15490) is in development at the moment, and additional [build status filter](https://gitlab.com/gitlab-org/gitlab/-/issues/387526) is planned for the future. ## Proposal Introduce [filtered search](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default) on the project list page. Replace the existing sort dropdown with the [sorting component](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-sorting--default). A prototype of how this will work and look is available [here](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-sorting--default). 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 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](https://www.figma.com/file/lIKtBi5ENSNnz4ukZUzrN6/Modernize-sorting-and-filtering-on-Your-work-%3E-Projects?type=design&node-id=4314%3A53097&mode=design&t=XAlWieuYbsbLxhqO-1) 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](https://www.figma.com/file/lIKtBi5ENSNnz4ukZUzrN6/Modernize-sorting-and-filtering-on-Your-work-%3E-Projects?type=design&node-id=4380%3A72673&mode=design&t=XAlWieuYbsbLxhqO-1) will include `Status` (archived and pending deletion) and `Role` (owner). Future iteration could include a visibility filter. - Updating to the sort component. [Sort options](https://www.figma.com/file/lIKtBi5ENSNnz4ukZUzrN6/Modernize-sorting-and-filtering-on-Your-work-%3E-Projects?type=design&node-id=4313%3A51922&mode=design&t=XAlWieuYbsbLxhqO-1) 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 https://gitlab.com/gitlab-org/gitlab/-/issues/18354+, so that work isn't included as part of the work on this issue. [Figma](https://www.figma.com/file/lIKtBi5ENSNnz4ukZUzrN6/Modernize-sorting-and-filtering-on-Your-work-%3E-Projects?type=design&node-id=2806%3A40100&mode=design&t=VVePlbLO3Ww0d7IP-1) -- [Final designs in `Design` tab] <details><summary>Old Proposals</summary> ### Filtering The [segmented control](https://design.gitlab.com/components/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) :point_up_2_tone1: : 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](https://design.gitlab.com/components/filter): * `project type` `=` `archived` * `owner` `=` `me` ### Sorting * Update sorting to [sort component](https://design.gitlab.com/components/sorting)  * `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:  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 <br> Oldest updated | Last updated + `↑`/`↓` | | Last created <br> 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. <img src="/uploads/604c57e06901a1c7efab75247af3442a/filtering__main-menu.png" width=400px> 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 |<img src="/uploads/6d5bf509ea464db81177075dab648f3b/filtering__visibility.png" width=480px> | <img src="/uploads/dfbbc9c5161baab560c7274f2832f5f6/filtering__visibility--finished.png" width=400px> | | Group | <img src="/uploads/eeec93105ea25fa9a2fbc4c7307e7a8f/filtering__group.png" width=560px> | <img src="/uploads/1a68999c15d5b2690828d94fec26922a/filtering__group--finished.png" width=400px> | | Topic | <img src="/uploads/3855e7b396397c384547d45fe75f8323/filtering__topic.png" width=480px> | <img src="/uploads/583895b966f813b21287214e73dfe889/filtering__topic--finished.png" width=400px> | #### Mobile On mobile, the segmented control, search bar and sorting dropdown will all become full-width and appear stacked. <img src="/uploads/8a58c06bdecd6c2d449fd1db18ce3c0f/mobile.png" width=400px> #### 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 </details> 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. <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> *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.* <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> ## Implementation Plan 1. Add new count instance variable `@all_personal_projects` in [`ProjectsController.load_projects`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/controllers/dashboard/projects_controller.rb?ref_type=heads#L68-80) for tab count. ```rb @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`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/dashboard/_projects_nav.html.haml) using tab count and route. ```haml = 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)) ``` 3. Update `is_your_projects_path` variable in [`dashboard/_projects_nav.html.haml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/dashboard/_projects_nav.html.haml#L1) to differentiate between Yours and Personal ```haml - is_your_projects_path = (current_page?(dashboard_projects_path) || current_page?(root_path)) && !params[:personal].present? ``` 4. Delete HAML partial render for `'nav'` in [`dashboard/projects/index.html.haml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/dashboard/projects/index.html.haml?ref_type=heads#L13) to remove reference to inner **All | Personal** nav. 5. Delete HAML partial [`dashboard/projects/_nav.html.haml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/dashboard/projects/_nav.html.haml?ref_type=heads) 6. Remove reference to old search `'search_form'` in [`dashboard/_projects_head.html.haml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/dashboard/_projects_head.html.haml?ref_type=heads#L21-22) 6. Create new shared HAML component `shared/groups_projects/filtered_search_and_sort.html.haml` 7. Add a single element in this component intended to bootstrap a JS application ```haml - # shared/groups_projects/filtered_search_and_sort.html.haml #js-filtered-search-and-sort ``` 8. Add new HAML partial created above below the `= render 'dashboard/projects_head'` in [`dashboard/projects/index.html.haml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/dashboard/projects/index.html.haml?ref_type=heads#L12) 9. Create new file `app/assets/javascripts/groups_projects/init_filtered_search_and_sort.js` 10. 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`](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/147494) component 11. Configure props to correctly match the design requirements 12. Update docs - [View projects](https://docs.gitlab.com/ee/user/project/working_with_projects.html#view-all-projects-for-the-instance), 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.`