Fix ref selector icon for nested ref names

What does this MR do and why?

Fixes the wrong branch/tag icon in the ref selector dropdown when a ref name contains refs/tags/ or refs/heads/ somewhere other than the start.

dropdownIcon used .includes(), which finds the substring anywhere in the name. This meant a branch named refs/heads/refs/tags/user_workflow got the tag icon. The check now uses startsWith() on the leading refs/tags/ or refs/heads/ prefix, the same way selectedRefForDisplay in this component already strips the prefix.

New cases in the renders the correct icon for the selected ref table test:

Selected ref Expected icon
refs/heads/refs/tags/user_workflow branch
refs/tags/refs/heads/user_workflow tag

References

Screenshots or screen recordings

Not included. The only visible change is the toggle icon for refs with nested names, and the table test covers it.

Before After
Tag icon for branch refs/heads/refs/tags/user_workflow Branch icon

How to set up and validate locally

  1. Create a branch named refs/heads/refs/tags/user_workflow in a project.
  2. Open a page that uses the ref selector with symbolic ref names (for example, the repository file browser) and select that branch.
  3. Check that the dropdown toggle shows the branch icon.

Or run: yarn jest spec/frontend/vue_shared/components/ref/components/ref_selector_spec.js

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports

Loading
Loading