Export JS classes as modules

#38869

app/assets/javascripts/activities.js

 /* eslint-disable no-param-reassign, class-methods-use-this */
-/* global Pager */
 import Cookies from 'js-cookie';
+import Pager from './pager';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 export default class Activities {

app/assets/javascripts/commits.js

 /* eslint-disable func-names, wrap-iife, consistent-return,
   no-return-assign, no-param-reassign, one-var-declaration-per-line, no-unused-vars,
   prefer-template, object-shorthand, prefer-arrow-callback */
-/* global Pager */
 import { pluralize } from './lib/utils/text_utility';
 import { localTimeAgo } from './lib/utils/datetime_utility';
+import Pager from './pager';
 export default (function () {
   const CommitsList = {};

app/assets/javascripts/dispatcher.js

@@ -7,8 +7,8 @@ import IssuableForm from './issuable_form';
 import LabelsSelect from './labels_select';
 /* global MilestoneSelect */
 import NewBranchForm from './new_branch_form';
-/* global NotificationsForm */
-/* global NotificationsDropdown */
+import NotificationsForm from './notifications_form';
+import notificationsDropdown from './notifications_dropdown';
 import groupAvatar from './group_avatar';
 import GroupLabelSubscription from './group_label_subscription';
 /* global LineHighlighter */
@@ -414,7 +414,7 @@ import Activities from './activities';
           const newGroupChildWrapper = document.querySelector('.js-new-project-subgroup');
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
-          new NotificationsDropdown();
+          notificationsDropdown();
           new ProjectsList();
           if (newGroupChildWrapper) {
@@ -617,7 +617,7 @@ import Activities from './activities';
           break;
         case 'profiles':
           new NotificationsForm();
-          new NotificationsDropdown();
+          notificationsDropdown();
           break;
         case 'projects':
           new Project();
@@ -640,7 +640,7 @@ import Activities from './activities';
             case 'show':
               new Star();
               new ProjectNew();
-              new NotificationsDropdown();
+              notificationsDropdown();
               break;
             case 'wikis':
               new Wikis();

app/assets/javascripts/main.js

@@ -34,16 +34,11 @@ import { getLocationHash, visitUrl } from './lib/utils/url_utility';
 import './behaviors/';
 // everything else
-import './activities';
-import './admin';
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
 import './confirm_danger_modal';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';
-import './gl_field_error';
-import './gl_field_errors';
-import './gl_form';
 import initTodoToggle from './header';
 import initImporterStatus from './importer_status';
 import './layout_nav';
@@ -54,11 +49,7 @@ import './merge_request';
 import './merge_request_tabs';
 import './milestone_select';
 import './notes';
-import './notifications_dropdown';
-import './notifications_form';
-import './pager';
 import './preview_markdown';
-import './project_import';
 import './projects_dropdown';
 import './render_gfm';
 import './right_sidebar';

app/assets/javascripts/merge_request.js

@@ -3,7 +3,7 @@
 import 'vendor/jquery.waitforimages';
 import TaskList from './task_list';
-import './merge_request_tabs';
+import MergeRequestTabs from './merge_request_tabs';
 import IssuablesHelper from './helpers/issuables_helper';
 import { addDelimiter } from './lib/utils/text_utility';
@@ -51,7 +51,7 @@ import { addDelimiter } from './lib/utils/text_utility';
       if (window.mrTabs) {
         window.mrTabs.unbindEvents();
       }
-      window.mrTabs = new gl.MergeRequestTabs(this.opts);
+      window.mrTabs = new MergeRequestTabs(this.opts);
     };
     MergeRequest.prototype.showAllCommits = function() {

app/assets/javascripts/notifications_dropdown.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, consistent-return, prefer-arrow-callback, no-else-return, max-len */
 import Flash from './flash';
-(function() {
-  this.NotificationsDropdown = (function() {
-    function NotificationsDropdown() {
-      $(document).off('click', '.update-notification').on('click', '.update-notification', function(e) {
-        var form, label, notificationLevel;
-        e.preventDefault();
-        if ($(this).is('.is-active') && $(this).data('notification-level') === 'custom') {
-          return;
-        }
-        notificationLevel = $(this).data('notification-level');
-        label = $(this).data('notification-title');
-        form = $(this).parents('.notification-form:first');
-        form.find('.js-notification-loading').toggleClass('fa-bell fa-spin fa-spinner');
-        form.find('#notification_setting_level').val(notificationLevel);
-        return form.submit();
-      });
-      $(document).off('ajax:success', '.notification-form').on('ajax:success', '.notification-form', function(e, data) {
-        if (data.saved) {
-          return $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
-        } else {
-          return new Flash('Failed to save new settings', 'alert');
-        }
-      });
+export default function notificationsDropdown() {
+  $(document).on('click', '.update-notification', function updateNotificationCallback(e) {
+    e.preventDefault();
+    if ($(this).is('.is-active') && $(this).data('notification-level') === 'custom') {
+      return;
     }
-    return NotificationsDropdown;
-  })();
-}).call(window);
+    const notificationLevel = $(this).data('notification-level');
+    const form = $(this).parents('.notification-form:first');
+
+    form.find('.js-notification-loading').toggleClass('fa-bell fa-spin fa-spinner');
+    form.find('#notification_setting_level').val(notificationLevel);
+    form.submit();
+  });
+
+  $(document).on('ajax:success', '.notification-form', (e, data) => {
+    if (data.saved) {
+      $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
+    } else {
+      Flash('Failed to save new settings', 'alert');
+    }
+  });
+}

app/assets/javascripts/notifications_form.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, newline-per-chained-call, comma-dangle, consistent-return, prefer-arrow-callback, max-len */
-(function() {
-  this.NotificationsForm = (function() {
-    function NotificationsForm() {
-      this.toggleCheckbox = this.toggleCheckbox.bind(this);
-      this.removeEventListeners();
-      this.initEventListeners();
-    }
-    NotificationsForm.prototype.removeEventListeners = function() {
-      return $(document).off('change', '.js-custom-notification-event');
-    };
-    NotificationsForm.prototype.initEventListeners = function() {
-      return $(document).on('change', '.js-custom-notification-event', this.toggleCheckbox);
-    };
-    NotificationsForm.prototype.toggleCheckbox = function(e) {
-      var $checkbox, $parent;
-      $checkbox = $(e.currentTarget);
-      $parent = $checkbox.closest('.checkbox');
-      return this.saveEvent($checkbox, $parent);
-    };
-    NotificationsForm.prototype.showCheckboxLoadingSpinner = function($parent) {
-      return $parent.addClass('is-loading').find('.custom-notification-event-loading').removeClass('fa-check').addClass('fa-spin fa-spinner').removeClass('is-done');
-    };
-    NotificationsForm.prototype.saveEvent = function($checkbox, $parent) {
-      var form;
-      form = $parent.parents('form:first');
-      return $.ajax({
-        url: form.attr('action'),
-        method: form.attr('method'),
-        dataType: 'json',
-        data: form.serialize(),
-        beforeSend: (function(_this) {
-          return function() {
-            return _this.showCheckboxLoadingSpinner($parent);
-          };
-        })(this)
-      }).done(function(data) {
-        $checkbox.enable();
-        if (data.saved) {
-          $parent.find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
-          return setTimeout(function() {
-            return $parent.removeClass('is-loading').find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
-          }, 2000);
-        }
-      });
-    };
-    return NotificationsForm;
-  })();
-}).call(window);
+export default class NotificationsForm {
+  constructor() {
+    this.toggleCheckbox = this.toggleCheckbox.bind(this);
+    this.initEventListeners();
+  }
+  initEventListeners() {
+    $(document).on('change', '.js-custom-notification-event', this.toggleCheckbox);
+  }
+  toggleCheckbox(e) {
+    const $checkbox = $(e.currentTarget);
+    const $parent = $checkbox.closest('.checkbox');
+    this.saveEvent($checkbox, $parent);
+  }
+  // eslint-disable-next-line class-methods-use-this
+  showCheckboxLoadingSpinner($parent) {
+    $parent.addClass('is-loading')
+      .find('.custom-notification-event-loading')
+      .removeClass('fa-check')
+      .addClass('fa-spin fa-spinner')
+      .removeClass('is-done');
+  }
+  saveEvent($checkbox, $parent) {
+    const form = $parent.parents('form:first');
+    return $.ajax({
+      url: form.attr('action'),
+      method: form.attr('method'),
+      dataType: 'json',
+      data: form.serialize(),
+      beforeSend: () => {
+        this.showCheckboxLoadingSpinner($parent);
+      },
+    }).done((data) => {
+      $checkbox.enable();
+      if (data.saved) {
+        $parent.find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
+        setTimeout(() => {
+          $parent.removeClass('is-loading')
+            .find('.custom-notification-event-loading')
+            .toggleClass('fa-spin fa-spinner fa-check is-done');
+        }, 2000);
+      }
+    });
+  }
+}

app/assets/javascripts/pager.js

 import { getParameterByName } from '~/lib/utils/common_utils';
 import { removeParams } from './lib/utils/url_utility';
-(() => {
-  const ENDLESS_SCROLL_BOTTOM_PX = 400;
-  const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
-  const Pager = {
-    init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) {
-      this.url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
-      this.limit = limit;
-      this.offset = parseInt(getParameterByName('offset'), 10) || this.limit;
-      this.disable = disable;
-      this.prepareData = prepareData;
-      this.callback = callback;
-      this.loading = $('.loading').first();
-      if (preload) {
-        this.offset = 0;
-        this.getOld();
-      }
-      this.initLoadMore();
-    },
-    getOld() {
-      this.loading.show();
-      $.ajax({
-        type: 'GET',
-        url: this.url,
-        data: `limit=${this.limit}&offset=${this.offset}`,
-        dataType: 'json',
-        error: () => this.loading.hide(),
-        success: (data) => {
-          this.append(data.count, this.prepareData(data.html));
-          this.callback();
-          // keep loading until we've filled the viewport height
-          if (!this.disable && !this.isScrollable()) {
-            this.getOld();
-          } else {
-            this.loading.hide();
-          }
-        },
-      });
-    },
-    append(count, html) {
-      $('.content_list').append(html);
-      if (count > 0) {
-        this.offset += count;
-      } else {
-        this.disable = true;
-      }
-    },
-    isScrollable() {
-      const $w = $(window);
-      return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
-    },
-    initLoadMore() {
-      $(document).unbind('scroll');
-      $(document).endlessScroll({
-        bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
-        fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
-        fireOnce: true,
-        ceaseFire: () => this.disable === true,
-        callback: () => {
-          if (!this.loading.is(':visible')) {
-            this.loading.show();
-            this.getOld();
-          }
-        },
-      });
-    },
-  };
-
-  window.Pager = Pager;
-})();
+const ENDLESS_SCROLL_BOTTOM_PX = 400;
+const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
+export default {
+  init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) {
+    this.url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
+    this.limit = limit;
+    this.offset = parseInt(getParameterByName('offset'), 10) || this.limit;
+    this.disable = disable;
+    this.prepareData = prepareData;
+    this.callback = callback;
+    this.loading = $('.loading').first();
+    if (preload) {
+      this.offset = 0;
+      this.getOld();
+    }
+    this.initLoadMore();
+  },
+  getOld() {
+    this.loading.show();
+    $.ajax({
+      type: 'GET',
+      url: this.url,
+      data: `limit=${this.limit}&offset=${this.offset}`,
+      dataType: 'json',
+      error: () => this.loading.hide(),
+      success: (data) => {
+        this.append(data.count, this.prepareData(data.html));
+        this.callback();
+        // keep loading until we've filled the viewport height
+        if (!this.disable && !this.isScrollable()) {
+          this.getOld();
+        } else {
+          this.loading.hide();
+        }
+      },
+    });
+  },
+  append(count, html) {
+    $('.content_list').append(html);
+    if (count > 0) {
+      this.offset += count;
+    } else {
+      this.disable = true;
+    }
+  },
+  isScrollable() {
+    const $w = $(window);
+    return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
+  },
+  initLoadMore() {
+    $(document).unbind('scroll');
+    $(document).endlessScroll({
+      bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
+      fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
+      fireOnce: true,
+      ceaseFire: () => this.disable === true,
+      callback: () => {
+        if (!this.loading.is(':visible')) {
+          this.loading.show();
+          this.getOld();
+        }
+      },
+    });
+  },
+};

spec/javascripts/activities_spec.js

 /* eslint-disable no-unused-expressions, no-prototype-builtins, no-new, no-shadow, max-len */
 import 'vendor/jquery.endless-scroll';
-import '~/pager';
 import Activities from '~/activities';
 (() => {

spec/javascripts/commits_spec.js

 import 'vendor/jquery.endless-scroll';
-import '~/pager';
 import CommitsList from '~/commits';
 describe('Commits List', () => {

spec/javascripts/merge_request_tabs_spec.js

@@ -2,7 +2,7 @@
 /* global Notes */
 import * as urlUtils from '~/lib/utils/url_utility';
-import '~/merge_request_tabs';
+import MergeRequestTabs from '~/merge_request_tabs';
 import '~/commit/pipelines/pipelines_bundle';
 import '~/breakpoints';
 import '~/lib/utils/common_utils';
@@ -32,7 +32,7 @@ import 'vendor/jquery.scrollTo';
     );
     beforeEach(function () {
-      this.class = new gl.MergeRequestTabs({ stubLocation: stubLocation });
+      this.class = new MergeRequestTabs({ stubLocation: stubLocation });
       setLocation();
       this.spies = {

spec/javascripts/pager_spec.js

 /* global fixture */
 import * as utils from '~/lib/utils/url_utility';
-import '~/pager';
+import Pager from '~/pager';
 describe('pager', () => {
-  const Pager = window.Pager;
-
-  it('is defined on window', () => {
-    expect(window.Pager).toBeDefined();
-  });
-
   describe('init', () => {
     const originalHref = window.location.href;