Merge branch 'ph-even-more-es-modules' into 'master'

Exported JS classes as modules

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

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

 /* eslint-disable comma-dangle, space-before-function-paren, no-new */
 /* global MilestoneSelect */
-/* global Sidebar */
 
 import Vue from 'vue';
 import Flash from '../../flash';
+import Sidebar from '../../right_sidebar';
 import eventHub from '../../sidebar/event_hub';
 import assigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import assignees from '../../sidebar/components/assignees/assignees';

app/assets/javascripts/dispatcher.js

@@ -11,7 +11,7 @@ import NotificationsForm from './notifications_form';
 import notificationsDropdown from './notifications_dropdown';
 import groupAvatar from './group_avatar';
 import GroupLabelSubscription from './group_label_subscription';
-/* global LineHighlighter */
+import LineHighlighter from './line_highlighter';
 import BuildArtifacts from './build_artifacts';
 import CILintEditor from './ci_lint_editor';
 import groupsSelect from './groups_select';
@@ -21,7 +21,7 @@ import NamespaceSelect from './namespace_select';
 import NewCommitForm from './new_commit_form';
 import Project from './project';
 import projectAvatar from './project_avatar';
-/* global MergeRequest */
+import MergeRequest from './merge_request';
 import Compare from './compare';
 import initCompareAutocomplete from './compare_autocomplete';
 import ProjectFindFile from './project_find_file';
@@ -29,7 +29,7 @@ import ProjectNew from './project_new';
 import projectImport from './project_import';
 import Labels from './labels';
 import LabelManager from './label_manager';
-/* global Sidebar */
+import Sidebar from './right_sidebar';
 import IssuableTemplateSelectors from './templates/issuable_template_selectors';
 import Flash from './flash';
 import CommitsList from './commits';

app/assets/javascripts/init_issuable_sidebar.js

@@ -2,7 +2,7 @@
 /* global MilestoneSelect */
 import LabelsSelect from './labels_select';
 import IssuableContext from './issuable_context';
-/* global Sidebar */
+import Sidebar from './right_sidebar';
 
 import DueDateSelectors from './due_date_select';
 
@@ -15,5 +15,5 @@ export default () => {
   new LabelsSelect();
   new IssuableContext(sidebarOptions.currentUser);
   new DueDateSelectors();
-  window.sidebar = new Sidebar();
+  Sidebar.initialize();
 };

app/assets/javascripts/line_highlighter.js

@@ -175,4 +175,4 @@ LineHighlighter.prototype.__setLocationHash__ = function(value) {
   }, document.title, value);
 };
 
-window.LineHighlighter = LineHighlighter;
+export default LineHighlighter;

app/assets/javascripts/main.js

@@ -45,14 +45,12 @@ import './layout_nav';
 import LazyLoader from './lazy_loader';
 import './line_highlighter';
 import initLogoAnimation from './logo';
-import './merge_request';
 import './merge_request_tabs';
 import './milestone_select';
 import './notes';
 import './preview_markdown';
 import './projects_dropdown';
 import './render_gfm';
-import './right_sidebar';
 import initBreadcrumbs from './breadcrumb';
 
 import './dispatcher';

app/assets/javascripts/merge_request.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, max-len, prefer-arrow-callback */
-/* global MergeRequestTabs */
 
 import 'vendor/jquery.waitforimages';
 import TaskList from './task_list';
@@ -7,142 +6,138 @@ import MergeRequestTabs from './merge_request_tabs';
 import IssuablesHelper from './helpers/issuables_helper';
 import { addDelimiter } from './lib/utils/text_utility';
 
