Merge branch '230969-convert-issues-autocomplete-from-at-js-to-tribute' into 'master'

Convert issues autocomplete from at.js to tribute

Closes #230969

See merge request gitlab-org/gitlab!39627

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

@@ -6,6 +6,7 @@ import { spriteIcon } from '~/lib/utils/common_utils';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 
 const AutoComplete = {
+  Issues: 'issues',
   Labels: 'labels',
   Members: 'members',
 };
@@ -17,6 +18,14 @@ function doesCurrentLineStartWith(searchString, fullText, selectionStart) {
 }
 
 const autoCompleteMap = {
+  [AutoComplete.Issues]: {
+    filterValues() {
+      return this[AutoComplete.Issues];
+    },
+    menuItemTemplate({ original }) {
+      return `<small>${original.reference || original.iid}</small> ${escape(original.title)}`;
+    },
+  },
   [AutoComplete.Labels]: {
     filterValues() {
       const fullText = this.$slots.default?.[0]?.elm?.value;
@@ -106,6 +115,13 @@ export default {
 
     this.tribute = new Tribute({
       collection: [
+        {
+          trigger: '#',
+          lookup: value => value.iid + value.title,
+          menuItemTemplate: autoCompleteMap[AutoComplete.Issues].menuItemTemplate,
+          selectTemplate: ({ original }) => original.reference || `#${original.iid}`,
+          values: this.getValues(AutoComplete.Issues),
+        },
         {
           trigger: '@',
           fillAttr: 'username',

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

@@ -167,7 +167,7 @@ export default {
     return new GLForm($(this.$refs['gl-form']), {
       emojis: this.enableAutocomplete,
       members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
-      issues: this.enableAutocomplete,
+      issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
       mergeRequests: this.enableAutocomplete,
       epics: this.enableAutocomplete,
       milestones: this.enableAutocomplete,

spec/features/issues/gfm_autocomplete_spec.rb

@@ -504,6 +504,23 @@ RSpec.describe 'GFM autocomplete', :js do
       expect(page).to have_selector('.tribute-container', visible: true)
     end
 
+    it 'opens autocomplete menu for Issues when field starts with text with item escaping HTML characters' do
+      issue_xss_title = 'This will execute alert<img src=x onerror=alert(2)&lt;img src=x onerror=alert(1)&gt;'
+      create(:issue, project: project, title: issue_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)
+
+      page.within '.tribute-container ul' do
+        expect(page.all('li').first.text).to include(issue_xss_title)
+      end
+    end
+
     it 'opens autocomplete menu for Username when field starts with text with item escaping HTML characters' do
       page.within '.timeline-content-form' do
         find('#note-body').native.send_keys('@ev')