Display files in tab counter same as diff stats

Ensure the number of files displayed in the
 tab counter is the same the diff stats.

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/33849

app/assets/javascripts/diffs/components/app.vue

@@ -405,7 +405,7 @@ export default {
       <compare-versions
         :merge-request-diffs="mergeRequestDiffs"
         :is-limited-container="isLimitedContainer"
-        :diff-files-length="diffFilesLength"
+        :diff-files-count-text="numTotalFiles"
       />
 
       <hidden-files-warning

app/assets/javascripts/diffs/components/compare_versions.vue

@@ -32,9 +32,10 @@ export default {
       required: false,
       default: false,
     },
-    diffFilesLength: {
-      type: Number,
-      required: true,
+    diffFilesCountText: {
+      type: String,
+      required: false,
+      default: null,
     },
   },
   computed: {
@@ -119,7 +120,7 @@ export default {
       </div>
       <div class="inline-parallel-buttons d-none d-md-flex ml-auto">
         <diff-stats
-          :diff-files-length="diffFilesLength"
+          :diff-files-count-text="diffFilesCountText"
           :added-lines="addedLines"
           :removed-lines="removedLines"
         />

app/assets/javascripts/diffs/components/diff_stats.vue

@@ -14,18 +14,21 @@ export default {
       type: Number,
       required: true,
     },
-    diffFilesLength: {
-      type: Number,
+    diffFilesCountText: {
+      type: String,
       required: false,
       default: null,
     },
   },
   computed: {
+    diffFilesLength() {
+      return parseInt(this.diffFilesCountText, 10);
+    },
     filesText() {
       return n__('file', 'files', this.diffFilesLength);
     },
     isCompareVersionsHeader() {
-      return Boolean(this.diffFilesLength);
+      return Boolean(this.diffFilesCountText);
     },
     hasDiffFiles() {
       return isNumber(this.diffFilesLength) && this.diffFilesLength >= 0;
@@ -44,7 +47,7 @@ export default {
   >
     <div v-if="hasDiffFiles" class="diff-stats-group">
       <icon name="doc-code" class="diff-stats-icon text-secondary" />
-      <span class="text-secondary bold">{{ diffFilesLength }} {{ filesText }}</span>
+      <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span>
     </div>
     <div
       class="diff-stats-group cgreen d-flex align-items-center"

changelogs/unreleased/33849-match-number-of-files-in-tab-counter-and-diff-stats.yml

+---
+title: Display files in tab counter same as diff stats
+merge_request: 37390
+author:
+type: fixed

spec/frontend/diffs/components/compare_versions_spec.js

@@ -30,7 +30,7 @@ describe('CompareVersions', () => {
       store,
       propsData: {
         mergeRequestDiffs: diffsMockData,
-        diffFilesLength: 0,
+        diffFilesCountText: null,
         ...props,
       },
     });

spec/frontend/diffs/components/diff_stats_spec.js

@@ -4,7 +4,8 @@ import Icon from '~/vue_shared/components/icon.vue';
 
 const TEST_ADDED_LINES = 100;
 const TEST_REMOVED_LINES = 200;
-const DIFF_FILES_LENGTH = 300;
+const DIFF_FILES_COUNT = '300';
+const DIFF_FILES_COUNT_TRUNCATED = '300+';
 
 describe('diff_stats', () => {
   let wrapper;
@@ -22,45 +23,76 @@ describe('diff_stats', () => {
   describe('diff stats group', () => {
     const findDiffStatsGroup = () => wrapper.findAll('.diff-stats-group');
 
-    it('is not rendered if diffFileLengths is empty', () => {
+    it('is not rendered if diffFilesCountText is empty', () => {
       createComponent();
 
       expect(findDiffStatsGroup().length).toBe(2);
     });
 
-    it('is not rendered if diffFileLengths is not a number', () => {
+    it('is not rendered if diffFilesCountText is not a number', () => {
       createComponent({
-        diffFilesLength: Number.NaN,
+        diffFilesCountText: null,
       });
 
       expect(findDiffStatsGroup().length).toBe(2);
     });
   });
 
-  describe('amount displayed', () => {
-    beforeEach(() => {
-      createComponent({
-        diffFilesLength: DIFF_FILES_LENGTH,
+  describe('line changes', () => {
+    const findFileLine = name => wrapper.find(name);
+
+    it('shows the amount of lines added', () => {
+      expect(findFileLine('.js-file-addition-line').text()).toBe(TEST_ADDED_LINES.toString());
+    });
+
+    it('shows the amount of lines removed', () => {
+      expect(findFileLine('.js-file-deletion-line').text()).toBe(TEST_REMOVED_LINES.toString());
     });
   });
 
-    const findFileLine = name => wrapper.find(name);
+  describe('files changes', () => {
     const findIcon = name =>
       wrapper
         .findAll(Icon)
         .filter(c => c.attributes('name') === name)
         .at(0).element.parentNode;
 
-    it('shows the amount of lines added', () => {
-      expect(findFileLine('.js-file-addition-line').text()).toBe(TEST_ADDED_LINES.toString());
+    it('shows amount of file changed with plural "files" when 0 files has changed', () => {
+      const oneFileChanged = '0';
+
+      createComponent({
+        diffFilesCountText: oneFileChanged,
       });
 
-    it('shows the amount of lines removed', () => {
-      expect(findFileLine('.js-file-deletion-line').text()).toBe(TEST_REMOVED_LINES.toString());
+      expect(findIcon('doc-code').textContent.trim()).toBe(`${oneFileChanged} files`);
+    });
+
+    it('shows amount of file changed with singular "file" when 1 file is changed', () => {
+      const oneFileChanged = '1';
+
+      createComponent({
+        diffFilesCountText: oneFileChanged,
+      });
+
+      expect(findIcon('doc-code').textContent.trim()).toBe(`${oneFileChanged} file`);
+    });
+
+    it('shows amount of files change with plural "files" when multiple files are changed', () => {
+      createComponent({
+        diffFilesCountText: DIFF_FILES_COUNT,
+      });
+
+      expect(findIcon('doc-code').textContent.trim()).toContain(`${DIFF_FILES_COUNT} files`);
+    });
+
+    it('shows amount of files change with plural "files" when files changed is truncated', () => {
+      createComponent({
+        diffFilesCountText: DIFF_FILES_COUNT_TRUNCATED,
       });
 
-    it('shows the amount of files changed', () => {
-      expect(findIcon('doc-code').textContent).toContain(DIFF_FILES_LENGTH);
+      expect(findIcon('doc-code').textContent.trim()).toContain(
+        `${DIFF_FILES_COUNT_TRUNCATED} files`,
+      );
     });
   });
 });