-(function() {
-  this.MergeRequest = (function() {
-    function MergeRequest(opts) {
-      // Initialize MergeRequest behavior
-      //
-      // Options:
-      //   action - String, current controller action
-      //
-      this.opts = opts != null ? opts : {};
-      this.submitNoteForm = this.submitNoteForm.bind(this);
-      this.$el = $('.merge-request');
-      this.$('.show-all-commits').on('click', (function(_this) {
-        return function() {
-          return _this.showAllCommits();
-        };
-      })(this));
-
-      this.initTabs();
-      this.initMRBtnListeners();
-      this.initCommitMessageListeners();
-      this.closeReopenReportToggle = IssuablesHelper.initCloseReopenReport();
-
-      if ($("a.btn-close").length) {
-        this.taskList = new TaskList({
-          dataType: 'merge_request',
-          fieldName: 'description',
-          selector: '.detail-page-description',
-          onSuccess: (result) => {
-            document.querySelector('#task_status').innerText = result.task_status;
-            document.querySelector('#task_status_short').innerText = result.task_status_short;
-          }
-        });
-      }
-    }
-
-    // Local jQuery finder
-    MergeRequest.prototype.$ = function(selector) {
-      return this.$el.find(selector);
+function MergeRequest(opts) {
+  // Initialize MergeRequest behavior
+  //
+  // Options:
+  //   action - String, current controller action
+  //
+  this.opts = opts != null ? opts : {};
+  this.submitNoteForm = this.submitNoteForm.bind(this);
+  this.$el = $('.merge-request');
+  this.$('.show-all-commits').on('click', (function(_this) {
+    return function() {
+      return _this.showAllCommits();
     };
-
-    MergeRequest.prototype.initTabs = function() {
-      if (window.mrTabs) {
-        window.mrTabs.unbindEvents();
+  })(this));
+
+  this.initTabs();
+  this.initMRBtnListeners();
+  this.initCommitMessageListeners();
+  this.closeReopenReportToggle = IssuablesHelper.initCloseReopenReport();
+
+  if ($("a.btn-close").length) {
+    this.taskList = new TaskList({
+      dataType: 'merge_request',
+      fieldName: 'description',
+      selector: '.detail-page-description',
+      onSuccess: (result) => {
+        document.querySelector('#task_status').innerText = result.task_status;
+        document.querySelector('#task_status_short').innerText = result.task_status_short;
       }
-      window.mrTabs = new MergeRequestTabs(this.opts);
-    };
-
-    MergeRequest.prototype.showAllCommits = function() {
-      this.$('.first-commits').remove();
-      return this.$('.all-commits').removeClass('hide');
-    };
-
-    MergeRequest.prototype.initMRBtnListeners = function() {
-      var _this;
-      _this = this;
-      return $('a.btn-close, a.btn-reopen').on('click', function(e) {
-        var $this, shouldSubmit;
-        $this = $(this);
-        shouldSubmit = $this.hasClass('btn-comment');
-        if (shouldSubmit && $this.data('submitted')) {
-          return;
-        }
-
-        if (this.closeReopenReportToggle) this.closeReopenReportToggle.setDisable();
-
-        if (shouldSubmit) {
-          if ($this.hasClass('btn-comment-and-close') || $this.hasClass('btn-comment-and-reopen')) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
-            _this.submitNoteForm($this.closest('form'), $this);
-          }
-        }
-      });
-    };
-
-    MergeRequest.prototype.submitNoteForm = function(form, $button) {
-      var noteText;
-      noteText = form.find("textarea.js-note-text").val();
-      if (noteText.trim().length > 0) {
-        form.submit();
-        $button.data('submitted', true);
-        return $button.trigger('click');
-      }
-    };
-
-    MergeRequest.prototype.initCommitMessageListeners = function() {
-      $(document).on('click', 'a.js-with-description-link', function(e) {
-        var textarea = $('textarea.js-commit-message');
-        e.preventDefault();
+    });
+  }
+}
+
+// Local jQuery finder
+MergeRequest.prototype.$ = function(selector) {
+  return this.$el.find(selector);
+};
+
+MergeRequest.prototype.initTabs = function() {
+  if (window.mrTabs) {
+    window.mrTabs.unbindEvents();
+  }
+  window.mrTabs = new MergeRequestTabs(this.opts);
+};
+
+MergeRequest.prototype.showAllCommits = function() {
+  this.$('.first-commits').remove();
+  return this.$('.all-commits').removeClass('hide');
+};
+
+MergeRequest.prototype.initMRBtnListeners = function() {
+  var _this;
+  _this = this;
+  return $('a.btn-close, a.btn-reopen').on('click', function(e) {
+    var $this, shouldSubmit;
+    $this = $(this);
+    shouldSubmit = $this.hasClass('btn-comment');
+    if (shouldSubmit && $this.data('submitted')) {
+      return;
+    }
 
-        textarea.val(textarea.data('messageWithDescription'));
-        $('.js-with-description-hint').hide();
-        $('.js-without-description-hint').show();
-      });
+    if (this.closeReopenReportToggle) this.closeReopenReportToggle.setDisable();
 
-      $(document).on('click', 'a.js-without-description-link', function(e) {
-        var textarea = $('textarea.js-commit-message');
+    if (shouldSubmit) {
+      if ($this.hasClass('btn-comment-and-close') || $this.hasClass('btn-comment-and-reopen')) {
         e.preventDefault();
+        e.stopImmediatePropagation();
 
-        textarea.val(textarea.data('messageWithoutDescription'));
-        $('.js-with-description-hint').show();
-        $('.js-without-description-hint').hide();
-      });
-    };
-
-    MergeRequest.prototype.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
-      $('.detail-page-header .status-box')
-        .removeClass(classToRemove)
-        .addClass(classToAdd)
-        .find('span')
-        .text(newStatusText);
-    };
-
-    MergeRequest.prototype.decreaseCounter = function(by = 1) {
-      const $el = $('.nav-links .js-merge-counter');
-      const count = Math.max((parseInt($el.text().replace(/[^\d]/, ''), 10) - by), 0);
-
-      $el.text(addDelimiter(count));
-    };
-
-    MergeRequest.prototype.hideCloseButton = function() {
-      const el = document.querySelector('.merge-request .js-issuable-actions');
-      const closeDropdownItem = el.querySelector('li.close-item');
-      if (closeDropdownItem) {
-        closeDropdownItem.classList.add('hidden');
-        // Selects the next dropdown item
-        el.querySelector('li.report-item').click();
-      } else {
-        // No dropdown just hide the Close button
-        el.querySelector('.btn-close').classList.add('hidden');
+        _this.submitNoteForm($this.closest('form'), $this);
       }
-      // Dropdown for mobile screen
-      el.querySelector('li.js-close-item').classList.add('hidden');
-    };
-
-    return MergeRequest;
-  })();
-}).call(window);
+    }
+  });
+};
+
+MergeRequest.prototype.submitNoteForm = function(form, $button) {
+  var noteText;
+  noteText = form.find("textarea.js-note-text").val();
+  if (noteText.trim().length > 0) {
+    form.submit();
+    $button.data('submitted', true);
+    return $button.trigger('click');
+  }
+};
+
+MergeRequest.prototype.initCommitMessageListeners = function() {
+  $(document).on('click', 'a.js-with-description-link', function(e) {
+    var textarea = $('textarea.js-commit-message');
+    e.preventDefault();
+
+    textarea.val(textarea.data('messageWithDescription'));
+    $('.js-with-description-hint').hide();
+    $('.js-without-description-hint').show();
+  });
+
+  $(document).on('click', 'a.js-without-description-link', function(e) {
+    var textarea = $('textarea.js-commit-message');
+    e.preventDefault();
+
+    textarea.val(textarea.data('messageWithoutDescription'));
+    $('.js-with-description-hint').show();
+    $('.js-without-description-hint').hide();
+  });
+};
+
+MergeRequest.prototype.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
+  $('.detail-page-header .status-box')
+    .removeClass(classToRemove)
+    .addClass(classToAdd)
+    .find('span')
+    .text(newStatusText);
+};
+
+MergeRequest.prototype.decreaseCounter = function(by = 1) {
+  const $el = $('.nav-links .js-merge-counter');
+  const count = Math.max((parseInt($el.text().replace(/[^\d]/, ''), 10) - by), 0);
+
+  $el.text(addDelimiter(count));
+};
+
+MergeRequest.prototype.hideCloseButton = function() {
+  const el = document.querySelector('.merge-request .js-issuable-actions');
+  const closeDropdownItem = el.querySelector('li.close-item');
+  if (closeDropdownItem) {
+    closeDropdownItem.classList.add('hidden');
+    // Selects the next dropdown item
+    el.querySelector('li.report-item').click();
+  } else {
+    // No dropdown just hide the Close button
+    el.querySelector('.btn-close').classList.add('hidden');
+  }
+  // Dropdown for mobile screen
+  el.querySelector('li.js-close-item').classList.add('hidden');
+};
+
+export default MergeRequest;

