Remove store from global namespace, use CSJ instead

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

@@ -7,18 +7,12 @@ window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
 require('../services/environments_service');
 require('./environment_item');
+const Store = require('../stores/environments_store');
 
 (() => {
   window.gl = window.gl || {};
 
   gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
-    props: {
-      store: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-    },
 
     components: {
       'environment-item': gl.environmentsList.EnvironmentItem,
@@ -26,9 +20,11 @@ require('./environment_item');
 
     data() {
       const environmentsData = document.querySelector('#environments-list-view').dataset;
+      const store = new Store();
 
       return {
-        state: this.store.state,
+        store,
+        state: store.state,
         visibility: 'available',
         isLoading: false,
         cssContainerClass: environmentsData.cssClass,

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

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

app/assets/javascripts/environments/stores/environments_store.js.es6

-/* eslint-disable no-param-reassign */
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.EnvironmentsStore = {
-    state: {},
-
-    create() {
+/**
+ * Environments Store.
+ *
+ * Stores received environments, count of stopped environments and count of
+ * available environments.
+ */
+class EnvironmentsStore {
+  constructor() {
+    this.state = {};
     this.state.environments = [];
     this.state.stoppedCounter = 0;
     this.state.availableCounter = 0;
     this.state.filteredEnvironments = [];
 
     return this;
-    },
+  }
 
   /**
    *
@@ -40,7 +40,7 @@
     this.state.environments = filteredEnvironments;
 
     return filteredEnvironments;
-    },
+  }
 
   /**
    * Stores the number of available environments.
@@ -51,7 +51,7 @@
   storeAvailableCount(count = 0) {
     this.state.availableCounter = count;
     return count;
-    },
+  }
 
   /**
    * Stores the number of closed environments.
@@ -62,7 +62,7 @@
   storeStoppedCount(count = 0) {
     this.state.stoppedCounter = count;
     return count;
-    },
+  }
+}
 
-  };
-})();
+module.exports = EnvironmentsStore;

app/assets/javascripts/vue_shared/vue_resource_interceptor.js.es6

@@ -6,7 +6,7 @@ Vue.http.interceptors.push((request, next) => {
   Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
 
   next((response) => {
-    if (typeof response.data === 'string' && response.status !== 500) {
+    if (typeof response.data === 'string') {
       response.data = JSON.parse(response.data);
     }