refactor VisibilitySelect class to ES module syntax

4 files changed, 5 insertions, 9 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 9dff74b3c99..4c5dec00792 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -160,7 +160,6 @@ import './user_tabs';
 import './username_validator';
 import './users_select';
 import './version_check_image';
-import './visibility_select';
 
 // eslint-disable-next-line global-require, import/no-commonjs
 if (process.env.NODE_ENV !== 'production') require('./test_utils/');
diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index c0f757269cb..fd89a1a85c3 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,5 +1,7 @@
 /* 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 */
 
+import VisibilitySelect from './visibility_select';
+
 function highlightChanges($elm) {
   $elm.addClass('highlight-changes');
   setTimeout(() => $elm.removeClass('highlight-changes'), 10);
@@ -30,7 +32,7 @@ function highlightChanges($elm) {
     ProjectNew.prototype.initVisibilitySelect = function() {
       const visibilityContainer = document.querySelector('.js-visibility-select');
       if (!visibilityContainer) return;
-      const visibilitySelect = new gl.VisibilitySelect(visibilityContainer);
+      const visibilitySelect = new VisibilitySelect(visibilityContainer);
       visibilitySelect.init();
 
       const $visibilitySelect = $(visibilityContainer).find('select');
diff --git a/app/assets/javascripts/visibility_select.js b/app/assets/javascripts/visibility_select.js
index b6bbbaa0936..0c928d0d5f6 100644
--- a/app/assets/javascripts/visibility_select.js
+++ b/app/assets/javascripts/visibility_select.js
@@ -1,4 +1,4 @@
-class VisibilitySelect {
+export default class VisibilitySelect {
   constructor(container) {
     if (!container) throw new Error('VisibilitySelect requires a container element as argument 1');
     this.container = container;
@@ -19,6 +19,3 @@ class VisibilitySelect {
     this.helpBlock.textContent = this.select.querySelector('option:checked').dataset.description;
   }
 }
-
-window.gl = window.gl || {};
-window.gl.VisibilitySelect = VisibilitySelect;
diff --git a/spec/javascripts/visibility_select_spec.js b/spec/javascripts/visibility_select_spec.js
index c2eaea7c2ed..82714cb69bd 100644
--- a/spec/javascripts/visibility_select_spec.js
+++ b/spec/javascripts/visibility_select_spec.js
@@ -1,8 +1,6 @@
-import '~/visibility_select';
+import VisibilitySelect from '~/visibility_select';
 
 (() => {
-  const VisibilitySelect = gl.VisibilitySelect;
-
   describe('VisibilitySelect', function () {
     const lockedElement = document.createElement('div');
     lockedElement.dataset.helpBlock = 'lockedHelpBlock';