1 files changed, 97 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
new file mode 100644
index 00000000000..1ad0ca36bf8
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
@@ -0,0 +1,97 @@
+<script>
+import Tribute from '@gitlab/tributejs';
+import {
+  GfmAutocompleteType,
+  tributeConfig,
+} from 'ee_else_ce/vue_shared/components/gfm_autocomplete/utils';
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import SidebarMediator from '~/sidebar/sidebar_mediator';
+
+export default {
+  errorMessage: __(
+    'An error occurred while getting autocomplete data. Please refresh the page and try again.',
+  ),
+  props: {
+    autocompleteTypes: {
+      type: Array,
+      required: false,
+      default: () => Object.values(GfmAutocompleteType),
+    },
+    dataSources: {
+      type: Object,
+      required: false,
+      default: () => gl.GfmAutoComplete?.dataSources || {},
+    },
+  },
+  computed: {
+    config() {
+      return this.autocompleteTypes.map(type => ({
+        ...tributeConfig[type].config,
+        loadingItemTemplate: `<span class="gl-spinner gl-vertical-align-text-bottom gl-ml-3 gl-mr-2"></span>${__(
+          'Loading',
+        )}`,
+        requireLeadingSpace: true,
+        values: this.getValues(type),
+      }));
+    },
+  },
+  mounted() {
+    this.cache = {};
+    this.tribute = new Tribute({ collection: this.config });
+
+    const input = this.$slots.default?.[0]?.elm;
+    this.tribute.attach(input);
+  },
+  beforeDestroy() {
+    const input = this.$slots.default?.[0]?.elm;
+    this.tribute.detach(input);
+  },
+  methods: {
+    cacheAssignees() {
+      const isAssigneesLengthSame =
+        this.assignees?.length === SidebarMediator.singleton?.store?.assignees?.length;
+
+      if (!this.assignees || !isAssigneesLengthSame) {
+        this.assignees =
+          SidebarMediator.singleton?.store?.assignees?.map(assignee => assignee.username) || [];
+      }
+    },
+    filterValues(type) {
+      // The assignees AJAX response can come after the user first invokes autocomplete
+      // so we need to check more than once if we need to update the assignee cache
+      this.cacheAssignees();
+
+      return tributeConfig[type].filterValues
+        ? tributeConfig[type].filterValues({
+            assignees: this.assignees,
+            collection: this.cache[type],
+            fullText: this.$slots.default?.[0]?.elm?.value,
+            selectionStart: this.$slots.default?.[0]?.elm?.selectionStart,
+          })
+        : this.cache[type];
+    },
+    getValues(type) {
+      return (inputText, processValues) => {
+        if (this.cache[type]) {
+          processValues(this.filterValues(type));
+        } else if (this.dataSources[type]) {
+          axios
+            .get(this.dataSources[type])
+            .then(response => {
+              this.cache[type] = response.data;
+              processValues(this.filterValues(type));
+            })
+            .catch(() => createFlash({ message: this.$options.errorMessage }));
+        } else {
+          processValues([]);
+        }
+      };
+    },
+  },
+  render(createElement) {
+    return createElement('div', this.$slots.default);
+  },
+};
+</script>