1 files changed, 20 insertions, 2 deletions

diff --git a/app/assets/javascripts/pages/projects/merge_requests/page.js b/app/assets/javascripts/pages/projects/merge_requests/page.js
index 69032455fe3..fb228830c37 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/page.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/page.js
@@ -4,6 +4,7 @@ import initMrNotes from 'ee_else_ce/mr_notes';
 import StickyHeader from '~/merge_requests/components/sticky_header.vue';
 import { start as startCodeReviewMessaging } from '~/code_review/signals';
 import diffsEventHub from '~/diffs/event_hub';
+import { EVT_MR_DIFF_GENERATED } from '~/diffs/constants';
 import store from '~/mr_notes/stores';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import { apolloProvider } from '~/graphql_shared/issuable_client';
@@ -14,11 +15,23 @@ import getStateQuery from './queries/get_state.query.graphql';
 
 Vue.use(VueApollo);
 
+const tabData = Vue.observable({
+  tabs: [],
+});
+
 export function initMrPage() {
   initMrNotes();
   initShow(store);
   initMrMoreDropdown();
   startCodeReviewMessaging({ signalBus: diffsEventHub });
+
+  const changesCountBadge = document.querySelector('.js-changes-tab-count');
+  diffsEventHub.$on(EVT_MR_DIFF_GENERATED, (mergeRequestDiffGenerated) => {
+    const { fileCount } = mergeRequestDiffGenerated.diffStatsSummary;
+
+    changesCountBadge.textContent = fileCount;
+    Vue.set(tabData.tabs[tabData.tabs.length - 1], 3, fileCount);
+  });
 }
 
 requestIdleCallback(() => {
@@ -38,6 +51,8 @@ requestIdleCallback(() => {
       blocksMerge,
     } = JSON.parse(data);
 
+    tabData.tabs = tabs;
+
     // eslint-disable-next-line no-new
     new Vue({
       el,
@@ -48,13 +63,16 @@ requestIdleCallback(() => {
         iid,
         projectPath,
         title,
-        tabs,
         isFluidLayout: parseBoolean(isFluidLayout),
         blocksMerge: parseBoolean(blocksMerge),
         sourceProjectPath,
       },
       render(h) {
-        return h(StickyHeader);
+        return h(StickyHeader, {
+          props: {
+            tabs: tabData.tabs,
+          },
+        });
       },
     });
   }