New environments search UI (Simplified version for better performance)

Search that we introduced in the #10754 (closed) should be very convenient: it just filters the data on environments page. However, it's not very performant, and maintaining it's speed can be hard in the future.

We may consider simplifying the search to just show first 5 matching rows as we do for protected environments search:

Screen_Recording_2022-09-14_at_12.29.05

And once users click on the environment name, we'll redirect them to the environment page: https://gitlab.com/gitlab-org/gitlab/-/environments/1178942

Implementation guide

We already have search parameter in the GraphQl resolver:

{
  project(fullPath: "gitlab-org/gitlab") {
    environments(states: "available", search: "review/101") {
      nodes {
        id
        name
      }
    }
  }
}

So it should be a purely frontend task unless we want more data.

We will need to utilize GlSearchByType and the GlFilteredSearchSuggestionList together to display the autocomplete list. GlFilteredSearchSuggestionList emits an event that will allow us to directly navigate to the environment's page. It should be only one MR to implement and use this.

Note: the individual environment page currently maybe less useful that the index page, so directing search to it may be less useful for users.

UX Proposal

• Simplify search to a dropdown showing the first 5 results.
• If more than 5 results, show a prompt to let user know to keep typing for more refined results.
• Environment name links to Environment Details Page for that environment.
• Show loading spinner in search bar if search is taking longer.

Proposal

Full UX Flow ✨

[All Search Variants](#375244[Search_Versions.png]