diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue | 145 |
1 files changed, 30 insertions, 115 deletions
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 ffa37424c2c..857367a0721 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 @@ -1,24 +1,23 @@ <script> -import { GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui'; +import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; import fuzzaldrinPlus from 'fuzzaldrin-plus'; import { debounce } from 'lodash'; import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; -import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; import { __ } from '~/locale'; -import { DropdownVariant } from './constants'; import projectLabelsQuery from './graphql/project_labels.query.graphql'; import LabelItem from './label_item.vue'; export default { components: { + GlDropdownForm, + GlDropdownItem, GlLoadingIcon, GlSearchBoxByType, - GlLink, LabelItem, }, - inject: ['projectPath', 'allowLabelCreate', 'labelsManagePath', 'variant'], + inject: ['projectPath'], props: { selectedLabels: { type: Array, @@ -28,24 +27,11 @@ export default { type: Boolean, required: true, }, - labelsListTitle: { - type: String, - required: true, - }, - footerCreateLabelTitle: { - type: String, - required: true, - }, - footerManageLabelTitle: { - type: String, - required: true, - }, }, data() { return { searchKey: '', labels: [], - currentHighlightItem: -1, localSelectedLabels: [...this.selectedLabels], }; }, @@ -74,12 +60,6 @@ export default { }, }, computed: { - isDropdownVariantSidebar() { - return this.variant === DropdownVariant.Sidebar; - }, - isDropdownVariantEmbedded() { - return this.variant === DropdownVariant.Embedded; - }, labelsFetchInProgress() { return this.$apollo.queries.labels.loading; }, @@ -98,21 +78,11 @@ export default { return Boolean(this.searchKey) && this.visibleLabels.length === 0; }, }, - watch: { - searchKey(value) { - // When there is search string present - // and there are matching results, - // highlight first item by default. - if (value && this.visibleLabels.length) { - this.currentHighlightItem = 0; - } - }, - }, created() { this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS); }, beforeDestroy() { - this.$emit('closeDropdown', this.localSelectedLabels); + this.$emit('setLabels', this.localSelectedLabels); this.debouncedSearchKeyUpdate.cancel(); }, methods: { @@ -150,33 +120,6 @@ export default { }); } }, - /** - * This method enables keyboard navigation support for - * the dropdown. - */ - handleKeyDown(e) { - if (e.keyCode === UP_KEY_CODE && this.currentHighlightItem > 0) { - this.currentHighlightItem -= 1; - } else if ( - e.keyCode === DOWN_KEY_CODE && - this.currentHighlightItem < this.visibleLabels.length - 1 - ) { - this.currentHighlightItem += 1; - } else if (e.keyCode === ENTER_KEY_CODE && this.currentHighlightItem > -1) { - this.updateSelectedLabels(this.visibleLabels[this.currentHighlightItem]); - this.searchKey = ''; - } else if (e.keyCode === ESC_KEY_CODE) { - this.$emit('closeDropdown', this.localSelectedLabels); - } - - if (e.keyCode !== ESC_KEY_CODE) { - // Scroll the list only after highlighting - // styles are rendered completely. - this.$nextTick(() => { - this.scrollIntoViewIfNeeded(); - }); - } - }, handleLabelClick(label) { this.updateSelectedLabels(label); if (!this.allowMultiselect) { @@ -191,69 +134,41 @@ export default { </script> <template> - <div - class="labels-select-contents-list js-labels-list" - data-testid="dropdown-wrapper" - @keydown="handleKeyDown" - > - <div class="dropdown-input" @click.stop="() => {}"> - <gl-search-box-by-type - ref="searchInput" - :value="searchKey" - :disabled="labelsFetchInProgress" - data-qa-selector="dropdown_input_field" - data-testid="dropdown-input-field" - @input="debouncedSearchKeyUpdate" - /> - </div> - <div ref="labelsListContainer" class="dropdown-content" data-testid="dropdown-content"> + <gl-dropdown-form class="labels-select-contents-list js-labels-list"> + <gl-search-box-by-type + ref="searchInput" + :value="searchKey" + :disabled="labelsFetchInProgress" + data-qa-selector="dropdown_input_field" + data-testid="dropdown-input-field" + @input="debouncedSearchKeyUpdate" + /> + <div ref="labelsListContainer" data-testid="dropdown-content"> <gl-loading-icon v-if="labelsFetchInProgress" class="labels-fetch-loading gl-align-items-center gl-w-full gl-h-full" size="md" /> - <ul v-else class="list-unstyled gl-mb-0 gl-word-break-word" data-testid="labels-list"> - <label-item - v-for="(label, index) in visibleLabels" + <template v-else> + <gl-dropdown-item + v-for="label in visibleLabels" :key="label.id" - :label="label" - :is-label-set="isLabelSelected(label)" - :highlight="index === currentHighlightItem" - @clickLabel="handleLabelClick(label)" - /> - <li + :is-checked="isLabelSelected(label)" + :is-check-centered="true" + :is-check-item="true" + data-testid="labels-list" + @click.native.capture.stop="handleLabelClick(label)" + > + <label-item :label="label" /> + </gl-dropdown-item> + <gl-dropdown-item v-show="showNoMatchingResultsMessage" class="gl-p-3 gl-text-center" data-testid="no-results" > {{ __('No matching results') }} - </li> - </ul> - </div> - <div - v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded" - class="dropdown-footer" - data-testid="dropdown-footer" - > - <ul class="list-unstyled"> - <li v-if="allowLabelCreate"> - <gl-link - class="gl-display-flex gl-flex-direction-row gl-w-full gl-overflow-break-word label-item" - data-testid="create-label-button" - @click="$emit('toggleDropdownContentsCreateView')" - > - {{ footerCreateLabelTitle }} - </gl-link> - </li> - <li> - <gl-link - :href="labelsManagePath" - class="gl-display-flex gl-flex-direction-row gl-w-full gl-overflow-break-word label-item" - > - {{ footerManageLabelTitle }} - </gl-link> - </li> - </ul> + </gl-dropdown-item> + </template> </div> - </div> + </gl-dropdown-form> </template> |