Update pipeline list view

This commit updates the pipeline page  and related components to include
new pipeline information added by the post-merge pipeline feature.

5 files changed, 231 insertions, 46 deletions

diff --git a/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb b/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
index 97b2aa82fce..28f88718ec1 100644
--- a/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
@@ -2,7 +2,7 @@
 
 require 'rails_helper'
 
-describe 'Merge request > User sees merge request pipelines', :js do
+describe 'Merge request > User sees pipelines triggered by merge request', :js do
   include ProjectForksHelper
   include TestReportsHelper
 
@@ -47,7 +47,7 @@ describe 'Merge request > User sees merge request pipelines', :js do
                                 .execute(:push)
     end
 
-    let!(:merge_request_pipeline) do
+    let!(:detached_merge_request_pipeline) do
       Ci::CreatePipelineService.new(project, user, ref: 'feature')
                                 .execute(:merge_request_event, merge_request: merge_request)
     end
@@ -60,16 +60,16 @@ describe 'Merge request > User sees merge request pipelines', :js do
       end
     end
 
-    it 'sees branch pipelines and merge request pipelines in correct order' do
+    it 'sees branch pipelines and detached merge request pipelines in correct order' do
       page.within('.ci-table') do
         expect(page).to have_selector('.ci-pending', count: 2)
-        expect(first('.js-pipeline-url-link')).to have_content("##{merge_request_pipeline.id}")
+        expect(first('.js-pipeline-url-link')).to have_content("##{detached_merge_request_pipeline.id}")
       end
     end
 
-    it 'sees the latest merge request pipeline as the head pipeline' do
+    it 'sees the latest detached merge request pipeline as the head pipeline' do
       page.within('.ci-widget-content') do
-        expect(page).to have_content("##{merge_request_pipeline.id}")
+        expect(page).to have_content("##{detached_merge_request_pipeline.id}")
       end
     end
 
@@ -79,7 +79,7 @@ describe 'Merge request > User sees merge request pipelines', :js do
                                   .execute(:push)
       end
 
-      let!(:merge_request_pipeline_2) do
+      let!(:detached_merge_request_pipeline_2) do
         Ci::CreatePipelineService.new(project, user, ref: 'feature')
                                   .execute(:merge_request_event, merge_request: merge_request)
       end
@@ -92,15 +92,15 @@ describe 'Merge request > User sees merge request pipelines', :js do
         end
       end
 
-      it 'sees branch pipelines and merge request pipelines in correct order' do
+      it 'sees branch pipelines and detached merge request pipelines in correct order' do
         page.within('.ci-table') do
           expect(page).to have_selector('.ci-pending', count: 4)
 
           expect(all('.js-pipeline-url-link')[0])
-            .to have_content("##{merge_request_pipeline_2.id}")
+            .to have_content("##{detached_merge_request_pipeline_2.id}")
 
           expect(all('.js-pipeline-url-link')[1])
-            .to have_content("##{merge_request_pipeline.id}")
+            .to have_content("##{detached_merge_request_pipeline.id}")
 
           expect(all('.js-pipeline-url-link')[2])
             .to have_content("##{push_pipeline_2.id}")
@@ -110,25 +110,25 @@ describe 'Merge request > User sees merge request pipelines', :js do
         end
       end
 
-      it 'sees merge request tag for merge request pipelines' do
+      it 'sees detached tag for detached merge request pipelines' do
         page.within('.ci-table') do
           expect(all('.pipeline-tags')[0])
-            .to have_content("merge request")
+            .to have_content("detached")
 
           expect(all('.pipeline-tags')[1])
-            .to have_content("merge request")
+            .to have_content("detached")
 
           expect(all('.pipeline-tags')[2])
-            .not_to have_content("merge request")
+            .not_to have_content("detached")
 
           expect(all('.pipeline-tags')[3])
-            .not_to have_content("merge request")
+            .not_to have_content("detached")
         end
       end
 
-      it 'sees the latest merge request pipeline as the head pipeline' do
+      it 'sees the latest detached merge request pipeline as the head pipeline' do
         page.within('.ci-widget-content') do
