From cfe2e6b7a3fdc85637191b0c0a42ac28a6b667aa Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 21 Mar 2017 16:09:09 +0000
Subject: [PATCH] Fix loading being shown at the same time at the empty states
---
.../commit/pipelines/pipelines_table.js | 7 ++----
.../vue_pipelines_index/pipelines.js | 22 +++++++++----------
.../commit/pipelines/pipelines_spec.js | 3 +++
.../vue_pipelines_index/pipelines_spec.js | 3 +++
4 files changed, 19 insertions(+), 16 deletions(-)
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index f2c2524908d..7cc82b50d43 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -1,5 +1,3 @@
-/* eslint-disable no-new*/
-/* global Flash */
import Vue from 'vue';
import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
@@ -50,11 +48,11 @@ export default Vue.component('pipelines-table', {
computed: {
shouldRenderErrorState() {
- return this.hasError && !this.pageRequest;
+ return this.hasError && !this.isLoading;
},
shouldRenderEmptyState() {
- return !this.state.pipelines.length && !this.pageRequest;
+ return !this.state.pipelines.length && !this.isLoading;
},
},
@@ -98,7 +96,6 @@ export default Vue.component('pipelines-table', {
.catch(() => {
this.hasError = true;
this.isLoading = false;
- new Flash('An error occurred while fetching the pipelines, please reload the page again.');
});
},
},
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 796fd5b581e..b6721600415 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -45,7 +45,7 @@ export default {
state: this.store.state,
apiScope: 'all',
pagenum: 1,
- pageRequest: false,
+ isLoading: false,
hasError: false,
};
},
@@ -61,7 +61,7 @@ export default {
},
shouldRenderErrorState() {
- return this.hasError && !this.pageRequest;
+ return this.hasError && !this.isLoading;
},
/**
@@ -71,7 +71,7 @@ export default {
* @return {Boolean}
*/
shouldRenderEmptyState() {
- return !this.pageRequest &&
+ return !this.isLoading &&
!this.hasError &&
!this.state.pipelines.length &&
(this.scope === 'all' || this.scope === null);
@@ -83,7 +83,7 @@ export default {
* @return {Boolean}
*/
shouldRenderNoPipelinesMessage() {
- return !this.pageRequest &&
+ return !this.isLoading &&
!this.hasError &&
!this.state.pipelines.length &&
this.scope !== 'all' &&
@@ -92,7 +92,7 @@ export default {
shouldRenderTable() {
return !this.hasError &&
- !this.pageRequest && this.state.pipelines.length;
+ !this.isLoading && this.state.pipelines.length;
},
/**
@@ -101,7 +101,7 @@ export default {
* @return {Boolean}
*/
shouldRenderPagination() {
- return !this.pageRequest &&
+ return !this.isLoading &&
this.state.pipelines.length &&
this.state.pageInfo.total > this.state.pageInfo.perPage;
},
@@ -157,7 +157,7 @@ export default {
const pageNumber = gl.utils.getParameterByName('page') || this.pagenum;
const scope = gl.utils.getParameterByName('scope') || this.apiScope;
- this.pageRequest = true;
+ this.isLoading = true;
return this.service.getPipelines(scope, pageNumber)
.then(resp => ({
headers: resp.headers,
@@ -169,11 +169,11 @@ export default {
this.store.storePagination(response.headers);
})
.then(() => {
- this.pageRequest = false;
+ this.isLoading = false;
})
.catch(() => {
this.hasError = true;
- this.pageRequest = false;
+ this.isLoading = false;
});
},
},
@@ -183,7 +183,7 @@ export default {
<div
class="top-area"
- v-if="!pageRequest && !shouldRenderEmptyState">
+ v-if="!isLoading && !shouldRenderEmptyState">
<navigation-tabs
:scope="scope"
:count="state.count"
@@ -201,7 +201,7 @@ export default {
<div
class="realtime-loading"
- v-if="pageRequest">
+ v-if="isLoading">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index 65093e53332..bc2e092db65 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -34,6 +34,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => {
expect(component.$el.querySelector('.empty-state')).toBeDefined();
+ expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
}, 1);
});
@@ -63,6 +64,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => {
expect(component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
+ expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
}, 0);
});
@@ -93,6 +95,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => {
expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
+ expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
}, 0);
});
diff --git a/spec/javascripts/vue_pipelines_index/pipelines_spec.js b/spec/javascripts/vue_pipelines_index/pipelines_spec.js
index b57761e3b12..725f6cb2d7a 100644
--- a/spec/javascripts/vue_pipelines_index/pipelines_spec.js
+++ b/spec/javascripts/vue_pipelines_index/pipelines_spec.js
@@ -41,6 +41,7 @@ describe('Pipelines', () => {
setTimeout(() => {
expect(component.$el.querySelector('.table-holder')).toBeDefined();
+ expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
});
});
@@ -72,6 +73,7 @@ describe('Pipelines', () => {
setTimeout(() => {
expect(component.$el.querySelector('.empty-state')).toBeDefined();
+ expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
});
});
@@ -104,6 +106,7 @@ describe('Pipelines', () => {
setTimeout(() => {
expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
+ expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
});
});
--
GitLab