Add Vue ref selector component
What does this MR do?
Adds a reusable ref selector Vue component. This is the first step towards #214244 (closed).
This component is the equivalent of the Create from dropdown on the New Tag page (for example, this page).
Context
This MR is part 2 of 2:
- Add Vuex store and tests (!35872 (merged))
- Add Vue component and tests (this MR)
This breakdown is an attempt to make this large change easier and quicker to review.
This store and component is not yet used anywhere: it is being added in preparation for the New Release page being added in #214244 (closed). Because of this, it is safe to merge this MR (and !35872 (merged)) at any time.
Differences/enhancements compared to existing ref selector component
Compared to the existing ref selector mentioned above, this component adds a few new features:
- Commits with a matching SHA are shown in the dropdown
- The existing selector allows a SHA to be pasted, but no commit information is provided in the dropdown. This allows an invalid SHA to be selected.
- Refs are grouped by Branches/Tags/Commits headings
- The headings mentioned above show total counts (not necessarily the number shown, which may be less)
- The default branch is highlighted with a badge
- Search is done server-side
- The existing selector required that all refs be rendered into the page's HTML. (On
gitlab-org/gitlab
, this is over 6000 items!)
- The existing selector required that all refs be rendered into the page's HTML. (On
- Each category (branches, tags, commits) will show a maximum of 20 items. Users must type additional text in order to find items that don't appear in the initial 20.
- Loading state, "no results" message
Screenshots/GIFs
GIF
Note: Loading behavior has been updated since this GIF was taken. See the Loading behavior screenshot above.
Testing locally
This component isn't used anywhere (yet), so it's a little tricky to test locally.
To test locally, you can apply this Git patch, which will scaffold a few temporary changes that will allow you to view the component inside the app: local-testing-2.patch
To apply, check out this branch and run git apply local-testing-2.patch
.
Then, start a local instance of GitLab and navigate to user/project/-/releases/new
.
Related to #214244 (closed)