Add commit diff stats

Added diff stats to the commit view

Changelog: added

app/assets/javascripts/pages/projects/commit/show/index.js

 /* eslint-disable no-new */
 import $ from 'jquery';
+import Vue from 'vue';
 import loadAwardsHandler from '~/awards_handler';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import Diff from '~/diff';
@@ -14,6 +15,7 @@ import { initCommitBoxInfo } from '~/projects/commit_box/info';
 import syntaxHighlight from '~/syntax_highlight';
 import ZenMode from '~/zen_mode';
 import '~/sourcegraph/load';
+import DiffStats from '~/diffs/components/diff_stats.vue';
 
 const hasPerfBar = document.querySelector('.with-performance-bar');
 const performanceHeight = hasPerfBar ? 35 : 0;
@@ -26,6 +28,7 @@ initCommitBoxInfo();
 initDeprecatedNotes();
 
 const filesContainer = $('.js-diffs-batch');
+const diffStatsElements = document.querySelectorAll('#js-diff-stats');
 
 if (filesContainer.length) {
   const batchPath = filesContainer.data('diffFilesPath');
@@ -44,5 +47,29 @@ if (filesContainer.length) {
 } else {
   new Diff();
 }
+
+if (diffStatsElements.length) {
+  diffStatsElements.forEach((diffStatsEl) => {
+    const { addedLines, removedLines, oldSize, newSize, viewerName } = diffStatsEl.dataset;
+
+    new Vue({
+      el: diffStatsEl,
+      render(createElement) {
+        return createElement(DiffStats, {
+          props: {
+            diffFile: {
+              old_size: oldSize,
+              new_size: newSize,
+              viewer: { name: viewerName },
+            },
+            addedLines: Number(addedLines),
+            removedLines: Number(removedLines),
+          },
+        });
+      },
+    });
+  });
+}
+
 loadAwardsHandler();
 initCommitActions();

app/helpers/diff_helper.rb

@@ -179,6 +179,18 @@ module DiffHelper
     }
   end
 
+  def diff_file_stats_data(diff_file)
+    old_blob = diff_file.old_blob
+    new_blob = diff_file.new_blob
+    {
+      old_size: old_blob&.size,
+      new_size: new_blob&.size,
+      added_lines: diff_file.added_lines,
+      removed_lines: diff_file.removed_lines,
+      viewer_name: diff_file.viewer.partial_name
+    }
+  end
+
   def editable_diff?(diff_file)
     !diff_file.deleted_file? && @merge_request && @merge_request.source_project
   end

app/views/projects/diffs/_file.html.haml

@@ -15,6 +15,7 @@
 
     - unless diff_file.submodule?
       .file-actions.gl-display-none.gl-sm-display-flex
+        #js-diff-stats{ data: diff_file_stats_data(diff_file) }
         - if diff_file.blob&.readable_text?
           %span.has-tooltip{ title: _("Toggle comments for this file") }
             = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected', disabled: @diff_notes_disabled do

spec/features/commit_spec.rb

@@ -33,6 +33,10 @@ RSpec.describe 'Commit' do
       it "reports the correct number of total changes" do
         expect(page).to have_content("Changes #{commit.diffs.size}")
       end
+
+      it 'renders diff stats', :js do
+        expect(page).to have_selector(".diff-stats")
+      end
     end
 
     describe "pagination" do