Use CJS in all environments components

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

-/* global Vue */
-
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
-    props: {
-      actions: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-
-      playIconSvg: {
-        type: String,
-        required: false,
-      },
+const Vue = require('vue');
+
+module.exports = Vue.component('actions-component', {
+  props: {
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
 
-    template: `
-      <div class="inline">
-        <div class="dropdown">
-          <a class="dropdown-new btn btn-default" data-toggle="dropdown">
-            <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
-            <i class="fa fa-caret-down"></i>
-          </a>
-
-          <ul class="dropdown-menu dropdown-menu-align-right">
-            <li v-for="action in actions">
-              <a :href="action.play_path"
-                data-method="post"
-                rel="nofollow"
-                class="js-manual-action-link">
-
-                <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
-
-                <span>
-                  {{action.name}}
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
+    playIconSvg: {
+      type: String,
+      required: false,
+    },
+  },
+
+  template: `
+    <div class="inline">
+      <div class="dropdown">
+        <a class="dropdown-new btn btn-default" data-toggle="dropdown">
+          <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
+          <i class="fa fa-caret-down"></i>
+        </a>
+
+        <ul class="dropdown-menu dropdown-menu-align-right">
+          <li v-for="action in actions">
+            <a :href="action.play_path"
+              data-method="post"
+              rel="nofollow"
+              class="js-manual-action-link">
+
+              <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
+
+              <span>
+                {{action.name}}
+              </span>
+            </a>
+          </li>
+        </ul>
       </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', {
-    props: {
-      externalUrl: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('external-url-component', {
+  props: {
+    externalUrl: {
+      type: String,
+      default: '',
     },
+  },
 
-    template: `
-      <a class="btn external_url" :href="externalUrl" target="_blank">
-        <i class="fa fa-external-link"></i>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn external_url" :href="externalUrl" target="_blank">
+      <i class="fa fa-external-link"></i>
+    </a>
+  `,
+});

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', {
-    props: {
-      retryUrl: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('rollback-component', {
+  props: {
+    retryUrl: {
+      type: String,
+      default: '',
+    },
 
-      isLastDeployment: {
-        type: Boolean,
-        default: true,
-      },
+    isLastDeployment: {
+      type: Boolean,
+      default: true,
     },
+  },
 
-    template: `
-      <a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
-        <span v-if="isLastDeployment">
-          Re-deploy
-        </span>
-        <span v-else>
-          Rollback
-        </span>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
+      <span v-if="isLastDeployment">
+        Re-deploy
+      </span>
+      <span v-else>
+        Rollback
+      </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', {
-    props: {
-      stopUrl: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('stop-component', {
+  props: {
+    stopUrl: {
+      type: String,
+      default: '',
     },
+  },
 
-    template: `
-      <a class="btn stop-env-link"
-        :href="stopUrl"
-        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>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn stop-env-link"
+      :href="stopUrl"
+      data-confirm="Are you sure you want to stop this environment?"
+      data-method="post"
+      rel="nofollow">
+      <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', {
-    props: {
-      terminalPath: {
-        type: String,
-        default: '',
-      },
-      terminalIconSvg: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('terminal-button-component', {
+  props: {
+    terminalPath: {
+      type: String,
+      default: '',
+    },
+    terminalIconSvg: {
+      type: String,
+      default: '',
     },
+  },
 
-    template: `
-      <a class="btn terminal-button"
-        :href="terminalPath">
-        <span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn terminal-button"
+      :href="terminalPath">
+      <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,