Lightly refactor js files related to file template selectors.refactor-templates-js

21 files changed, 369 insertions, 396 deletions

diff --git a/app/assets/javascripts/blob/blob_ci_yaml.js b/app/assets/javascripts/blob/blob_ci_yaml.js
deleted file mode 100644
index ec1c018424d..00000000000
--- a/app/assets/javascripts/blob/blob_ci_yaml.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* eslint-disable no-param-reassign, comma-dangle */
-/* global Api */
-
-require('./template_selector');
-
-((global) => {
-  class BlobCiYamlSelector extends gl.TemplateSelector {
-    requestFile(query) {
-      return Api.gitlabCiYml(query.name, this.requestFileSuccess.bind(this));
-    }
-
-    requestFileSuccess(file) {
-      return super.requestFileSuccess(file);
-    }
-  }
-
-  global.BlobCiYamlSelector = BlobCiYamlSelector;
-
-  class BlobCiYamlSelectors {
-    constructor({ editor, $dropdowns } = {}) {
-      this.editor = editor;
-      this.$dropdowns = $dropdowns || $('.js-gitlab-ci-yml-selector');
-      this.initSelectors();
-    }
-
-    initSelectors() {
-      const editor = this.editor;
-      this.$dropdowns.each((i, dropdown) => {
-        const $dropdown = $(dropdown);
-        return new BlobCiYamlSelector({
-          editor,
-          pattern: /(.gitlab-ci.yml)/,
-          data: $dropdown.data('data'),
-          wrapper: $dropdown.closest('.js-gitlab-ci-yml-selector-wrap'),
-          dropdown: $dropdown
-        });
-      });
-    }
-  }
-
-  global.BlobCiYamlSelectors = BlobCiYamlSelectors;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/blob/blob_dockerfile_selector.js b/app/assets/javascripts/blob/blob_dockerfile_selector.js
deleted file mode 100644
index d4f60cc6ecd..00000000000
--- a/app/assets/javascripts/blob/blob_dockerfile_selector.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* global Api */
-
-require('./template_selector');
-
-(() => {
-  const global = window.gl || (window.gl = {});
-
-  class BlobDockerfileSelector extends gl.TemplateSelector {
-    requestFile(query) {
-      return Api.dockerfileYml(query.name, this.requestFileSuccess.bind(this));
-    }
-
-    requestFileSuccess(file) {
-      return super.requestFileSuccess(file);
-    }
-  }
-
-  global.BlobDockerfileSelector = BlobDockerfileSelector;
-})();
diff --git a/app/assets/javascripts/blob/blob_dockerfile_selectors.js b/app/assets/javascripts/blob/blob_dockerfile_selectors.js
deleted file mode 100644
index 9cee79fa5d5..00000000000
--- a/app/assets/javascripts/blob/blob_dockerfile_selectors.js
+++ /dev/null
@@ -1,27 +0,0 @@
-(() => {
-  const global = window.gl || (window.gl = {});
-
-  class BlobDockerfileSelectors {
-    constructor({ editor, $dropdowns } = {}) {
-      this.editor = editor;
-      this.$dropdowns = $dropdowns || $('.js-dockerfile-selector');
-      this.initSelectors();
-    }
-
-    initSelectors() {
-      const editor = this.editor;
-      this.$dropdowns.each((i, dropdown) => {
-        const $dropdown = $(dropdown);
-        return new gl.BlobDockerfileSelector({
-          editor,
-          pattern: /(Dockerfile)/,
-          data: $dropdown.data('data'),
-          wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
-          dropdown: $dropdown,
-        });
-      });
-    }
-  }
-
-  global.BlobDockerfileSelectors = BlobDockerfileSelectors;
-})();
diff --git a/app/assets/javascripts/blob/blob_gitignore_selector.js b/app/assets/javascripts/blob/blob_gitignore_selector.js
deleted file mode 100644
index de20eab9cd1..00000000000
--- a/app/assets/javascripts/blob/blob_gitignore_selector.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params */
-/* global Api */
-
-require('./template_selector');
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.BlobGitignoreSelector = (function(superClass) {
-    extend(BlobGitignoreSelector, superClass);
-
-    function BlobGitignoreSelector() {
-      return BlobGitignoreSelector.__super__.constructor.apply(this, arguments);
-    }
-
-    BlobGitignoreSelector.prototype.requestFile = function(query) {
-      return Api.gitignoreText(query.name, this.requestFileSuccess.bind(this));
-    };
-
-    return BlobGitignoreSelector;
-  })(gl.TemplateSelector);
-}).call(window);
diff --git a/app/assets/javascripts/blob/blob_gitignore_selectors.js b/app/assets/javascripts/blob/blob_gitignore_selectors.js
deleted file mode 100644
index 43e5c0a5641..00000000000
--- a/app/assets/javascripts/blob/blob_gitignore_selectors.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-cond-assign, no-sequences, comma-dangle, max-len */
-/* global BlobGitignoreSelector */
-
-(function() {
-  this.BlobGitignoreSelectors = (function() {
-    function BlobGitignoreSelectors(opts) {
-      var ref;
-      this.$dropdowns = (ref = opts.$dropdowns) != null ? ref : $('.js-gitignore-selector'), this.editor = opts.editor;
-      this.$dropdowns.each((function(_this) {
-        return function(i, dropdown) {
-          var $dropdown;
-          $dropdown = $(dropdown);
-          return new BlobGitignoreSelector({
-            pattern: /(.gitignore)/,
-            data: $dropdown.data('data'),
-            wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
-            dropdown: $dropdown,
-            editor: _this.editor
-          });
-        };
-      })(this));
-    }
-
-    return BlobGitignoreSelectors;
-  })();
-}).call(window);
diff --git a/app/assets/javascripts/blob/blob_license_selector.js b/app/assets/javascripts/blob/blob_license_selector.js
deleted file mode 100644
index b582052a76e..00000000000
--- a/app/assets/javascripts/blob/blob_license_selector.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params, comma-dangle */
-/* global Api */
-
-require('./template_selector');
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.BlobLicenseSelector = (function(superClass) {
-    extend(BlobLicenseSelector, superClass);
-
-    function BlobLicenseSelector() {
-      return BlobLicenseSelector.__super__.constructor.apply(this, arguments);
-    }
-
-    BlobLicenseSelector.prototype.requestFile = function(query) {
-      var data;
-      data = {
-        project: this.dropdown.data('project'),
-        fullname: this.dropdown.data('fullname')
-      };
-      return Api.licenseText(query.id, data, this.requestFileSuccess.bind(this));
-    };
-
-    return BlobLicenseSelector;
-  })(gl.TemplateSelector);
-}).call(window);
diff --git a/app/assets/javascripts/blob/blob_license_selectors.js b/app/assets/javascripts/blob/blob_license_selectors.js
deleted file mode 100644
index c5067b0feae..00000000000
--- a/app/assets/javascripts/blob/blob_license_selectors.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable no-unused-vars, no-param-reassign */
-/* global BlobLicenseSelector */
-
-((global) => {
-  class BlobLicenseSelectors {
-    constructor({ $dropdowns, editor }) {
-      this.$dropdowns = $('.js-license-selector');
-      this.editor = editor;
-      this.$dropdowns.each((i, dropdown) => {
-        const $dropdown = $(dropdown);
-        return new BlobLicenseSelector({
-          editor,
-          pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
-          data: $dropdown.data('data'),
-          wrapper: $dropdown.closest('.js-license-selector-wrap'),
-          dropdown: $dropdown,
-        });
-      });
-    }
-  }
-
-  global.BlobLicenseSelectors = BlobLicenseSelectors;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js
deleted file mode 100644
index 7e03ec3b391..00000000000
--- a/app/assets/javascripts/blob/template_selector.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/* eslint-disable comma-dangle, object-shorthand, func-names, space-before-function-paren, arrow-parens, no-unused-vars, class-methods-use-this, no-var, consistent-return, no-param-reassign, max-len */
-
-((global) => {
-  class TemplateSelector {
-    constructor({ dropdown, data, pattern, wrapper, editor, fileEndpoint, $input } = {}) {
-      this.onClick = this.onClick.bind(this);
-      this.dropdown = dropdown;
-      this.data = data;
-      this.pattern = pattern;
-      this.wrapper = wrapper;
-      this.editor = editor;
-      this.fileEndpoint = fileEndpoint;
-      this.$input = $input || $('#file_name');
-      this.dropdownIcon = $('.fa-chevron-down', this.dropdown);
-      this.buildDropdown();
-      this.bindEvents();
-      this.onFilenameUpdate();
-
-      this.autosizeUpdateEvent = document.createEvent('Event');
-      this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
-    }
-
-    buildDropdown() {
-      return this.dropdown.glDropdown({
-        data: this.data,
-        filterable: true,
-        selectable: true,
-        toggleLabel: this.toggleLabel,
-        search: {
-          fields: ['name']
-        },
-        clicked: this.onClick,
-        text: function(item) {
-          return item.name;
-        }
-      });
-    }
-
-    bindEvents() {
-      return this.$input.on('keyup blur', (e) => this.onFilenameUpdate());
-    }
-
-    toggleLabel(item) {
-      return item.name;
-    }
-
-    onFilenameUpdate() {
-      var filenameMatches;
-      if (!this.$input.length) {
-        return;
-      }
-      filenameMatches = this.pattern.test(this.$input.val().trim());
-      if (!filenameMatches) {
-        this.wrapper.addClass('hidden');
-        return;
-      }
-      return this.wrapper.removeClass('hidden');
-    }
-
-    onClick(item, el, e) {
-      e.preventDefault();
-      return this.requestFile(item);
-    }
-
-    requestFile(item) {
-      // This `requestFile` method is an abstract method that should
-      // be added by all subclasses.
-    }
-
-    // To be implemented on the extending class
-    // e.g.
-    // Api.gitignoreText item.name, @requestFileSuccess.bind(@)
-    requestFileSuccess(file, { skipFocus } = {}) {
-      if (!file) return;
-
-      const oldValue = this.editor.getValue();
-      const newValue = file.content;
-
-      this.editor.setValue(newValue, 1);
-      if (!skipFocus) this.editor.focus();
-
-      if (this.editor instanceof jQuery) {
-        this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
-      }
-    }
-
-    startLoadingSpinner() {
-      this.dropdownIcon
-        .addClass('fa-spinner fa-spin')
-        .removeClass('fa-chevron-down');
-    }
-
-    stopLoadingSpinner() {
-      this.dropdownIcon
-        .addClass('fa-chevron-down')
-        .removeClass('fa-spinner fa-spin');
-    }
-  }
-
-  global.TemplateSelector = TemplateSelector;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js
new file mode 100644
index 00000000000..5010412ad04
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js
@@ -0,0 +1,11 @@
+/* global Api */
+
+const TemplateSelector = require('./template_selector');
+
+class BlobCiYamlSelector extends TemplateSelector {
+  requestFile(query) {
+    return Api.gitlabCiYml(query.name, (file, config) => this.setEditorContent(file, config));
+  }
+}
+
+module.exports = BlobCiYamlSelector;
diff --git a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js
new file mode 100644
index 00000000000..84914a15cb4
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js
@@ -0,0 +1,25 @@
+/* global Api */
+
+const BlobCiYamlSelector = require('./blob_ci_yaml_selector');
+
+class BlobCiYamlSelectors {
+  constructor({ editor, $dropdowns } = {}) {
+    this.$dropdowns = $dropdowns || $('.js-gitlab-ci-yml-selector');
+    this.initSelectors(editor);
+  }
+
+  initSelectors(editor) {
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+      return new BlobCiYamlSelector({
+        editor,
+        pattern: /(.gitlab-ci.yml)/,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-gitlab-ci-yml-selector-wrap'),
+        dropdown: $dropdown,
+      });
+    });
+  }
+}
+
+module.exports = BlobCiYamlSelectors;
diff --git a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js
new file mode 100644
index 00000000000..64af5b1182e
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js
@@ -0,0 +1,11 @@
+/* global Api */
+
+const TemplateSelector = require('./template_selector');
+
+class BlobDockerfileSelector extends TemplateSelector {
+  requestFile(query) {
+    return Api.dockerfileYml(query.name, (file, config) => this.setEditorContent(file, config));
+  }
+}
+
+module.exports = BlobDockerfileSelector;
diff --git a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js
new file mode 100644
index 00000000000..38cb34665d2
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js
@@ -0,0 +1,25 @@
+const BlobDockerfileSelector = require('./blob_dockerfile_selector');
+
+class BlobDockerfileSelectors {
+  constructor({ editor, $dropdowns } = {}) {
+    this.editor = editor;
+    this.$dropdowns = $dropdowns || $('.js-dockerfile-selector');
+    this.initSelectors();
+  }
+
+  initSelectors() {
+    const editor = this.editor;
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+      return new BlobDockerfileSelector({
+        editor,
+        pattern: /(Dockerfile)/,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
+        dropdown: $dropdown,
+      });
+    });
+  }
+}
+
+module.exports = BlobDockerfileSelectors;
diff --git a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js
new file mode 100644
index 00000000000..90b0bca0cde
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js
@@ -0,0 +1,11 @@
+/* global Api */
+
+const TemplateSelector = require('./template_selector');
+
+class BlobGitignoreSelector extends TemplateSelector {
+  requestFile(query) {
+    return Api.gitignoreText(query.name, (file, config) => this.setEditorContent(file, config));
+  }
+}
+
+module.exports = BlobGitignoreSelector;
diff --git a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js
new file mode 100644
index 00000000000..53bfd749e54
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js
@@ -0,0 +1,26 @@
+/* global BlobGitignoreSelector */
+const BlobGitignoreSelector = require('./blob_gitignore_selector');
+
+class BlobGitignoreSelectors {
+  constructor({ editor, $dropdowns }) {
+    this.$dropdowns = $dropdowns || $('.js-gitignore-selector');
+    this.editor = editor;
+    this.initSelectors();
+  }
+
+  initSelectors() {
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+
+      return new BlobGitignoreSelector({
+        pattern: /(.gitignore)/,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
+        dropdown: $dropdown,
+        editor: this.editor,
+      });
+    });
+  }
+}
+
+module.exports = BlobGitignoreSelectors;
diff --git a/app/assets/javascripts/blob/template_selectors/blob_license_selector.js b/app/assets/javascripts/blob/template_selectors/blob_license_selector.js
new file mode 100644
index 00000000000..59d8f4c55f0
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_license_selector.js
@@ -0,0 +1,15 @@
+/* global Api */
+
+const TemplateSelector = require('./template_selector');
+
+class BlobLicenseSelector extends TemplateSelector {
+  requestFile(query) {
+    const data = {
+      project: this.dropdown.data('project'),
+      fullname: this.dropdown.data('fullname'),
+    };
+    return Api.licenseText(query.id, data, (file, config) => this.setEditorContent(file, config));
+  }
+}
+
+module.exports = BlobLicenseSelector;
diff --git a/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js
new file mode 100644
index 00000000000..ec482360ee0
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js
@@ -0,0 +1,26 @@
+/* eslint-disable no-unused-vars, no-param-reassign */
+/* global BlobLicenseSelector */
+
+const BlobLicenseSelector = require('./blob_license_selector');
+
+class BlobLicenseSelectors {
+  constructor({ $dropdowns, editor } = {}) {
+    this.$dropdowns = $dropdowns || $('.js-license-selector');
+    this.initSelectors(editor);
+  }
+
+  initSelectors(editor) {
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+
+      return new BlobLicenseSelector({
+        editor,
+        pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-license-selector-wrap'),
+        dropdown: $dropdown,
+      });
+    });
+  }
+}
+module.exports = BlobLicenseSelectors;
diff --git a/app/assets/javascripts/blob/template_selectors/template_selector.js b/app/assets/javascripts/blob/template_selectors/template_selector.js
new file mode 100644
index 00000000000..0d641801550
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/template_selector.js
@@ -0,0 +1,94 @@
+/* eslint-disable class-methods-use-this, no-unused-vars */
+
+class TemplateSelector {
+  constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
+    this.pattern = pattern;
+    this.editor = editor;
+    this.dropdown = dropdown;
+    this.$dropdownContainer = wrapper;
+    this.$filenameInput = $input || $('#file_name');
+    this.dropdownIcon = $('.fa-chevron-down', dropdown);
+
+    this.initDropdown(dropdown, data);
+    this.listenForFilenameInput();
+    this.renderMatchedDropdown();
+    this.initAutosizeUpdateEvent();
+  }
+
+  initDropdown(dropdown, data) {
+    return $(dropdown).glDropdown({
+      data,
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (item, el, e) => this.fetchFileTemplate(item, el, e),
+      text: item => item.name,
+    });
+  }
+
+  initAutosizeUpdateEvent() {
+    this.autosizeUpdateEvent = document.createEvent('Event');
+    this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
+  }
+
+  listenForFilenameInput() {
+    return this.$filenameInput.on('keyup blur', e => this.renderMatchedDropdown(e));
+  }
+
+  renderMatchedDropdown() {
+    if (!this.$filenameInput.length) {
+      return null;
+    }
+
+    const filenameMatches = this.pattern.test(this.$filenameInput.val().trim());
+
+    if (!filenameMatches) {
+      return this.$dropdownContainer.addClass('hidden');
+    }
+    return this.$dropdownContainer.removeClass('hidden');
+  }
+
+  fetchFileTemplate(item, el, e) {
+    e.preventDefault();
+    return this.requestFile(item);
+  }
+
+  requestFile(item) {
+    // This `requestFile` method is an abstract method that should
+    // be added by all subclasses.
+  }
+
+  // To be implemented on the extending class
+  // e.g. Api.gitlabCiYml(query.name, file => this.setEditorContent(file));
+
+  setEditorContent(file, { skipFocus } = {}) {
+    if (!file) return;
+
+    const newValue = file.content;
+
+    this.editor.setValue(newValue, 1);
+
+    if (!skipFocus) this.editor.focus();
+
+    if (this.editor instanceof jQuery) {
+      this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
+    }
+  }
+
+  startLoadingSpinner() {
+    this.dropdownIcon
+      .addClass('fa-spinner fa-spin')
+      .removeClass('fa-chevron-down');
+  }
+
+  stopLoadingSpinner() {
+    this.dropdownIcon
+      .addClass('fa-chevron-down')
+      .removeClass('fa-spinner fa-spin');
+  }
+}
+
+module.exports = TemplateSelector;
diff --git a/app/assets/javascripts/blob_edit/blob_edit_bundle.js b/app/assets/javascripts/blob_edit/blob_edit_bundle.js
index 0436bbb0eaf..be694b75788 100644
--- a/app/assets/javascripts/blob_edit/blob_edit_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_edit_bundle.js
@@ -2,14 +2,17 @@
 /* global EditBlob */
 /* global NewCommitForm */
 
