Load refs for the "Run Pipeline" form on demand, limit to 100 results per ref type
What does this MR do?
Improve performance of the "Run pipeline" page for projects with many branches or tags (refs).
Fix for: #322170 (closed) and #321790 (closed)
Background
In the original implementation of this page, we loaded all the tags and branches in the HTML payload.
Even though this was not ideal, this was cleverly done by adding the data to an inline javascript which loaded fast enough, although I has the potential to create a large amount of DOM elements in projects with a large amount of refs.
During the migration to Vue this problem was exacerbated as refs data was made reactive by Vue, and the number of DOM elements became higher, as the Vue dropdowns generate more DOM elements than the plain Javascript version.
Solution
Use the same JSON endpoint as the Repository page (e.g. in https://gitlab.com/gitlab-org/gitlab/-/tree/master) to load a limited number of refs and allow the user to filter by searching with a search box, as in the repository pages.
Screenshots (strongly suggested)
Using an example with 200 tags and 200 branches.
Before:
All refs are loaded to the page:
After
Only 100 tags and 100 branches are loaded, and they are loaded only after the user opens the dropdown, additionally the search works by requesting the data to the backend instead of filtering in the frontend:
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
- [-] Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Related to #321790 (closed)