Commit dc457ea2 authored by Filipa Lacerda's avatar Filipa Lacerda

Guarantee only one state is shown at a time

parent b3288eec
...@@ -55,7 +55,15 @@ export default Vue.component('pipelines-table', { ...@@ -55,7 +55,15 @@ export default Vue.component('pipelines-table', {
}, },
shouldRenderEmptyState() { shouldRenderEmptyState() {
return !this.state.pipelines.length && !this.isLoading; return !this.state.pipelines.length &&
!this.isLoading &&
!this.hasError;
},
shouldRenderTable() {
return !this.isLoading &&
this.state.pipelines.length > 0 &&
!this.hasError;
}, },
}, },
...@@ -145,8 +153,12 @@ export default Vue.component('pipelines-table', { ...@@ -145,8 +153,12 @@ export default Vue.component('pipelines-table', {
template: ` template: `
<div class="content-list pipelines"> <div class="content-list pipelines">
<div class="realtime-loading" v-if="isLoading"> <div
<i class="fa fa-spinner fa-spin"></i> class="realtime-loading"
v-if="isLoading">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
</div> </div>
<empty-state <empty-state
...@@ -155,8 +167,9 @@ export default Vue.component('pipelines-table', { ...@@ -155,8 +167,9 @@ export default Vue.component('pipelines-table', {
<error-state v-if="shouldRenderErrorState" /> <error-state v-if="shouldRenderErrorState" />
<div class="table-holder" <div
v-if="!isLoading && state.pipelines.length > 0"> class="table-holder"
v-if="shouldRenderTable">
<pipelines-table-component <pipelines-table-component
:pipelines="state.pipelines" :pipelines="state.pipelines"
:service="service" /> :service="service" />
......
...@@ -13,7 +13,7 @@ export default { ...@@ -13,7 +13,7 @@ export default {
</script> </script>
<template> <template>
<div class="row empty-state"> <div class="row empty-state js-empty-state">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="svg-content" v-html="pipelinesEmptyStateSVG" /> <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
</div> </div>
......
...@@ -36,6 +36,7 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -36,6 +36,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => { setTimeout(() => {
expect(this.component.$el.querySelector('.empty-state')).toBeDefined(); expect(this.component.$el.querySelector('.empty-state')).toBeDefined();
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
done(); done();
}, 1); }, 1);
}); });
...@@ -67,6 +68,8 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -67,6 +68,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => { setTimeout(() => {
expect(this.component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1); expect(this.component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.empty-state')).toBe(null);
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
done(); done();
}, 0); }, 0);
}); });
...@@ -95,10 +98,12 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -95,10 +98,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
this.component.$destroy(); this.component.$destroy();
}); });
it('should render empty state', function (done) { it('should render error state', function (done) {
setTimeout(() => { setTimeout(() => {
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined(); expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.js-empty-state')).toBe(null);
expect(this.component.$el.querySelector('table')).toBe(null);
done(); done();
}, 0); }, 0);
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment