Merge branch '230971-convert-merge-requests-autocomplete-from-at-js-to-tribute' into 'master'

Convert merge requests autocomplete from at.js to tribute

Closes #230971

See merge request gitlab-org/gitlab!40743

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

@@ -9,6 +9,7 @@ const AutoComplete = {
   Issues: 'issues',
   Labels: 'labels',
   Members: 'members',
+  MergeRequests: 'mergeRequests',
 };
 
 function doesCurrentLineStartWith(searchString, fullText, selectionStart) {
@@ -99,6 +100,14 @@ const autoCompleteMap = {
         ${icon}`;
     },
   },
+  [AutoComplete.MergeRequests]: {
+    filterValues() {
+      return this[AutoComplete.MergeRequests];
+    },
+    menuItemTemplate({ original }) {
+      return `<small>${original.reference || original.iid}</small> ${escape(original.title)}`;
+    },
+  },
 };
 
 export default {
@@ -139,6 +148,13 @@ export default {
               : `~${original.title}`,
           values: this.getValues(AutoComplete.Labels),
         },
+        {
+          trigger: '!',
+          lookup: value => value.iid + value.title,
+          menuItemTemplate: autoCompleteMap[AutoComplete.MergeRequests].menuItemTemplate,
+          selectTemplate: ({ original }) => original.reference || `!${original.iid}`,
+          values: this.getValues(AutoComplete.MergeRequests),
+        },
       ],
     });
 

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -169,7 +169,7 @@ export default {
       emojis: this.enableAutocomplete,
       members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
       issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
-      mergeRequests: this.enableAutocomplete,
+      mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
       epics: this.enableAutocomplete,
       milestones: this.enableAutocomplete,
       labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,

spec/features/issues/gfm_autocomplete_spec.rb

@@ -763,6 +763,29 @@ RSpec.describe 'GFM autocomplete', :js do
       end
     end
 
+    shared_examples 'autocomplete suggestions' do
+      it 'suggests objects correctly' do
+        page.within '.timeline-content-form' do
+          find('#note-body').native.send_keys(object.class.reference_prefix)
+        end
+
+        page.within '.tribute-container' do
+          expect(page).to have_content(object.title)
+
+          find('ul li').click
+        end
+
+        expect(find('.new-note #note-body').value).to include(expected_body)
+      end
+    end
+
+    context 'merge requests' do
+      let(:object) { create(:merge_request, source_project: project) }
+      let(:expected_body) { object.to_reference }
+
+      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) }