Adds show all button

3 files changed, 54 insertions, 16 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 57599876f5a..9760b30f30c 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -78,11 +78,11 @@ export default Vue.component('environment-component', {
   },
 
   methods: {
-    toggleFolder(folder) {
+    toggleFolder(folder, folderUrl) {
       this.store.toggleFolder(folder);
 
       if (!folder.isOpen) {
-        this.fetchChildEnvironments(folder);
+        this.fetchChildEnvironments(folder, folderUrl);
       }
     },
 
@@ -125,14 +125,13 @@ export default Vue.component('environment-component', {
         });
     },
 
-    fetchChildEnvironments(folder) {
+    fetchChildEnvironments(folder, folderUrl) {
       this.isLoadingFolderContent = true;
 
-      this.service.getFolderContent(folder.folderName)
+      this.service.getFolderContent(folderUrl)
         .then(resp => resp.json())
         .then((response) => {
-          console.log(response);
-          this.store.folderContent(folder, response.environments);
+          this.store.setfolderContent(folder, response.environments);
         })
         .then(() => {
           this.isLoadingFolderContent = false;
@@ -204,7 +203,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"
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index 8cfaeb69233..3fe1042557e 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -392,6 +392,15 @@ export default {
 
       return '';
     },
+
+    /**
+     * Constructs folder URL based on the current location and the folder id.
+     *
+     * @return {String}
+     */
+    folderUrl() {
+      return `${window.location.pathname}/folders/${this.model.folderName}`;
+    },
   },
 
   /**
@@ -411,12 +420,12 @@ export default {
 
   methods: {
     onClickFolder() {
-      eventHub.$emit('toggleFolder', this.model);
+      eventHub.$emit('toggleFolder', this.model, this.folderUrl);
     },
   },
 
   template: `
-    <tr>
+    <tr :class="{ 'child-row': model.isChildren }">
       <td>
         <a v-if="!model.isFolder"
           class="environment-name"
diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js
index d59cb6500a2..5a1f28d0bdf 100644
--- a/app/assets/javascripts/environments/components/environments_table.js
+++ b/app/assets/javascripts/environments/components/environments_table.js
@@ -31,6 +31,18 @@ export default {
       type: Object,
       required: true,
     },
+
+    isLoadingFolderContent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    folderUrl(model) {
+      return `${window.location.pathname}/folders/${model.folderName}`;
+    },
   },
 
   template: `
@@ -54,13 +66,30 @@ export default {
             :can-read-environment="canReadEnvironment"
             :service="service"></tr>
 
-          <tr v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"
-            is="environment-item"
-            v-for="children in model.children"
-            :model="children"
-            :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"
-            :service="service"></tr>
+          <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
+            <tr v-if="isLoadingFolderContent">
+              <td colspan="6" class="text-center">
+                <i class="fa fa-spin fa-spinner" aria-hidden="true"/>
+              </td>
+            </tr>
+
+            <tr v-if="!isLoadingFolderContent"
+              is="environment-item"
+              v-for="children in model.children"
+              :model="children"
+              :can-create-deployment="canCreateDeployment"
+              :can-read-environment="canReadEnvironment"
+              :service="service"></tr>
+
+            <tr v-if="!isLoadingFolderContent">
+              <td colspan="6" class="text-center">
+                <a :href="folderUrl(model)" class="btn btn-default">
+                  Show all
+                </a>
+              </td>
+            </tr>
+          </template>
+
         </template>
       </tbody>
     </table>