Add milestone autocompletion to tribute

Added milestone autocompletion to tribute so that we are
a step closer to replacing the old at.js jQuery library
with tribute for @mentions autocompletion

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

@@ -10,6 +10,7 @@ const AutoComplete = {
   Labels: 'labels',
   Members: 'members',
   MergeRequests: 'mergeRequests',
+  Milestones: 'milestones',
 };
 
 const groupType = 'Group'; // eslint-disable-line @gitlab/require-i18n-strings
@@ -120,6 +121,14 @@ const autoCompleteMap = {
       return `<small>${original.reference || original.iid}</small> ${escape(original.title)}`;
     },
   },
+  [AutoComplete.Milestones]: {
+    filterValues() {
+      return this[AutoComplete.Milestones];
+    },
+    menuItemTemplate({ original }) {
+      return escape(original.title);
+    },
+  },
 };
 
 export default {
@@ -157,8 +166,8 @@ export default {
           menuItemTemplate: autoCompleteMap[AutoComplete.Labels].menuItemTemplate,
           selectTemplate: ({ original }) =>
             NON_WORD_OR_INTEGER.test(original.title)
-              ? `~"${original.title}"`
-              : `~${original.title}`,
+              ? `~"${escape(original.title)}"`
+              : `~${escape(original.title)}`,
           values: this.getValues(AutoComplete.Labels),
         },
         {
@@ -168,6 +177,13 @@ export default {
           selectTemplate: ({ original }) => original.reference || `!${original.iid}`,
           values: this.getValues(AutoComplete.MergeRequests),
         },
+        {
+          trigger: '%',
+          lookup: 'title',
+          menuItemTemplate: autoCompleteMap[AutoComplete.Milestones].menuItemTemplate,
+          selectTemplate: ({ original }) => `%"${escape(original.title)}"`,
+          values: this.getValues(AutoComplete.Milestones),
+        },
       ],
     });
 

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

@@ -175,7 +175,7 @@ export default {
         issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         epics: this.enableAutocomplete,
-        milestones: this.enableAutocomplete,
+        milestones: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         snippets: this.enableAutocomplete,
       },

spec/features/issues/gfm_autocomplete_spec.rb

@@ -535,6 +535,21 @@ RSpec.describe 'GFM autocomplete', :js do
       expect(find('.tribute-container ul', visible: true)).to have_text(user_xss.username)
     end
 
+    it 'opens autocomplete menu for Milestone when field starts with text with item escaping HTML characters' do
+      milestone_xss_title = 'alert milestone <img src=x onerror="alert(\'Hello xss\');" a'
+      create(:milestone, project: project, title: milestone_xss_title)
+
+      page.within '.timeline-content-form' do
+        find('#note-body').native.send_keys('%')
+      end
+
+      wait_for_requests
+
+      expect(page).to have_selector('.tribute-container', visible: true)
+
+      expect(find('.tribute-container ul', visible: true)).to have_text('alert milestone')
+    end
+
     it 'selects the first item for assignee dropdowns' do
       page.within '.timeline-content-form' do
         find('#note-body').native.send_keys('@')