Clearly display diff statistics for MRs

Put the statistics in the compare-versions header for the entire MR
Put them in the file header for each individual file

7 files changed, 102 insertions, 21 deletions

diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 3ef54752436..0bf2dde8b96 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -6,6 +6,7 @@ import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
 import CompareVersionsDropdown from './compare_versions_dropdown.vue';
 import SettingsDropdown from './settings_dropdown.vue';
+import DiffStats from './diff_stats.vue';
 
 export default {
   components: {
@@ -14,6 +15,7 @@ export default {
     GlLink,
     GlButton,
     SettingsDropdown,
+    DiffStats,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,8 +37,15 @@ export default {
     },
   },
   computed: {
-    ...mapState('diffs', ['commit', 'showTreeList', 'startVersion', 'latestVersionPath']),
-    ...mapGetters('diffs', ['hasCollapsedFile']),
+    ...mapGetters('diffs', ['hasCollapsedFile', 'diffFilesLength']),
+    ...mapState('diffs', [
+      'commit',
+      'showTreeList',
+      'startVersion',
+      'latestVersionPath',
+      'addedLines',
+      'removedLines',
+    ]),
     comparableDiffs() {
       return this.mergeRequestDiffs.slice(1);
     },
@@ -104,6 +113,11 @@ export default {
         <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
       </div>
       <div class="inline-parallel-buttons d-none d-md-flex ml-auto">
+        <diff-stats
+          :diff-files-length="diffFilesLength"
+          :added-lines="addedLines"
+          :removed-lines="removedLines"
+        />
         <gl-button
           v-if="commit || startVersion"
           :href="latestVersionPath"
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index b58f704bebb..60586d4a607 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -9,6 +9,7 @@ import { GlTooltipDirective } from '@gitlab/ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
 import EditButton from './edit_button.vue';
+import DiffStats from './diff_stats.vue';
 
 export default {
   components: {
@@ -16,6 +17,7 @@ export default {
     EditButton,
     Icon,
     FileIcon,
+    DiffStats,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -202,6 +204,7 @@ export default {
       v-if="!diffFile.submodule && addMergeRequestButtons"
       class="file-actions d-none d-sm-block"
     >
+      <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
       <template v-if="diffFile.blob && diffFile.blob.readable_text">
         <button
           :disabled="!diffHasDiscussions(diffFile)"
diff --git a/app/assets/javascripts/diffs/components/diff_stats.vue b/app/assets/javascripts/diffs/components/diff_stats.vue
new file mode 100644
index 00000000000..2e5855380af
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_stats.vue
@@ -0,0 +1,52 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import { n__ } from '~/locale';
+
+export default {
+  components: { Icon },
+  props: {
+    addedLines: {
+      type: Number,
+      required: true,
+    },
+    removedLines: {
+      type: Number,
+      required: true,
+    },
+    diffFilesLength: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    filesText() {
+      return n__('File', 'Files', this.diffFilesLength);
+    },
+    isCompareVersionsHeader() {
+      return Boolean(this.diffFilesLength);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="diff-stats"
+    :class="{
+      'is-compare-versions-header d-none d-lg-inline-flex': isCompareVersionsHeader,
+      'd-inline-flex': !isCompareVersionsHeader,
+    }"
+  >
+    <div v-if="diffFilesLength !== null" class="diff-stats-group">
+      <icon name="doc-code" class="diff-stats-icon text-secondary" />
+      <strong>{{ diffFilesLength }} {{ filesText }}</strong>
+    </div>
+    <div class="diff-stats-group cgreen">
+      <icon name="file-addition" class="diff-stats-icon" /> <strong>{{ addedLines }}</strong>
+    </div>
+    <div class="diff-stats-group cred">
+      <icon name="file-deletion" class="diff-stats-icon" /> <strong>{{ removedLines }}</strong>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 0b3def3d29d..5918527266f 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -19,8 +19,8 @@ export default {
     };
   },
   computed: {
-    ...mapState('diffs', ['tree', 'addedLines', 'removedLines', 'renderTreeList']),
-    ...mapGetters('diffs', ['allBlobs', 'diffFilesLength']),
+    ...mapState('diffs', ['tree', 'renderTreeList']),
+    ...mapGetters('diffs', ['allBlobs']),
     filteredTreeList() {
       const search = this.search.toLowerCase().trim();
 
@@ -90,13 +90,6 @@ export default {
         {{ s__('MergeRequest|No files found') }}
       </p>
     </div>
-    <div v-once class="pt-3 pb-3 text-center">
-      {{ n__('%d changed file', '%d changed files', diffFilesLength) }}
-      <div>
-        <span class="cgreen"> {{ n__('%d addition', '%d additions', addedLines) }} </span>
-        <span class="cred"> {{ n__('%d deleted', '%d deletions', removedLines) }} </span>
-      </div>
-    </div>
   </div>
 </template>
 
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 05b4c552f6e..0e3c668fff6 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -11,6 +11,8 @@ const storedTreeShow = localStorage.getItem(MR_TREE_SHOW_KEY);
 
 export default () => ({
   isLoading: true,
+  addedLines: null,
+  removedLines: null,
   endpoint: '',
   basePath: '',
   commit: null,
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 037a5adfb7e..d59bfecd059 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -51,6 +51,7 @@
       position: absolute;
       top: 5px;
       right: 15px;
+      margin-left: auto;
 
       .btn {
         padding: 0 10px;
@@ -324,6 +325,7 @@ span.idiff {
   &,
   .file-holder & {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     background-color: $gray-light;
@@ -365,16 +367,12 @@ span.idiff {
     margin: 0 10px 0 0;
   }
 
-  .file-actions {
-    white-space: nowrap;
-
-    .btn {
-      padding: 0 10px;
-      font-size: 13px;
-      line-height: 28px;
-      display: inline-block;
-      float: none;
-    }
+  .file-actions .btn {
+    padding: 0 10px;
+    font-size: 13px;
+    line-height: 28px;
+    display: inline-block;
+    float: none;
   }
 
   @include media-breakpoint-down(xs) {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 02aac58a475..39793337971 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -501,6 +501,25 @@
   }
 }
 
+.diff-stats {
+  align-items: center;
+  padding: 0 .25rem;
+
+  .diff-stats-group {
+    padding: 0 .25rem;
+  }
+
+  svg.diff-stats-icon {
+    vertical-align: text-bottom;
+  }
+
+  &.is-compare-versions-header {
+    .diff-stats-group {
+      padding: 0 .5rem;
+    }
+  }
+}
+
 .file-content .diff-file {
   margin: 0;
   border: 0;