Improve namespace filters in Admin Area > Projects

Background Context: &17782 (comment 2640998341)

We'd like to improve the UX for namespace filters by making the following changes:

• Display the Avatar + Display Name of the selected namespace.
• Display the Avatar + Display Name + Username of the namespace options.
• Create the following sections in the options list:
  • Recently used
  • Groups
  • Users

Design Reference

Implementation Guide

1. Create a query to retrieve the available user and groups namespace in app/assets/javascripts/vue_shared/components/filtered_search_bar/queries/namespaces.query.graphql

query namespaces($search: String) {
  users(search: $search, first: 10) {
    nodes {
      id
      name
      avatarUrl
      fullPath: username
      path: username
    }
  }
  groups(search: $search, first: 10) {
    nodes {
      id
      name
      avatarUrl
      fullPath
      path
    }
  }
}

2. Refactor app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/namespace_token.vue to implement a custom gl-filtered-search-token instead of using base-token:
   • The suggestions should be divided into Recently used, Groups, Users
   • You may use this patch as inspiration. Note that we can't follow this exactly because it uses base-token which isn't compatible with all the features that we need for this component.