Merge branch '31189-pipelines-error-state' into 'master'

Guarantee only one state is shown at a time

Closes #31189

See merge request !10835

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -55,7 +55,15 @@ export default Vue.component('pipelines-table', {
     },
 
     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', {
 
   template: `
     <div class="content-list pipelines">
-      <div class="realtime-loading" v-if="isLoading">
-        <i class="fa fa-spinner fa-spin"></i>
+      <div
+        class="realtime-loading"
+        v-if="isLoading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
       </div>
 
       <empty-state
@@ -155,8 +167,9 @@ export default Vue.component('pipelines-table', {
 
       <error-state v-if="shouldRenderErrorState" />
 
-      <div class="table-holder"
-        v-if="!isLoading && state.pipelines.length > 0">
+      <div
+        class="table-holder"
+        v-if="shouldRenderTable">
         <pipelines-table-component
           :pipelines="state.pipelines"
           :service="service" />

app/assets/javascripts/pipelines/components/empty_state.vue

@@ -13,7 +13,7 @@ export default {
 </script>
 
 <template>
-  <div class="row empty-state">
+  <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
       <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
     </div>

spec/javascripts/commit/pipelines/pipelines_spec.js

@@ -36,6 +36,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
         setTimeout(() => {
           expect(this.component.$el.querySelector('.empty-state')).toBeDefined();
           expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
+          expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
           done();
         }, 1);
       });
@@ -67,6 +68,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
         setTimeout(() => {
           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('.empty-state')).toBe(null);
+          expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
           done();
         }, 0);
       });
@@ -95,10 +98,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
       this.component.$destroy();
     });
 
-    it('should render empty state', function (done) {
+    it('should render error state', function (done) {
       setTimeout(() => {
         expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
         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();
       }, 0);
     });