Integrates pagination component with API

Adds pagination tests

Remove misplaced comment

Fix broken store test

3 files changed, 45 insertions, 20 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index f89dbdbda1d..d5bb9f91e7f 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -59,6 +59,7 @@ module.exports = Vue.component('environment-component', {
     canCreateEnvironmentParsed() {
       return this.$options.convertPermissionToBoolean(this.canCreateEnvironment);
     },
+
   },
 
   /**
@@ -68,6 +69,7 @@ module.exports = Vue.component('environment-component', {
   created() {
     const scope = this.$options.getQueryParameter('scope') || this.visibility;
     const pageNumber = this.$options.getQueryParameter('page') || this.pageNumber;
+
     const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
 
     const service = new EnvironmentsService(endpoint);
@@ -75,14 +77,15 @@ module.exports = Vue.component('environment-component', {
     this.isLoading = true;
 
     return service.all()
-      .then((resp) => {
-        debugger;
-        return resp.json();
-      })
-      .then((json) => {
-        this.store.storeAvailableCount(json.available_count);
-        this.store.storeStoppedCount(json.stopped_count);
-        this.store.storeEnvironments(json.environments);
+      .then(resp => ({
+        headers: resp.headers,
+        body: resp.json(),
+      }))
+      .then((response) => {
+        this.store.storeAvailableCount(response.body.available_count);
+        this.store.storeStoppedCount(response.body.stopped_count);
+        this.store.storeEnvironments(response.body.environments);
+        this.store.storePagination(response.headers);
       })
       .then(() => {
         this.isLoading = false;
@@ -122,8 +125,14 @@ module.exports = Vue.component('environment-component', {
       return this.store.toggleFolder(model.name);
     },
 
-    changePage(pageNumber, scope) {
-      gl.utils.visitUrl(`?scope=${scope}&p=${pageNumber}`);
+    /**
+     * Will change the page number and update the URL.
+     *
+     * @param  {Number} pageNumber desired page to go to.
+     */
+    changePage(pageNumber) {
+      const param = window.location.search.replace(/page=\d/g, `page=${pageNumber}`);
+      gl.utils.visitUrl(param);
     },
   },
 
@@ -131,7 +140,7 @@ module.exports = Vue.component('environment-component', {
     <div :class="cssContainerClass">
       <div class="top-area">
         <ul v-if="!isLoading" class="nav-links">
-          <li v-bind:class="{ 'active': scope === undefined }">
+          <li v-bind:class="{ 'active': scope === undefined || scope === 'available' }">
             <a :href="projectEnvironmentsPath">
               Available
               <span class="badge js-available-environments-count">
@@ -207,11 +216,9 @@ module.exports = Vue.component('environment-component', {
             </tbody>
           </table>
 
-          <table-pagination v-if="!isLoading && state.environments.length"
-            :pagenum="1"
-            :count="2"
+          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
             :change="changePage"
-            :pageInfo="paginationInformation">
+            :pageInfo="state.paginationInformation">
           </table-pagination>
         </div>
       </div>
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index d3ca4cb8dde..1648f06a991 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -355,6 +355,11 @@ module.exports = Vue.component('environment-item', {
         !this.$options.isObjectEmpty(this.model.latest.last_deployment.deployable);
     },
 
+    /**
+     * Verifies the presence of all the keys needed to render the buil_path.
+     *
+     * @return {String}
+     */
     buildPath(){
       return this.model.latest &&
         this.model.latest.last_deployment &&
@@ -363,8 +368,17 @@ module.exports = Vue.component('environment-item', {
         '';
     },
 
+    /**
+     * Verifies the presence of all the keys needed to render the external_url.
+     *
+     * @return {String}
+     */
     externalURL() {
-      return this.model.latest && this.model.latest.external_url || '';
+      if (this.model.latest && this.model.latest.external_url) {
+        return this.model.latest.external_url;
+      }
+
+      return '';
     },
 
     /**
diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6
index e55b8624ac8..252e349962e 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js.es6
+++ b/app/assets/javascripts/environments/stores/environments_store.js.es6
@@ -44,13 +44,17 @@ class EnvironmentsStore {
   }
 
   storePagination(pagination = {}) {
-    const normalizedHeaders = gl.utils.normalizedHeaders(pagination);
-
+    const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
     const paginationInformation = {
-
+      perPage: parseInt(normalizedHeaders['X-PER-PAGE'], 10),
+      page: parseInt(normalizedHeaders['X-PAGE'], 10),
+      total: parseInt(normalizedHeaders['X-TOTAL'], 10),
+      totalPages: parseInt(normalizedHeaders['X-TOTAL-PAGES'], 10),
+      nextPage: parseInt(normalizedHeaders['X-NEXT-PAGE'], 10),
+      previousPage: parseInt(normalizedHeaders['X-PREV-PAGE'], 10),
     };
 
-    this.paginationInformation = paginationInformation;
+    this.state.paginationInformation = paginationInformation;
     return paginationInformation;
   }