-          expect(page).to have_content("##{merge_request_pipeline_2.id}")
+          expect(page).to have_content("##{detached_merge_request_pipeline_2.id}")
         end
       end
     end
@@ -140,16 +140,16 @@ describe 'Merge request > User sees merge request pipelines', :js do
         wait_for_requests
       end
 
-      context 'when merge request pipeline is pending' do
+      context 'when detached merge request pipeline is pending' do
         it 'waits the head pipeline' do
           expect(page).to have_content('to be merged automatically when the pipeline succeeds')
           expect(page).to have_link('Cancel automatic merge')
         end
       end
 
-      context 'when merge request pipeline succeeds' do
+      context 'when detached merge request pipeline succeeds' do
         before do
-          merge_request_pipeline.succeed!
+          detached_merge_request_pipeline.succeed!
 
           wait_for_requests
         end
@@ -218,7 +218,7 @@ describe 'Merge request > User sees merge request pipelines', :js do
                                 .execute(:push)
     end
 
-    let!(:merge_request_pipeline) do
+    let!(:detached_merge_request_pipeline) do
       Ci::CreatePipelineService.new(forked_project, user2, ref: 'feature')
                                 .execute(:merge_request_event, merge_request: merge_request)
     end
@@ -236,16 +236,16 @@ describe 'Merge request > User sees merge request pipelines', :js do
       end
     end
 
-    it 'sees branch pipelines and merge request pipelines in correct order' do
+    it 'sees branch pipelines and detached merge request pipelines in correct order' do
       page.within('.ci-table') do
         expect(page).to have_selector('.ci-pending', count: 2)
-        expect(first('.js-pipeline-url-link')).to have_content("##{merge_request_pipeline.id}")
+        expect(first('.js-pipeline-url-link')).to have_content("##{detached_merge_request_pipeline.id}")
       end
     end
 
-    it 'sees the latest merge request pipeline as the head pipeline' do
+    it 'sees the latest detached merge request pipeline as the head pipeline' do
       page.within('.ci-widget-content') do
-        expect(page).to have_content("##{merge_request_pipeline.id}")
+        expect(page).to have_content("##{detached_merge_request_pipeline.id}")
       end
     end
 
@@ -261,7 +261,7 @@ describe 'Merge request > User sees merge request pipelines', :js do
                                   .execute(:push)
       end
 
-      let!(:merge_request_pipeline_2) do
+      let!(:detached_merge_request_pipeline_2) do
         Ci::CreatePipelineService.new(forked_project, user2, ref: 'feature')
                                   .execute(:merge_request_event, merge_request: merge_request)
       end
@@ -274,15 +274,15 @@ describe 'Merge request > User sees merge request pipelines', :js do
         end
       end
 
-      it 'sees branch pipelines and merge request pipelines in correct order' do
+      it 'sees branch pipelines and detached merge request pipelines in correct order' do
         page.within('.ci-table') do
           expect(page).to have_selector('.ci-pending', count: 4)
 
           expect(all('.js-pipeline-url-link')[0])
-            .to have_content("##{merge_request_pipeline_2.id}")
+            .to have_content("##{detached_merge_request_pipeline_2.id}")
 
           expect(all('.js-pipeline-url-link')[1])
-            .to have_content("##{merge_request_pipeline.id}")
+            .to have_content("##{detached_merge_request_pipeline.id}")
 
           expect(all('.js-pipeline-url-link')[2])
             .to have_content("##{push_pipeline_2.id}")
@@ -292,25 +292,25 @@ describe 'Merge request > User sees merge request pipelines', :js do
         end
       end
 
-      it 'sees merge request tag for merge request pipelines' do
+      it 'sees detached tag for detached merge request pipelines' do
         page.within('.ci-table') do
           expect(all('.pipeline-tags')[0])
-            .to have_content("merge request")
+            .to have_content("detached")
 
           expect(all('.pipeline-tags')[1])
-            .to have_content("merge request")
+            .to have_content("detached")
 
           expect(all('.pipeline-tags')[2])
-            .not_to have_content("merge request")
+            .not_to have_content("detached")
 
           expect(all('.pipeline-tags')[3])
