diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-09 15:10:16 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-12 13:59:27 +0000 |
commit | 595afed2e3de93d1685b2f77dd8e72df2781a57b (patch) | |
tree | a88d7a3f7835c81e5134c577476ba363bf6c7634 | |
parent | fb35980893f918f7dbad0f433447c6df13a1c757 (diff) | |
download | gitlab-ce-595afed2e3de93d1685b2f77dd8e72df2781a57b.tar.gz |
Integrates pagination component with API
Adds pagination tests
Remove misplaced comment
Fix broken store test
7 files changed, 100 insertions, 34 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; } diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index e47dc6935d6..9e816a285e4 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -36,6 +36,7 @@ require('../vue_shared/components/pipelines_table'); }, methods: { change(pagenum, apiScope) { + if (!apiScope) apiScope = 'all'; gl.utils.visitUrl(`?scope=${apiScope}&p=${pagenum}`); }, }, diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 b/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 index 67c6cb73761..d8042a9b7fc 100644 --- a/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 +++ b/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 @@ -57,9 +57,7 @@ window.Vue = require('vue'); }, methods: { changePage(e) { - let apiScope = gl.utils.getParameterByName('scope'); - - if (!apiScope) apiScope = 'all'; + const apiScope = gl.utils.getParameterByName('scope'); const text = e.target.innerText; const { totalPages, nextPage, previousPage } = this.pageInfo; diff --git a/spec/javascripts/environments/environment_spec.js.es6 b/spec/javascripts/environments/environment_spec.js.es6 index 1d1a688a4a5..f557dcee91f 100644 --- a/spec/javascripts/environments/environment_spec.js.es6 +++ b/spec/javascripts/environments/environment_spec.js.es6 @@ -49,7 +49,7 @@ describe('Environment', () => { }); }); - describe('with environments', () => { + describe('with paginated environments', () => { const environmentsResponseInterceptor = (request, next) => { next(request.respondWith(JSON.stringify({ environments: [environment], @@ -57,11 +57,22 @@ describe('Environment', () => { available_count: 0, }), { 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(() => { @@ -71,10 +82,6 @@ describe('Environment', () => { }); it('should render a table with environments', (done) => { - component = new EnvironmentsComponent({ - el: document.querySelector('#environments-list-view'), - }); - setTimeout(() => { expect( component.$el.querySelectorAll('table tbody tr').length, @@ -82,6 +89,17 @@ describe('Environment', () => { done(); }, 0); }); + + describe('pagination', () => { + it('should render pagination', (done) => { + setTimeout(() => { + expect( + component.$el.querySelectorAll('.gl-pagination li').length, + ).toEqual(5); + done(); + }, 0); + }); + }); }); }); diff --git a/spec/javascripts/environments/environments_store_spec.js.es6 b/spec/javascripts/environments/environments_store_spec.js.es6 index 861136c621f..8fd660c3edb 100644 --- a/spec/javascripts/environments/environments_store_spec.js.es6 +++ b/spec/javascripts/environments/environments_store_spec.js.es6 @@ -10,24 +10,48 @@ const { environmentsList } = require('./mock_data'); }); it('should start with a blank state', () => { - expect(store.state.environments.length).toBe(0); - expect(store.state.stoppedCounter).toBe(0); - expect(store.state.availableCounter).toBe(0); + 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(environmentsList); - expect(store.state.environments.length).toBe(environmentsList.length); + expect(store.state.environments.length).toEqual(environmentsList.length); }); it('should store available count', () => { store.storeAvailableCount(2); - expect(store.state.availableCounter).toBe(2); + expect(store.state.availableCounter).toEqual(2); }); it('should store stopped count', () => { store.storeStoppedCount(2); - expect(store.state.stoppedCounter).toBe(2); + expect(store.state.stoppedCounter).toEqual(2); + }); + + it('should store pagination information', () => { + const pagination = { + 'X-nExt-pAge': '2', + 'X-page': '1', + 'X-Per-Page': '1', + 'X-Prev-Page': '2', + 'X-TOTAL': '37', + 'X-Total-Pages': '2', + }; + + const expectedResult = { + perPage: 1, + page: 1, + total: 37, + totalPages: 2, + nextPage: 2, + previousPage: 2, + }; + + store.storePagination(pagination); + expect(store.state.paginationInformation).toEqual(expectedResult); }); }); })(); |