Use reference for Epic in autocompletion

Use reference for Epics in autocompletion

ee/app/assets/javascripts/gfm_auto_complete.js

@@ -36,8 +36,8 @@ class GfmAutoCompleteEE extends GfmAutoComplete {
         return tmpl;
       },
       data: GfmAutoComplete.defaultLoadingData,
-      // eslint-disable-next-line no-template-curly-in-string
-      insertTpl: '${atwho-at}${id}',
+      insertTpl: GfmAutoComplete.Issues.insertTemplateFunction,
+      skipSpecialCharacterTest: true,
       callbacks: {
         ...defaultCallbacks,
         beforeSave(merges) {
@@ -47,6 +47,7 @@ class GfmAutoCompleteEE extends GfmAutoComplete {
             }
             return {
               id: m.iid,
+              reference: m.reference,
               title: m.title.replace(/<(?:.|\n)*?>/gm, ''),
               search: `${m.iid} ${m.title}`,
             };

ee/changelogs/unreleased/issue_224176_fe.yml

+---
+title: Fix Epic autocomplete reference
+merge_request: 52663
+author:
+type: fixed

ee/spec/frontend/gfm_auto_complete_spec.js

 import $ from 'jquery';
 import GfmAutoCompleteEE from 'ee/gfm_auto_complete';
 import { TEST_HOST } from 'helpers/test_constants';
+import GfmAutoComplete from '~/gfm_auto_complete';
 
 describe('GfmAutoCompleteEE', () => {
   const dataSources = {
@@ -17,4 +18,22 @@ describe('GfmAutoCompleteEE', () => {
   it('should have enableMap', () => {
     expect(instance.enableMap).not.toBeNull();
   });
+
+  describe('Issues.templateFunction', () => {
+    it('should return html with id and title', () => {
+      expect(GfmAutoComplete.Issues.templateFunction({ id: 42, title: 'Sample Epic' })).toBe(
+        '<li><small>42</small> Sample Epic</li>',
+      );
+    });
+
+    it('should replace id with reference if reference is set', () => {
+      expect(
+        GfmAutoComplete.Issues.templateFunction({
+          id: 42,
+          title: 'Another Epic',
+          reference: 'foo&42',
+        }),
+      ).toBe('<li><small>foo&42</small> Another Epic</li>');
+    });
+  });
 });