Merge branch '27574-pipelines-empty-state' into 'master'

Pipelines empty state

Closes #27574

See merge request !9978

1 files changed, 22 insertions, 9 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 360fb39dc9c..a20e5bc3b1b 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -1,10 +1,10 @@
-/* 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';
 import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
 import eventHub from '../../vue_pipelines_index/event_hub';
+import EmptyState from '../../vue_pipelines_index/components/empty_state';
+import ErrorState from '../../vue_pipelines_index/components/error_state';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 
@@ -22,6 +22,8 @@ import '../../vue_shared/vue_resource_interceptor';
 export default Vue.component('pipelines-table', {
   components: {
     'pipelines-table-component': PipelinesTableComponent,
+    'error-state': ErrorState,
+    'empty-state': EmptyState,
   },
 
   /**
@@ -36,12 +38,24 @@ export default Vue.component('pipelines-table', {
 
     return {
       endpoint: pipelinesTableData.endpoint,
+      helpPagePath: pipelinesTableData.helpPagePath,
       store,
       state: store.state,
       isLoading: false,
+      hasError: false,
     };
   },
 
+  computed: {
+    shouldRenderErrorState() {
+      return this.hasError && !this.isLoading;
+    },
+
+    shouldRenderEmptyState() {
+      return !this.state.pipelines.length && !this.isLoading;
+    },
+  },
+
   /**
    * When the component is about to be mounted, tell the service to fetch the data
    *
@@ -80,8 +94,8 @@ export default Vue.component('pipelines-table', {
           this.isLoading = false;
         })
         .catch(() => {
+          this.hasError = true;
           this.isLoading = false;
-          new Flash('An error occurred while fetching the pipelines, please reload the page again.');
         });
     },
   },
@@ -92,12 +106,11 @@ export default Vue.component('pipelines-table', {
         <i class="fa fa-spinner fa-spin"></i>
       </div>
 
-      <div class="blank-state blank-state-no-icon"
-        v-if="!isLoading && state.pipelines.length === 0">
-        <h2 class="blank-state-title js-blank-state-title">
-          No pipelines to show
-        </h2>
-      </div>
+      <empty-state
+        v-if="shouldRenderEmptyState"
+        :help-page-path="helpPagePath" />
+
+      <error-state v-if="shouldRenderErrorState" />
 
       <div class="table-holder"
         v-if="!isLoading && state.pipelines.length > 0">