Improve run manual pipeline view performance

Problem

We load all branches and tags with no limits for our ref selection dropdown.

branch_refs: @project.repository.branch_names.to_json.html_safe,
tag_refs: @project.repository.tag_names.to_json.html_safe,

With the older HAML implementation we did the same but Vue doesn't behave so nicely with all this data. So we are experiencing some slow load times. The slow load times only come into play when a certain project has a large amount of refs. For example a project could have 5000 tags and 5000 branches.

Proposal

  1. Move away from passing data from rails to Vue through the data attributes. And instead use the Public API or GraphQL API to fetch a limited amount of tags/branches for a project. And use a search api for the requested branch/tag and fetch just that tag.

Where is this in the UI?

Screen_Shot_2021-02-19_at_1.20.51_PM

Edited by Payton Burdette