Merge branch '10096-gfm-autocomplete' into 'master'

Move EE specific GfmAutocomplete code to EE file

Closes #10096

See merge request gitlab-org/gitlab-ee!11471

app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js

 import $ from 'jquery';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import GfmAutoComplete from '~/gfm_auto_complete';
+import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 
 export default function initGFMInput() {
   $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => {

app/assets/javascripts/gfm_auto_complete.js

 import $ from 'jquery';
 import _ from 'underscore';
 
-// EE-specific
-import setupAutoCompleteEpics from 'ee/gfm_auto_complete_ee';
-
 import glRegexp from './lib/utils/regexp';
 import AjaxCache from './lib/utils/ajax_cache';
 
@@ -57,9 +54,6 @@ class GfmAutoComplete {
     if (this.enableMap.labels) this.setupLabels($input);
     if (this.enableMap.snippets) this.setupSnippets($input);
 
-    // EE-specific
-    if (this.enableMap.epics) setupAutoCompleteEpics($input, this.getDefaultCallbacks());
-
     // We don't instantiate the quick actions autocomplete for note and issue/MR edit forms
     $input.filter('[data-supports-quick-actions="true"]').atwho({
       at: '/',

app/assets/javascripts/gl_form.js

 import $ from 'jquery';
 import autosize from 'autosize';
-import GfmAutoComplete, * as GFMConfig from './gfm_auto_complete';
+import GfmAutoComplete, { defaultAutocompleteConfig } from 'ee_else_ce/gfm_auto_complete';
 import dropzoneInput from './dropzone_input';
 import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
 
@@ -8,7 +8,7 @@ export default class GLForm {
   constructor(form, enableGFM = {}) {
     this.form = form;
     this.textarea = this.form.find('textarea.js-gfm-input');
-    this.enableGFM = Object.assign({}, GFMConfig.defaultAutocompleteConfig, enableGFM);
+    this.enableGFM = Object.assign({}, defaultAutocompleteConfig, enableGFM);
     // Disable autocomplete for keywords which do not have dataSources available
     const dataSources = (gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources) || {};
     Object.keys(this.enableGFM).forEach(item => {

app/assets/javascripts/issuable_form.js

 import $ from 'jquery';
 import Pikaday from 'pikaday';
+import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import Autosave from './autosave';
 import UsersSelect from './users_select';
-import GfmAutoComplete from './gfm_auto_complete';
 import ZenMode from './zen_mode';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datetime_utility';

app/assets/javascripts/pages/profiles/show/index.js

 import $ from 'jquery';
 import createFlash from '~/flash';
-import GfmAutoComplete from '~/gfm_auto_complete';
+import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import emojiRegex from 'emoji-regex';
 import EmojiMenu from './emoji_menu';
 

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -2,7 +2,7 @@
 import $ from 'jquery';
 import createFlash from '~/flash';
 import Icon from '~/vue_shared/components/icon.vue';
-import GfmAutoComplete from '~/gfm_auto_complete';
+import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import { __, s__ } from '~/locale';
 import Api from '~/api';
 import { GlModal, GlTooltipDirective } from '@gitlab/ui';

ee/app/assets/javascripts/gfm_auto_complete.js

+import $ from 'jquery';
+import GfmAutoComplete from '~/gfm_auto_complete';
+
+/**
+ * This is added to keep the export parity with the CE counterpart.
+ *
+ * Some modules import `defaultAutocompleteConfig` which will be undefined
+ * if not exported from here in EE.
+ */
+export { defaultAutocompleteConfig } from '~/gfm_auto_complete';
+
+class GfmAutoCompleteEE extends GfmAutoComplete {
+  setupAtWho($input) {
+    if (this.enableMap.epics) {
+      this.setupAutoCompleteEpics($input, this.getDefaultCallbacks());
+    }
+
+    super.setupAtWho($input);
+  }
+
+  setupAutoCompleteEpics = ($input, defaultCallbacks) => {
+    $input.atwho({
+      at: '&',
+      alias: 'epics',
+      searchKey: 'search',
+      displayTpl(value) {
+        let tmpl = GfmAutoComplete.Loading.template;
+        if (value.title != null) {
+          tmpl = GfmAutoComplete.Issues.templateFunction(value);
+        }
+        return tmpl;
+      },
+      data: GfmAutoComplete.defaultLoadingData,
+      // eslint-disable-next-line no-template-curly-in-string
+      insertTpl: '${atwho-at}${id}',
+      callbacks: {
+        ...defaultCallbacks,
+        beforeSave(merges) {
+          return $.map(merges, m => {
+            if (m.title == null) {
+              return m;
+            }
+            return {
+              id: m.iid,
+              title: m.title.replace(/<(?:.|\n)*?>/gm, ''),
+              search: `${m.iid} ${m.title}`,
+            };
+          });
+        },
+      },
+    });
+  };
+}
+
+export default GfmAutoCompleteEE;

ee/app/assets/javascripts/gfm_auto_complete_ee.js

-import $ from 'jquery';
-import GfmAutoComplete from '~/gfm_auto_complete';
-
-const setupAutoCompleteEpics = ($input, defaultCallbacks) => {
-  $input.atwho({
-    at: '&',
-    alias: 'epics',
-    searchKey: 'search',
-    displayTpl(value) {
-      let tmpl = GfmAutoComplete.Loading.template;
-      if (value.title != null) {
-        tmpl = GfmAutoComplete.Issues.templateFunction(value);
-      }
-      return tmpl;
-    },
-    data: GfmAutoComplete.defaultLoadingData,
-    // eslint-disable-next-line no-template-curly-in-string
-    insertTpl: '${atwho-at}${id}',
-    callbacks: {
-      ...defaultCallbacks,
-      beforeSave(merges) {
-        return $.map(merges, m => {
-          if (m.title == null) {
-            return m;
-          }
-          return {
-            id: m.iid,
-            title: m.title.replace(/<(?:.|\n)*?>/gm, ''),
-            search: `${m.iid} ${m.title}`,
-          };
-        });
-      },
-    },
-  });
-};
-
-export default setupAutoCompleteEpics;

ee/app/assets/javascripts/related_issues/components/add_issuable_form.vue

 <script>
 import $ from 'jquery';
-import GfmAutoComplete from '~/gfm_auto_complete';
+import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import { GlLoadingIcon } from '@gitlab/ui';
 import issueToken from './issue_token.vue';
 import { autoCompleteTextMap, inputPlaceholderTextMap } from '../constants';

ee/spec/javascripts/gfm_auto_complete_spec.js

+import GfmAutoCompleteEE from 'ee/gfm_auto_complete';
+import $ from 'jquery';
+
+describe('GfmAutoCompleteEE', () => {
+  const dataSources = {
+    labels: `${gl.TEST_HOST}/autocomplete_sources/labels`,
+  };
+  let instance;
+  const $input = $('<input type="text" />');
+
+  beforeEach(() => {
+    instance = new GfmAutoCompleteEE(dataSources);
+    instance.setup($input);
+  });
+
+  it('should have enableMap', () => {
+    expect(instance.enableMap).not.toBeNull();
+  });
+});

spec/frontend/gfm_auto_complete_spec.js

 /* eslint no-param-reassign: "off" */
 
 import $ from 'jquery';
-import GfmAutoComplete from '~/gfm_auto_complete';
+import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 
 import 'jquery.caret';
 import 'at.js';