Enhance ref_selector component to allow for tag creation (!55193) · Merge requests · GitLab.org / GitLab

Nathan Friend requested to merge nfriend-enhance-ref-selector-for-tag-creation into master Feb 25, 2021

What does this MR do?

Updates the ref_selector Vue component to allow the component to function as a tag creation control (among other things).

These changes are being made to support the workflow described in #235792 (closed), which allows the New Release page to create a release from an existing tag. (Currently, users can only use this form to create a release from a new tag.)

Below are the specific updates:

New `footer` slot

This component now accepts an optional footer slot, which allows content to be rendered in the underlying GlDropdown's footer slot.

This slot is implemented as a scoped slot and receives the following slot props:

isLoading: Whether or not the ref_selector component is currently loading data from the API
matches: The current list of search results
query: The current search query

These slot props will allow the parent component to dynamically render content based on the current state of the control.

Example use case: As part of #235792 (closed), the component will show a new Create new option in the dropdown's footer, but only if the user's search returned no results.

Validation state

A new prop has been added - state - that allows the component to show form validation states, much like GlFormInput.

Allow for multiple instances

There was a bug in component that caused all instances of the component to share the same Vuex store. Now, each instance of the RefSelector component uses a new instances of its store. This allows more than one RefSelector to appear on the page.

Screenshots

Description	Screenshot
With content in the new `footer` slot. In this example, the "Create tag <tag name>" is content that is provided by the parent component using the `footer` slot.
Invalid state