Exports a couple of project related code as es6 modules

app/assets/javascripts/audit_logs.js

 /* eslint-disable class-methods-use-this, no-unneeded-ternary, quote-props, no-new */
-/* global ProjectSelect */
 
 import UsersSelect from './users_select';
 import groupsSelect from './groups_select';
-import './project_select';
+import projectSelect from './project_select';
 
 class AuditLogs {
   constructor() {
@@ -11,7 +10,7 @@ class AuditLogs {
   }
 
   initFilters() {
-    new ProjectSelect();
+    projectSelect();
     groupsSelect();
     new UsersSelect();
 

app/assets/javascripts/dispatcher.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
 import { s__ } from './locale';
-/* global ProjectSelect */
+import projectSelect from './project_select';
 import IssuableIndex from './issuable_index';
 /* global Milestone */
 import IssuableForm from './issuable_form';
@@ -27,8 +27,7 @@ import projectAvatar from './project_avatar';
 /* global CompareAutocomplete */
 /* global PathLocks */
 /* global ProjectFindFile */
-/* global ProjectNew */
-/* global ProjectShow */
+import ProjectNew from './project_new';
 import projectImport from './project_import';
 import Labels from './labels';
 import LabelManager from './label_manager';
@@ -95,6 +94,8 @@ import Members from './members';
 import memberExpirationDate from './member_expiration_date';
 import DueDateSelectors from './due_date_select';
 import Diff from './diff';
+import ProjectLabelSubscription from './project_label_subscription';
+import ProjectVariables from './project_variables';
 
 // EE-only
 import ApproversSelect from './approvers_select';
@@ -212,7 +213,7 @@ import initGroupAnalytics from './init_group_analytics';
           initIssuableSidebar();
           break;
         case 'dashboard:milestones:index':
-          new ProjectSelect();
+          projectSelect();
           break;
         case 'projects:milestones:show':
           new UserCallout();
@@ -223,7 +224,7 @@ import initGroupAnalytics from './init_group_analytics';
           break;
         case 'dashboard:issues':
         case 'dashboard:merge_requests':
-          new ProjectSelect();
+          projectSelect();
           initLegacyFilters();
           break;
         case 'groups:issues':
@@ -232,7 +233,7 @@ import initGroupAnalytics from './init_group_analytics';
             const filteredSearchManager = new gl.FilteredSearchManager(page === 'groups:issues' ? 'issues' : 'merge_requests');
             filteredSearchManager.setup();
           }
-          new ProjectSelect();
+          projectSelect();
           break;
         case 'dashboard:todos:index':
           new Todos();
@@ -530,7 +531,7 @@ import initGroupAnalytics from './init_group_analytics';
             if ($el.find('.dropdown-group-label').length) {
               new GroupLabelSubscription($el);
             } else {
-              new gl.ProjectLabelSubscription($el);
+              new ProjectLabelSubscription($el);
             }
           });
           break;
@@ -579,7 +580,7 @@ import initGroupAnalytics from './init_group_analytics';
           // Initialize expandable settings panels
           initSettingsPanels();
         case 'groups:settings:ci_cd:show':
-          new gl.ProjectVariables();
+          new ProjectVariables();
           break;
         case 'ci:lints:create':
         case 'ci:lints:show':
@@ -706,7 +707,6 @@ import initGroupAnalytics from './init_group_analytics';
             case 'show':
               new Star();
               new ProjectNew();
-              new ProjectShow();
               new NotificationsDropdown();
               break;
             case 'wikis':

app/assets/javascripts/main.js

@@ -73,11 +73,6 @@ import './pager';
 import './preview_markdown';
 import './project_find_file';
 import './project_import';
-import './project_label_subscription';
-import './project_new';
-import './project_select';
-import './project_show';
-import './project_variables';
 import './projects_dropdown';
 import './projects_list';
 import './syntax_highlight';

app/assets/javascripts/project.js

 /* eslint-disable func-names, space-before-function-paren, no-var, consistent-return, no-new, prefer-arrow-callback, no-return-assign, one-var, one-var-declaration-per-line, object-shorthand, no-else-return, newline-per-chained-call, no-shadow, vars-on-top, prefer-template, max-len */
-/* global ProjectSelect */
 
 import Cookies from 'js-cookie';
