Add option to expand diff to full file

The user can also toggle between the diff changes and
the full file diff.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/19054

1 files changed, 30 insertions, 6 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 4d33ad23f39..a5125c3d077 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -5,7 +5,7 @@ import { polyfillSticky } from '~/lib/utils/sticky';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
 import { diffViewerModes } from '~/ide/constants';
@@ -14,6 +14,9 @@ import DiffStats from './diff_stats.vue';
 
 export default {
   components: {
+    GlTooltip,
+    GlLoadingIcon,
+    GlButton,
     ClipboardButton,
     EditButton,
     Icon,
@@ -125,12 +128,15 @@ export default {
     isModeChanged() {
       return this.diffFile.viewer.name === diffViewerModes.mode_changed;
     },
+    showExpandDiffToFullFileEnabled() {
+      return gon.features.expandDiffFullFile && !this.diffFile.is_fully_expanded;
+    },
   },
   mounted() {
     polyfillSticky(this.$refs.header);
   },
   methods: {
-    ...mapActions('diffs', ['toggleFileDiscussions']),
+    ...mapActions('diffs', ['toggleFileDiscussions', 'toggleFullDiff']),
     handleToggleFile(e, checkTarget) {
       if (
         !checkTarget ||
@@ -240,12 +246,30 @@ export default {
         v-html="viewReplacedFileButtonText"
       >
       </a>
-      <a
+      <gl-tooltip :target="() => $refs.viewButton" placement="bottom">
+        <span v-html="viewFileButtonText"></span>
+      </gl-tooltip>
+      <gl-button
+        ref="viewButton"
         :href="diffFile.view_path"
-        class="btn view-file js-view-file-button"
-        v-html="viewFileButtonText"
+        target="blank"
+        class="view-file js-view-file-button"
       >
-      </a>
+        <icon name="external-link" />
+      </gl-button>
+      <gl-button
+        v-if="showExpandDiffToFullFileEnabled"
+        class="expand-file js-expand-file"
+        @click="toggleFullDiff(diffFile.file_path)"
+      >
+        <template v-if="diffFile.isShowingFullFile">
+          {{ s__('MRDiff|Show changes only') }}
+        </template>
+        <template v-else>
+          {{ s__('MRDiff|Show full file') }}
+        </template>
+        <gl-loading-icon v-if="diffFile.isLoadingFullFile" inline />
+      </gl-button>
 
       <a
         v-if="diffFile.external_url"