1 files changed, 20 insertions, 5 deletions

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 4b3ad288768..8ebb7f6f159 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,10 @@ export default {
       return this.mr?.codequalityReportsPath;
     },
     shouldRenderRelatedLinks() {
-      return Boolean(this.mr.relatedLinks) && !this.mr.isNothingToMergeState;
+      return (
+        (Boolean(this.mr.relatedLinks) || this.mr.divergedCommitsCount > 0) &&
+        !this.mr.isNothingToMergeState
+      );
     },
     shouldRenderSourceBranchRemovalStatus() {
       return (
@@ -195,6 +198,9 @@ export default {
     shouldRenderTestReport() {
       return Boolean(this.mr?.testResultsPath);
     },
+    shouldRenderRefactoredTestReport() {
+      return window.gon?.features?.refactorMrWidgetTestSummary;
+    },
     mergeError() {
       let { mergeError } = this.mr;
 
@@ -228,6 +234,9 @@ export default {
     isRestructuredMrWidgetEnabled() {
       return window.gon?.features?.restructuredMrWidget;
     },
+    isUpdatedHeaderEnabled() {
+      return window.gon?.features?.updatedMrHeader;
+    },
   },
   watch: {
     'mr.machineValue': {
@@ -512,7 +521,7 @@ export default {
       }
     },
     registerTestReportExtension() {
-      if (this.shouldRenderTestReport && this.shouldShowExtension) {
+      if (this.shouldRenderTestReport && this.shouldRenderRefactoredTestReport) {
         registerExtension(testReportExtension);
       }
     },
@@ -521,11 +530,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 gl-overflow-hidden"
+    >
       <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"
@@ -588,7 +601,7 @@ export default {
       />
 
       <grouped-test-reports-app
-        v-if="mr.testResultsPath && !shouldShowExtension"
+        v-if="shouldRenderTestReport && !shouldRenderRefactoredTestReport"
         class="js-reports-container"
         :endpoint="mr.testResultsPath"
         :head-blob-path="mr.headBlobPath"
@@ -617,6 +630,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"
           />