Improvements after review

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

@@ -109,7 +109,9 @@ export default Vue.component('pipelines-table', {
         <i class="fa fa-spinner fa-spin"></i>
       </div>
-      <empty-state v-if="shouldRenderEmptyState" :helpPagePath="helpPagePath" />
+      <empty-state
+        v-if="shouldRenderEmptyState"
+        :help-page-path="helpPagePath" />
       <error-state v-if="shouldRenderErrorState" />

app/assets/javascripts/vue_pipelines_index/components/empty_state.js

@@ -8,21 +8,15 @@ export default {
     },
   },
-  data() {
-    return {
-      pipelinesEmptyStateSVG,
-    };
-  },
-
   template: `
-    <div class="row empty-state js-pipelines-empty-state">
-      <div class="col-xs-12 pull-right">
+    <div class="row empty-state">
+      <div class="col-xs-12">
         <div class="svg-content">
           ${pipelinesEmptyStateSVG}
         </div>
       </div>
-      <div class="col-xs-12 center">
+      <div class="col-xs-12 text-center">
         <div class="text-content">
           <h4>Build with confidence</h4>
           <p>

app/assets/javascripts/vue_pipelines_index/components/error_state.js

 import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
 export default {
-  data() {
-    return {
-      pipelinesErrorStateSVG,
-    };
-  },
-
   template: `
     <div class="row empty-state js-pipelines-error-state">
-      <div class="col-xs-12 pull-right">
+      <div class="col-xs-12">
         <div class="svg-content">
           ${pipelinesErrorStateSVG}
         </div>
       </div>
-      <div class="col-xs-12 center">
+      <div class="col-xs-12 text-center">
         <div class="text-content">
           <h4>The API failed to fetch the pipelines.</h4>
         </div>

app/assets/javascripts/vue_pipelines_index/pipelines.js

-/* global Flash */
-/* eslint-disable no-new */
 import Vue from 'vue';
-import '~/flash';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
@@ -177,14 +174,12 @@ export default {
         .catch(() => {
           this.hasError = true;
           this.pageRequest = false;
-          new Flash('An error occurred while fetching the pipelines, please reload the page again.');
         });
     },
   },
   template: `
-    <div
-      :class="cssClass">
+    <div :class="cssClass">
       <div
         class="top-area"
@@ -207,10 +202,14 @@ export default {
         <div
           class="realtime-loading"
           v-if="pageRequest">
-          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
         </div>
-        <empty-state v-if="shouldRenderEmptyState" :helpPagePath="helpPagePath" />
+        <empty-state
+          v-if="shouldRenderEmptyState"
+          :help-page-path="helpPagePath" />
         <error-state v-if="shouldRenderErrorState" />

app/assets/stylesheets/pages/pipelines.scss

@@ -14,6 +14,10 @@
     white-space: nowrap;
   }
+  .empty-state {
+    margin: 5% auto 0;
+  }
+
   .table-holder {
     width: 100%;
     overflow: auto;

spec/javascripts/commit/pipelines/pipelines_spec.js

@@ -33,7 +33,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
         });
         setTimeout(() => {
-          expect(component.$el.querySelector('.js-pipelines-empty-state')).toBeDefined();
+          expect(component.$el.querySelector('.empty-state')).toBeDefined();
           done();
         }, 1);
       });

spec/javascripts/vue_pipelines_index/pipelines_spec.js

@@ -71,7 +71,7 @@ describe('Pipelines', () => {
         }).$mount();
         setTimeout(() => {
-          expect(component.$el.querySelector('.js-pipelines-empty-state')).toBeDefined();
+          expect(component.$el.querySelector('.empty-state')).toBeDefined();
           done();
         });
       });