CE backport for `reference` in gfm_autocomplete

Currently not used by any CE code

app/assets/javascripts/gfm_auto_complete.js

@@ -221,13 +221,13 @@ class GfmAutoComplete {
       displayTpl(value) {
         let tmpl = GfmAutoComplete.Loading.template;
         if (value.title != null) {
-          tmpl = GfmAutoComplete.Issues.templateFunction(value.id, value.title);
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
         }
         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: {
         ...this.getDefaultCallbacks(),
         beforeSave(issues) {
@@ -238,6 +238,7 @@ class GfmAutoComplete {
             return {
               id: i.iid,
               title: sanitize(i.title),
+              reference: i.reference,
               search: `${i.iid} ${i.title}`,
             };
           });
@@ -287,13 +288,13 @@ class GfmAutoComplete {
       displayTpl(value) {
         let tmpl = GfmAutoComplete.Loading.template;
         if (value.title != null) {
-          tmpl = GfmAutoComplete.Issues.templateFunction(value.id, value.title);
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
         }
         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: {
         ...this.getDefaultCallbacks(),
         beforeSave(merges) {
@@ -304,6 +305,7 @@ class GfmAutoComplete {
             return {
               id: m.iid,
               title: sanitize(m.title),
+              reference: m.reference,
               search: `${m.iid} ${m.title}`,
             };
           });
@@ -397,7 +399,7 @@ class GfmAutoComplete {
       displayTpl(value) {
         let tmpl = GfmAutoComplete.Loading.template;
         if (value.title != null) {
-          tmpl = GfmAutoComplete.Issues.templateFunction(value.id, value.title);
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
         }
         return tmpl;
       },
@@ -596,8 +598,12 @@ GfmAutoComplete.Labels = {
 };
 // Issues, MergeRequests and Snippets
 GfmAutoComplete.Issues = {
-  templateFunction(id, title) {
-    return `<li><small>${id}</small> ${_.escape(title)}</li>`;
+  insertTemplateFunction(value) {
+    // eslint-disable-next-line no-template-curly-in-string
+    return value.reference || '${atwho-at}${id}';
+  },
+  templateFunction({ id, title, reference }) {
+    return `<li><small>${reference || id}</small> ${_.escape(title)}</li>`;
   },
 };
 // Milestones

spec/javascripts/gfm_auto_complete_spec.js

@@ -205,4 +205,40 @@ describe('GfmAutoComplete', function() {
       expect(GfmAutoComplete.isLoading({ title: 'Foo' })).toBe(false);
     });
   });
+
+  describe('Issues.insertTemplateFunction', function() {
+    it('should return default template', function() {
+      expect(GfmAutoComplete.Issues.insertTemplateFunction({ id: 5, title: 'Some Issue' })).toBe(
+        '${atwho-at}${id}', // eslint-disable-line no-template-curly-in-string
+      );
+    });
+
+    it('should return reference when reference is set', function() {
+      expect(
+        GfmAutoComplete.Issues.insertTemplateFunction({
+          id: 5,
+          title: 'Some Issue',
+          reference: 'grp/proj#5',
+        }),
+      ).toBe('grp/proj#5');
+    });
+  });
+
+  describe('Issues.templateFunction', function() {
+    it('should return html with id and title', function() {
+      expect(GfmAutoComplete.Issues.templateFunction({ id: 5, title: 'Some Issue' })).toBe(
+        '<li><small>5</small> Some Issue</li>',
+      );
+    });
+
+    it('should replace id with reference if reference is set', function() {
+      expect(
+        GfmAutoComplete.Issues.templateFunction({
+          id: 5,
+          title: 'Some Issue',
+          reference: 'grp/proj#5',
+        }),
+      ).toBe('<li><small>grp/proj#5</small> Some Issue</li>');
+    });
+  });
 });