make Vue render with null commit object - handle scope and page in different tabs

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -66,6 +66,8 @@
     },
     methods: {
       changepage(e) {
+        const scope = getParameterByName('scope');
+        if (scope) this.apiScope = scope;
         const text = e.target.innerText;
         const { totalPages, nextPage, previousPage } = this.pageInfo;
         if (text === SPREAD) return;
@@ -74,14 +76,21 @@
         if (text === NEXT) this.pagenum = nextPage;
         if (text === PREV) this.pagenum = previousPage;
         if (text === FIRST) this.pagenum = 1;
-
-        window.history.pushState({}, null, `?p=${this.pagenum}`);
+        window.history.pushState({}, null, `?scope=${this.apiScope}&p=${this.pagenum}`);
         clearInterval(this.timeLoopInterval);
         this.pageRequest = true;
-        this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope);
+        this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
       },
       author(pipeline) {
         const { commit } = pipeline;
+        if (!commit) {
+          return ({
+            avatar_url: '',
+            web_url: '',
+            username: '',
+          });
+        }
+
         const author = commit.author;
         if (author) return author;
 
@@ -105,6 +114,21 @@
       addTimeInterval(id, start) {
         this.allTimeIntervals.push({ id, start });
       },
+      commitTitle(pipeline) {
+        const { commit } = pipeline;
+        if (commit) return commit.title;
+        return '';
+      },
+      commitSha(pipeline) {
+        const { commit } = pipeline;
+        if (commit) return commit.short_id;
+        return '';
+      },
+      commitUrl(pipeline) {
+        const { commit } = pipeline;
+        if (commit) return commit.commit_url;
+        return '';
+      },
     },
     template: `
       <div>
@@ -122,10 +146,10 @@
                   <commit
                     :author='author(pipeline)'
                     :tag="pipeline.ref['tag?']"
-                    :title='pipeline.commit.title'
+                    :title='commitTitle(pipeline)'
                     :commit_ref='ref(pipeline)'
-                    :short_sha='pipeline.commit.short_id'
-                    :commit_url='pipeline.commit.commit_url'
+                    :short_sha='commitSha(pipeline)'
+                    :commit_url='commitUrl(pipeline)'
                   >
                   </commit>
                 </td>
@@ -143,7 +167,7 @@
           <i class="fa fa-spinner fa-spin"></i>
         </div>
         <gl-pagination
-          v-if='pageInfo.total > 30'
+          v-if='pageInfo.total > pageInfo.perPage'
           :pagenum='pagenum'
           :changepage='changepage'
           :count='count.all'

spec/features/projects/pipelines/pipelines_spec.rb

@@ -25,22 +25,7 @@ describe "Pipelines", feature: true, js: true do
       )
     end
 
-    [:pipelines].each do |scope|
-      context "displaying #{scope}" do
-        let(:project) { create(:project) }
-
-        before do
-          visit namespace_project_pipelines_path(project.namespace, project)
-        end
-
-        it do
-          wait_for_vue_resource
-          expect(page).to have_content(pipeline.short_sha)
-        end
-      end
-    end
-
-    [:running, :branches].each do |scope|
+    [:all, :running, :branches].each do |scope|
       context "displaying #{scope}" do
         let(:project) { create(:project) }
 
@@ -51,7 +36,10 @@ describe "Pipelines", feature: true, js: true do
           )
         end
 
-        it { expect(page).to have_content(pipeline.short_sha) }
+        it do
+          wait_for_vue_resource
+          expect(page).to have_content(pipeline.short_sha)
+        end
       end
     end