-require('./edit_blob');
+const EditBlob = require('./edit_blob');
 
-(function() {
-  $(function() {
-    var url = $(".js-edit-blob-form").data("relative-url-root");
-    url += $(".js-edit-blob-form").data("assets-prefix");
+$(function() {
+  const $editBlobForm = $('.js-edit-blob-form');
 
-    var blob = new EditBlob(url, $('.js-edit-blob-form').data('blob-language'));
-    new NewCommitForm($('.js-edit-blob-form'));
-  });
-}).call(window);
+  const relativeUrlRoot = $editBlobForm.data('relative-url-root');
+  const assetsPrefix = $editBlobForm.data('assets-prefix');
+  const blobLanguage = $editBlobForm.data('blob-language');
+
+  const assetsPath = relativeUrlRoot + assetsPrefix;
+
+  new EditBlob(assetsPath, blobLanguage);
+  new NewCommitForm($editBlobForm);
+});
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index a1127b9e30e..3d67cfc2eb0 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,88 +1,102 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, camelcase, no-param-reassign, quotes, prefer-template, no-new, comma-dangle, one-var, one-var-declaration-per-line, prefer-arrow-callback, no-else-return, no-unused-vars, max-len */
 /* global ace */
-/* global BlobGitignoreSelectors */
-
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
-  this.EditBlob = (function() {
-    function EditBlob(assets_path, ace_mode) {
-      if (ace_mode == null) {
-        ace_mode = null;
-      }
-      this.editModeLinkClickHandler = bind(this.editModeLinkClickHandler, this);
-      ace.config.set("modePath", assets_path + "/ace");
-      ace.config.loadModule("ace/ext/searchbox");
-      this.editor = ace.edit("editor");
-      this.editor.focus();
-      if (ace_mode) {
-        this.editor.getSession().setMode("ace/mode/" + ace_mode);
-      }
-      $('form').submit((function(_this) {
-        return function() {
-          return $("#file-content").val(_this.editor.getValue());
-        };
-      // Before a form submission, move the content from the Ace editor into the
-      // submitted textarea
-      })(this));
-      this.initModePanesAndLinks();
-      this.initSoftWrap();
-      new gl.BlobLicenseSelectors({
-        editor: this.editor
-      });
+
+const BlobLicenseSelectors = require('../blob/template_selectors/blob_license_selectors');
+const BlobGitignoreSelectors = require('../blob/template_selectors/blob_gitignore_selectors');
+const BlobCiYamlSelectors = require('../blob/template_selectors/blob_ci_yaml_selectors');
+const BlobDockerfileSelectors = require('../blob/template_selectors/blob_dockerfile_selectors');
+
+class EditBlob {
+  constructor(assetsPath, aceMode) {
+    this.configureAceEditor(aceMode, assetsPath);
+    this.prepFileContentForSubmit();
+    this.initModePanesAndLinks();
+    this.initSoftWrap();
+    this.initFileSelectors();
+  }
+
+  configureAceEditor(aceMode, assetsPath) {
+    ace.config.set('modePath', `${assetsPath}/ace`);
+    ace.config.loadModule('ace/ext/searchbox');
+
+    this.editor = ace.edit('editor');
+    this.editor.focus();
+
+    if (aceMode) {
+      this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+    }
+  }
+
+  prepFileContentForSubmit() {
+    $('form').submit(() => {
+      $('#file-content').val(this.editor.getValue());
+    });
+  }
+
+  initFileSelectors() {
+    this.blobTemplateSelectors = [
+      new BlobLicenseSelectors({
+        editor: this.editor,
+      }),
       new BlobGitignoreSelectors({
-        editor: this.editor
-      });
-      new gl.BlobCiYamlSelectors({
-        editor: this.editor
-      });
-      new gl.BlobDockerfileSelectors({
-        editor: this.editor
+        editor: this.editor,
+      }),
+      new BlobCiYamlSelectors({
+        editor: this.editor,
+      }),
+      new BlobDockerfileSelectors({
+        editor: this.editor,
+      }),
+    ];
+  }
+
+  initModePanesAndLinks() {
+    this.$editModePanes = $('.js-edit-mode-pane');
+    this.$editModeLinks = $('.js-edit-mode a');
+    this.$editModeLinks.on('click', e => this.editModeLinkClickHandler(e));
+  }
+
+  editModeLinkClickHandler(e) {
+    e.preventDefault();
+
+    const currentLink = $(e.target);
+    const paneId = currentLink.attr('href');
+    const currentPane = this.$editModePanes.filter(paneId);
+
+    // TODO: Reconsider this logic and/or break it up
+    this.$editModeLinks.parent().removeClass('active hover');
+
+    currentLink.parent().addClass('active hover');
+
+    this.$editModePanes.hide();
+
+    currentPane.fadeIn(200);
+
+    if (paneId === '#preview') {
+      this.$toggleButton.hide();
+      return $.post(currentLink.data('preview-url'), {
+        content: this.editor.getValue(),
+      }, (response) => {
+        currentPane.empty().append(response);
+        return currentPane.renderGFM();
       });
     }
 
-    EditBlob.prototype.initModePanesAndLinks = function() {
-      this.$editModePanes = $(".js-edit-mode-pane");
-      this.$editModeLinks = $(".js-edit-mode a");
-      return this.$editModeLinks.click(this.editModeLinkClickHandler);
-    };
-
-    EditBlob.prototype.editModeLinkClickHandler = function(event) {
-      var currentLink, currentPane, paneId;
-      event.preventDefault();
-      currentLink = $(event.target);
-      paneId = currentLink.attr("href");
-      currentPane = this.$editModePanes.filter(paneId);
-      this.$editModeLinks.parent().removeClass("active hover");
-      currentLink.parent().addClass("active hover");
-      this.$editModePanes.hide();
-      currentPane.fadeIn(200);
-      if (paneId === "#preview") {
-        this.$toggleButton.hide();
-        return $.post(currentLink.data("preview-url"), {
-          content: this.editor.getValue()
-        }, function(response) {
-          currentPane.empty().append(response);
-          return currentPane.renderGFM();
-        });
-      } else {
-        this.$toggleButton.show();
-        return this.editor.focus();
-      }
-    };
-
-    EditBlob.prototype.initSoftWrap = function() {
-      this.isSoftWrapped = false;
-      this.$toggleButton = $('.soft-wrap-toggle');
-      this.$toggleButton.on('click', this.toggleSoftWrap.bind(this));
-    };
-
-    EditBlob.prototype.toggleSoftWrap = function(e) {
-      this.isSoftWrapped = !this.isSoftWrapped;
-      this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
-      this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
-    };
-
-    return EditBlob;
-  })();
-}).call(window);
+    this.$toggleButton.show();
+
+    return this.editor.focus();
+  }
+
+  initSoftWrap() {
+    this.isSoftWrapped = false;
+    this.$toggleButton = $('.soft-wrap-toggle');
+    this.$toggleButton.on('click', () => this.toggleSoftWrap());
+  }
+
+  toggleSoftWrap() {
+    this.isSoftWrapped = !this.isSoftWrapped;
+    this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
+    this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
+  }
+}
+
+module.exports = EditBlob;
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 81d5748191d..1603d2afda2 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -49,15 +49,16 @@ import { installGlEmojiElement } from './behaviors/gl_emoji';
 installGlEmojiElement();
 
 // blob
