Merge branch '28860-AjaxLoadingSpinner' into 'master'

Remove AjaxLoadingSpinner and CreateLabelDropdown from global namespace

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

app/assets/javascripts/ajax_loading_spinner.js

-class AjaxLoadingSpinner {
+export default class AjaxLoadingSpinner {
   static init() {
     const $elements = $('.js-ajax-loading-spinner');
 
@@ -30,6 +30,3 @@ class AjaxLoadingSpinner {
     classList.toggle('fa-spin');
   }
 }
-
-window.gl = window.gl || {};
-gl.AjaxLoadingSpinner = AjaxLoadingSpinner;

app/assets/javascripts/boards/components/new_list_dropdown.js

-/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var,
+/* eslint-disable func-names, no-new, space-before-function-paren, one-var,
    promise/catch-or-return */
 import _ from 'underscore';
+import CreateLabelDropdown from '../../create_label';
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
@@ -15,15 +16,15 @@ $(document).off('created.label').on('created.label', (e, label) => {
     label: {
       id: label.id,
       title: label.title,
-      color: label.color
-    }
+      color: label.color,
+    },
   });
 });
 
 gl.issueBoards.newListDropdownInit = () => {
   $('.js-new-board-list').each(function () {
     const $this = $(this);
-    new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
+    new CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
 
     $this.glDropdown({
       data(term, callback) {
@@ -38,17 +39,17 @@ gl.issueBoards.newListDropdownInit = () => {
         const $a = $('<a />', {
           class: (active ? `is-active js-board-list-${active.id}` : ''),
           text: label.title,
-          href: '#'
+          href: '#',
         });
         const $labelColor = $('<span />', {
           class: 'dropdown-label-box',
-          style: `background-color: ${label.color}`
+          style: `background-color: ${label.color}`,
         });
 
         return $li.append($a.prepend($labelColor));
       },
       search: {
-        fields: ['title']
+        fields: ['title'],
       },
       filterable: true,
       selectable: true,
@@ -66,13 +67,13 @@ gl.issueBoards.newListDropdownInit = () => {
             label: {
               id: label.id,
               title: label.title,
-              color: label.color
-            }
+              color: label.color,
+            },
           });
 
           Store.state.lists = _.sortBy(Store.state.lists, 'position');
         }
-      }
+      },
     });
   });
 };

app/assets/javascripts/create_label.js

-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-param-reassign, wrap-iife, max-len */
+/* eslint-disable func-names, prefer-arrow-callback */
 import Api from './api';
 
