Modernize sorting and filtering in Explore > Groups

Problem

Our filtering options are misaligned across the product. In Explore > Groups, the sorting dropdown currently lists six items that could be condensed to three 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.

Proposal

Following what we're doing with Explore > Projects, and the other list pages, we propose to update the search and sort functionality on the Explore > Groups page. For a first pass, we'll just opt for updating the existing functionality. Currently, there is just basic search and sort so, in this issue, we'll focus just on updating those elements as follows:

This update includes the following changes:

• Introduce filtered search component. For the first pass, this will be used for search only. Filters will be added in a follow-up iteration. Filters are still TBD, but may include role and visibility, as shown here.

• Replace the existing sort dropdown with the sorting component. Sort options will include Name, Created date, and Updated date to match the other list pages.

• Remove alert and replace with text under the page header. Example alert:

  For placement of the description text, follow the design in this example. Use the following text:

    - gitlab.com: `Below you will find all the groups that are public. Contribute by requesting to join a group. \[Learn more\](https://docs.gitlab.com/ee/user/group/#view-groups).`
    
    - Self managed: `Below you will find all the groups that are public or internal. Contribute by requesting to join a group. \[Learn more\](https://docs.gitlab.com/ee/user/group/#view-groups).`

Figma

Implementation plan

• Create a new component in app/assets/javascripts/groups_projects/components called filtered_search_and_sort
• Move logic in app/assets/javascripts/organizations/groups_and_projects/components/app.vue#L135
• Mount the filtered search bar in app/assets/javascripts/groups/components/app.vue#L238 and conditionally render based on a new prop
• Fire fetchFilteredAndSortedGroups when filtered search or sort is changed
• Remove app/views/explore/groups/_nav.html.haml
• Remove https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/explore/groups/index.html.haml#L16 and corresponding JavaScript in app/assets/javascripts/pages/explore/groups/index.js#L7
• Add message under the title using gon.dot_com value
  • On gitlab.com the message should be Below you will find all the groups that are public. Contribute by requesting to join a group. \[Learn more\](https://docs.gitlab.com/ee/user/group/#view-groups).
  • On self-managed the message should be Below you will find all the groups that are public or internal. Contribute by requesting to join a group. \[Learn more\](https://docs.gitlab.com/ee/user/group/#view-groups).

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.