Fix showing 'NaN files' when a MR diff does not have any changes

This change fixes showing 'NaN files' when a MR diff does
not have any changes

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

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import { n__ } from '~/locale';
+import { isNumber } from 'underscore';
 
 export default {
   components: { Icon },
@@ -16,7 +17,7 @@ export default {
     diffFilesLength: {
       type: Number,
       required: false,
-      default: null,
+      default: 0,
     },
   },
   computed: {
@@ -26,6 +27,9 @@ export default {
     isCompareVersionsHeader() {
       return Boolean(this.diffFilesLength);
     },
+    hasDiffFiles() {
+      return isNumber(this.diffFilesLength) && this.diffFilesLength >= 0;
+    },
   },
 };
 </script>
@@ -38,7 +42,7 @@ export default {
       'd-inline-flex': !isCompareVersionsHeader,
     }"
   >
-    <div v-if="diffFilesLength !== null" class="diff-stats-group">
+    <div v-if="hasDiffFiles" class="diff-stats-group">
       <icon name="doc-code" class="diff-stats-icon text-secondary" />
       <strong>{{ diffFilesLength }} {{ filesText }}</strong>
     </div>

changelogs/unreleased/fix-nan-no-diff.yml

+---
+title: Fix showing 'NaN files' when a MR diff does not have any changes
+merge_request: 24002
+author:
+type: fixed

spec/frontend/diffs/components/diff_stats_spec.js

@@ -3,11 +3,12 @@ import Icon from '~/vue_shared/components/icon.vue';
 import DiffStats from '~/diffs/components/diff_stats.vue';
 
 describe('diff_stats', () => {
-  it('does not render a group if diffFileLengths is not passed in', () => {
+  it('does not render a group if diffFileLengths is not a number', () => {
     const wrapper = shallowMount(DiffStats, {
       propsData: {
         addedLines: 1,
         removedLines: 2,
+        diffFilesLength: Number.NaN,
       },
     });
     const groups = wrapper.findAll('.diff-stats-group');