-            .not_to have_content("merge request")
+            .not_to have_content("detached")
         end
       end
 
-      it 'sees the latest merge request pipeline as the head pipeline' do
+      it 'sees the latest detached merge request pipeline as the head pipeline' do
         page.within('.ci-widget-content') do
-          expect(page).to have_content("##{merge_request_pipeline_2.id}")
+          expect(page).to have_content("##{detached_merge_request_pipeline_2.id}")
         end
       end
 
@@ -328,16 +328,16 @@ describe 'Merge request > User sees merge request pipelines', :js do
         wait_for_requests
       end
 
-      context 'when merge request pipeline is pending' do
+      context 'when detached merge request pipeline is pending' do
         it 'waits the head pipeline' do
           expect(page).to have_content('to be merged automatically when the pipeline succeeds')
           expect(page).to have_link('Cancel automatic merge')
         end
       end
 
-      context 'when merge request pipeline succeeds' do
+      context 'when detached merge request pipeline succeeds' do
         before do
-          merge_request_pipeline.succeed!
+          detached_merge_request_pipeline.succeed!
 
           wait_for_requests
         end
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 88d7c9ef8bd..0e151efa9df 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -1,6 +1,8 @@
 require 'spec_helper'
 
 describe 'Pipelines', :js do
+  include ProjectForksHelper
+
   let(:project) { create(:project) }
 
   context 'when user is logged in' do
@@ -165,6 +167,99 @@ describe 'Pipelines', :js do
         end
       end
 
+      context 'when pipeline is detached merge request pipeline' do
+        let(:merge_request) do
+          create(:merge_request,
+            :with_detached_merge_request_pipeline,
+            source_project: source_project,
+            target_project: target_project)
+        end
+
+        let!(:pipeline) { merge_request.all_pipelines.first }
+        let(:source_project) { project }
+        let(:target_project) { project }
+
+        before do
+          visit project_pipelines_path(source_project)
+        end
+
+        shared_examples_for 'showing detached merge request pipeline information' do
+          it 'shows detached tag for the pipeline' do
+            within '.pipeline-tags' do
+              expect(page).to have_content('detached')
+            end
+          end
+
+          it 'shows the link of the merge request' do
+            within '.branch-commit' do
+              expect(page).to have_link(merge_request.iid,
+                href: project_merge_request_path(project, merge_request))
+            end
+          end
+
+          it 'does not show the ref of the pipeline' do
+            within '.branch-commit' do
+              expect(page).not_to have_link(pipeline.ref)
+            end
+          end
+        end
+
+        it_behaves_like 'showing detached merge request pipeline information'
+
+        context 'when source project is a forked project' do
+          let(:source_project) { fork_project(project, user, repository: true) }
+
+          it_behaves_like 'showing detached merge request pipeline information'
+        end
+      end
+
+      context 'when pipeline is merge request pipeline' do
+        let(:merge_request) do
+          create(:merge_request,
+            :with_merge_request_pipeline,
+            source_project: source_project,
+            target_project: target_project,
+            merge_sha: target_project.commit.sha)
+        end
+
+        let!(:pipeline) { merge_request.all_pipelines.first }
+        let(:source_project) { project }
+        let(:target_project) { project }
+
+        before do
+          visit project_pipelines_path(source_project)
+        end
+
+        shared_examples_for 'Correct merge request pipeline information' do
+          it 'does not show detached tag for the pipeline' do
+            within '.pipeline-tags' do
+              expect(page).not_to have_content('detached')
+            end
+          end
+
+          it 'shows the link of the merge request' do
+            within '.branch-commit' do
+              expect(page).to have_link(merge_request.iid,
+                href: project_merge_request_path(project, merge_request))
+            end
+          end
+
+          it 'does not show the ref of the pipeline' do
+            within '.branch-commit' do
+              expect(page).not_to have_link(pipeline.ref)
+            end
+          end
+        end
+
+        it_behaves_like 'Correct merge request pipeline information'
+
+        context 'when source project is a forked project' do
+          let(:source_project) { fork_project(project, user, repository: true) }
+
+          it_behaves_like 'Correct merge request pipeline information'
+        end
+      end
+
       context 'when pipeline has configuration errors' do
         let(:pipeline) do
           create(:ci_pipeline, :invalid, project: project)