app/assets/javascripts/repo/components/repo_preview.vue

 <script>
-/* global LineHighlighter */
 import { mapGetters } from 'vuex';
+import LineHighlighter from '../../line_highlighter';
 import syntaxHighlight from '../../syntax_highlight';
 
 export default {

app/assets/javascripts/right_sidebar.js

@@ -3,226 +3,228 @@
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 
-(function() {
-  this.Sidebar = (function() {
-    function Sidebar(currentUser) {
-      this.toggleTodo = this.toggleTodo.bind(this);
-      this.sidebar = $('aside');
-
-      this.removeListeners();
-      this.addEventListeners();
+function Sidebar(currentUser) {
+  this.toggleTodo = this.toggleTodo.bind(this);
+  this.sidebar = $('aside');
+
+  this.removeListeners();
+  this.addEventListeners();
+}
+
+Sidebar.initialize = function(currentUser) {
+  if (!this.instance) {
+    this.instance = new Sidebar(currentUser);
+  }
+};
+
+Sidebar.prototype.removeListeners = function () {
+  this.sidebar.off('click', '.sidebar-collapsed-icon');
+  this.sidebar.off('hidden.gl.dropdown');
+  $('.dropdown').off('loading.gl.dropdown');
+  $('.dropdown').off('loaded.gl.dropdown');
+  $(document).off('click', '.js-sidebar-toggle');
+};
+
+Sidebar.prototype.addEventListeners = function() {
+  const $document = $(document);
+
+  this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
+  this.sidebar.on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
+  $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
+  $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
+
+  $document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
+  return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
+};
+
+Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
+  var $allGutterToggleIcons, $this, $thisIcon;
+  e.preventDefault();
+  $this = $(this);
+  $thisIcon = $this.find('i');
+  $allGutterToggleIcons = $('.js-sidebar-toggle i');
+  if ($thisIcon.hasClass('fa-angle-double-right')) {
+    $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
+    $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+    $('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+  } else {
+    $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
+    $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+    $('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+
+    if (gl.lazyLoader) gl.lazyLoader.loadCheck();
+  }
+  if (!triggered) {
+    Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
+  }
+};
+
+Sidebar.prototype.toggleTodo = function(e) {
+  var $btnText, $this, $todoLoading, ajaxType, url;
+  $this = $(e.currentTarget);
+  ajaxType = $this.attr('data-delete-path') ? 'DELETE' : 'POST';
+  if ($this.attr('data-delete-path')) {
+    url = "" + ($this.attr('data-delete-path'));
+  } else {
+    url = "" + ($this.data('url'));
+  }
+
+  $this.tooltip('hide');
+
+  return $.ajax({
+    url: url,
+    type: ajaxType,
+    dataType: 'json',
+    data: {
+      issuable_id: $this.data('issuable-id'),
+      issuable_type: $this.data('issuable-type')
+    },
+    beforeSend: (function(_this) {
+      return function() {
+        $('.js-issuable-todo').disable()
+          .addClass('is-loading');
+      };
+    })(this)
+  }).done((function(_this) {
+    return function(data) {
+      return _this.todoUpdateDone(data);
+    };
+  })(this));
+};
+
+Sidebar.prototype.todoUpdateDone = function(data) {
+  const deletePath = data.delete_path ? data.delete_path : null;
+  const attrPrefix = deletePath ? 'mark' : 'todo';
+  const $todoBtns = $('.js-issuable-todo');
+
+  $(document).trigger('todo:toggle', data.count);
+
+  $todoBtns.each((i, el) => {
+    const $el = $(el);
+    const $elText = $el.find('.js-issuable-todo-inner');
+
+    $el.removeClass('is-loading')
+      .enable()
+      .attr('aria-label', $el.data(`${attrPrefix}-text`))
+      .attr('data-delete-path', deletePath)
+      .attr('title', $el.data(`${attrPrefix}-text`));
+
+    if ($el.hasClass('has-tooltip')) {
+      $el.tooltip('fixTitle');
     }
 
-    Sidebar.prototype.removeListeners = function () {
-      this.sidebar.off('click', '.sidebar-collapsed-icon');
-      this.sidebar.off('hidden.gl.dropdown');
-      $('.dropdown').off('loading.gl.dropdown');
-      $('.dropdown').off('loaded.gl.dropdown');
-      $(document).off('click', '.js-sidebar-toggle');
-    };
-
-    Sidebar.prototype.addEventListeners = function() {
-      const $document = $(document);
-
-      this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
-      this.sidebar.on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
-      $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
-      $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
-
-      $document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
-      return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
-    };
-
-    Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
-      var $allGutterToggleIcons, $this, $thisIcon;
-      e.preventDefault();
-      $this = $(this);
-      $thisIcon = $this.find('i');
-      $allGutterToggleIcons = $('.js-sidebar-toggle i');
-      if ($thisIcon.hasClass('fa-angle-double-right')) {
-        $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
-        $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-        $('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-      } else {
-        $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
-        $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-        $('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-
-        if (gl.lazyLoader) gl.lazyLoader.loadCheck();
-      }
-      if (!triggered) {
-        Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
-      }
-    };
-
-    Sidebar.prototype.toggleTodo = function(e) {
-      var $btnText, $this, $todoLoading, ajaxType, url;
-      $this = $(e.currentTarget);
-      ajaxType = $this.attr('data-delete-path') ? 'DELETE' : 'POST';
-      if ($this.attr('data-delete-path')) {
-        url = "" + ($this.attr('data-delete-path'));
-      } else {
-        url = "" + ($this.data('url'));
-      }
-
-      $this.tooltip('hide');
-
-      return $.ajax({
-        url: url,
-        type: ajaxType,
-        dataType: 'json',
-        data: {
-          issuable_id: $this.data('issuable-id'),
-          issuable_type: $this.data('issuable-type')
-        },
-        beforeSend: (function(_this) {
-          return function() {
-            $('.js-issuable-todo').disable()
-              .addClass('is-loading');
-          };
-        })(this)
-      }).done((function(_this) {
-        return function(data) {
-          return _this.todoUpdateDone(data);
-        };
-      })(this));
-    };
-
-    Sidebar.prototype.todoUpdateDone = function(data) {
-      const deletePath = data.delete_path ? data.delete_path : null;
-      const attrPrefix = deletePath ? 'mark' : 'todo';
-      const $todoBtns = $('.js-issuable-todo');
-
-      $(document).trigger('todo:toggle', data.count);
-
-      $todoBtns.each((i, el) => {
-        const $el = $(el);
-        const $elText = $el.find('.js-issuable-todo-inner');
-
-        $el.removeClass('is-loading')
-          .enable()
-          .attr('aria-label', $el.data(`${attrPrefix}-text`))
-          .attr('data-delete-path', deletePath)
-          .attr('title', $el.data(`${attrPrefix}-text`));
-
-        if ($el.hasClass('has-tooltip')) {
-          $el.tooltip('fixTitle');
-        }
-
-        if ($el.data(`${attrPrefix}-icon`)) {
-          $elText.html($el.data(`${attrPrefix}-icon`));