1 files changed, 64 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
new file mode 100644
index 00000000000..64de6d2a053
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
@@ -0,0 +1,64 @@
+<script>
+import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
+import Api from '~/api';
+import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
+import createFlash from '~/flash';
+import { debounce } from 'lodash';
+
+export default {
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+    GlLoadingIcon,
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      tags: null,
+      loading: true,
+    };
+  },
+  created() {
+    this.fetchTags();
+  },
+  methods: {
+    fetchTags(searchTerm) {
+      Api.tags(this.config.projectId, searchTerm)
+        .then(({ data }) => {
+          this.tags = data.map(tag => tag.name);
+          this.loading = false;
+        })
+        .catch(err => {
+          createFlash(FETCH_TAG_ERROR_MESSAGE);
+          this.loading = false;
+          throw err;
+        });
+    },
+    searchTags: debounce(function debounceSearch({ data }) {
+      this.fetchTags(data);
+    }, FILTER_PIPELINES_SEARCH_DELAY),
+  },
+};
+</script>
+
+<template>
+  <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners" @input="searchTags">
+    <template #suggestions>
+      <gl-loading-icon v-if="loading" />
+      <template v-else>
+        <gl-filtered-search-suggestion v-for="(tag, index) in tags" :key="index" :value="tag">
+          {{ tag }}
+        </gl-filtered-search-suggestion>
+      </template>
+    </template>
+  </gl-filtered-search-token>
+</template>