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 */
+export default class ProjectLabelSubscription {
+  constructor(container) {
+    this.$container = $(container);
+    this.$buttons = this.$container.find('.js-subscribe-button');
 
-(function(global) {
-  class ProjectLabelSubscription {
-    constructor(container) {
-      this.$container = $(container);
-      this.$buttons = this.$container.find('.js-subscribe-button');
-
-      this.$buttons.on('click', this.toggleSubscription.bind(this));
-    }
+    this.$buttons.on('click', this.toggleSubscription.bind(this));
+  }
 
-    toggleSubscription(event) {
-      event.preventDefault();
+  toggleSubscription(event) {
+    event.preventDefault();
 
-      const $btn = $(event.currentTarget);
-      const $span = $btn.find('span');
-      const url = $btn.attr('data-url');
-      const oldStatus = $btn.attr('data-status');
+    const $btn = $(event.currentTarget);
+    const $span = $btn.find('span');
+    const url = $btn.attr('data-url');
+    const oldStatus = $btn.attr('data-status');
 
-      $btn.addClass('disabled');
-      $span.toggleClass('hidden');
+    $btn.addClass('disabled');
+    $span.toggleClass('hidden');
 
-      $.ajax({
-        type: 'POST',
-        url: url
-      }).done(() => {
-        let newStatus, newAction;
+    $.ajax({
+      type: 'POST',
+      url,
+    }).done(() => {
+      let newStatus;
+      let newAction;
 
-        if (oldStatus === 'unsubscribed') {
-          [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
-        } else {
-          [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
-        }
+      if (oldStatus === 'unsubscribed') {
+        [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
+      } else {
+        [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
+      }
 
-        $span.toggleClass('hidden');
-        $btn.removeClass('disabled');
+      $span.toggleClass('hidden');
+      $btn.removeClass('disabled');
 
-        this.$buttons.attr('data-status', newStatus);
-        this.$buttons.find('> span').text(newAction);
+      this.$buttons.attr('data-status', newStatus);
+      this.$buttons.find('> span').text(newAction);
 
-        this.$buttons.map((button) => {
-          const $button = $(button);
+      this.$buttons.map((button) => {
+        const $button = $(button);
 
-          if ($button.attr('data-original-title')) {
-            $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
-          }
+        if ($button.attr('data-original-title')) {
+          $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
+        }
 
-          return button;
-        });
+        return button;
       });
-    }
+    });
   }
-
-  global.ProjectLabelSubscription = ProjectLabelSubscription;
-})(window.gl || (window.gl = {}));
+}

app/assets/javascripts/project_new.js

@@ -7,164 +7,158 @@ function highlightChanges($elm) {
   setTimeout(() => $elm.removeClass('highlight-changes'), 10);
 }
 
-(function() {
-  this.ProjectNew = (function() {
-    function ProjectNew() {
-      this.toggleSettings = this.toggleSettings.bind(this);
-      this.$selects = $('.features select');
-      this.$repoSelects = this.$selects.filter('.js-repo-select');
-      this.$enableApprovers = $('.js-require-approvals-toggle');
-      this.$projectSelects = this.$selects.not('.js-repo-select');
-
-      $('.project-edit-container').on('ajax:before', (function(_this) {
-        return function() {
-          $('.project-edit-container').hide();
-          return $('.save-project-loader').show();
-        };
-      })(this));
-
-      this.initVisibilitySelect();
-
-      this.toggleSettings();
-      this.bindEvents();
-      this.toggleRepoVisibility();
-    }
-
-    ProjectNew.prototype.bindEvents = function() {
-      this.$selects.on('change', () => this.toggleSettings());
-      $('#require_approvals').on('change', e => this.toggleApproverSettingsVisibility(e));
-    };
-
-    ProjectNew.prototype.initVisibilitySelect = function() {
-      const visibilityContainer = document.querySelector('.js-visibility-select');
-      if (!visibilityContainer) return;
-      const visibilitySelect = new VisibilitySelect(visibilityContainer);
-      visibilitySelect.init();
-
-      const $visibilitySelect = $(visibilityContainer).find('select');
-      let projectVisibility = $visibilitySelect.val();
-      const PROJECT_VISIBILITY_PRIVATE = '0';
-
-      $visibilitySelect.on('change', () => {
-        const newProjectVisibility = $visibilitySelect.val();
-
-        if (projectVisibility !== newProjectVisibility) {
-          this.$projectSelects.each((idx, select) => {
-            const $select = $(select);
-            const $options = $select.find('option');
-            const values = $.map($options, e => e.value);
-
-            // if switched to "private", limit visibility options
-            if (newProjectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-              if ($select.val() !== values[0] && $select.val() !== values[1]) {
-                $select.val(values[1]).trigger('change');
-                highlightChanges($select);
-              }
-              $options.slice(2).disable();
+export default class ProjectNew {
+  constructor() {
+    this.toggleSettings = this.toggleSettings.bind(this);
+    this.$selects = $('.features select');
+    this.$repoSelects = this.$selects.filter('.js-repo-select');
+    this.$enableApprovers = $('.js-require-approvals-toggle');
+    this.$projectSelects = this.$selects.not('.js-repo-select');
+
+    $('.project-edit-container').on('ajax:before', (function(_this) {
+      return function() {
+        $('.project-edit-container').hide();
+        return $('.save-project-loader').show();
+      };
+    })(this));
+
+    this.initVisibilitySelect();
+
+    this.toggleSettings();
+    this.bindEvents();
+    this.toggleRepoVisibility();
+  }
+
+  bindEvents () {
+    this.$selects.on('change', () => this.toggleSettings());
+    $('#require_approvals').on('change', e => this.toggleApproverSettingsVisibility(e));
+  }
+
+  initVisibilitySelect() {
+    const visibilityContainer = document.querySelector('.js-visibility-select');
+    if (!visibilityContainer) return;
+    const visibilitySelect = new VisibilitySelect(visibilityContainer);
+    visibilitySelect.init();
+
+    const $visibilitySelect = $(visibilityContainer).find('select');
+    let projectVisibility = $visibilitySelect.val();
+    const PROJECT_VISIBILITY_PRIVATE = '0';
+
+    $visibilitySelect.on('change', () => {
+      const newProjectVisibility = $visibilitySelect.val();
+
+      if (projectVisibility !== newProjectVisibility) {
+        this.$projectSelects.each((idx, select) => {
+          const $select = $(select);
+          const $options = $select.find('option');
+          const values = $.map($options, e => e.value);
+
+          // if switched to "private", limit visibility options
+          if (newProjectVisibility === PROJECT_VISIBILITY_PRIVATE) {
+            if ($select.val() !== values[0] && $select.val() !== values[1]) {
+              $select.val(values[1]).trigger('change');
+              highlightChanges($select);
             }
+            $options.slice(2).disable();
+          }
 
-            // if switched from "private", increase visibility for non-disabled options
-            if (projectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-              $options.enable();
-              if ($select.val() !== values[0] && $select.val() !== values[values.length - 1]) {
-                $select.val(values[values.length - 1]).trigger('change');
-                highlightChanges($select);
-              }
+          // if switched from "private", increase visibility for non-disabled options
+          if (projectVisibility === PROJECT_VISIBILITY_PRIVATE) {
+            $options.enable();
+            if ($select.val() !== values[0] && $select.val() !== values[values.length - 1]) {
+              $select.val(values[values.length - 1]).trigger('change');
+              highlightChanges($select);
             }
-          });
+          }
+        });
 
-          projectVisibility = newProjectVisibility;
-        }
-      });
-    };
-
-    ProjectNew.prototype.toggleApproverSettingsVisibility = function(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;
-
-      this.$selects.each(function () {
-        var $select = $(this);
-        var className = $select.data('field')
-          .replace(/_/g, '-')
-          .replace('access-level', 'feature');
-        self._showOrHide($select, '.' + className);
-      });
-    };
-
-    ProjectNew.prototype._showOrHide = function(checkElement, container) {
-      var $container = $(container);
-
-      if ($(checkElement).val() !== '0') {
-        return $container.show();
-      } else {
-        return $container.hide();
+        projectVisibility = newProjectVisibility;
       }
-    };
-
-    ProjectNew.prototype.toggleRepoVisibility = function () {
-      var $repoAccessLevel = $('.js-repo-access-level select');
-      var $lfsEnabledOption = $('.js-lfs-enabled select');
-      var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
-      var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
-      var prevSelectedVal = parseInt($repoAccessLevel.val(), 10);
+    });
+  }
+
+  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);
+  }
+
+  toggleSettings() {
+    this.$selects.each(function () {
+      var $select = $(this);
+      var className = $select.data('field')
+        .replace(/_/g, '-')
+        .replace('access-level', 'feature');
+      ProjectNew._showOrHide($select, '.' + className);
+    });
+  }
+
+  static _showOrHide(checkElement, container) {
+    var $container = $(container);
+
+    if ($(checkElement).val() !== '0') {
+      return $container.show();
+    } else {
+      return $container.hide();
+    }
+  }
 
-      this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
-        .nextAll()
-        .hide();
+  toggleRepoVisibility () {
+    var $repoAccessLevel = $('.js-repo-access-level select');
+    var $lfsEnabledOption = $('.js-lfs-enabled select');
+    var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
+    var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
+    var prevSelectedVal = parseInt($repoAccessLevel.val(), 10);
 
-      $repoAccessLevel.off('change')
-        .on('change', function () {
-          var selectedVal = parseInt($repoAccessLevel.val(), 10);
+    this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
+      .nextAll()
+      .hide();
 
-          this.$repoSelects.each(function () {
-            var $this = $(this);
-            var repoSelectVal = parseInt($this.val(), 10);
+    $repoAccessLevel.off('change')
+      .on('change', function () {
+        var selectedVal = parseInt($repoAccessLevel.val(), 10);
 
-            $this.find('option').enable();
+        this.$repoSelects.each(function () {
+          var $this = $(this);
+          var repoSelectVal = parseInt($this.val(), 10);
 
-            if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
-              $this.val(selectedVal).trigger('change');
-              highlightChanges($this);
-            }
+          $this.find('option').enable();
 
-            $this.find("option[value='" + selectedVal + "']").nextAll().disable();
-          });
+          if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
+            $this.val(selectedVal).trigger('change');
+            highlightChanges($this);
+          }
 
-          if (selectedVal) {
-            this.$repoSelects.removeClass('disabled');
+          $this.find("option[value='" + selectedVal + "']").nextAll().disable();
+        });
 
-            if ($lfsEnabledOption.length) {
-              $lfsEnabledOption.removeClass('disabled');
-              highlightChanges($lfsEnabledOption);
-            }
-            if (containerRegistry) {
-              containerRegistry.style.display = '';
-            }
-          } else {
-            this.$repoSelects.addClass('disabled');
+        if (selectedVal) {
+          this.$repoSelects.removeClass('disabled');
 
-            if ($lfsEnabledOption.length) {
-              $lfsEnabledOption.val('false').addClass('disabled');
-              highlightChanges($lfsEnabledOption);
-            }
-            if (containerRegistry) {
-              containerRegistry.style.display = 'none';
-              containerRegistryCheckbox.checked = false;
-            }
+          if ($lfsEnabledOption.length) {
+            $lfsEnabledOption.removeClass('disabled');
+            highlightChanges($lfsEnabledOption);
+          }
+          if (containerRegistry) {
+            containerRegistry.style.display = '';
           }
+        } else {
+          this.$repoSelects.addClass('disabled');
 
-          prevSelectedVal = selectedVal;
-        }.bind(this));
-    };
+          if ($lfsEnabledOption.length) {
+            $lfsEnabledOption.val('false').addClass('disabled');
+            highlightChanges($lfsEnabledOption);
+          }
+          if (containerRegistry) {
+            containerRegistry.style.display = 'none';
+            containerRegistryCheckbox.checked = false;
+          }
+        }
 
-    return ProjectNew;
-  })();
-}).call(window);
+        prevSelectedVal = selectedVal;
+      }.bind(this));
+  }
+}

app/assets/javascripts/project_select.js

@@ -2,79 +2,73 @@
 import Api from './api';
 import ProjectSelectComboButton from './project_select_combo_button';
 
-(function () {
-  this.ProjectSelect = (function () {
-    function ProjectSelect() {
-      $('.ajax-project-select').each(function(i, select) {
-        var placeholder;
-        const simpleFilter = $(select).data('simple-filter') || false;
-        this.groupId = $(select).data('group-id');
-        this.includeGroups = $(select).data('include-groups');
-        this.allProjects = $(select).data('all-projects') || false;
-        this.orderBy = $(select).data('order-by') || 'id';
-        this.withIssuesEnabled = $(select).data('with-issues-enabled');
-        this.withMergeRequestsEnabled = $(select).data('with-merge-requests-enabled');
+export default function projectSelect() {
+  $('.ajax-project-select').each(function(i, select) {
+    var placeholder;
+    const simpleFilter = $(select).data('simple-filter') || false;
+    this.groupId = $(select).data('group-id');
+    this.includeGroups = $(select).data('include-groups');
+    this.allProjects = $(select).data('all-projects') || false;
+    this.orderBy = $(select).data('order-by') || 'id';
+    this.withIssuesEnabled = $(select).data('with-issues-enabled');
+    this.withMergeRequestsEnabled = $(select).data('with-merge-requests-enabled');
 
-        placeholder = "Search for project";
-        if (this.includeGroups) {
-          placeholder += " or group";
-        }
+    placeholder = "Search for project";
+    if (this.includeGroups) {
+      placeholder += " or group";
+    }
 
-        $(select).select2({
-          placeholder: placeholder,
-          minimumInputLength: 0,
-          query: (function (_this) {
-            return function (query) {
-              var finalCallback, projectsCallback;
-              finalCallback = function (projects) {
+    $(select).select2({
+      placeholder: placeholder,
+      minimumInputLength: 0,
+      query: (function (_this) {
+        return function (query) {
+          var finalCallback, projectsCallback;
+          finalCallback = function (projects) {
+            var data;
+            data = {
+              results: projects
+            };
+            return query.callback(data);
+          };
+          if (_this.includeGroups) {
+            projectsCallback = function (projects) {
+              var groupsCallback;
+              groupsCallback = function (groups) {
                 var data;
-                data = {
-                  results: projects
-                };
-                return query.callback(data);
+                data = groups.concat(projects);
+                return finalCallback(data);
               };
-              if (_this.includeGroups) {
-                projectsCallback = function (projects) {
-                  var groupsCallback;
-                  groupsCallback = function (groups) {
-                    var data;
-                    data = groups.concat(projects);
-                    return finalCallback(data);
-                  };
-                  return Api.groups(query.term, {}, groupsCallback);
-                };
-              } else {
-                projectsCallback = finalCallback;
-              }
-              if (_this.groupId) {
-                return Api.groupProjects(_this.groupId, query.term, projectsCallback);
-              } else {
-                return Api.projects(query.term, {
-                  order_by: _this.orderBy,
-                  with_issues_enabled: _this.withIssuesEnabled,
-                  with_merge_requests_enabled: _this.withMergeRequestsEnabled,
-                  membership: !_this.allProjects,
-                }, projectsCallback);
-              }
+              return Api.groups(query.term, {}, groupsCallback);
             };
-          })(this),
-          id: function(project) {
-            if (simpleFilter) return project.id;
-            return JSON.stringify({
-              name: project.name,
-              url: project.web_url,
-            });
-          },
-          text: function (project) {
-            return project.name_with_namespace || project.name;
-          },
-          dropdownCssClass: "ajax-project-dropdown"
+          } else {
+            projectsCallback = finalCallback;
+          }
+          if (_this.groupId) {
+            return Api.groupProjects(_this.groupId, query.term, projectsCallback);
+          } else {
+            return Api.projects(query.term, {
+              order_by: _this.orderBy,
+              with_issues_enabled: _this.withIssuesEnabled,
+              with_merge_requests_enabled: _this.withMergeRequestsEnabled,
+              membership: !_this.allProjects,
+            }, projectsCallback);
+          }
+        };
+      })(this),
+      id: function(project) {
+        if (simpleFilter) return project.id;
+        return JSON.stringify({
+          name: project.name,
+          url: project.web_url,
         });
-        if (simpleFilter) return select;
-        return new ProjectSelectComboButton(select);
-      });
-    }
-
-    return ProjectSelect;
-  })();
-}).call(window);
+      },
+      text: function (project) {
+        return project.name_with_namespace || project.name;
+      },
+      dropdownCssClass: "ajax-project-dropdown"
+    });
+    if (simpleFilter) return select;
+    return new ProjectSelectComboButton(select);
+  });
+}

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 {
-    constructor() {
-      this.$revealBtn = $('.js-btn-toggle-reveal-values');
-      this.$revealBtn.on('click', this.toggleRevealState.bind(this));
-    }
+const HIDDEN_VALUE_TEXT = '******';
+
+export default class ProjectVariables {
+  constructor() {
+    this.$revealBtn = $('.js-btn-toggle-reveal-values');
+    this.$revealBtn.on('click', this.toggleRevealState.bind(this));
+  }
 
-    toggleRevealState(e) {
-      e.preventDefault();
+  toggleRevealState(e) {
+    e.preventDefault();
 
-      const oldStatus = this.$revealBtn.attr('data-status');
-      let newStatus = 'hidden';
-      let newAction = 'Reveal Values';
+    const oldStatus = this.$revealBtn.attr('data-status');
+    let newStatus = 'hidden';
+    let newAction = 'Reveal Values';
 
-      if (oldStatus === 'hidden') {
-        newStatus = 'revealed';
-        newAction = 'Hide Values';
-      }
+    if (oldStatus === 'hidden') {
+      newStatus = 'revealed';
+      newAction = 'Hide Values';
+    }
 
-      this.$revealBtn.attr('data-status', newStatus);
+    this.$revealBtn.attr('data-status', newStatus);
 
-      const $variables = $('.variable-value');
+    const $variables = $('.variable-value');
 
-      $variables.each((_, variable) => {
-        const $variable = $(variable);
-        let newText = HIDDEN_VALUE_TEXT;
+    $variables.each((_, variable) => {
+      const $variable = $(variable);
+      let newText = HIDDEN_VALUE_TEXT;
 
-        if (newStatus === 'revealed') {
-          newText = $variable.attr('data-value');
-        }
+      if (newStatus === 'revealed') {
+        newText = $variable.attr('data-value');
+      }
 
-        $variable.text(newText);
-      });
+      $variable.text(newText);
+    });
 
-      this.$revealBtn.text(newAction);
-    }
+    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', () => {