Modernize sorting and filtering in Explore > Projects

Problem

Our filtering options are misaligned across the product. In Explore > Projects, the sorting dropdown currently lists several items that could be condensed if we would also add the sorting element. See also: https://design.gitlab.com/components/sorting. This will help with the visual alignment across the product.

This is similar to work done in #25368 (closed).

Proposal

Following the proposal in #25368 (closed), let's update the existing search and sort components so they are more consistent with the rest of the platform. This change will improve the ability to search and filter the list page, create an opportunity to introduce additional filter options in future, and better align the experience on this list page with the other list pages in the product, for example, the issue and MR lists. Here's how it will look, visually:

This update includes the following changes:

• Updating the order of the tabs.
• Introducing an Active and an Inactive tab. The active tab will include all projects that aren't archived. Following the proposal in Modernize sorting and filtering in Your Work > ... (#25368 - closed), the Inactive tab will display the projects that are archived.
• Introduce filtered search. The first-pass filters for the Trending, Most starred, and All tabs will include Language (sub-filters the same as existing options) and Role (sub-filters to include just Owner for a first pass; additional filters added in #437921). The filters for the Inactive tab will include just Role(with Owner as the sub-filter) for the first iteration, with a status filter being added later in #437920.
• Replace the existing sort dropdown with the sorting component. Sort options for all tabs will include Name, Created date, Updated date and Stars.
• Add instrumentation to the "Inactive" tab to see if, in fact, anyone looks at archived content in the "Explore" context. If not, we will consider deprecating the display of archived content on this page, in future.

The default sorting mechanism applied per tab should be as follows:

• Most stars - sort by Stars
• Trending - sort by Updated at
• All - sort by Updated at
• Inactive - sort by Updated at

Figma

Implementation plan

1. Use filter search component added in #434469 (closed)
2. Move Show archived projects filter (?archived=true) into a new tab called Inactive
3. Move language filter into the filter bar
4. Move Owned by me into filter bar as Role -> Owner
5. Above component should reload the page with correct query parameters when submitted
6. Mount component in app/views/shared/projects/_search_form.html.haml#L24
7. Update documentation

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.