-import './blob/blob_ci_yaml';
-import './blob/blob_dockerfile_selector';
-import './blob/blob_dockerfile_selectors';
+import './blob/template_selectors/blob_ci_yaml_selector';
+import './blob/template_selectors/blob_ci_yaml_selectors';
+import './blob/template_selectors/blob_dockerfile_selector';
+import './blob/template_selectors/blob_dockerfile_selectors';
 import './blob/blob_file_dropzone';
-import './blob/blob_gitignore_selector';
-import './blob/blob_gitignore_selectors';
-import './blob/blob_license_selector';
-import './blob/blob_license_selectors';
-import './blob/template_selector';
+import './blob/template_selectors/blob_gitignore_selector';
+import './blob/template_selectors/blob_gitignore_selectors';
+import './blob/template_selectors/blob_license_selector';
+import './blob/template_selectors/blob_license_selectors';
+import './blob/template_selectors/template_selector';
 import './blob/create_branch_dropdown';
 import './blob/target_branch_dropdown';
 
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js b/app/assets/javascripts/templates/issuable_template_selector.js
index e9e9aafd71a..161cac12638 100644
--- a/app/assets/javascripts/templates/issuable_template_selector.js
+++ b/app/assets/javascripts/templates/issuable_template_selector.js
@@ -1,15 +1,15 @@
 /* eslint-disable comma-dangle, max-len, no-useless-return, no-param-reassign, max-len */
 /* global Api */
 
