diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-21 02:50:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-21 02:50:22 +0300 |
commit | 9dc93a4519d9d5d7be48ff274127136236a3adb3 (patch) | |
tree | 70467ae3692a0e35e5ea56bcb803eb512a10bedb /app/assets/javascripts/vue_shared/components/filtered_search_bar | |
parent | 4b0f34b6d759d6299322b3a54453e930c6121ff0 (diff) |
Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/filtered_search_bar')
5 files changed, 273 insertions, 9 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue index 97a8f681faf..107ced550c1 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue @@ -58,7 +58,7 @@ export default { type: String, required: false, default: '', - validator: (value) => value === '' || /(_desc)|(_asc)/g.test(value), + validator: (value) => value === '' || /(_desc)|(_asc)/gi.test(value), }, showCheckbox: { type: Boolean, @@ -363,6 +363,7 @@ export default { <gl-button v-gl-tooltip :title="sortDirectionTooltip" + :aria-label="sortDirectionTooltip" :icon="sortDirectionIcon" class="flex-shrink-1" @click="handleSortDirectionClick" diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue index d53c829a48e..aeb698a3adb 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue @@ -45,6 +45,9 @@ export default { activeAuthor() { return this.authors.find((author) => author.username.toLowerCase() === this.currentValue); }, + activeAuthorAvatar() { + return this.avatarUrl(this.activeAuthor); + }, }, watch: { active: { @@ -74,6 +77,9 @@ export default { this.loading = false; }); }, + avatarUrl(author) { + return author.avatarUrl || author.avatar_url; + }, searchAuthors: debounce(function debouncedSearch({ data }) { this.fetchAuthorBySearchTerm(data); }, DEBOUNCE_DELAY), @@ -92,7 +98,7 @@ export default { <gl-avatar v-if="activeAuthor" :size="16" - :src="activeAuthor.avatar_url" + :src="activeAuthorAvatar" shape="circle" class="gl-mr-2" /> @@ -115,7 +121,7 @@ export default { :value="author.username" > <div class="d-flex"> - <gl-avatar :size="32" :src="author.avatar_url" /> + <gl-avatar :size="32" :src="avatarUrl(author)" /> <div> <div>{{ author.name }}</div> <div>@{{ author.username }}</div> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue new file mode 100644 index 00000000000..98190d716c9 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue @@ -0,0 +1,105 @@ +<script> +import { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlDropdownDivider, + GlLoadingIcon, +} from '@gitlab/ui'; +import { debounce } from 'lodash'; + +import { deprecatedCreateFlash as createFlash } from '~/flash'; +import { __ } from '~/locale'; + +import { DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY, DEBOUNCE_DELAY } from '../constants'; +import { stripQuotes } from '../filtered_search_utils'; + +export default { + components: { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlDropdownDivider, + GlLoadingIcon, + }, + props: { + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + emojis: this.config.initialEmojis || [], + defaultEmojis: this.config.defaultEmojis || [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY], + loading: true, + }; + }, + computed: { + currentValue() { + return this.value.data.toLowerCase(); + }, + activeEmoji() { + return this.emojis.find( + (emoji) => emoji.name.toLowerCase() === stripQuotes(this.currentValue), + ); + }, + }, + methods: { + fetchEmojiBySearchTerm(searchTerm) { + this.loading = true; + this.config + .fetchEmojis(searchTerm) + .then((res) => { + this.emojis = Array.isArray(res) ? res : res.data; + }) + .catch(() => createFlash(__('There was a problem fetching emojis.'))) + .finally(() => { + this.loading = false; + }); + }, + searchEmojis: debounce(function debouncedSearch({ data }) { + this.fetchEmojiBySearchTerm(data); + }, DEBOUNCE_DELAY), + }, +}; +</script> + +<template> + <gl-filtered-search-token + :config="config" + v-bind="{ ...$props, ...$attrs }" + v-on="$listeners" + @input="searchEmojis" + > + <template #view="{ inputValue }"> + <gl-emoji v-if="activeEmoji" :data-name="activeEmoji.name" /> + <span v-else>{{ inputValue }}</span> + </template> + <template #suggestions> + <gl-filtered-search-suggestion + v-for="emoji in defaultEmojis" + :key="emoji.value" + :value="emoji.value" + > + {{ emoji.value }} + </gl-filtered-search-suggestion> + <gl-dropdown-divider v-if="defaultEmojis.length" /> + <gl-loading-icon v-if="loading" /> + <template v-else> + <gl-filtered-search-suggestion + v-for="emoji in emojis" + :key="emoji.name" + :value="emoji.name" + > + <div class="gl-display-flex"> + <gl-emoji :data-name="emoji.name" /> + <span class="gl-ml-3">{{ emoji.name }}</span> + </div> + </gl-filtered-search-suggestion> + </template> + </template> + </gl-filtered-search-token> +</template> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue new file mode 100644 index 00000000000..101c7150c55 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue @@ -0,0 +1,133 @@ +<script> +import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; +import { debounce } from 'lodash'; + +import createFlash from '~/flash'; +import { isNumeric } from '~/lib/utils/number_utils'; +import { __ } from '~/locale'; +import { DEBOUNCE_DELAY } from '../constants'; +import { stripQuotes } from '../filtered_search_utils'; + +export default { + components: { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlLoadingIcon, + }, + props: { + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + epics: this.config.initialEpics || [], + loading: true, + }; + }, + computed: { + currentValue() { + /* + * When the URL contains the epic_iid, we'd get: '123' + */ + if (isNumeric(this.value.data)) { + return parseInt(this.value.data, 10); + } + + /* + * When the token is added in current session it'd be: 'Foo::&123' + */ + const id = this.value.data.split('::&')[1]; + + if (id) { + return parseInt(id, 10); + } + + return this.value.data; + }, + activeEpic() { + const currentValueIsString = typeof this.currentValue === 'string'; + return this.epics.find( + (epic) => epic[currentValueIsString ? 'title' : 'iid'] === this.currentValue, + ); + }, + }, + watch: { + active: { + immediate: true, + handler(newValue) { + if (!newValue && !this.epics.length) { + this.searchEpics({ data: this.currentValue }); + } + }, + }, + }, + methods: { + fetchEpicsBySearchTerm(searchTerm = '') { + this.loading = true; + this.config + .fetchEpics(searchTerm) + .then(({ data }) => { + this.epics = data; + }) + .catch(() => createFlash({ message: __('There was a problem fetching epics.') })) + .finally(() => { + this.loading = false; + }); + }, + fetchSingleEpic(iid) { + this.loading = true; + this.config + .fetchSingleEpic(iid) + .then(({ data }) => { + this.epics = [data]; + }) + .catch(() => createFlash({ message: __('There was a problem fetching epics.') })) + .finally(() => { + this.loading = false; + }); + }, + searchEpics: debounce(function debouncedSearch({ data }) { + if (isNumeric(data)) { + return this.fetchSingleEpic(data); + } + return this.fetchEpicsBySearchTerm(data); + }, DEBOUNCE_DELAY), + + getEpicValue(epic) { + return `${epic.title}::&${epic.iid}`; + }, + }, + stripQuotes, +}; +</script> + +<template> + <gl-filtered-search-token + :config="config" + v-bind="{ ...$props, ...$attrs }" + v-on="$listeners" + @input="searchEpics" + > + <template #view="{ inputValue }"> + <span>{{ activeEpic ? getEpicValue(activeEpic) : $options.stripQuotes(inputValue) }}</span> + </template> + <template #suggestions> + <gl-loading-icon v-if="loading" /> + <template v-else> + <gl-filtered-search-suggestion + v-for="epic in epics" + :key="epic.id" + :value="getEpicValue(epic)" + > + <div>{{ epic.title }}</div> + </gl-filtered-search-suggestion> + </template> + </template> + </gl-filtered-search-token> +</template> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue index 9c2a644b7a9..76b005772ec 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue @@ -46,7 +46,7 @@ export default { }, activeLabel() { return this.labels.find( - (label) => label.title.toLowerCase() === stripQuotes(this.currentValue), + (label) => this.getLabelName(label).toLowerCase() === stripQuotes(this.currentValue), ); }, containerStyle() { @@ -69,6 +69,21 @@ export default { }, }, methods: { + /** + * There's an inconsistency between private and public API + * for labels where label name is included in a different + * property; + * + * Private API => `label.title` + * Public API => `label.name` + * + * This method allows compatibility as there may be instances + * where `config.fetchLabels` provided externally may still be + * using either of the two APIs. + */ + getLabelName(label) { + return label.name || label.title; + }, fetchLabelBySearchTerm(searchTerm) { this.loading = true; this.config @@ -85,7 +100,7 @@ export default { }); }, searchLabels: debounce(function debouncedSearch({ data }) { - this.fetchLabelBySearchTerm(data); + if (!this.loading) this.fetchLabelBySearchTerm(data); }, DEBOUNCE_DELAY), }, }; @@ -100,7 +115,7 @@ export default { > <template #view-token="{ inputValue, cssClasses, listeners }"> <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners" - >~{{ activeLabel ? activeLabel.title : inputValue }}</gl-token + >~{{ activeLabel ? getLabelName(activeLabel) : inputValue }}</gl-token > </template> <template #suggestions> @@ -114,13 +129,17 @@ export default { <gl-dropdown-divider v-if="defaultLabels.length" /> <gl-loading-icon v-if="loading" /> <template v-else> - <gl-filtered-search-suggestion v-for="label in labels" :key="label.id" :value="label.title"> - <div class="gl-display-flex"> + <gl-filtered-search-suggestion + v-for="label in labels" + :key="label.id" + :value="getLabelName(label)" + > + <div class="gl-display-flex gl-align-items-center"> <span :style="{ backgroundColor: label.color }" class="gl-display-inline-block mr-2 p-2" ></span> - <div>{{ label.title }}</div> + <div>{{ getLabelName(label) }}</div> </div> </gl-filtered-search-suggestion> </template> |