Filter environments visibility in store instead of the view in order to not get a infinite update loop in vue.js25507-handle-errors-environment-list

2 files changed, 62 insertions, 42 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index 6e450df3c41..fea642467fa 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -11,41 +11,6 @@
 (() => {
   window.gl = window.gl || {};
 
-  /**
-   * Given the visibility prop provided by the url query parameter and which
-   * changes according to the active tab we need to filter which environments
-   * should be visible.
-   *
-   * The environments array is a recursive tree structure and we need to filter
-   * both root level environments and children environments.
-   *
-   * In order to acomplish that, both `filterState` and `filterEnvironmentsByState`
-   * functions work together.
-   * The first one works as the filter that verifies if the given environment matches
-   * the given state.
-   * The second guarantees both root level and children elements are filtered as well.
-   */
-
-  const filterState = state => environment => environment.state === state && environment;
-  /**
-   * Given the filter function and the array of environments will return only
-   * the environments that match the state provided to the filter function.
-   *
-   * @param {Function} fn
-   * @param {Array} array
-   * @return {Array}
-   */
-  const filterEnvironmentsByState = (fn, arr) => arr.map((item) => {
-    if (item.children) {
-      const filteredChildren = filterEnvironmentsByState(fn, item.children).filter(Boolean);
-      if (filteredChildren.length) {
-        item.children = filteredChildren;
-        return item;
-      }
-    }
-    return fn(item);
-  }).filter(Boolean);
-
   gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
     props: {
       store: {
@@ -82,10 +47,6 @@
     },
 
     computed: {
-      filteredEnvironments() {
-        return filterEnvironmentsByState(filterState(this.visibility), this.state.environments);
-      },
-
       scope() {
         return this.$options.getQueryParameter('scope');
       },
@@ -112,7 +73,7 @@
 
       const scope = this.$options.getQueryParameter('scope');
       if (scope) {
-        this.visibility = scope;
+        this.store.storeVisibility(scope);
       }
 
       this.isLoading = true;
@@ -213,7 +174,7 @@
           </div>
 
           <div class="table-holder"
-            v-if="!isLoading && state.environments.length > 0">
+            v-if="!isLoading && state.filteredEnvironments.length > 0">
             <table class="table ci-table environments">
               <thead>
                 <tr>
@@ -226,7 +187,7 @@
                 </tr>
               </thead>
               <tbody>
-                <template v-for="model in filteredEnvironments"
+                <template v-for="model in state.filteredEnvironments"
                   v-bind:model="model">
 
                   <tr
diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6
index 46e39a15ac9..9b4090100da 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js.es6
+++ b/app/assets/javascripts/environments/stores/environments_store.js.es6
@@ -10,6 +10,8 @@
       this.state.environments = [];
       this.state.stoppedCounter = 0;
       this.state.availableCounter = 0;
+      this.state.visibility = 'available';
+      this.state.filteredEnvironments = [];
 
       return this;
     },
@@ -77,9 +79,66 @@
 
       this.state.environments = environmentsTree;
 
+      this.filterEnvironmentsByVisibility(this.state.environments);
+
       return environmentsTree;
     },
 
+    storeVisibility(visibility) {
+      this.state.visibility = visibility;
+    },
+    /**
+     * Given the visibility prop provided by the url query parameter and which
+     * changes according to the active tab we need to filter which environments
+     * should be visible.
+     *
+     * The environments array is a recursive tree structure and we need to filter
+     * both root level environments and children environments.
+     *
+     * In order to acomplish that, both `filterState` and `filterEnvironmentsByVisibility`
+     * functions work together.
+     * The first one works as the filter that verifies if the given environment matches
+     * the given state.
+     * The second guarantees both root level and children elements are filtered as well.
+     *
+     * Given array of environments will return only
+     * the environments that match the state stored.
+     *
+     * @param {Array} array
+     * @return {Array}
+     */
+    filterEnvironmentsByVisibility(arr) {
+      const filteredEnvironments = arr.map((item) => {
+        if (item.children) {
+          const filteredChildren = this.filterEnvironmentsByVisibility(
+            item.children,
+          ).filter(Boolean);
+
+          if (filteredChildren.length) {
+            item.children = filteredChildren;
+            return item;
+          }
+        }
+
+        return this.filterState(this.state.visibility, item);
+      }).filter(Boolean);
+
+      this.state.filteredEnvironments = filteredEnvironments;
+      return filteredEnvironments;
+    },
+
+    /**
+     * Given the state and the environment,
+     * returns only if the environment state matches the one provided.
+     *
+     * @param  {String} state
+     * @param  {Object} environment
+     * @return {Object}
+     */
+    filterState(state, environment) {
+      return environment.state === state && environment;
+    },
+
     /**
      * Toggles folder open property given the environment type.
      *