Frontend: Show only 30 environments in variables modal dropdown
Problem
We are currently showing 100 environments from the CI variables modal environments dropdown. The problem is that 1, this is a poor experience, and 2, we are not paginating, so you cannot see all environments anyway.
Proposal
To solve this, we want to show only the first 30 items and add a search bar to the dropdown, which with a query, will always return a maximum of 30 items. This way, we get a better experience and we load less items from the API and therefore make less heavy requests.
We'll show 30 items based on the recommendation here.
For variables, the 90th Percentile of projects and namespaces will use anywhere between 10 - 25 variables. For environments, I believe that loading at least 30 environments (since the 90th Percentile of projects with 503 environments will use 29 environments) will help reduce the number of 503 errors that occur.
This will be an easy change for project environments, since we already use a separate GraphQL query for fetching them.
Currently, we only get the list of group environment scopes through the the fetch query for group variables. Since we are planning to paginate the variables query, this means the dropdown will only show environment scopes present in that page. And since we're not doing a search query for the search, this means that searching for environments outside of this page will be impossible.
For a consistent and less confusing experience, group environment scopes should also have its own fetch query. This will also enable a proper search for them.
We do not have environment scopes for instance variables, so there's no need update required for them.
This will be developed under the ci_limit_environment_scope
feature flag. Rollout issue: #395003 (closed)