1 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue
new file mode 100644
index 00000000000..f353cc3a765
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue
@@ -0,0 +1,85 @@
+<script>
+import { GlFilteredSearchSuggestion } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
+import { DEFAULT_NONE_ANY } from '../constants';
+
+export default {
+  components: {
+    BaseToken,
+    GlFilteredSearchSuggestion,
+  },
+  props: {
+    active: {
+      type: Boolean,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      releases: this.config.initialReleases || [],
+      loading: false,
+    };
+  },
+  computed: {
+    defaultReleases() {
+      return this.config.defaultReleases || DEFAULT_NONE_ANY;
+    },
+  },
+  methods: {
+    getActiveRelease(releases, data) {
+      return releases.find((release) => release.tag.toLowerCase() === data.toLowerCase());
+    },
+    fetchReleases(searchTerm) {
+      this.loading = true;
+      this.config
+        .fetchReleases(searchTerm)
+        .then((response) => {
+          this.releases = response;
+        })
+        .catch(() => {
+          createFlash({ message: __('There was a problem fetching releases.') });
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <base-token
+    :active="active"
+    :config="config"
+    :value="value"
+    :default-suggestions="defaultReleases"
+    :suggestions="releases"
+    :suggestions-loading="loading"
+    :get-active-token-value="getActiveRelease"
+    @fetch-suggestions="fetchReleases"
+    v-on="$listeners"
+  >
+    <template #view="{ viewTokenProps: { inputValue, activeTokenValue } }">
+      {{ activeTokenValue ? activeTokenValue.tag : inputValue }}
+    </template>
+    <template #suggestions-list="{ suggestions }">
+      <gl-filtered-search-suggestion
+        v-for="release in suggestions"
+        :key="release.id"
+        :value="release.tag"
+      >
+        {{ release.tag }}
+      </gl-filtered-search-suggestion>
+    </template>
+  </base-token>
+</template>