Merge branch '28732-expandable-folders' into 'master'

Resolve "Expandable folders for environments"

Closes #28732

See merge request !10290

3 files changed, 203 insertions, 22 deletions

diff --git a/spec/javascripts/environments/environment_spec.js b/spec/javascripts/environments/environment_spec.js
index 9bcf617fcd8..4431baa4b96 100644
--- a/spec/javascripts/environments/environment_spec.js
+++ b/spec/javascripts/environments/environment_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import '~/flash';
 import EnvironmentsComponent from '~/environments/components/environment';
-import { environment } from './mock_data';
+import { environment, folder } from './mock_data';
 
 describe('Environment', () => {
   preloadFixtures('static/environments/environments.html.raw');
@@ -179,4 +179,101 @@ describe('Environment', () => {
       }, 0);
     });
   });
+
+  describe('expandable folders', () => {
+    const environmentsResponseInterceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify({
+        environments: [folder],
+        stopped_count: 0,
+        available_count: 1,
+      }), {
+        status: 200,
+        headers: {
+          'X-nExt-pAge': '2',
+          'x-page': '1',
+          'X-Per-Page': '1',
+          'X-Prev-Page': '',
+          'X-TOTAL': '37',
+          'X-Total-Pages': '2',
+        },
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(environmentsResponseInterceptor);
+      component = new EnvironmentsComponent({
+        el: document.querySelector('#environments-list-view'),
+      });
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, environmentsResponseInterceptor,
+      );
+    });
+
+    it('should open a closed folder', (done) => {
+      setTimeout(() => {
+        component.$el.querySelector('.folder-name').click();
+
+        Vue.nextTick(() => {
+          expect(
+            component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
+          ).toContain('display: none');
+          expect(
+            component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
+          ).not.toContain('display: none');
+          done();
+        });
+      });
+    });
+
+    it('should close an opened folder', (done) => {
+      setTimeout(() => {
+        // open folder
+        component.$el.querySelector('.folder-name').click();
+
+        Vue.nextTick(() => {
+          // close folder
+          component.$el.querySelector('.folder-name').click();
+
+          Vue.nextTick(() => {
+            expect(
+              component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
+            ).toContain('display: none');
+            expect(
+              component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
+            ).not.toContain('display: none');
+            done();
+          });
+        });
+      });
+    });
+
+    it('should show children environments and a button to show all environments', (done) => {
+      setTimeout(() => {
+        // open folder
+        component.$el.querySelector('.folder-name').click();
+
+        Vue.nextTick(() => {
+          const folderInterceptor = (request, next) => {
+            next(request.respondWith(JSON.stringify({
+              environments: [environment],
+            }), { status: 200 }));
+          };
+
+          Vue.http.interceptors.push(folderInterceptor);
+
+          // wait for next async request
+          setTimeout(() => {
+            expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1);
+            expect(component.$el.querySelector('td.text-center > a.btn').textContent).toContain('Show all');
+
+            Vue.http.interceptors = _.without(Vue.http.interceptors, folderInterceptor);
+            done();
+          });
+        });
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/environments/environments_store_spec.js b/spec/javascripts/environments/environments_store_spec.js
index 115d84b50f5..f617c4bdffe 100644
--- a/spec/javascripts/environments/environments_store_spec.js
+++ b/spec/javascripts/environments/environments_store_spec.js
@@ -1,38 +1,106 @@
 import Store from '~/environments/stores/environments_store';
 import { environmentsList, serverData } from './mock_data';
 
-(() => {
-  describe('Store', () => {
-    let store;
+describe('Store', () => {
+  let store;
 
-    beforeEach(() => {
-      store = new Store();
-    });
+  beforeEach(() => {
+    store = new Store();
+  });
 
-    it('should start with a blank state', () => {
-      expect(store.state.environments.length).toEqual(0);
-      expect(store.state.stoppedCounter).toEqual(0);
-      expect(store.state.availableCounter).toEqual(0);
-      expect(store.state.paginationInformation).toEqual({});
-    });
+  it('should start with a blank state', () => {
+    expect(store.state.environments.length).toEqual(0);
+    expect(store.state.stoppedCounter).toEqual(0);
+    expect(store.state.availableCounter).toEqual(0);
+    expect(store.state.paginationInformation).toEqual({});
+  });
 
+  it('should store environments', () => {
+    store.storeEnvironments(serverData);
+    expect(store.state.environments.length).toEqual(serverData.length);
+    expect(store.state.environments[0]).toEqual(environmentsList[0]);
+  });
+
+  it('should store available count', () => {
+    store.storeAvailableCount(2);
+    expect(store.state.availableCounter).toEqual(2);
+  });
+
+  it('should store stopped count', () => {
+    store.storeStoppedCount(2);
+    expect(store.state.stoppedCounter).toEqual(2);
+  });
+
+  describe('store environments', () => {
     it('should store environments', () => {
       store.storeEnvironments(serverData);
       expect(store.state.environments.length).toEqual(serverData.length);
-      expect(store.state.environments[0]).toEqual(environmentsList[0]);
     });
 
-    it('should store available count', () => {
-      store.storeAvailableCount(2);
-      expect(store.state.availableCounter).toEqual(2);
+    it('should add folder keys when environment is a folder', () => {
+      const environment = {
+        name: 'bar',
+        size: 3,
+        id: 2,
+      };
+
+      store.storeEnvironments([environment]);
+      expect(store.state.environments[0].isFolder).toEqual(true);
+      expect(store.state.environments[0].folderName).toEqual('bar');
+    });
+
+    it('should extract content of `latest` key when provided', () => {
+      const environment = {
+        name: 'bar',
+        size: 3,
+        id: 2,
+        latest: {
+          last_deployment: {},
+          isStoppable: true,
+        },
+      };
+
+      store.storeEnvironments([environment]);
+      expect(store.state.environments[0].last_deployment).toEqual({});
+      expect(store.state.environments[0].isStoppable).toEqual(true);
     });
 
-    it('should store stopped count', () => {
-      store.storeStoppedCount(2);
-      expect(store.state.stoppedCounter).toEqual(2);
+    it('should store latest.name when the environment is not a folder', () => {
+      store.storeEnvironments(serverData);
+      expect(store.state.environments[0].name).toEqual(serverData[0].latest.name);
     });
 
-    it('should store pagination information', () => {
+    it('should store root level name when environment is a folder', () => {
+      store.storeEnvironments(serverData);
+      expect(store.state.environments[1].folderName).toEqual(serverData[1].name);
+    });
+  });
+
+  describe('toggleFolder', () => {
+    it('should toggle folder', () => {
+      store.storeEnvironments(serverData);
+
+      store.toggleFolder(store.state.environments[1]);
+      expect(store.state.environments[1].isOpen).toEqual(true);
+
+      store.toggleFolder(store.state.environments[1]);
+      expect(store.state.environments[1].isOpen).toEqual(false);
+    });
+  });
+
+  describe('setfolderContent', () => {
+    it('should store folder content', () => {
+      store.storeEnvironments(serverData);
+
+      store.setfolderContent(store.state.environments[1], serverData);
+
+      expect(store.state.environments[1].children.length).toEqual(serverData.length);
+      expect(store.state.environments[1].children[0].isChildren).toEqual(true);
+    });
+  });
+
+  describe('store pagination', () => {
+    it('should store normalized and integer pagination information', () => {
       const pagination = {
         'X-nExt-pAge': '2',
         'X-page': '1',
@@ -55,4 +123,4 @@ import { environmentsList, serverData } from './mock_data';
       expect(store.state.paginationInformation).toEqual(expectedResult);
     });
   });
-})();
+});
diff --git a/spec/javascripts/environments/mock_data.js b/spec/javascripts/environments/mock_data.js
index 30861481cc5..15e11aa686b 100644
--- a/spec/javascripts/environments/mock_data.js
+++ b/spec/javascripts/environments/mock_data.js
@@ -84,3 +84,19 @@ export const environment = {
     updated_at: '2017-01-31T10:53:46.894Z',
   },
 };
+
+export const folder = {
+  folderName: 'build',
+  size: 5,
+  id: 12,
+  name: 'build/update-README',
+  state: 'available',
+  external_url: null,
+  environment_type: 'build',
+  last_deployment: null,
+  'stop_action?': false,
+  environment_path: '/root/review-app/environments/12',
+  stop_path: '/root/review-app/environments/12/stop',
+  created_at: '2017-02-01T19:42:18.400Z',
+  updated_at: '2017-02-01T19:42:18.400Z',
+};