Add infinite scroll pagination to the RefSelector component

Problem

The RefSelector component (app/assets/javascripts/ref/components/ref_selector.vue) only loads the first 20 branches/tags with no way to load more. Users must already know to use the search box to find branches beyond the initial set, which is not discoverable. This affects every page using RefSelector: commits, new branch, new tag, pipeline run, default branch settings, and more.

Identified during the review of !225054 (merged) (video with timestamp, discussion).

ref selector showing only 20 branches with no pagination

Proposal

Add infinite scroll to RefSelector. The component already uses GlCollapsibleListbox, which natively supports :infinite-scroll and @bottom-reached props. The x-total header from the branches API is already stored as totalCount in the Vuex store, so the data to determine whether more pages exist is available.

Several other dropdowns in the codebase already implement this pattern and can be used as reference:

  • Pipeline editor branch selector (app/assets/javascripts/ci/pipeline_editor/components/shared/branch_selector.vue)
  • Jira Connect branch dropdown (app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue)
  • Pipeline charts branch dropdown (app/assets/javascripts/projects/pipelines/charts/components/branch_collapsible_listbox.vue)
  • #387517 (closed) added infinite scroll to the "Invite a group" dropdown using the same pattern

Implementation guidance

  1. app/assets/javascripts/ref/stores/actions.js - Add fetchMoreBranches and fetchMoreTags actions that request the next page and append results
  2. app/assets/javascripts/ref/stores/state.js - Track current page/offset for branches and tags
  3. app/assets/javascripts/ref/components/ref_selector.vue - Wire up :infinite-scroll and @bottom-reached on GlCollapsibleListbox
Edited by 🤖 GitLab Bot 🤖