Handles realtime with 2 states for environments table

app/assets/javascripts/environments/components/environment.vue

@@ -32,7 +32,6 @@ export default {
       state: store.state,
       visibility: 'available',
       isLoading: false,
-      isLoadingFolderContent: false,
       cssContainerClass: environmentsData.cssClass,
       endpoint: environmentsData.environmentsDataEndpoint,
       canCreateDeployment: environmentsData.canCreateDeployment,
@@ -86,9 +85,6 @@ export default {
       errorCallback: this.errorCallback,
       notificationCallback: (isMakingRequest) => {
         this.isMakingRequest = isMakingRequest;
-
-        // We need to verify if any folder is open to also fecth it
-        this.openFolders = this.store.getOpenFolders();
       },
     });
 
@@ -119,7 +115,7 @@ export default {
       this.store.toggleFolder(folder);
 
       if (!folder.isOpen) {
-        this.fetchChildEnvironments(folder, folderUrl);
+        this.fetchChildEnvironments(folder, folderUrl, true);
       }
     },
 
@@ -147,19 +143,17 @@ export default {
         .catch(this.errorCallback);
     },
 
-    fetchChildEnvironments(folder, folderUrl) {
-      this.isLoadingFolderContent = true;
+    fetchChildEnvironments(folder, folderUrl, showLoader = false) {
+      this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader);
 
       this.service.getFolderContent(folderUrl)
         .then(resp => resp.json())
-        .then((response) => {
-          this.store.setfolderContent(folder, response.environments);
-          this.isLoadingFolderContent = false;
-        })
+        .then(response => this.store.setfolderContent(folder, response.environments))
+        .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
         .catch(() => {
-          this.isLoadingFolderContent = false;
           // eslint-disable-next-line no-new
           new Flash('An error occurred while fetching the environments.');
+          this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false);
         });
     },
 
@@ -176,13 +170,13 @@ export default {
     successCallback(resp) {
       this.saveData(resp);
 
-      // If folders are open while polling we need to open them again
-      if (this.openFolders.length) {
-        this.openFolders.map((folder) => {
+      // We need to verify if any folder is open to also update it
+      const openFolders = this.store.getOpenFolders();
+      if (openFolders.length) {
+        openFolders.forEach((folder) => {
           // TODO - Move this to the backend
           const folderUrl = `${window.location.pathname}/folders/${folder.folderName}`;
 
-          this.store.updateFolder(folder, 'isOpen', true);
           return this.fetchChildEnvironments(folder, folderUrl);
         });
       }
@@ -267,7 +261,7 @@ export default {
           :environments="state.environments"
           :can-create-deployment="canCreateDeploymentParsed"
           :can-read-environment="canReadEnvironmentParsed"
-          :is-loading-folder-content="isLoadingFolderContent" />
+          />
       </div>
 
       <table-pagination

app/assets/javascripts/environments/components/environments_table.vue

@@ -29,12 +29,6 @@ export default {
       required: false,
       default: false,
     },
-
-    isLoadingFolderContent: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
 
   methods: {
@@ -74,7 +68,7 @@ export default {
         />
 
       <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
-        <div v-if="isLoadingFolderContent">
+        <div v-if="model.isLoadingFolderContent">
           <loading-icon size="2" />
         </div>
 

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

@@ -35,14 +35,18 @@ export default class EnvironmentsStore {
    */
   storeEnvironments(environments = []) {
     const filteredEnvironments = environments.map((env) => {
+      const oldEnvironmentState = this.state.environments
+        .find(element => element.id === env.latest.id) || {};
+
       let filtered = {};
 
       if (env.size > 1) {
         filtered = Object.assign({}, env, {
           isFolder: true,
+          isLoadingFolderContent: oldEnvironmentState.isLoading || false,
           folderName: env.name,
-          isOpen: false,
-          children: [],
+          isOpen: oldEnvironmentState.isOpen || false,
+          children: oldEnvironmentState.children || [],
         });
       }
 
@@ -98,7 +102,7 @@ export default class EnvironmentsStore {
     * @return {Array}
     */
   toggleFolder(folder) {
-    return this.updateFolder(folder, 'isOpen', !folder.isOpen);
+    return this.updateEnvironmentProp(folder, 'isOpen', !folder.isOpen);
   }
 
   /**
@@ -125,23 +129,23 @@ export default class EnvironmentsStore {
       return updated;
     });
 
-    return this.updateFolder(folder, 'children', updatedEnvironments);
+    return this.updateEnvironmentProp(folder, 'children', updatedEnvironments);
   }
 
   /**
-   * Given a folder a prop and a new value updates the correct folder.
+   * Given a environment,  a prop and a new value updates the correct environment.
    *
-   * @param  {Object} folder
+   * @param  {Object} environment
    * @param  {String} prop
    * @param  {String|Boolean|Object|Array} newValue
    * @return {Array}
    */
-  updateFolder(folder, prop, newValue) {
+  updateEnvironmentProp(environment, prop, newValue) {
     const environments = this.state.environments;
 
     const updatedEnvironments = environments.map((env) => {
       const updateEnv = Object.assign({}, env);
-      if (env.isFolder && env.id === folder.id) {
+      if (env.id === environment.id) {
         updateEnv[prop] = newValue;
       }
 
@@ -149,8 +153,6 @@ export default class EnvironmentsStore {
     });
 
     this.state.environments = updatedEnvironments;
-
-    return updatedEnvironments;
   }
 
   getOpenFolders() {

spec/javascripts/environments/environments_store_spec.js

@@ -86,6 +86,16 @@ describe('Store', () => {
       store.toggleFolder(store.state.environments[1]);
       expect(store.state.environments[1].isOpen).toEqual(false);
     });
+
+    it('should keep folder open when environments are updated', () => {
+      store.storeEnvironments(serverData);
+
+      store.toggleFolder(store.state.environments[1]);
+      expect(store.state.environments[1].isOpen).toEqual(true);
+
+      store.storeEnvironments(serverData);
+      expect(store.state.environments[1].isOpen).toEqual(true);
+    });
   });
 
   describe('setfolderContent', () => {
@@ -97,6 +107,17 @@ describe('Store', () => {
       expect(store.state.environments[1].children.length).toEqual(serverData.length);
       expect(store.state.environments[1].children[0].isChildren).toEqual(true);
     });
+
+    it('should keep folder content when environments are updated', () => {
+      store.storeEnvironments(serverData);
+
+      store.setfolderContent(store.state.environments[1], serverData);
+
+      expect(store.state.environments[1].children.length).toEqual(serverData.length);
+      // poll
+      store.storeEnvironments(serverData);
+      expect(store.state.environments[1].children.length).toEqual(serverData.length);
+    });
   });
 
   describe('store pagination', () => {