+import projectSelect from './project_select';
 
 export default class Project {
   constructor() {
@@ -58,7 +58,7 @@ export default class Project {
   }
 
   static projectSelectDropdown() {
-    new ProjectSelect();
+    projectSelect();
     $('.project-item-select').on('click', e => Project.changeProject($(e.currentTarget).val()));
   }
 

app/assets/javascripts/project_label_subscription.js

-/* eslint-disable wrap-iife, func-names, space-before-function-paren, object-shorthand, comma-dangle, one-var, one-var-declaration-per-line, no-restricted-syntax, max-len, no-param-reassign */
-
-(function(global) {
-  class ProjectLabelSubscription {
+export default class ProjectLabelSubscription {
   constructor(container) {
     this.$container = $(container);
     this.$buttons = this.$container.find('.js-subscribe-button');
@@ -22,9 +19,10 @@
 
     $.ajax({
       type: 'POST',
-        url: url
+      url,
     }).done(() => {
-        let newStatus, newAction;
+      let newStatus;
+      let newAction;
 
       if (oldStatus === 'unsubscribed') {
         [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
@@ -49,7 +47,4 @@
       });
     });
   }
-  }
-
-  global.ProjectLabelSubscription = ProjectLabelSubscription;
-})(window.gl || (window.gl = {}));
+}

app/assets/javascripts/project_new.js

@@ -7,9 +7,8 @@ function highlightChanges($elm) {
   setTimeout(() => $elm.removeClass('highlight-changes'), 10);
 }
 
-(function() {
-  this.ProjectNew = (function() {
-    function ProjectNew() {
+export default class ProjectNew {
+  constructor() {
     this.toggleSettings = this.toggleSettings.bind(this);
     this.$selects = $('.features select');
     this.$repoSelects = this.$selects.filter('.js-repo-select');
@@ -30,12 +29,12 @@ function highlightChanges($elm) {
     this.toggleRepoVisibility();
   }
 
-    ProjectNew.prototype.bindEvents = function() {
+  bindEvents () {
     this.$selects.on('change', () => this.toggleSettings());
     $('#require_approvals').on('change', e => this.toggleApproverSettingsVisibility(e));
-    };
+  }
 
-    ProjectNew.prototype.initVisibilitySelect = function() {
+  initVisibilitySelect() {
     const visibilityContainer = document.querySelector('.js-visibility-select');
     if (!visibilityContainer) return;
     const visibilitySelect = new VisibilitySelect(visibilityContainer);
@@ -76,30 +75,28 @@ function highlightChanges($elm) {
         projectVisibility = newProjectVisibility;
       }
     });
-    };
+  }
 
-    ProjectNew.prototype.toggleApproverSettingsVisibility = function(e) {
+  toggleApproverSettingsVisibility(e) {
     this.$requiredApprovals = $('#project_approvals_before_merge');
     const enabled = $(e.target).prop('checked');
     const val = enabled ? 1 : 0;
     this.$requiredApprovals.val(val);
     this.$requiredApprovals.prop('min', val);
     $('.nested-settings').toggleClass('hidden', !enabled);
-    };
-
-    ProjectNew.prototype.toggleSettings = function() {
-      var self = this;
+  }
 
+  toggleSettings() {
     this.$selects.each(function () {
       var $select = $(this);
       var className = $select.data('field')
         .replace(/_/g, '-')
         .replace('access-level', 'feature');
-        self._showOrHide($select, '.' + className);
+      ProjectNew._showOrHide($select, '.' + className);
     });
-    };
+  }
 
-    ProjectNew.prototype._showOrHide = function(checkElement, container) {
+  static _showOrHide(checkElement, container) {
     var $container = $(container);
 
     if ($(checkElement).val() !== '0') {
@@ -107,9 +104,9 @@ function highlightChanges($elm) {
     } else {
       return $container.hide();
     }
-    };
+  }
 
-    ProjectNew.prototype.toggleRepoVisibility = function () {
+  toggleRepoVisibility () {
     var $repoAccessLevel = $('.js-repo-access-level select');
     var $lfsEnabledOption = $('.js-lfs-enabled select');
     var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
@@ -163,8 +160,5 @@ function highlightChanges($elm) {
 
         prevSelectedVal = selectedVal;
       }.bind(this));
-    };
-
-    return ProjectNew;
-  })();
-}).call(window);
+  }
+}

app/assets/javascripts/project_select.js

@@ -2,9 +2,7 @@
 import Api from './api';
 import ProjectSelectComboButton from './project_select_combo_button';
 
-(function () {
-  this.ProjectSelect = (function () {
-    function ProjectSelect() {
+export default function projectSelect() {
   $('.ajax-project-select').each(function(i, select) {
     var placeholder;
     const simpleFilter = $(select).data('simple-filter') || false;
@@ -73,8 +71,4 @@ import ProjectSelectComboButton from './project_select_combo_button';
     if (simpleFilter) return select;
     return new ProjectSelectComboButton(select);
   });
-    }
-
-    return ProjectSelect;
-  })();
-}).call(window);
+}

app/assets/javascripts/project_show.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife */
-
-(function() {
-  this.ProjectShow = (function() {
-    function ProjectShow() {}
-
-    return ProjectShow;
-  })();
-}).call(window);
-
-// I kept class for future

app/assets/javascripts/project_variables.js

-(() => {
-  const HIDDEN_VALUE_TEXT = '******';
 
-  class ProjectVariables {
+const HIDDEN_VALUE_TEXT = '******';
+
+export default class ProjectVariables {
   constructor() {
     this.$revealBtn = $('.js-btn-toggle-reveal-values');
     this.$revealBtn.on('click', this.toggleRevealState.bind(this));
@@ -36,8 +36,4 @@
 
     this.$revealBtn.text(newAction);
   }
-  }
-
-  window.gl = window.gl || {};
-  window.gl.ProjectVariables = ProjectVariables;
-})();
+}

spec/javascripts/project_new_spec.js

-import '~/project_new';
+import ProjectNew from '~/project_new';
 
 describe('ApproversSelect', function () {
   const projectSettingsTemplate = 'projects/edit.html.raw';
@@ -7,7 +7,7 @@ describe('ApproversSelect', function () {
   beforeEach(() => {
     loadFixtures(projectSettingsTemplate);
     this.$requireApprovalsToggle = $('.js-require-approvals-toggle');
-    this.project = new window.ProjectNew();
+    this.project = new ProjectNew();
   });
 
   it('shows approver settings if enabled', () => {