Make commits behind text a link to the target branch commits page

8 files changed, 46 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index f8b3fb748ae..8430548903c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -92,13 +92,13 @@ export default {
             :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
             :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
             data-placement="bottom">
-            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
+            <a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
           </span>
         </strong>
         <span
           v-if="shouldShowCommitsBehindText"
           class="diverged-commits-count">
-          ({{mr.divergedCommitsCount}} {{commitsText}} behind)
+          (<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
         </span>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index d4ef5972ce0..72a13108404 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -47,7 +47,8 @@ export default class MergeRequestStore {
     this.sourceBranchPath = data.source_branch_path;
     this.sourceBranchLink = data.source_branch_with_namespace_link;
     this.mergeError = data.merge_error;
-    this.targetBranchPath = data.target_branch_tree_path;
+    this.targetBranchPath = data.target_branch_commits_path;
+    this.targetBranchTreePath = data.target_branch_tree_path;
     this.conflictResolutionPath = data.conflict_resolution_path;
     this.cancelAutoMergePath = data.cancel_merge_when_pipeline_succeeds_path;
     this.removeWIPPath = data.remove_wip_path;
diff --git a/app/presenters/merge_request_presenter.rb b/app/presenters/merge_request_presenter.rb
index 4084a982071..2df84e58575 100644
--- a/app/presenters/merge_request_presenter.rb
+++ b/app/presenters/merge_request_presenter.rb
@@ -82,6 +82,12 @@ class MergeRequestPresenter < Gitlab::View::Presenter::Delegated
     end
   end
 
+  def target_branch_commits_path
+    if target_branch_exists?
+      project_commits_path(project, target_branch)
+    end
+  end
+
   def source_branch_path
     if source_branch_exists?
       project_branch_path(source_project, source_branch)
diff --git a/app/serializers/merge_request_entity.rb b/app/serializers/merge_request_entity.rb
index fb6709699a7..7f17f2bf604 100644
--- a/app/serializers/merge_request_entity.rb
+++ b/app/serializers/merge_request_entity.rb
@@ -93,6 +93,10 @@ class MergeRequestEntity < IssuableEntity
 
   # Paths
   #
+  expose :target_branch_commits_path do |merge_request|
+    presenter(merge_request).target_branch_commits_path
+  end
+
   expose :target_branch_tree_path do |merge_request|
     presenter(merge_request).target_branch_tree_path
   end
diff --git a/spec/fixtures/api/schemas/entities/merge_request.json b/spec/fixtures/api/schemas/entities/merge_request.json
index b6cda963ffa..7ffa82fc4bd 100644
--- a/spec/fixtures/api/schemas/entities/merge_request.json
+++ b/spec/fixtures/api/schemas/entities/merge_request.json
@@ -74,6 +74,7 @@
       },
       "additionalProperties": false
     },
+    "target_branch_commits_path": { "type": "string" },
     "target_branch_tree_path": { "type": "string" },
     "source_branch_path": { "type": "string" },
     "conflict_resolution_path": { "type": ["string", "null"] },
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 7f3eea7d2e5..06f89fabf42 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -54,6 +54,7 @@ describe('MRWidgetHeader', () => {
       sourceBranch: 'mr-widget-refactor',
       sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
       targetBranchPath: 'foo/bar/commits-path',
+      targetBranchTreePath: 'foo/bar/tree/path',
       targetBranch: 'master',
       isOpen: true,
       emailPatchesPath: '/mr/email-patches',
@@ -69,12 +70,14 @@ describe('MRWidgetHeader', () => {
       expect(el.classList.contains('mr-source-target')).toBeTruthy();
       const sourceBranchLink = el.querySelectorAll('.label-branch')[0];
       const targetBranchLink = el.querySelectorAll('.label-branch')[1];
+      const commitsCount = el.querySelector('.diverged-commits-count');
 
       expect(sourceBranchLink.textContent).toContain(mr.sourceBranch);
       expect(targetBranchLink.textContent).toContain(mr.targetBranch);
       expect(sourceBranchLink.querySelector('a').getAttribute('href')).toEqual(sourceBranchPath);
-      expect(targetBranchLink.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchPath);
-      expect(el.querySelector('.diverged-commits-count').textContent).toContain('12 commits behind');
+      expect(targetBranchLink.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchTreePath);
+      expect(commitsCount.textContent).toContain('12 commits behind');
+      expect(commitsCount.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchPath);
 
       expect(el.textContent).toContain('Check out branch');
       expect(el.querySelectorAll('.dropdown li a')[0].getAttribute('href')).toEqual(mr.emailPatchesPath);
diff --git a/spec/presenters/merge_request_presenter_spec.rb b/spec/presenters/merge_request_presenter_spec.rb
index ef12611cff8..ca6c67a6235 100644
--- a/spec/presenters/merge_request_presenter_spec.rb
+++ b/spec/presenters/merge_request_presenter_spec.rb
@@ -317,6 +317,30 @@ describe MergeRequestPresenter do
     end
   end
 
+  describe '#target_branch_commits_path' do
+    subject do
+      described_class.new(resource, current_user: user)
+        .target_branch_commits_path
+    end
+
+    context 'when target branch exists' do
+      it 'returns path' do
+        allow(resource).to receive(:target_branch_exists?) { true }
+
+        is_expected
+          .to eq("/#{resource.target_project.full_path}/commits/#{resource.target_branch}")
+      end
+    end
+
+    context 'when target branch does not exists' do
+      it 'returns nil' do
+        allow(resource).to receive(:target_branch_exists?) { false }
+
+        is_expected.to be_nil
+      end
+    end
+  end
+
   describe '#target_branch_tree_path' do
     subject do
       described_class.new(resource, current_user: user)
diff --git a/spec/serializers/merge_request_entity_spec.rb b/spec/serializers/merge_request_entity_spec.rb
index 0c1db82aa55..b3d58b2636f 100644
--- a/spec/serializers/merge_request_entity_spec.rb
+++ b/spec/serializers/merge_request_entity_spec.rb
@@ -46,8 +46,8 @@ describe MergeRequestEntity do
                                :conflict_resolution_path,
                                :cancel_merge_when_pipeline_succeeds_path,
                                :create_issue_to_resolve_discussions_path,
-                               :source_branch_path, :target_branch_tree_path,
-                               :commits_count)
+                               :source_branch_path, :target_branch_commits_path,
+                               :target_branch_tree_path, :commits_count)
   end
 
   it 'has email_patches_path' do