-class CreateLabelDropdown {
-  constructor ($el, namespacePath, projectPath) {
+export default class CreateLabelDropdown {
+  constructor($el, namespacePath, projectPath) {
     this.$el = $el;
     this.namespacePath = namespacePath;
     this.projectPath = projectPath;
@@ -22,7 +22,7 @@ class CreateLabelDropdown {
     this.addBinding();
   }
 
-  cleanBinding () {
+  cleanBinding() {
     this.$colorSuggestions.off('click');
     this.$newLabelField.off('keyup change');
     this.$newColorField.off('keyup change');
@@ -31,7 +31,7 @@ class CreateLabelDropdown {
     this.$newLabelCreateButton.off('click');
   }
 
-  addBinding () {
+  addBinding() {
     const self = this;
 
     this.$colorSuggestions.on('click', function (e) {
@@ -44,7 +44,7 @@ class CreateLabelDropdown {
 
     this.$dropdownBack.on('click', this.resetForm.bind(this));
 
-    this.$cancelButton.on('click', function(e) {
+    this.$cancelButton.on('click', function (e) {
       e.preventDefault();
       e.stopPropagation();
 
@@ -55,7 +55,7 @@ class CreateLabelDropdown {
     this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
   }
 
-  addColorValue (e, $this) {
+  addColorValue(e, $this) {
     e.preventDefault();
     e.stopPropagation();
 
@@ -66,7 +66,7 @@ class CreateLabelDropdown {
       .addClass('is-active');
   }
 
-  enableLabelCreateButton () {
+  enableLabelCreateButton() {
     if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
       this.$newLabelError.hide();
       this.$newLabelCreateButton.enable();
@@ -75,7 +75,7 @@ class CreateLabelDropdown {
     }
   }
 
-  resetForm () {
+  resetForm() {
     this.$newLabelField
       .val('')
       .trigger('change');
@@ -90,13 +90,13 @@ class CreateLabelDropdown {
       .removeClass('is-active');
   }
 
-  saveLabel (e) {
+  saveLabel(e) {
     e.preventDefault();
     e.stopPropagation();
 
     Api.newLabel(this.namespacePath, this.projectPath, {
       title: this.$newLabelField.val(),
-      color: this.$newColorField.val()
+      color: this.$newColorField.val(),
     }, (label) => {
       this.$newLabelCreateButton.enable();
 
@@ -107,8 +107,8 @@ class CreateLabelDropdown {
           errors = label.message;
         } else {
           errors = Object.keys(label.message).map(key =>
-            `${gl.text.humanize(key)} ${label.message[key].join(', ')}`
-          ).join("<br/>");
+            `${gl.text.humanize(key)} ${label.message[key].join(', ')}`,
+          ).join('<br/>');
         }
 
         this.$newLabelError
@@ -122,6 +122,3 @@ class CreateLabelDropdown {
     });
   }
 }
-
-window.gl = window.gl || {};
-gl.CreateLabelDropdown = CreateLabelDropdown;

app/assets/javascripts/dispatcher.js

@@ -76,6 +76,7 @@ import GpgBadges from './gpg_badges';
 import UserFeatureHelper from './helpers/user_feature_helper';
 import initChangesDropdown from './init_changes_dropdown';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
+import AjaxLoadingSpinner from './ajax_loading_spinner';
 
 (function() {
   var Dispatcher;
@@ -237,7 +238,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
           new NewBranchForm($('.js-create-branch-form'), JSON.parse(document.getElementById('availableRefs').innerHTML));
           break;
         case 'projects:branches:index':
-          gl.AjaxLoadingSpinner.init();
+          AjaxLoadingSpinner.init();
           new DeleteModal();
           break;
         case 'projects:issues:new':

app/assets/javascripts/labels_select.js

@@ -4,6 +4,7 @@
 import _ from 'underscore';
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import DropdownUtils from './filtered_search/dropdown_utils';
+import CreateLabelDropdown from './create_label';
 
 (function() {
   this.LabelsSelect = (function() {
@@ -61,7 +62,7 @@ import DropdownUtils from './filtered_search/dropdown_utils';
         $sidebarLabelTooltip.tooltip();
 
         if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
-          new gl.CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
+          new CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
         }
 
         saveLabelData = function() {

app/assets/javascripts/main.js

@@ -57,7 +57,6 @@ import './u2f/util';
 import './abuse_reports';
 import './activities';
 import './admin';
-import './ajax_loading_spinner';
 import './api';
 import './aside';
 import './autosave';
@@ -74,7 +73,6 @@ import './compare_autocomplete';
 import './confirm_danger_modal';
 import './copy_as_gfm';
 import './copy_to_clipboard';
-import './create_label';
 import './diff';
 import './dropzone_input';
 import './due_date_select';

spec/javascripts/ajax_loading_spinner_spec.js

 import 'jquery';
 import 'jquery-ujs';
-import '~/ajax_loading_spinner';
+import AjaxLoadingSpinner from '~/ajax_loading_spinner';
 
 describe('Ajax Loading Spinner', () => {
   const fixtureTemplate = 'static/ajax_loading_spinner.html.raw';
@@ -8,7 +8,7 @@ describe('Ajax Loading Spinner', () => {
 
   beforeEach(() => {
     loadFixtures(fixtureTemplate);
-    gl.AjaxLoadingSpinner.init();
+    AjaxLoadingSpinner.init();
   });
 
   it('change current icon with spinner icon and disable link while waiting ajax response', (done) => {