Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

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>