Make `gfm_auto_complete` into a module and fix up tech debt

app/assets/javascripts/dispatcher.js

@@ -53,6 +53,7 @@ import BlobViewer from './blob/viewer/index';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
+import GfmAutoComplete from './gfm_auto_complete';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -79,6 +80,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
       path = page.split(':');
       shortcut_handler = null;
 
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
+
       function initBlob() {
         new LineHighlighter();
 

app/assets/javascripts/gl_form.js

@@ -3,6 +3,8 @@
 /* global DropzoneInput */
 /* global autosize */
 
+import GfmAutoComplete from './gfm_auto_complete';
+
 window.gl = window.gl || {};
 
 function GLForm(form) {
@@ -31,7 +33,7 @@ GLForm.prototype.setupForm = function() {
     // remove notify commit author checkbox for non-commit notes
     gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
 
-    gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
+    new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup(this.form.find('.js-gfm-input'));
     new DropzoneInput(this.form);
     autosize(this.textarea);
   }

app/assets/javascripts/issuable_form.js

@@ -6,6 +6,7 @@
 /* global Pikaday */
 
 import UsersSelect from './users_select';
+import GfmAutoComplete from './gfm_auto_complete';
 
 (function() {
   this.IssuableForm = (function() {
@@ -20,7 +21,7 @@ import UsersSelect from './users_select';
       this.renderWipExplanation = this.renderWipExplanation.bind(this);
       this.resetAutosave = this.resetAutosave.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
-      gl.GfmAutoComplete.setup();
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
       new UsersSelect();
       new ZenMode();
       this.titleField = this.form.find("input[name*='[title]']");

app/assets/javascripts/main.js

@@ -96,7 +96,6 @@ import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
 import './flash';
-import './gfm_auto_complete';
 import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';

app/assets/javascripts/notes.js

@@ -12,7 +12,6 @@ require('./autosave');
 window.autosize = require('vendor/autosize');
 window.Dropzone = require('dropzone');
 require('./dropzone_input');
-require('./gfm_auto_complete');
 require('vendor/jquery.caret'); // required by jquery.atwho
 require('vendor/jquery.atwho');
 require('./task_list');

app/views/layouts/_init_auto_complete.html.haml

@@ -3,6 +3,7 @@
 
 - if project
   :javascript
+    gl.GfmAutoComplete = gl.GfmAutoComplete || {};
     gl.GfmAutoComplete.dataSources = {
       members: "#{members_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}",
       issues: "#{issues_namespace_project_autocomplete_sources_path(project.namespace, project)}",
@@ -11,5 +12,3 @@
       milestones: "#{milestones_namespace_project_autocomplete_sources_path(project.namespace, project)}",
       commands: "#{commands_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}"
     };
-
-    gl.GfmAutoComplete.setup();

app/views/layouts/application.html.haml

@@ -2,8 +2,8 @@
 %html{ lang: I18n.locale, class: "#{page_class}" }
   = render "layouts/head"
   %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
+    = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/header/default", title: header_title
     = render 'layouts/page', sidebar: sidebar, nav: nav
 
     = yield :scripts_body
-    = render "layouts/init_auto_complete" if @gfm_form

spec/features/projects/gfm_autocomplete_load_spec.rb

@@ -10,7 +10,7 @@ describe 'GFM autocomplete loading', feature: true, js: true do
   end
 
   it 'does not load on project#show' do
-    expect(evaluate_script('gl.GfmAutoComplete.dataSources')).to eq({})
+    expect(evaluate_script('gl.GfmAutoComplete')).to eq(nil)
   end
 
   it 'loads on new issue page' do

spec/javascripts/gfm_auto_complete_spec.js

 /* eslint no-param-reassign: "off" */
 
-require('~/gfm_auto_complete');
+import GfmAutoComplete from '~/gfm_auto_complete';
+
 require('vendor/jquery.caret');
 require('vendor/jquery.atwho');
 
-const global = window.gl || (window.gl = {});
-const GfmAutoComplete = global.GfmAutoComplete;
-
 describe('GfmAutoComplete', function () {
+  const gfmAutoCompleteCallbacks = GfmAutoComplete.prototype.getDefaultCallbacks.call({
+    fetchData: () => {},
+  });
+
   describe('DefaultOptions.sorter', function () {
     describe('assets loading', function () {
       beforeEach(function () {
@@ -16,7 +18,7 @@ describe('GfmAutoComplete', function () {
         this.atwhoInstance = { setting: {} };
         this.items = [];
 
-        this.sorterValue = GfmAutoComplete.DefaultOptions.sorter
+        this.sorterValue = gfmAutoCompleteCallbacks.sorter
           .call(this.atwhoInstance, '', this.items);
       });
 
@@ -38,7 +40,7 @@ describe('GfmAutoComplete', function () {
       it('should enable highlightFirst if alwaysHighlightFirst is set', function () {
         const atwhoInstance = { setting: { alwaysHighlightFirst: true } };
 
-        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance);
+        gfmAutoCompleteCallbacks.sorter.call(atwhoInstance);
 
         expect(atwhoInstance.setting.highlightFirst).toBe(true);
       });
@@ -46,7 +48,7 @@ describe('GfmAutoComplete', function () {
       it('should enable highlightFirst if a query is present', function () {
         const atwhoInstance = { setting: {} };
 
-        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, 'query');
+        gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, 'query');
 
         expect(atwhoInstance.setting.highlightFirst).toBe(true);
       });
@@ -58,7 +60,7 @@ describe('GfmAutoComplete', function () {
         const items = [];
         const searchKey = 'searchKey';
 
-        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, query, items, searchKey);
+        gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, query, items, searchKey);
 
         expect($.fn.atwho.default.callbacks.sorter).toHaveBeenCalledWith(query, items, searchKey);
       });
@@ -67,7 +69,7 @@ describe('GfmAutoComplete', function () {
 
   describe('DefaultOptions.matcher', function () {
     const defaultMatcher = (context, flag, subtext) => (
-      GfmAutoComplete.DefaultOptions.matcher.call(context, flag, subtext)
+      gfmAutoCompleteCallbacks.matcher.call(context, flag, subtext)
     );
 
     const flagsUseDefaultMatcher = ['@', '#', '!', '~', '%'];