Skip to content

Fetch and search available branches in pipeline editor

Mireya Andres requested to merge pipeline-editor-branch-switcher-query into master

What does this MR do?

For #321655 (closed)

This integrates the getAvailableBranches backend query to the branch switcher in the pipeline editor. It should now fetch the list of available branches for the project and allow the user to search for specific branches.

Branch Switcher Feature

The breakdown of the implementation for the whole branch switcher feature is as follows:

Link Status Progress
!57562 (merged) Add dropdown UI to the pipeline editor
!57941 (merged) When clicking on a branch, switch to that branch and load the correct data
!60465 (merged) Add branch switcher to empty state
you are here 👉 Fetch the branch list from GraphQL

MR Implementation

There is an existing branch selector in the web IDE, but it uses vuex which the pipeline editor is not set up for, so we're using the existing dropdown UI components instead.

It might be helpful to review the MR by commit. The implementation is broken down as follows:

Commit Progress
2ae15055 Remove client resolver for getAvailableBranches
b21991c Use getAvailableBranches query to fetch branches
a2d13c89 Get total number of branches for the project
9b31c5bc Paginate* results when fetching branches
57ffd900 Allow user to search for specific branches

* Results are paginated when the searchTerm is empty (i.e. when we try to fetch all branches), in consideration of projects with a large amount of branches like GitLab.

Local Testing

The feature is under the :pipeline_editor_branch_switcher feature flag, so please enable it first when testing.

Go to CI/CD > Editor and check that the branch switcher works in the pipeline editor!

Screenshots

Search Behavior

Searching Branches

Pagination Behavior

Infinite Scroll

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

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
Edited by Olena Horal-Koretska

Merge request reports