Changes after review38587-pipelines-empty-state

7 files changed, 35 insertions, 46 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 3b3072ebd3e..466a5b5d635 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -88,7 +88,7 @@
     <svg-blank-state
       v-else-if="shouldRenderErrorState"
       :svg-path="errorStateSvgPath"
-      :message="s__(`Pipelines|There was an error with fetching the pipelines.
+      :message="s__(`Pipelines|There was an error fetching the pipelines.
       Try again in a few moments or contact your support team.`)"
     />
 
diff --git a/app/assets/javascripts/pages/projects/pipelines/index/index.js b/app/assets/javascripts/pages/projects/pipelines/index/index.js
index 4c092c60e72..a84e2790680 100644
--- a/app/assets/javascripts/pages/projects/pipelines/index/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/index/index.js
@@ -12,14 +12,13 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
     pipelinesComponent,
   },
   data() {
-    const store = new PipelinesStore();
-
     return {
-      store,
-      dataset: document.querySelector(this.$options.el).dataset,
+      store: new PipelinesStore(),
     };
   },
-
+  created() {
+    this.dataset = document.querySelector(this.$options.el).dataset;
+  },
   render(createElement) {
     return createElement('pipelines-component', {
       props: {
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 51f05c7827e..10ac8c08bed 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -43,7 +43,7 @@
           <div class="text-center">
             <a
               :href="helpPagePath"
-              class="btn btn-info js-get-started-pipelines"
+              class="btn btn-primary js-get-started-pipelines"
             >
               {{ s__('Pipelines|Get started with Pipelines') }}
             </a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 54f5fb7678b..6e5ee68eeb1 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -323,7 +323,7 @@
       <svg-blank-state
         v-else-if="stateToRender === $options.stateMap.error"
         :svg-path="errorStateSvgPath"
-        :message="s__(`Pipelines|There was an error with fetching the pipelines.
+        :message="s__(`Pipelines|There was an error fetching the pipelines.
         Try again in a few moments or contact your support team.`)"
       />
 
diff --git a/app/assets/javascripts/pipelines/stores/pipelines_store.js b/app/assets/javascripts/pipelines/stores/pipelines_store.js
index 2f738edd241..651251d2623 100644
--- a/app/assets/javascripts/pipelines/stores/pipelines_store.js
+++ b/app/assets/javascripts/pipelines/stores/pipelines_store.js
@@ -5,12 +5,7 @@ export default class PipelinesStore {
     this.state = {};
 
     this.state.pipelines = [];
-    this.state.count = {
-      all: 0,
-      finished: 0,
-      pending: 0,
-      running: 0,
-    };
+    this.state.count = {};
     this.state.pageInfo = {};
   }
 
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index 043c8cfd8bc..84fd0329f08 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -183,10 +183,10 @@ describe('Pipelines', () => {
       });
 
       it('does not render tabs nor buttons', () => {
-        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBe(null);
-        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
-        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
-        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull();
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
       });
     });
 
@@ -222,7 +222,7 @@ describe('Pipelines', () => {
       });
 
       it('renders error state', () => {
-        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error with fetching the pipelines.');
+        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.');
       });
     });
   });
@@ -254,9 +254,9 @@ describe('Pipelines', () => {
       });
 
       it('does not render buttons', () => {
-        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
-        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
-        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
       });
 
       it('renders pipelines table', () => {
@@ -291,9 +291,9 @@ describe('Pipelines', () => {
       });
 
       it('does not render buttons', () => {
-        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
-        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
-        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
       });
 
       it('renders tab empty state', () => {
@@ -324,14 +324,14 @@ describe('Pipelines', () => {
 
       it('renders empty state without button to set CI', () => {
         expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toEqual('This project is not currently set up to run pipelines.');
-        expect(vm.$el.querySelector('.js-get-started-pipelines')).toBe(null);
+        expect(vm.$el.querySelector('.js-get-started-pipelines')).toBeNull();
       });
 
-      it('does not render tabs nor buttons', () => {
-        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBe(null);
-        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
-        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
-        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+      it('does not render tabs or buttons', () => {
+        expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull();
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
       });
     });
 
@@ -361,13 +361,13 @@ describe('Pipelines', () => {
       });
 
       it('does not renders buttons', () => {
-        expect(vm.$el.querySelector('.js-run-pipeline')).toBe(null);
-        expect(vm.$el.querySelector('.js-ci-lint')).toBe(null);
-        expect(vm.$el.querySelector('.js-clear-cache')).toBe(null);
+        expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull();
+        expect(vm.$el.querySelector('.js-ci-lint')).toBeNull();
+        expect(vm.$el.querySelector('.js-clear-cache')).toBeNull();
       });
 
       it('renders error state', () => {
-        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error with fetching the pipelines.');
+        expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.');
       });
     });
   });
@@ -527,10 +527,10 @@ describe('Pipelines', () => {
     describe('tabs', () => {
       it('returns default tabs', () => {
         expect(vm.tabs).toEqual([
-          { name: 'All', scope: 'all', count: 0, isActive: true },
-          { name: 'Pending', scope: 'pending', count: 0, isActive: false },
-          { name: 'Running', scope: 'running', count: 0, isActive: false },
-          { name: 'Finished', scope: 'finished', count: 0, isActive: false },
+          { name: 'All', scope: 'all', count: undefined, isActive: true },
+          { name: 'Pending', scope: 'pending', count: undefined, isActive: false },
+          { name: 'Running', scope: 'running', count: undefined, isActive: false },
+          { name: 'Finished', scope: 'finished', count: undefined, isActive: false },
           { name: 'Branches', scope: 'branches', isActive: false },
           { name: 'Tags', scope: 'tags', isActive: false },
         ]);
@@ -646,7 +646,7 @@ describe('Pipelines', () => {
         });
       });
 
-      it('returs true when state is empty tab & has already made the first request', (done) => {
+      it('returns true when state is empty tab & has already made the first request', (done) => {
         vm.isLoading = false;
         vm.state.count.all = 10;
         vm.hasMadeRequest = true;
diff --git a/spec/javascripts/pipelines/pipelines_store_spec.js b/spec/javascripts/pipelines/pipelines_store_spec.js
index 0d628285a7b..10ff0c6bb84 100644
--- a/spec/javascripts/pipelines/pipelines_store_spec.js
+++ b/spec/javascripts/pipelines/pipelines_store_spec.js
@@ -9,12 +9,7 @@ describe('Pipelines Store', () => {
 
   it('should be initialized with an empty state', () => {
     expect(store.state.pipelines).toEqual([]);
-    expect(store.state.count).toEqual({
-      all: 0,
-      finished: 0,
-      pending: 0,
-      running: 0,
-    });
+    expect(store.state.count).toEqual({});
     expect(store.state.pageInfo).toEqual({});
   });