Add latest changes from gitlab-org/gitlab@master

3 files changed, 59 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue
index 01d8de132e7..456a1f17aae 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue
@@ -49,7 +49,7 @@ export default {
     ]"
     class="gl-rounded-full gl-mr-3 gl-relative gl-p-2"
   >
-    <gl-loading-icon v-if="isLoading" size="md" inline class="gl-display-block" />
+    <gl-loading-icon v-if="isLoading" size="lg" inline class="gl-display-block" />
     <gl-icon
       v-else
       :name="$options.EXTENSION_ICON_NAMES[iconName]"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index 2cef37d5c2e..b8a1f89d232 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml, GlLink } from '@gitlab/ui';
+import { GlSafeHtmlDirective as SafeHtml, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__, n__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -10,6 +10,7 @@ export default {
   },
   components: {
     GlLink,
+    GlSprintf,
   },
   mixins: [glFeatureFlagMixin()],
   props: {
@@ -28,6 +29,16 @@ export default {
       required: false,
       default: true,
     },
+    divergedCommitsCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    targetBranchPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     closesText() {
@@ -81,5 +92,19 @@ export default {
         }}</gl-link>
       </span>
     </p>
+    <div
+      v-if="
+        divergedCommitsCount > 0 && glFeatures.updatedMrHeader && !glFeatures.restructuredMrWidget
+      "
+      class="diverged-commits-count"
+    >
+      <gl-sprintf :message="s__('mrWidget|The source branch is %{link} the target branch')">
+        <template #link>
+          <gl-link :href="targetBranchPath">{{
+            n__('%d commit behind', '%d commits behind', divergedCommitsCount)
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
   </section>
 </template>
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 f12345426d4..87fd06ed233 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
@@ -716,6 +716,20 @@ export default {
                   {{ __('Merge details') }}
                 </strong>
                 <ul class="gl-pl-4 gl-m-0">
+                  <li
+                    v-if="mr.divergedCommitsCount > 0 && glFeatures.updatedMrHeader"
+                    class="gl-line-height-normal"
+                  >
+                    <gl-sprintf
+                      :message="s__('mrWidget|The source branch is %{link} the target branch')"
+                    >
+                      <template #link>
+                        <gl-link :href="mr.targetBranchPath">{{
+                          n__('%d commit behind', '%d commits behind', mr.divergedCommitsCount)
+                        }}</gl-link>
+                      </template>
+                    </gl-sprintf>
+                  </li>
                   <li class="gl-line-height-normal">
                     <added-commit-message
                       :state="mr.state"
@@ -756,6 +770,8 @@ export default {
                     :state="mr.state"
                     :related-links="mr.relatedLinks"
                     :show-assign-to-me="false"
+                    :diverged-commits-count="mr.divergedCommitsCount"
+                    :target-branch-path="mr.targetBranchPath"
                     class="mr-ready-merge-related-links gl-display-inline"
                   />
                 </template>
@@ -769,6 +785,22 @@ export default {
           >
             {{ __('The latest pipeline for this merge request did not complete successfully.') }}
           </div>
+          <div
+            v-if="
+              mr.divergedCommitsCount > 0 &&
+              glFeatures.updatedMrHeader &&
+              !glFeatures.restructuredMrWidget
+            "
+            class="diverged-commits-count gl-mt-4"
+          >
+            <gl-sprintf :message="s__('mrWidget|The source branch is %{link} the target branch')">
+              <template #link>
+                <gl-link :href="mr.targetBranchPath">{{
+                  n__('%d commit behind', '%d commits behind', mr.divergedCommitsCount)
+                }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </div>
         </div>
       </div>
       <template v-if="shouldShowMergeControls && !glFeatures.restructuredMrWidget">