Filter environments visibility in store instead of the view in order to not get a infinite update loop in vue.js

1 files changed, 59 insertions, 0 deletions

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.
      *