Engineering discovery: Create a shared branch selector Vue component

What do we need?

In Secure, we are planning on implementing a feature that will let users select one of their project's branches in order to run a DAST scan to be associated to that branch.

Related issue: #276484 (closed)

The selector should be a dropdown with:

• A search input.
  • The filtering should happen server-side via AJAX queries.
• A list of alphabetically sorted branches.
  • The sort order might change in future iterations if we feel like a more practical one can be used. For example:
    • We might want to force the project's default branch to always be the first item.
    • Sorting by most recently updated branches might make more sense.
    • If we do these sort order changes, we might want to make them configurable.
• TBD: In its initial state, the dropdown should either be blank (with a Select branch label), or have the default branch selected by default. We might want to make this configurable as well.

Long-term, we'd like the branches to be fetched via the GraphQL API. Note that our GraphQL doesn't seem to have an endpoint for fetching a project's branches yet, so that would have to be implemented as well.

What have we looked at?

We have similar components in a few places in GitLab. Here are the ones we have considered:

app/assets/javascripts/ref/components/ref_selector.vue

This component is used in the New Release form: https://gitlab.com/gitlab-org/security-products/dast-testing/-/releases/new

Here are a few reason for not using it:

• It lives in the ref directory, which indicates that it hasn't been built to be reused in other places.
• It's based on a Vuex module, which makes extracting as a reusable component a bit more tedious.
• It is not limited to selecting branches as it also exposes tags.
• It uses the REST API to fetch branches. This is fine, but we'd ideally have the option to migrate to the GraphQL API instead.

ee/app/assets/javascripts/approvals/components/branches_select.vue

This component is used in the Add approval rule form in a project's Settings > General Merge request approvals (requires maintainer access to the project).

Reasons for not using it:

• It is technically tied to the approvals feature (lives in the approvals directory, contains some code specific to approvals, etc.).
• It only fetches protected branches.
• It uses jQuery and select2.
• It uses the REST API.

So what's our plan?

The components mentioned above being very close to what we need feature-wise, we feel like there's an opportunity to build a shared component that would be inspired by them, and that could replace them down the line if we're able to make it flexible enough. The shared component could be potentially reused anywhere we need to provide a branch selector, like in the New merge request form for example: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new

Timeline

1. Gather feedback from engineers in other teams to see how we can best collaborate on building this new component.
2. Propose an implementation plan for the MVC. The first version should use the REST API as well, because it already exposes the required endpoint.
3. Implement the required GraphQL endpoint. Might require feedback from backend engineers, specifically from devopscreate.
4. Refactor the component to use GraphQL instead of REST.
5. Later iterations, TBD...

/cc @djadmin @nmccorrison