Merge branch 'master' into 40016-log-header40016-log-header

* master: (21 commits)
  Changing OAuth lookup to be case insensitive
  Delete orphaned fork networks in a migration
  Delete the fork network when removing the last membership
  Resolve "Performance issues when loading large number of wiki pages"
  Exports a couple of project related code as es6 modules
  Fix go-import meta data when enabled_git_access_protocol is a blank string
  Add dropdowns documentation
  Convert migration to populate latest merge request ID into a background migration
  Set 0.69.0 instead of latest for codeclimate image
  Fix hashed storage with project transfers to another namespace
  De-duplicate background migration matchers defined in spec/support/migrations_helpers.rb
  Update database_debugging.md
  Update database_debugging.md
  Move installation of apps higher
  Change to Google Kubernetes Cluster and add internal links
  Add Ingress description from official docs
  Add info on creating your own k8s cluster from the cluster page
  Add info about the installed apps in the Cluster docs
  Update HA README.md to clarify GitLab support does not troubleshoot DRBD.
  Optimise getting the pipeline status of commits
  ...

8 files changed, 272 insertions, 311 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index d716218d9a4..5ff7edb6077 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -1,6 +1,6 @@
 /* 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';
@@ -26,8 +26,7 @@ import projectAvatar from './project_avatar';
 /* global Compare */
 /* global CompareAutocomplete */
 /* 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';
@@ -91,6 +90,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';
 
 (function() {
   var Dispatcher;
@@ -187,7 +188,7 @@ import Diff from './diff';
           initIssuableSidebar();
           break;
         case 'dashboard:milestones:index':
-          new ProjectSelect();
+          projectSelect();
           break;
         case 'projects:milestones:show':
         case 'groups:milestones:show':
@@ -197,7 +198,7 @@ import Diff from './diff';
           break;
         case 'dashboard:issues':
         case 'dashboard:merge_requests':
-          new ProjectSelect();
+          projectSelect();
           initLegacyFilters();
           break;
         case 'groups:issues':
@@ -206,7 +207,7 @@ import Diff from './diff';
             const filteredSearchManager = new gl.FilteredSearchManager(page === 'groups:issues' ? 'issues' : 'merge_requests');
             filteredSearchManager.setup();
           }
-          new ProjectSelect();
+          projectSelect();
           break;
         case 'dashboard:todos:index':
           new Todos();
@@ -484,7 +485,7 @@ import Diff from './diff';
             if ($el.find('.dropdown-group-label').length) {
               new GroupLabelSubscription($el);
             } else {
-              new gl.ProjectLabelSubscription($el);
+              new ProjectLabelSubscription($el);
             }
           });
           break;
@@ -520,7 +521,7 @@ import Diff from './diff';
           // 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':
@@ -623,7 +624,6 @@ import Diff from './diff';
             case 'show':
               new Star();
               new ProjectNew();
-              new ProjectShow();
               new NotificationsDropdown();
               break;
             case 'wikis':
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 0035dd23011..cef79eec273 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -71,11 +71,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';
diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index ddb78aaeea1..36b6a5ed376 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -1,7 +1,7 @@
 /* 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() {
@@ -46,7 +46,7 @@ export default class Project {
   }
 
   static projectSelectDropdown () {
-    new ProjectSelect();
+    projectSelect();
     $('.project-item-select').on('click', e => Project.changeProject($(e.currentTarget).val()));
   }
 
diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
index 0a811627600..b65521b278f 100644
--- a/app/assets/javascripts/project_label_subscription.js
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -1,55 +1,50 @@
-/* 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 = {}));
+}
diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index fd89a1a85c3..ca548d011b6 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, one-var, no-underscore-dangle, prefer-template, no-else-return, prefer-arrow-callback, max-len */
+/* eslint-disable func-names, no-var, no-underscore-dangle, prefer-template, prefer-arrow-callback*/
 
 import VisibilitySelect from './visibility_select';
 
@@ -7,153 +7,145 @@ 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.$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.toggleSettingsOnclick();
-      this.toggleRepoVisibility();
-    }
-
-    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.$projectSelects = this.$selects.not('.js-repo-select');
+
+    $('.project-edit-container').on('ajax:before', () => {
+      $('.project-edit-container').hide();
+      return $('.save-project-loader').show();
+    });
+
+    this.initVisibilitySelect();
+
+    this.toggleSettings();
+    this.toggleSettingsOnclick();
+    this.toggleRepoVisibility();
+  }
+
+  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.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.toggleSettingsOnclick = function() {
-      this.$selects.on('change', this.toggleSettings);
-    };
-
-    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);
-
-      this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
-        .nextAll()
-        .hide();
-
-      $repoAccessLevel.off('change')
-        .on('change', function () {
-          var selectedVal = parseInt($repoAccessLevel.val(), 10);
-
-          this.$repoSelects.each(function () {
-            var $this = $(this);
-            var repoSelectVal = parseInt($this.val(), 10);
-
-            $this.find('option').enable();
-
-            if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
-              $this.val(selectedVal).trigger('change');
-              highlightChanges($this);
-            }
-
-            $this.find("option[value='" + selectedVal + "']").nextAll().disable();
-          });
+    });
+  }
+
+  toggleSettings() {
+    this.$selects.each(function () {
+      var $select = $(this);
+      var className = $select.data('field')
+        .replace(/_/g, '-')
+        .replace('access-level', 'feature');
+      ProjectNew._showOrHide($select, '.' + className);
+    });
+  }
+
+  toggleSettingsOnclick() {
+    this.$selects.on('change', this.toggleSettings);
+  }
+
+  static _showOrHide(checkElement, container) {
+    const $container = $(container);
+
+    if ($(checkElement).val() !== '0') {
+      return $container.show();
+    }
+    return $container.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);
+
+    this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
+      .nextAll()
+      .hide();
+
+    $repoAccessLevel
+      .off('change')
+      .on('change', function () {
+        var selectedVal = parseInt($repoAccessLevel.val(), 10);
+
+        this.$repoSelects.each(function () {
+          var $this = $(this);
+          var repoSelectVal = parseInt($this.val(), 10);
+
+          $this.find('option').enable();
+
+          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));
+  }
+}
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index bffc85e6315..07a49d1506c 100644
--- a/app/assets/javascripts/project_select.js
+++ b/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);
+  });
+}
diff --git a/app/assets/javascripts/project_show.js b/app/assets/javascripts/project_show.js
deleted file mode 100644
index 3a51c1f26ac..00000000000
--- a/app/assets/javascripts/project_show.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/* 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
diff --git a/app/assets/javascripts/project_variables.js b/app/assets/javascripts/project_variables.js
index 4ee2e49306d..567c311f119 100644
--- a/app/assets/javascripts/project_variables.js
+++ b/app/assets/javascripts/project_variables.js
@@ -1,43 +1,39 @@
-(() => {
-  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;
-})();
+}