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

@@ -1,5 +1,4 @@
 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

@@ -1,68 +1,68 @@
-/* eslint-disable no-param-reassign */
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
+/**
+ * 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 = [];
 
-  gl.environmentsList.EnvironmentsStore = {
-    state: {},
+    return this;
+  }
 
-    create() {
-      this.state.environments = [];
-      this.state.stoppedCounter = 0;
-      this.state.availableCounter = 0;
-      this.state.filteredEnvironments = [];
+  /**
+   *
+   * Stores the received environments.
+   *
+   * Each environment has the following schema
+   * { name: String, size: Number, latest: Object }
+   *
+   * If the `size` is bigger than 1, it means it should be rendered as a folder.
+   * In those cases we add `isFolder` key in order to render it properly.
+   *
+   * @param  {Array} environments
+   * @returns {Array}
+   */
+  storeEnvironments(environments = []) {
+    const filteredEnvironments = environments.map((env) => {
+      if (env.size > 1) {
+        return Object.assign({}, env, { isFolder: true });
+      }
 
-      return this;
-    },
+      return env;
+    });
 
-    /**
-     *
-     * Stores the received environments.
-     *
-     * Each environment has the following schema
-     * { name: String, size: Number, latest: Object }
-     *
-     * If the `size` is bigger than 1, it means it should be rendered as a folder.
-     * In those cases we add `isFolder` key in order to render it properly.
-     *
-     * @param  {Array} environments
-     * @returns {Array}
-     */
-    storeEnvironments(environments = []) {
-      const filteredEnvironments = environments.map((env) => {
-        if (env.size > 1) {
-          return Object.assign({}, env, { isFolder: true });
-        }
+    this.state.environments = filteredEnvironments;
 
-        return env;
-      });
+    return filteredEnvironments;
+  }
 
-      this.state.environments = filteredEnvironments;
+  /**
+   * Stores the number of available environments.
+   *
+   * @param  {Number} count = 0
+   * @return {Number}
+   */
+  storeAvailableCount(count = 0) {
+    this.state.availableCounter = count;
+    return count;
+  }
 
-      return filteredEnvironments;
-    },
+  /**
+   * Stores the number of closed environments.
+   *
+   * @param  {Number} count = 0
+   * @return {Number}
+   */
+  storeStoppedCount(count = 0) {
+    this.state.stoppedCounter = count;
+    return count;
+  }
+}
 
-    /**
-     * Stores the number of available environments.
-     *
-     * @param  {Number} count = 0
-     * @return {Number}
-     */
-    storeAvailableCount(count = 0) {
-      this.state.availableCounter = count;
-      return count;
-    },
-
-    /**
-     * Stores the number of closed environments.
-     *
-     * @param  {Number} count = 0
-     * @return {Number}
-     */
-    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);
     }