Skip to content

Add Vue ref selector component

Nathan Friend requested to merge nfriend-add-vue-ref-selector into master

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).

Click here for a screenshot of the existing Create from dropdown

Screen_Shot_2020-06-24_at_8.56.14_AM

Context

This MR is part 2 of 2:

  1. Add Vuex store and tests (!35872 (merged))
  2. 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!)
  • 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

Basic example

image

Commit search

image

Loading behavior

image

No results

image

Error behavior

image

If only one request fails (the branches search, in this case):

image

GIF

Note: Loading behavior has been updated since this GIF was taken. See the Loading behavior screenshot above.

2020-06-30_16.26.45

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)

Edited by Nathan Friend

Merge request reports