diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue | 43 |
1 files changed, 29 insertions, 14 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue index 46ccb9470e5..58a940bca3b 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue @@ -1,7 +1,6 @@ <script> import { GlLabel } from '@gitlab/ui'; -import { mapState } from 'vuex'; - +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { isScopedLabel } from '~/lib/utils/common_utils'; export default { @@ -14,15 +13,26 @@ export default { required: false, default: false, }, - }, - computed: { - ...mapState([ - 'selectedLabels', - 'allowLabelRemove', - 'allowScopedLabels', - 'labelsFilterBasePath', - 'labelsFilterParam', - ]), + selectedLabels: { + type: Array, + required: true, + }, + allowLabelRemove: { + type: Boolean, + required: true, + }, + allowScopedLabels: { + type: Boolean, + required: true, + }, + labelsFilterBasePath: { + type: String, + required: true, + }, + labelsFilterParam: { + type: String, + required: true, + }, }, methods: { labelFilterUrl(label) { @@ -33,6 +43,9 @@ export default { scopedLabel(label) { return this.allowScopedLabels && isScopedLabel(label); }, + removeLabel(labelId) { + this.$emit('onLabelRemove', getIdFromGraphQLId(labelId)); + }, }, }; </script> @@ -43,12 +56,14 @@ export default { 'has-labels': selectedLabels.length, }" class="hide-collapsed value issuable-show-labels js-value" + data-testid="value-wrapper" > - <span v-if="!selectedLabels.length" class="text-secondary"> + <span v-if="!selectedLabels.length" class="text-secondary" data-testid="empty-placeholder"> <slot></slot> </span> - <template v-for="label in selectedLabels" v-else> + <template v-else> <gl-label + v-for="label in selectedLabels" :key="label.id" data-qa-selector="selected_label_content" :data-qa-label-name="label.title" @@ -60,7 +75,7 @@ export default { :show-close-button="allowLabelRemove" :disabled="disableLabels" tooltip-placement="top" - @close="$emit('onLabelRemove', label.id)" + @close="removeLabel(label.id)" /> </template> </div> |