Use GitLab fork of tributejs

Use fork because the official tributejs has not cut a release
since March 2020 but there have been additions to the code since.
This allows us to specify a loading template when tributejs
makes an ajax call.

app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue

 <script>
-import Tribute from 'tributejs';
+import Tribute from '@gitlab/tributejs';
 import {
   GfmAutocompleteType,
   tributeConfig,
@@ -29,6 +29,10 @@ export default {
     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),
       }));
     },

package.json

@@ -43,6 +43,7 @@
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.177.0",
+    "@gitlab/tributejs": "1.0.0",
     "@gitlab/ui": "24.8.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-3",
@@ -139,7 +140,6 @@
     "tiptap": "^1.8.0",
     "tiptap-commands": "^1.4.0",
     "tiptap-extensions": "^1.8.0",
-    "tributejs": "5.1.3",
     "url-loader": "^3.0.0",
     "uuid": "8.1.0",
     "visibilityjs": "^1.2.4",

spec/features/issues/gfm_autocomplete_spec.rb

@@ -418,6 +418,46 @@ RSpec.describe 'GFM autocomplete', :js do
       end
     end
 
+    context 'when other notes are destroyed' do
+      let!(:discussion) { create(:discussion_note_on_issue, noteable: issue, project: issue.project) }
+
+      # This is meant to protect against this issue https://gitlab.com/gitlab-org/gitlab/-/issues/228729
+      it 'keeps autocomplete key listeners' do
+        visit project_issue_path(project, issue)
+        note = find('#note-body')
+
+        start_comment_with_emoji(note)
+
+        start_and_cancel_discussion
+
+        note.fill_in(with: '')
+        start_comment_with_emoji(note)
+        note.native.send_keys(:enter)
+
+        expect(note.value).to eql('Hello :100: ')
+      end
+
+      def start_comment_with_emoji(note)
+        note.native.send_keys('Hello :10')
+
+        wait_for_requests
+
+        find('.atwho-view li', text: '100')
+      end
+
+      def start_and_cancel_discussion
+        click_button('Reply...')
+
+        fill_in('note_note', with: 'Whoops!')
+
+        page.accept_alert 'Are you sure you want to cancel creating this comment?' do
+          click_button('Cancel')
+        end
+
+        wait_for_requests
+      end
+    end
+
     shared_examples 'autocomplete suggestions' do
       it 'suggests objects correctly' do
         page.within '.timeline-content-form' do
@@ -550,6 +590,15 @@ RSpec.describe 'GFM autocomplete', :js do
       expect(find('.tribute-container ul', visible: true)).to have_text('alert milestone')
     end
 
+    it 'does not open autocomplete menu when trigger character is prefixed with text' do
+      page.within '.timeline-content-form' do
+        find('#note-body').native.send_keys('testing')
+        find('#note-body').native.send_keys('@')
+      end
+
+      expect(page).not_to have_selector('.tribute-container', visible: true)
+    end
+
     it 'selects the first item for assignee dropdowns' do
       page.within '.timeline-content-form' do
         find('#note-body').native.send_keys('@')
@@ -618,21 +667,6 @@ RSpec.describe 'GFM autocomplete', :js do
         expect(page).to have_selector('.tribute-container', visible: true)
       end
 
-      it "does not show dropdown when preceded with a special character" do
-        note = find('#note-body')
-        page.within '.timeline-content-form' do
-          note.native.send_keys("@")
-        end
-
-        expect(page).to have_selector('.tribute-container', visible: true)
-
-        page.within '.timeline-content-form' do
-          note.native.send_keys("@")
-        end
-
-        expect(page).not_to have_selector('.tribute-container')
-      end
-
       it "does not throw an error if no labels exist" do
         note = find('#note-body')
         page.within '.timeline-content-form' do
@@ -653,14 +687,6 @@ RSpec.describe 'GFM autocomplete', :js do
         expect_to_wrap(false, user_item, note, user.username)
       end
 
-      it 'doesn\'t open autocomplete after non-word character' do
-        page.within '.timeline-content-form' do
-          find('#note-body').native.send_keys("@#{user.username[0..2]}!")
-        end
-
-        expect(page).not_to have_selector('.tribute-container')
-      end
-
       it 'triggers autocomplete after selecting a quick action' do
         note = find('#note-body')
         page.within '.timeline-content-form' do
@@ -848,46 +874,6 @@ RSpec.describe 'GFM autocomplete', :js do
 
       it_behaves_like 'autocomplete suggestions'
     end
-
-    context 'when other notes are destroyed' do
-      let!(:discussion) { create(:discussion_note_on_issue, noteable: issue, project: issue.project) }
-
-      # This is meant to protect against this issue https://gitlab.com/gitlab-org/gitlab/-/issues/228729
-      it 'keeps autocomplete key listeners' do
-        visit project_issue_path(project, issue)
-        note = find('#note-body')
-
-        start_comment_with_emoji(note)
-
-        start_and_cancel_discussion
-
-        note.fill_in(with: '')
-        start_comment_with_emoji(note)
-        note.native.send_keys(:enter)
-
-        expect(note.value).to eql('Hello :100: ')
-      end
-
-      def start_comment_with_emoji(note)
-        note.native.send_keys('Hello :10')
-
-        wait_for_requests
-
-        find('.atwho-view li', text: '100')
-      end
-
-      def start_and_cancel_discussion
-        click_button('Reply...')
-
-        fill_in('note_note', with: 'Whoops!')
-
-        page.accept_alert 'Are you sure you want to cancel creating this comment?' do
-          click_button('Cancel')
-        end
-
-        wait_for_requests
-      end
-    end
   end
 
   private

spec/frontend/vue_shared/components/gfm_autocomplete/gfm_autocomplete_spec.js

+import Tribute from '@gitlab/tributejs';
 import { shallowMount } from '@vue/test-utils';
-import Tribute from 'tributejs';
 import GfmAutocomplete from '~/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue';
 
 describe('GfmAutocomplete', () => {

yarn.lock

@@ -866,6 +866,11 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.177.0.tgz#e481ed327a11d3834c8b1668d7485b9eefef97f5"
   integrity sha512-L7DggusgkbubNFCRIYtCuYiLx+t5Hp8y/XIxJ3RM5mqAfxkTR1KxALNLDP9CT7xWieHDhNvgcXAdamGoi0ofDQ==
 
+"@gitlab/tributejs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
+  integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
+
 "@gitlab/ui@24.8.0":
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-24.8.0.tgz#dc7daf941ba691e702d607e0a31377a374fdb136"
@@ -11749,11 +11754,6 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
-tributejs@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/tributejs/-/tributejs-5.1.3.tgz#980600fc72865be5868893078b4bfde721129eae"
-  integrity sha512-B5CXihaVzXw+1UHhNFyAwUTMDk1EfoLP5Tj1VhD9yybZ1I8DZJEv8tZ1l0RJo0t0tk9ZhR8eG5tEsaCvRigmdQ==
-
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"