diff --git a/spec/javascripts/environments/environment_item_spec.js b/spec/javascripts/environments/environment_item_spec.js
index 8b877994515..388d7063d13 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -60,7 +60,7 @@ describe('Environment item', () => {
           sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
           ref: {
             name: 'master',
-            ref_path: 'root/ci-folders/tree/master',
+            ref_url: 'root/ci-folders/tree/master',
           },
           tag: true,
           'last?': true,
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index ea917b36526..faad49a78b0 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -100,7 +100,8 @@ describe('Pipeline Url Component', () => {
             latest: true,
             yaml_errors: true,
             stuck: true,
-            merge_request: true,
+            merge_request_pipeline: true,
+            detached_merge_request_pipeline: true,
           },
         },
         autoDevopsHelpPath: 'foo',
@@ -108,15 +109,16 @@ describe('Pipeline Url Component', () => {
     }).$mount();
 
     expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
+
     expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain(
       'yaml invalid',
     );
 
-    expect(component.$el.querySelector('.js-pipeline-url-mergerequest').textContent).toContain(
-      'merge request',
-    );
-
     expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
+
+    expect(component.$el.querySelector('.js-pipeline-url-detached').textContent).toContain(
+      'detached',
+    );
   });
 
   it('should render a badge for autodevops', () => {
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index 18fcdf7ede1..f2e20f626b5 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -61,7 +61,7 @@ describe('Commit component', () => {
     });
 
     it('should render a tag icon if it represents a tag', () => {
-      expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-tag');
+      expect(component.$el.querySelector('.icon-container svg.ic-tag')).not.toBeNull();
     });
 
     it('should render a link to the ref url', () => {
@@ -143,4 +143,92 @@ describe('Commit component', () => {
       );
     });
   });
+
+  describe('When commit ref is provided, but merge ref is not', () => {
+    it('should render the commit ref', () => {
+      props = {
+        tag: false,
+        commitRef: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commitUrl:
+          'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        shortSha: 'b7836edd',
+        title: null,
+        author: {},
+      };
+
+      component = mountComponent(CommitComponent, props);
+      const refEl = component.$el.querySelector('.ref-name');
+
+      expect(refEl.textContent).toContain('master');
+
+      expect(refEl.href).toBe(props.commitRef.ref_url);
+
+      expect(refEl.getAttribute('data-original-title')).toBe(props.commitRef.name);
+
+      expect(component.$el.querySelector('.icon-container .ic-branch')).not.toBeNull();
+    });
+  });
+
+  describe('When both commit and merge ref are provided', () => {
+    it('should render the merge ref', () => {
+      props = {
+        tag: false,
+        commitRef: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commitUrl:
+          'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        mergeRequestRef: {
+          iid: 1234,
+          path: 'https://example.com/path/to/mr',
+          title: 'Test MR',
+        },
+        shortSha: 'b7836edd',
+        title: null,
+        author: {},
+      };
+
+      component = mountComponent(CommitComponent, props);
+      const refEl = component.$el.querySelector('.ref-name');
+
+      expect(refEl.textContent).toContain('1234');
+
+      expect(refEl.href).toBe(props.mergeRequestRef.path);
+
+      expect(refEl.getAttribute('data-original-title')).toBe(props.mergeRequestRef.title);
+
+      expect(component.$el.querySelector('.icon-container .ic-git-merge')).not.toBeNull();
+    });
+  });
+
+  describe('When showRefInfo === false', () => {
+    it('should not render any ref info', () => {
+      props = {
+        tag: false,
+        commitRef: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commitUrl:
+          'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        mergeRequestRef: {
+          iid: 1234,
+          path: '/path/to/mr',
+          title: 'Test MR',
+        },
+        shortSha: 'b7836edd',
+        title: null,
+        author: {},
+        showRefInfo: false,
+      };
+
+      component = mountComponent(CommitComponent, props);
+
+      expect(component.$el.querySelector('.ref-name')).toBeNull();
+    });
+  });
 });