Use CJS in all environments components

app/assets/javascripts/environments/components/environment.js.es6

 /* eslint-disable no-param-reassign, no-new */
-/* global Vue */
-/* global EnvironmentsService */
 /* global Flash */
 
-window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
+const Vue = require('vue');
+Vue.use(require('vue-resource'));
 const EnvironmentsService = require('../services/environments_service');
-require('./environment_item');
+const EnvironmentItem = require('./environment_item');
 const Store = require('../stores/environments_store');
 
-(() => {
-  window.gl = window.gl || {};
-
-  gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
+module.exports = Vue.component('environment-component', {
 
   components: {
-      'environment-item': gl.environmentsList.EnvironmentItem,
+    'environment-item': EnvironmentItem,
   },
 
   data() {
@@ -201,5 +196,4 @@ const Store = require('../stores/environments_store');
       </div>
     </div>
   `,
-  });
-})();
+});

app/assets/javascripts/environments/components/environment_actions.js.es6

-/* global Vue */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
+module.exports = Vue.component('actions-component', {
   props: {
     actions: {
       type: Array,
@@ -46,5 +40,4 @@ window.Vue = require('vue');
       </div>
     </div>
   `,
-  });
-})();
+});

app/assets/javascripts/environments/components/environment_external_url.js.es6

-/* global Vue */
+/**
+ * Renders the external url link in environments table.
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
+module.exports = Vue.component('external-url-component', {
   props: {
     externalUrl: {
       type: String,
@@ -19,5 +16,4 @@ window.Vue = require('vue');
       <i class="fa fa-external-link"></i>
     </a>
   `,
-  });
-})();
+});

app/assets/javascripts/environments/components/environment_item.js.es6

-/* global Vue */
-/* global timeago */
 
-window.Vue = require('vue');
-window.timeago = require('vendor/timeago');
+const Vue = require('vue');
+const Timeago = require('vendor/timeago');
 require('../../lib/utils/text_utility');
 require('../../vue_shared/components/commit');
-require('./environment_actions');
-require('./environment_external_url');
-require('./environment_stop');
-require('./environment_rollback');
-require('./environment_terminal_button');
+const ActionsComponent = require('./environment_actions');
+const ExternalUrlComponent = require('./environment_external_url');
+const StopComponent = require('./environment_stop');
+const RollbackComponent = require('./environment_rollback');
+const TerminalButtonComponent = require('./environment_terminal_button');
 
