Show bytes diff for stats on non-diffable files, if provided

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

@@ -2,10 +2,16 @@
 import { GlIcon } from '@gitlab/ui';
 import { isNumber } from 'lodash';
 import { n__ } from '~/locale';
+import { isNotDiffable, stats } from '../utils/diff_file';
 
 export default {
   components: { GlIcon },
   props: {
+    diffFile: {
+      type: Object,
+      required: false,
+      default: () => null,
+    },
     addedLines: {
       type: Number,
       required: true,
@@ -33,6 +39,12 @@ export default {
     hasDiffFiles() {
       return isNumber(this.diffFilesLength) && this.diffFilesLength >= 0;
     },
+    notDiffable() {
+      return isNotDiffable(this.diffFile);
+    },
+    fileStats() {
+      return stats(this.diffFile);
+    },
   },
 };
 </script>
@@ -45,23 +57,28 @@ export default {
       'd-none d-sm-inline-flex': !isCompareVersionsHeader,
     }"
   >
-    <div v-if="hasDiffFiles" class="diff-stats-group">
-      <gl-icon name="doc-code" class="diff-stats-icon text-secondary" />
-      <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span>
-    </div>
-    <div
-      class="diff-stats-group cgreen d-flex align-items-center"
-      :class="{ bold: isCompareVersionsHeader }"
-    >
-      <span>+</span>
-      <span class="js-file-addition-line">{{ addedLines }}</span>
+    <div v-if="notDiffable" :class="fileStats.classes">
+      {{ fileStats.text }}
     </div>
-    <div
-      class="diff-stats-group cred d-flex align-items-center"
-      :class="{ bold: isCompareVersionsHeader }"
-    >
-      <span>-</span>
-      <span class="js-file-deletion-line">{{ removedLines }}</span>
+    <div v-else class="diff-stats-contents">
+      <div v-if="hasDiffFiles" class="diff-stats-group">
+        <gl-icon name="doc-code" class="diff-stats-icon text-secondary" />
+        <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span>
+      </div>
+      <div
+        class="diff-stats-group cgreen d-flex align-items-center"
+        :class="{ bold: isCompareVersionsHeader }"
+      >
+        <span>+</span>
+        <span class="js-file-addition-line">{{ addedLines }}</span>
+      </div>
+      <div
+        class="diff-stats-group cred d-flex align-items-center"
+        :class="{ bold: isCompareVersionsHeader }"
+      >
+        <span>-</span>
+        <span class="js-file-deletion-line">{{ removedLines }}</span>
+      </div>
     </div>
   </div>
 </template>

app/assets/stylesheets/framework/diffs.scss

@@ -646,6 +646,10 @@ table.code {
   align-items: center;
   padding: 0 1rem;
 
+  .diff-stats-contents {
+    display: contents;
+  }
+
   .diff-stats-group {
     padding: 0 0.25rem;
   }

spec/frontend/diffs/components/diff_stats_spec.js

 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DiffStats from '~/diffs/components/diff_stats.vue';
+import mockDiffFile from '../mock_data/diff_file';
 
 const TEST_ADDED_LINES = 100;
 const TEST_REMOVED_LINES = 200;
@@ -38,9 +39,37 @@ describe('diff_stats', () => {
     });
   });
 
+  describe('bytes changes', () => {
+    let file;
+    const getBytesContainer = () => wrapper.find('.diff-stats > div:first-child');
+
+    beforeEach(() => {
+      file = {
+        ...mockDiffFile,
+        viewer: {
+          ...mockDiffFile.viewer,
+          name: 'not_diffable',
+        },
+      };
+
+      createComponent({ diffFile: file });
+    });
+
+    it("renders the bytes changes instead of line changes when the file isn't diffable", () => {
+      const content = getBytesContainer();
+
+      expect(content.classes('cgreen')).toBe(true);
+      expect(content.text()).toBe('+1.00 KiB (+100%)');
+    });
+  });
+
   describe('line changes', () => {
     const findFileLine = (name) => wrapper.find(name);
 
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('shows the amount of lines added', () => {
       expect(findFileLine('.js-file-addition-line').text()).toBe(TEST_ADDED_LINES.toString());
     });