Merge branch 'kp-make-gfm-autocomplete-configurable' into 'master'

Make GFM Autocomplete configurable

See merge request gitlab-org/gitlab-ce!20066

app/assets/javascripts/gfm_auto_complete.js

@@ -7,6 +7,16 @@ function sanitize(str) {
   return str.replace(/<(?:.|\n)*?>/gm, '');
 }
 
+export const defaultAutocompleteConfig = {
+  emojis: true,
+  members: true,
+  issues: true,
+  mergeRequests: true,
+  epics: false,
+  milestones: true,
+  labels: true,
+};
+
 class GfmAutoComplete {
   constructor(dataSources) {
     this.dataSources = dataSources || {};
@@ -14,14 +24,7 @@ class GfmAutoComplete {
     this.isLoadingData = {};
   }
 
-  setup(input, enableMap = {
-    emojis: true,
-    members: true,
-    issues: true,
-    milestones: true,
-    mergeRequests: true,
-    labels: true,
-  }) {
+  setup(input, enableMap = defaultAutocompleteConfig) {
     // Add GFM auto-completion to all input fields, that accept GFM input.
     this.input = input || $('.js-gfm-input');
     this.enableMap = enableMap;

app/assets/javascripts/gl_form.js

 import $ from 'jquery';
 import autosize from 'autosize';
-import GfmAutoComplete from './gfm_auto_complete';
+import GfmAutoComplete, * as GFMConfig from './gfm_auto_complete';
 import dropzoneInput from './dropzone_input';
 import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
 
 export default class GLForm {
-  constructor(form, enableGFM = false) {
+  constructor(form, enableGFM = {}) {
     this.form = form;
     this.textarea = this.form.find('textarea.js-gfm-input');
-    this.enableGFM = enableGFM;
+    this.enableGFM = Object.assign({}, GFMConfig.defaultAutocompleteConfig, enableGFM);
     // Before we start, we should clean up any previous data for this form
     this.destroy();
     // Setup the form
@@ -34,14 +34,7 @@ export default class GLForm {
       // 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'));
       this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
-      this.autoComplete.setup(this.form.find('.js-gfm-input'), {
-        emojis: true,
-        members: this.enableGFM,
-        issues: this.enableGFM,
-        milestones: this.enableGFM,
-        mergeRequests: this.enableGFM,
-        labels: this.enableGFM,
-      });
+      this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM);
       dropzoneInput(this.form);
       autosize(this.textarea);
     }

app/assets/javascripts/init_notes.js

@@ -7,10 +7,10 @@ export default () => {
     notesIds,
     now,
     diffView,
-    autocomplete,
+    enableGFM,
   } = JSON.parse(dataEl.innerHTML);
 
   // Create a singleton so that we don't need to assign
   // into the window object, we can just access the current isntance with Notes.instance
-  Notes.initialize(notesUrl, notesIds, now, diffView, autocomplete);
+  Notes.initialize(notesUrl, notesIds, now, diffView, enableGFM);
 };

app/assets/javascripts/notes.js

@@ -20,6 +20,7 @@ import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_c
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
+import { defaultAutocompleteConfig } from './gfm_auto_complete';
 import CommentTypeToggle from './comment_type_toggle';
 import GLForm from './gl_form';
 import loadAwardsHandler from './awards_handler';
@@ -45,7 +46,7 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 
 export default class Notes {
-  static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
+  static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM) {
     if (!this.instance) {
       this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
     }
@@ -55,7 +56,7 @@ export default class Notes {
     return this.instance;
   }
 
-  constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
+  constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = defaultAutocompleteConfig) {
     this.updateTargetButtons = this.updateTargetButtons.bind(this);
     this.updateComment = this.updateComment.bind(this);
     this.visibilityChange = this.visibilityChange.bind(this);
@@ -94,7 +95,7 @@ export default class Notes {
     this.cleanBinding();
     this.addBinding();
     this.setPollingInterval();
-    this.setupMainTargetNoteForm();
+    this.setupMainTargetNoteForm(enableGFM);
     this.taskList = new TaskList({
       dataType: 'note',
       fieldName: 'note',
@@ -598,14 +599,14 @@ export default class Notes {
    *
    * Sets some hidden fields in the form.
    */
-  setupMainTargetNoteForm() {
+  setupMainTargetNoteForm(enableGFM) {
     var form;
     // find the form
     form = $('.js-new-note-form');
     // Set a global clone of the form for later cloning
     this.formClone = form.clone();
     // show the form
-    this.setupNoteForm(form);
+    this.setupNoteForm(form, enableGFM);
     // fix classes
     form.removeClass('js-new-note-form');
     form.addClass('js-main-target-form');
@@ -633,9 +634,9 @@ export default class Notes {
    * setup GFM auto complete
    * show the form
    */
-  setupNoteForm(form) {
+  setupNoteForm(form, enableGFM = defaultAutocompleteConfig) {
     var textarea, key;
-    this.glForm = new GLForm(form, this.enableGFM);
+    this.glForm = new GLForm(form, enableGFM);
     textarea = form.find('.js-note-text');
     key = [
       'Note',

app/assets/javascripts/pages/projects/init_form.js

@@ -3,5 +3,5 @@ import GLForm from '~/gl_form';
 
 export default function ($formEl) {
   new ZenMode(); // eslint-disable-line no-new
-  new GLForm($formEl, true); // eslint-disable-line no-new
+  new GLForm($formEl); // eslint-disable-line no-new
 }

app/assets/javascripts/pages/projects/issues/form.js

@@ -10,7 +10,7 @@ import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
 
 export default () => {
   new ShortcutsNavigation();
-  new GLForm($('.issue-form'), true);
+  new GLForm($('.issue-form'));
   new IssuableForm($('.issue-form'));
   new LabelsSelect();
   new MilestoneSelect();

app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js

@@ -12,7 +12,7 @@ import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
 export default () => {
   new Diff();
   new ShortcutsNavigation();
-  new GLForm($('.merge-request-form'), true);
+  new GLForm($('.merge-request-form'));
   new IssuableForm($('.merge-request-form'));
   new LabelsSelect();
   new MilestoneSelect();

app/assets/javascripts/pages/projects/tags/new/index.js

@@ -5,6 +5,6 @@ import GLForm from '../../../../gl_form';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
-  new GLForm($('.tag-form'), true); // eslint-disable-line no-new
+  new GLForm($('.tag-form')); // eslint-disable-line no-new
   new RefSelectDropdown($('.js-branch-select')); // eslint-disable-line no-new
 });

app/assets/javascripts/pages/projects/wikis/index.js

@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
   new Wikis(); // eslint-disable-line no-new
   new ShortcutsWiki(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
-  new GLForm($('.wiki-form'), true); // eslint-disable-line no-new
+  new GLForm($('.wiki-form')); // eslint-disable-line no-new
 
   const deleteWikiButton = document.getElementById('delete-wiki-button');
 

app/assets/javascripts/pages/snippets/form.js

@@ -3,6 +3,13 @@ import GLForm from '~/gl_form';
 import ZenMode from '~/zen_mode';
 
 export default () => {
-  new GLForm($('.snippet-form'), false); // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new GLForm($('.snippet-form'), {
+    members: false,
+    issues: false,
+    mergeRequests: false,
+    milestones: false,
+    labels: false,
+  });
   new ZenMode(); // eslint-disable-line no-new
 };

app/assets/javascripts/shared/milestones/form.js

@@ -6,5 +6,13 @@ import GLForm from '../../gl_form';
 export default (initGFM = true) => {
   new ZenMode(); // eslint-disable-line no-new
   new DueDateSelectors(); // eslint-disable-line no-new
-  new GLForm($('.milestone-form'), initGFM); // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new GLForm($('.milestone-form'), {
+    emojis: initGFM,
+    members: initGFM,
+    issues: initGFM,
+    mergeRequests: initGFM,
+    milestones: initGFM,
+    labels: initGFM,
+  });
 };

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

@@ -62,7 +62,14 @@
       /*
         GLForm class handles all the toolbar buttons
       */
-      return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
+      return new GLForm($(this.$refs['gl-form']), {
+        emojis: this.enableAutocomplete,
+        members: this.enableAutocomplete,
+        issues: this.enableAutocomplete,
+        mergeRequests: this.enableAutocomplete,
+        milestones: this.enableAutocomplete,
+        labels: this.enableAutocomplete,
+      });
     },
     beforeDestroy() {
       const glForm = $(this.$refs['gl-form']).data('glForm');

app/helpers/notes_helper.rb

@@ -143,7 +143,14 @@ module NotesHelper
       notesIds: @notes.map(&:id),
       now: Time.now.to_i,
       diffView: diff_view,
-      autocomplete: autocomplete
+      enableGFM: {
+        emojis: true,
+        members: autocomplete,
+        issues: autocomplete,
+        mergeRequests: autocomplete,
+        milestones: autocomplete,
+        labels: autocomplete
+      }
     }
   end