Merge branch '38869-labels' into 'master'

Use ES6 modules in labels and labels manager

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

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,123 +3,119 @@
 
 import Flash from './flash';
 
-((global) => {
+export default class LabelManager {
-  class LabelManager {
+  constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
-    constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
+    this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
-      this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
+    this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
-      this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
+    this.otherLabels = otherLabels || $('.js-other-labels');
-      this.otherLabels = otherLabels || $('.js-other-labels');
+    this.errorMessage = 'Unable to update label prioritization at this time';
-      this.errorMessage = 'Unable to update label prioritization at this time';
+    this.emptyState = document.querySelector('#js-priority-labels-empty-state');
-      this.emptyState = document.querySelector('#js-priority-labels-empty-state');
+    this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
-      this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
+      filter: '.empty-message',
-        filter: '.empty-message',
+      forceFallback: true,
-        forceFallback: true,
+      fallbackClass: 'is-dragging',
-        fallbackClass: 'is-dragging',
+      dataIdAttr: 'data-id',
-        dataIdAttr: 'data-id',
+      onUpdate: this.onPrioritySortUpdate.bind(this),
-        onUpdate: this.onPrioritySortUpdate.bind(this),
+    });
-      });
+    this.bindEvents();
-      this.bindEvents();
-    }
-
-    bindEvents() {
-      this.prioritizedLabels.find('.btn-action').on('mousedown', this, this.onButtonActionClick);
-      return this.togglePriorityButton.on('click', this, this.onTogglePriorityClick);
-    }
-
-    onTogglePriorityClick(e) {
-      e.preventDefault();
-      const _this = e.data;
-      const $btn = $(e.currentTarget);
-      const $label = $(`#${$btn.data('domId')}`);
-      const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
-      const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
-      $tooltip.tooltip('destroy');
-      _this.toggleLabelPriority($label, action);
-      _this.toggleEmptyState($label, $btn, action);
-    }
-
-    onButtonActionClick(e) {
-      e.stopPropagation();
-      $(e.currentTarget).tooltip('hide');
-    }
-
-    toggleEmptyState($label, $btn, action) {
-      this.emptyState.classList.toggle('hidden', !!this.prioritizedLabels[0].querySelector(':scope > li'));
-    }
-
-    toggleLabelPriority($label, action, persistState) {
-      if (persistState == null) {
-        persistState = true;
-      }
-      let xhr;
-      const _this = this;
-      const url = $label.find('.js-toggle-priority').data('url');
-      let $target = this.prioritizedLabels;
-      let $from = this.otherLabels;
-      if (action === 'remove') {
-        $target = this.otherLabels;
-        $from = this.prioritizedLabels;
-      }
-      $label.detach().appendTo($target);
-      if ($from.find('li').length) {
-        $from.find('.empty-message').removeClass('hidden');
-      }
-      if ($target.find('> li:not(.empty-message)').length) {
-        $target.find('.empty-message').addClass('hidden');
-      }
-      // Return if we are not persisting state
-      if (!persistState) {
-        return;
-      }
-      if (action === 'remove') {
-        xhr = $.ajax({
-          url,
-          type: 'DELETE'
-        });
-        // Restore empty message
-        if (!$from.find('li').length) {
-          $from.find('.empty-message').removeClass('hidden');
-        }
-      } else {
-        xhr = this.savePrioritySort($label, action);
-      }
-      return xhr.fail(this.rollbackLabelPosition.bind(this, $label, action));
-    }
-
-    onPrioritySortUpdate() {
-      const xhr = this.savePrioritySort();
-      return xhr.fail(function() {
-        return new Flash(this.errorMessage, 'alert');
-      });
-    }
-
-    savePrioritySort() {
-      return $.post({
-        url: this.prioritizedLabels.data('url'),
-        data: {
-          label_ids: this.getSortedLabelsIds()
-        }
-      });
-    }
-
-    rollbackLabelPosition($label, originalAction) {
-      const action = originalAction === 'remove' ? 'add' : 'remove';
-      this.toggleLabelPriority($label, action, false);
-      return new Flash(this.errorMessage, 'alert');
-    }
-
-    getSortedLabelsIds() {
-      const sortedIds = [];
-      this.prioritizedLabels.find('> li').each(function() {
-        const id = $(this).data('id');
-
-        if (id) {
-          sortedIds.push(id);
-        }
-      });
-      return sortedIds;
-    }
   }
 
-  gl.LabelManager = LabelManager;
+  bindEvents() {
-})(window.gl || (window.gl = {}));
+    this.prioritizedLabels.find('.btn-action').on('mousedown', this, this.onButtonActionClick);
+    return this.togglePriorityButton.on('click', this, this.onTogglePriorityClick);
+  }
+
+  onTogglePriorityClick(e) {
+    e.preventDefault();
+    const _this = e.data;
+    const $btn = $(e.currentTarget);
+    const $label = $(`#${$btn.data('domId')}`);
+    const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
+    const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
+    $tooltip.tooltip('destroy');
+    _this.toggleLabelPriority($label, action);
+    _this.toggleEmptyState($label, $btn, action);
+  }
+
+  onButtonActionClick(e) {
+    e.stopPropagation();
+    $(e.currentTarget).tooltip('hide');
+  }
+
+  toggleEmptyState($label, $btn, action) {
+    this.emptyState.classList.toggle('hidden', !!this.prioritizedLabels[0].querySelector(':scope > li'));
+  }
+
+  toggleLabelPriority($label, action, persistState) {
+    if (persistState == null) {
+      persistState = true;
+    }
+    let xhr;
+    const _this = this;
+    const url = $label.find('.js-toggle-priority').data('url');
+    let $target = this.prioritizedLabels;
+    let $from = this.otherLabels;
+    if (action === 'remove') {
+      $target = this.otherLabels;
+      $from = this.prioritizedLabels;
+    }
+    $label.detach().appendTo($target);
+    if ($from.find('li').length) {
+      $from.find('.empty-message').removeClass('hidden');
+    }
+    if ($target.find('> li:not(.empty-message)').length) {
+      $target.find('.empty-message').addClass('hidden');
+    }
+    // Return if we are not persisting state
+    if (!persistState) {
+      return;
+    }
+    if (action === 'remove') {
+      xhr = $.ajax({
+        url,
+        type: 'DELETE'
+      });
+      // Restore empty message
+      if (!$from.find('li').length) {
+        $from.find('.empty-message').removeClass('hidden');
+      }
+    } else {
+      xhr = this.savePrioritySort($label, action);
+    }
+    return xhr.fail(this.rollbackLabelPosition.bind(this, $label, action));
+  }
+
+  onPrioritySortUpdate() {
+    const xhr = this.savePrioritySort();
+    return xhr.fail(function() {
+      return new Flash(this.errorMessage, 'alert');
+    });
+  }
+
+  savePrioritySort() {
+    return $.post({
+      url: this.prioritizedLabels.data('url'),
+      data: {
+        label_ids: this.getSortedLabelsIds()
+      }
+    });
+  }
+
+  rollbackLabelPosition($label, originalAction) {
+    const action = originalAction === 'remove' ? 'add' : 'remove';
+    this.toggleLabelPriority($label, action, false);
+    return new Flash(this.errorMessage, 'alert');
+  }
+
+  getSortedLabelsIds() {
+    const sortedIds = [];
+    this.prioritizedLabels.find('> li').each(function() {
+      const id = $(this).data('id');
+
+      if (id) {
+        sortedIds.push(id);
+      }
+    });
+    return sortedIds;
+  }
+}

app/assets/javascripts/labels.js

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