From d34d27183a22b7992c91f050b913387a4f7d7186 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 21 Mar 2017 11:38:45 +0000
Subject: [PATCH] Improvements after review
---
.../commit/pipelines/pipelines_table.js | 4 +++-
.../vue_pipelines_index/components/empty_state.js | 12 +++---------
.../vue_pipelines_index/components/error_state.js | 10 ++--------
.../javascripts/vue_pipelines_index/pipelines.js | 15 +++++++--------
app/assets/stylesheets/pages/pipelines.scss | 4 ++++
.../commit/pipelines/pipelines_spec.js | 2 +-
.../vue_pipelines_index/pipelines_spec.js | 2 +-
7 files changed, 21 insertions(+), 28 deletions(-)
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 189dd2c7dce..f2c2524908d 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/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" />
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
index 78f111c74bc..56b4858f4b4 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
+++ b/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>
diff --git a/app/assets/javascripts/vue_pipelines_index/components/error_state.js b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
index f197395a6db..e5d228bddf8 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/error_state.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
@@ -1,21 +1,15 @@
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>
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 885ad465179..796fd5b581e 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -1,7 +1,4 @@
-/* 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" />
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 44ed6dcf33a..e8791f8d513 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/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;
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index cb51e6f3ef3..65093e53332 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/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);
});
diff --git a/spec/javascripts/vue_pipelines_index/pipelines_spec.js b/spec/javascripts/vue_pipelines_index/pipelines_spec.js
index 22d1c4e16a3..b57761e3b12 100644
--- a/spec/javascripts/vue_pipelines_index/pipelines_spec.js
+++ b/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();
});
});
--
GitLab