-(() => {
-  /**
+/**
  * Envrionment Item Component
  *
  * Renders a table row for each environment.
  */
 
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-  window.gl.environmentsList.timeagoInstance = new timeago(); // eslint-disable-line
+const timeagoInstance = new Timeago();
 
-  gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
+module.exports = Vue.component('environment-item', {
 
   components: {
     'commit-component': gl.CommitComponent,
-      'actions-component': gl.environmentsList.ActionsComponent,
-      'external-url-component': gl.environmentsList.ExternalUrlComponent,
-      'stop-component': gl.environmentsList.StopComponent,
-      'rollback-component': gl.environmentsList.RollbackComponent,
-      'terminal-button-component': gl.environmentsList.TerminalButtonComponent,
+    'actions-component': ActionsComponent,
+    'external-url-component': ExternalUrlComponent,
+    'stop-component': StopComponent,
+    'rollback-component': RollbackComponent,
+    'terminal-button-component': TerminalButtonComponent,
   },
 
   props: {
@@ -134,9 +129,7 @@ require('./environment_terminal_button');
      * @returns {String}
      */
     createdDate() {
-        return gl.environmentsList.timeagoInstance.format(
-          this.model.latest.last_deployment.deployable.created_at,
-        );
+      return timeagoInstance.format(this.model.latest.last_deployment.deployable.created_at);
     },
 
     /**
@@ -485,5 +478,4 @@ require('./environment_terminal_button');
       </td>
     </tr>
   `,
-  });
-})();
+});

app/assets/javascripts/environments/components/environment_rollback.js.es6

-/* global Vue */
+/**
+ * Renders Rollback or Re deploy button in environments table depending
+ * of the provided property `isLastDeployment`
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
+module.exports = Vue.component('rollback-component', {
   props: {
     retryUrl: {
       type: String,
@@ -29,5 +27,4 @@ window.Vue = require('vue');
       </span>
     </a>
   `,
-  });
-})();
+});

app/assets/javascripts/environments/components/environment_stop.js.es6

-/* global Vue */
+/**
+ * Renders the stop "button" that allows stop an environment.
+ * Used in environments table.
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.StopComponent = Vue.component('stop-component', {
+module.exports = Vue.component('stop-component', {
   props: {
     stopUrl: {
       type: String,
@@ -20,8 +18,7 @@ window.Vue = require('vue');
       data-confirm="Are you sure you want to stop this environment?"
       data-method="post"
       rel="nofollow">
-        <i class="fa fa-stop stop-env-icon"></i>
+      <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
     </a>
   `,
-  });
-})();
+});

app/assets/javascripts/environments/components/environment_terminal_button.js.es6

-/* global Vue */
+/**
+ * Renders a terminal button to open a web terminal.
+ * Used in environments table.
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', {
+module.exports = Vue.component('terminal-button-component', {
   props: {
     terminalPath: {
       type: String,
@@ -24,5 +22,4 @@ window.Vue = require('vue');
       <span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
     </a>
   `,
-  });
-})();
+});

app/assets/javascripts/environments/environments_bundle.js.es6

-window.Vue = require('vue');
-require('./components/environment');
+const EnvironmentsComponent = require('./components/environment');
 require('../vue_shared/vue_resource_interceptor');
 
 $(() => {
@@ -9,7 +8,7 @@ $(() => {
     gl.EnvironmentsListApp.$destroy(true);
   }
 
-  gl.EnvironmentsListApp = new gl.environmentsList.EnvironmentsComponent({
+  gl.EnvironmentsListApp = new EnvironmentsComponent({
     el: document.querySelector('#environments-list-view'),
   });
 });

app/assets/javascripts/environments/services/environments_service.js.es6

-const Vue = window.Vue = require('vue');
+const Vue = require('vue');
 
 class EnvironmentsService {
   constructor(endpoint) {

app/assets/javascripts/vue_shared/components/commit.js.es6

 /* global Vue */
+window.Vue = require('vue');
 
 (() => {
   window.gl = window.gl || {};

spec/javascripts/environments/environment_actions_spec.js.es6

-require('~/environments/components/environment_actions');
+const ActionsComponent = require('~/environments/components/environment_actions');
 
 describe('Actions Component', () => {
   preloadFixtures('static/environments/element.html.raw');
@@ -19,7 +19,7 @@ describe('Actions Component', () => {
       },
     ];
 
-    const component = new window.gl.environmentsList.ActionsComponent({
+    const component = new ActionsComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         actions: actionsMock,
@@ -47,7 +47,7 @@ describe('Actions Component', () => {
       },
     ];
 
-    const component = new window.gl.environmentsList.ActionsComponent({
+    const component = new ActionsComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         actions: actionsMock,

spec/javascripts/environments/environment_external_url_spec.js.es6

-require('~/environments/components/environment_external_url');
+const ExternalUrlComponent = require('~/environments/components/environment_external_url');
 
 describe('External URL Component', () => {
   preloadFixtures('static/environments/element.html.raw');
@@ -8,7 +8,7 @@ describe('External URL Component', () => {
 
   it('should link to the provided externalUrl prop', () => {
     const externalURL = 'https://gitlab.com';
-    const component = new window.gl.environmentsList.ExternalUrlComponent({
+    const component = new ExternalUrlComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         externalUrl: externalURL,

spec/javascripts/environments/environment_item_spec.js.es6

 window.timeago = require('vendor/timeago');
-require('~/environments/components/environment_item');
+const EnvironmentItem = require('~/environments/components/environment_item');
 
-fdescribe('Environment item', () => {
+describe('Environment item', () => {
   preloadFixtures('static/environments/table.html.raw');
   beforeEach(() => {
     loadFixtures('static/environments/table.html.raw');
@@ -21,7 +21,7 @@ fdescribe('Environment item', () => {
         },
       };
 
-      component = new window.gl.environmentsList.EnvironmentItem({
+      component = new EnvironmentItem({
         el: document.querySelector('tr#environment-row'),
         propsData: {
           model: mockItem,
@@ -111,7 +111,7 @@ fdescribe('Environment item', () => {
         },
       };
 
-      component = new window.gl.environmentsList.EnvironmentItem({
+      component = new EnvironmentItem({
         el: document.querySelector('tr#environment-row'),
         propsData: {
           model: environment,

spec/javascripts/environments/environment_rollback_spec.js.es6

-require('~/environments/components/environment_rollback');
+const RollbackComponent = require('~/environments/components/environment_rollback');
 
 describe('Rollback Component', () => {
   preloadFixtures('static/environments/element.html.raw');
@@ -10,7 +10,7 @@ describe('Rollback Component', () => {
   });
 
   it('Should link to the provided retryUrl', () => {
-    const component = new window.gl.environmentsList.RollbackComponent({
+    const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
@@ -22,7 +22,7 @@ describe('Rollback Component', () => {
   });
 
   it('Should render Re-deploy label when isLastDeployment is true', () => {
-    const component = new window.gl.environmentsList.RollbackComponent({
+    const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
@@ -34,7 +34,7 @@ describe('Rollback Component', () => {
   });
 
   it('Should render Rollback label when isLastDeployment is false', () => {
-    const component = new window.gl.environmentsList.RollbackComponent({
+    const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,

spec/javascripts/environments/environment_spec.js.es6

-/* global Vue, environment */
-
+const Vue = require('vue');
 require('~/flash');
-require('~/environments/components/environment');
+const EnvironmentsComponent = require('~/environments/components/environment');
 const { environment } = require('./mock_data');
 
 describe('Environment', () => {
@@ -32,7 +31,7 @@ describe('Environment', () => {
       });
 
       it('should render the empty state', (done) => {
-        component = new gl.environmentsList.EnvironmentsComponent({
+        component = new EnvironmentsComponent({
           el: document.querySelector('#environments-list-view'),
         });
 
@@ -72,7 +71,7 @@ describe('Environment', () => {
       });
 
       it('should render a table with environments', (done) => {
-        component = new gl.environmentsList.EnvironmentsComponent({
+        component = new EnvironmentsComponent({
           el: document.querySelector('#environments-list-view'),
         });
 
@@ -104,7 +103,7 @@ describe('Environment', () => {
     });
 
     it('should render empty state', (done) => {
-      component = new gl.environmentsList.EnvironmentsComponent({
+      component = new EnvironmentsComponent({
         el: document.querySelector('#environments-list-view'),
       });
 

spec/javascripts/environments/environment_stop_spec.js.es6

-require('~/environments/components/environment_stop');
+const StopComponent = require('~/environments/components/environment_stop');
 
 describe('Stop Component', () => {
   preloadFixtures('static/environments/element.html.raw');
@@ -10,7 +10,7 @@ describe('Stop Component', () => {
     loadFixtures('static/environments/element.html.raw');
 
     stopURL = '/stop';
-    component = new window.gl.environmentsList.StopComponent({
+    component = new StopComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         stopUrl: stopURL,