diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-20 12:16:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-20 12:16:11 +0300 |
commit | edaa33dee2ff2f7ea3fac488d41558eb5f86d68c (patch) | |
tree | 11f143effbfeba52329fb7afbd05e6e2a3790241 /app/assets/javascripts/vue_shared/components/sidebar | |
parent | d8a5691316400a0f7ec4f83832698f1988eb27c1 (diff) |
Add latest changes from gitlab-org/gitlab@14-7-stable-eev14.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar')
6 files changed, 35 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue index 13a6dd43207..0fa64a29b3a 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue @@ -179,6 +179,9 @@ export default { this.searchKey = ''; this.setFocus(); }, + selectFirstItem() { + this.$refs.dropdownContentsView.selectFirstItem(); + }, }, }; </script> @@ -204,11 +207,13 @@ export default { @toggleDropdownContentsCreateView="toggleDropdownContent" @closeDropdown="$emit('closeDropdown')" @input="debouncedSearchKeyUpdate" + @searchEnter="selectFirstItem" /> </template> <template #default> <component :is="dropdownContentsView" + ref="dropdownContentsView" v-model="localSelectedLabels" :search-key="searchKey" :allow-multiselect="allowMultiselect" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue index da626a21b14..b99083713a8 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue @@ -1,5 +1,12 @@ <script> -import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { + GlAlert, + GlTooltipDirective, + GlButton, + GlFormInput, + GlLink, + GlLoadingIcon, +} from '@gitlab/ui'; import produce from 'immer'; import createFlash from '~/flash'; import { __ } from '~/locale'; @@ -11,6 +18,7 @@ const errorMessage = __('Error creating label.'); export default { components: { + GlAlert, GlButton, GlFormInput, GlLink, @@ -42,6 +50,7 @@ export default { labelTitle: '', selectedColor: '', labelCreateInProgress: false, + error: undefined, }; }, computed: { @@ -111,13 +120,14 @@ export default { ) => this.updateLabelsInCache(store, label), }); if (labelCreate.errors.length) { - createFlash({ message: errorMessage }); + [this.error] = labelCreate.errors; + } else { + this.$emit('hideCreateView'); } } catch { createFlash({ message: errorMessage }); } this.labelCreateInProgress = false; - this.$emit('hideCreateView'); }, }, }; @@ -126,6 +136,9 @@ export default { <template> <div class="labels-select-contents-create js-labels-create"> <div class="dropdown-input"> + <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mb-3"> + {{ error }} + </gl-alert> <gl-form-input v-model.trim="labelTitle" :placeholder="__('Name new label')" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue index e9a2d7747e2..ae179ef93c7 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue @@ -84,6 +84,9 @@ export default { showNoMatchingResultsMessage() { return Boolean(this.searchKey) && this.visibleLabels.length === 0; }, + shouldHighlightFirstItem() { + return this.searchKey !== '' && this.visibleLabels.length > 0; + }, }, methods: { isLabelSelected(label) { @@ -128,6 +131,11 @@ export default { onDropdownAppear() { this.isVisible = true; }, + selectFirstItem() { + if (this.shouldHighlightFirstItem) { + this.handleLabelClick(this.visibleLabels[0]); + } + }, }, }; </script> @@ -143,11 +151,13 @@ export default { /> <template v-else> <gl-dropdown-item - v-for="label in visibleLabels" + v-for="(label, index) in visibleLabels" :key="label.id" :is-checked="isLabelSelected(label)" :is-check-centered="true" :is-check-item="true" + :active="shouldHighlightFirstItem && index === 0" + active-class="is-focused" data-testid="labels-list" @click.native.capture.stop="handleLabelClick(label)" > diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue index 7a0f20b0c83..faad69732dd 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue @@ -83,6 +83,7 @@ export default { data-qa-selector="dropdown_input_field" data-testid="dropdown-input-field" @input="$emit('input', $event)" + @keydown.enter="$emit('searchEnter', $event)" /> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue index f27f0b4e34c..caeee2df7e5 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue @@ -10,7 +10,7 @@ export default { </script> <template> - <div> + <div class="gl-display-flex gl-align-items-center"> <span class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3" :style="{ 'background-color': label.color }" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue index 3adda69b892..f53b75df4eb 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue @@ -289,6 +289,7 @@ export default { 'is-standalone': isDropdownVariantStandalone(variant), 'is-embedded': isDropdownVariantEmbedded(variant), }" + data-testid="sidebar-labels" data-qa-selector="labels_block" > <template v-if="isDropdownVariantSidebar(variant)"> |