1 files changed, 26 insertions, 3 deletions
diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 51aab8460f6..0518422e475 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -24,6 +24,7 @@ export default Vue.component('environment-component', {
       state: store.state,
       visibility: 'available',
       isLoading: false,
+      isLoadingFolderContent: false,
       cssContainerClass: environmentsData.cssClass,
       endpoint: environmentsData.environmentsDataEndpoint,
       canCreateDeployment: environmentsData.canCreateDeployment,
@@ -68,15 +69,21 @@ export default Vue.component('environment-component', {
     this.fetchEnvironments();
 
     eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+    eventHub.$on('toggleFolder', this.toggleFolder);
   },
 
   beforeDestroyed() {
     eventHub.$off('refreshEnvironments');
+    eventHub.$off('toggleFolder');
   },
 
   methods: {
-    toggleRow(model) {
-      return this.store.toggleFolder(model.name);
+    toggleFolder(folder, folderUrl) {
+      this.store.toggleFolder(folder);
+
+      if (!folder.isOpen) {
+        this.fetchChildEnvironments(folder, folderUrl);
+      }
     },
 
     /**
@@ -117,6 +124,21 @@ export default Vue.component('environment-component', {
           new Flash('An error occurred while fetching the environments.');
         });
     },
+
+    fetchChildEnvironments(folder, folderUrl) {
+      this.isLoadingFolderContent = true;
+
+      this.service.getFolderContent(folderUrl)
+        .then(resp => resp.json())
+        .then((response) => {
+          this.store.setfolderContent(folder, response.environments);
+          this.isLoadingFolderContent = false;
+        })
+        .catch(() => {
+          this.isLoadingFolderContent = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
   },
 
   template: `
@@ -179,7 +201,8 @@ export default Vue.component('environment-component', {
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
             :can-read-environment="canReadEnvironmentParsed"
-            :service="service"/>
+            :service="service"
+            :is-loading-folder-content="isLoadingFolderContent" />
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"