Add latest changes from gitlab-org/gitlab@master

4 files changed, 76 insertions, 5 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">
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 04f71e2b185..8b4f13b4f92 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -165,7 +165,12 @@ export default {
       return this.mr?.codequalityReportsPath;
     },
     shouldRenderRelatedLinks() {
-      return Boolean(this.mr.relatedLinks) && !this.mr.isNothingToMergeState;
+      const showDivergedCounts =
+        this.mr.divergedCommitsCount > 0 && this.mr.state !== 'readyToMerge';
+
+      return (
+        (Boolean(this.mr.relatedLinks) || showDivergedCounts) && !this.mr.isNothingToMergeState
+      );
     },
     shouldRenderSourceBranchRemovalStatus() {
       return (
@@ -231,6 +236,9 @@ export default {
     isRestructuredMrWidgetEnabled() {
       return window.gon?.features?.restructuredMrWidget;
     },
+    isUpdatedHeaderEnabled() {
+      return window.gon?.features?.updatedMrHeader;
+    },
   },
   watch: {
     'mr.machineValue': {
@@ -524,11 +532,15 @@ export default {
 </script>
 <template>
   <div v-if="isLoaded" class="mr-state-widget gl-mt-3">
-    <header class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100">
+    <header
+      v-if="shouldRenderCollaborationStatus || !isUpdatedHeaderEnabled"
+      :class="{ 'mr-widget-workflow gl-mt-0!': isUpdatedHeaderEnabled }"
+      class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100"
+    >
       <mr-widget-alert-message v-if="shouldRenderCollaborationStatus" type="info">
         {{ s__('mrWidget|Members who can merge are allowed to add commits.') }}
       </mr-widget-alert-message>
-      <mr-widget-header :mr="mr" />
+      <mr-widget-header v-if="!isUpdatedHeaderEnabled" :mr="mr" />
     </header>
     <mr-widget-suggest-pipeline
       v-if="shouldSuggestPipelines"
@@ -620,6 +632,8 @@ export default {
             v-if="shouldRenderRelatedLinks"
             :state="mr.state"
             :related-links="mr.relatedLinks"
+            :diverged-commits-count="mr.divergedCommitsCount"
+            :target-branch-path="mr.targetBranchPath"
             class="mr-info-list gl-ml-7 gl-pb-5"
           />