Use ES6 modules in labels and labels manager

app/assets/javascripts/dispatcher.js

@@ -29,7 +29,8 @@ import CILintEditor from './ci_lint_editor';
 /* global ProjectNew */
 /* global ProjectShow */
 /* global ProjectImport */
-/* global Labels */
+import Labels from './labels';
+import LabelManager from './label_manager';
 /* global Shortcuts */
 /* global ShortcutsFindFile */
 /* global Sidebar */
@@ -459,7 +460,7 @@ import U2FAuthenticate from './u2f/authenticate';
         case 'groups:labels:index':
         case 'projects:labels:index':
           if ($('.prioritized-labels').length) {
-            new gl.LabelManager();
+            new LabelManager();
           }
           $('.label-subscription').each((i, el) => {
             const $el = $(el);

app/assets/javascripts/label_manager.js

@@ -3,8 +3,7 @@
 
 import Flash from './flash';
 
-((global) => {
-  class LabelManager {
+export default class LabelManager {
   constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
     this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
     this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
@@ -119,7 +118,4 @@ import Flash from './flash';
     });
     return sortedIds;
   }
-  }
-
-  gl.LabelManager = LabelManager;
-})(window.gl || (window.gl = {}));
+}

app/assets/javascripts/labels.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, max-len */
-(function() {
-  this.Labels = (function() {
-    function Labels() {
+export default class Labels {
+  constructor() {
     this.setSuggestedColor = this.setSuggestedColor.bind(this);
     this.updateColorPreview = this.updateColorPreview.bind(this);
-      var form;
-      form = $('.label-form');
     this.cleanBinding();
     this.addBinding();
     this.updateColorPreview();
   }
 
-    Labels.prototype.addBinding = function() {
+  addBinding() {
     $(document).on('click', '.suggest-colors a', this.setSuggestedColor);
     return $(document).on('input', 'input#label_color', this.updateColorPreview);
-    };
-
-    Labels.prototype.cleanBinding = function() {
+  }
+  // eslint-disable-next-line class-methods-use-this
+  cleanBinding() {
     $(document).off('click', '.suggest-colors a');
     return $(document).off('input', 'input#label_color');
-    };
-
-    Labels.prototype.updateColorPreview = function() {
-      var previewColor;
-      previewColor = $('input#label_color').val();
+  }
+  // eslint-disable-next-line class-methods-use-this
+  updateColorPreview() {
+    const previewColor = $('input#label_color').val();
     return $('div.label-color-preview').css('background-color', previewColor);
   // Updates the the preview color with the hex-color input
-    };
+  }
 
   // Updates the preview color with a click on a suggested color
-    Labels.prototype.setSuggestedColor = function(e) {
-      var color;
-      color = $(e.currentTarget).data('color');
+  setSuggestedColor(e) {
+    const color = $(e.currentTarget).data('color');
     $('input#label_color').val(color);
     this.updateColorPreview();
     // Notify the form, that color has changed
     $('.label-form').trigger('keyup');
     return e.preventDefault();
-    };
-
-    return Labels;
-  })();
-}).call(window);
+  }
+}

app/assets/javascripts/main.js

@@ -79,8 +79,6 @@ import './issuable_context';
 import './issuable_form';
 import './issue';
 import './issue_status_select';
-import './label_manager';
-import './labels';
 import './labels_select';
 import './layout_nav';
 import LazyLoader from './lazy_loader';