From 6ad5c9d265d20236c3c0789673da61d61f03b89c Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 16 Nov 2022 12:36:24 -0700
Subject: [PATCH] Show how many commits behind an MR is when merge controls are
 visible

Changelog: fixed
---
 .../components/states/ready_to_merge.vue      | 10 +++++++
 .../states/mr_widget_ready_to_merge_spec.js   | 28 +++++++++++++++----
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index c54672cd0f8983..a15bf6fadd89ba 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -556,6 +556,16 @@ export default {
                 </ul>
               </div>
               <div class="gl-w-full gl-text-gray-500 gl-mb-3 gl-md-mb-0 gl-md-pb-5">
+                <template v-if="sourceHasDivergedFromTarget">
+                  <gl-sprintf :message="$options.i18n.sourceDivergedFromTargetText">
+                    <template #link>
+                      <gl-link :href="mr.targetBranchPath">{{
+                        $options.i18n.divergedCommits(mr.divergedCommitsCount)
+                      }}</gl-link>
+                    </template>
+                  </gl-sprintf>
+                  &middot;
+                </template>
                 <added-commit-message
                   :is-squash-enabled="squashBeforeMerge"
                   :is-fast-forward-enabled="!shouldShowMergeEdit"
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
index 407bd60b2b7698..d34fc0c1e6181a 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -812,14 +812,30 @@ describe('ReadyToMerge', () => {
         );
       });
 
-      it('shows the diverged commits text when the source branch is behind the target', () => {
-        createComponent({
-          mr: { divergedCommitsCount: 9001, userPermissions: { canMerge: false }, canMerge: false },
+      describe('shows the diverged commits text when the source branch is behind the target', () => {
+        it('when the MR can be merged', () => {
+          createComponent({
+            mr: { divergedCommitsCount: 9001 },
+          });
+
+          expect(wrapper.text()).toEqual(
+            expect.stringContaining('The source branch is 9001 commits behind the target branch'),
+          );
         });
 
-        expect(wrapper.text()).toEqual(
-          expect.stringContaining('The source branch is 9001 commits behind the target branch'),
-        );
+        it('when the MR cannot be merged', () => {
+          createComponent({
+            mr: {
+              divergedCommitsCount: 9001,
+              userPermissions: { canMerge: false },
+              canMerge: false,
+            },
+          });
+
+          expect(wrapper.text()).toEqual(
+            expect.stringContaining('The source branch is 9001 commits behind the target branch'),
+          );
+        });
       });
     });
   });
-- 
GitLab