-require('../blob/template_selector');
+const TemplateSelector = require('../blob/template_selectors/template_selector');
 
 ((global) => {
-  class IssuableTemplateSelector extends gl.TemplateSelector {
+  class IssuableTemplateSelector extends TemplateSelector {
     constructor(...args) {
       super(...args);
       this.projectPath = this.dropdown.data('project-path');
       this.namespacePath = this.dropdown.data('namespace-path');
-      this.issuableType = this.wrapper.data('issuable-type');
+      this.issuableType = this.$dropdownContainer.data('issuable-type');
       this.titleInput = $(`#${this.issuableType}_title`);
 
       const initialQuery = {
@@ -41,16 +41,16 @@ require('../blob/template_selector');
     }
 
     setInputValueToTemplateContent() {
-      // `this.requestFileSuccess` sets the value of the description input field
+      // `this.setEditorContent` sets the value of the description input field
       // to the content of the template selected.
       if (this.titleInput.val() === '') {
         // If the title has not yet been set, focus the title input and
         // skip focusing the description input by setting `true` as the
-        // `skipFocus` option to `requestFileSuccess`.
-        this.requestFileSuccess(this.currentTemplate, { skipFocus: true });
+        // `skipFocus` option to `setEditorContent`.
+        this.setEditorContent(this.currentTemplate, { skipFocus: true });
         this.titleInput.focus();
       } else {
-        this.requestFileSuccess(this.currentTemplate, { skipFocus: false });
+        this.setEditorContent(this.currentTemplate, { skipFocus: false });
       }
       return;
     }