Added Diff Viewer to new VUE based MR page

1 files changed, 35 insertions, 11 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index adcd22f7876..48ba967285f 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -1,5 +1,7 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import { diffModes } from '~/ide/constants';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
 
@@ -7,6 +9,7 @@ export default {
   components: {
     InlineDiffView,
     ParallelDiffView,
+    DiffViewer,
   },
   props: {
     diffFile: {
@@ -15,7 +18,18 @@ export default {
     },
   },
   computed: {
+    ...mapState({
+      projectPath: state => state.diffs.projectPath,
+      endpoint: state => state.diffs.endpoint,
+    }),
     ...mapGetters(['isInlineView', 'isParallelView']),
+    diffMode() {
+      const diffModeKey = Object.keys(diffModes).find(key => this.diffFile[`${key}File`]);
+      return diffModes[diffModeKey] || diffModes.replaced;
+    },
+    isTextFile() {
+      return this.diffFile.text;
+    },
   },
 };
 </script>
@@ -23,16 +37,26 @@ export default {
 <template>
   <div class="diff-content">
     <div class="diff-viewer">
-      <inline-diff-view
-        v-if="isInlineView"
-        :diff-file="diffFile"
-        :diff-lines="diffFile.highlightedDiffLines || []"
-      />
-      <parallel-diff-view
-        v-if="isParallelView"
-        :diff-file="diffFile"
-        :diff-lines="diffFile.parallelDiffLines || []"
-      />
+      <template v-if="isTextFile">
+        <inline-diff-view
+          v-if="isInlineView"
+          :diff-file="diffFile"
+          :diff-lines="diffFile.highlightedDiffLines || []"
+        />
+        <parallel-diff-view
+          v-else-if="isParallelView"
+          :diff-file="diffFile"
+          :diff-lines="diffFile.parallelDiffLines || []"
+        />
+      </template>
+      <diff-viewer
+        v-else
+        :diff-mode="diffMode"
+        :new-path="diffFile.newPath"
+        :new-sha="diffFile.diffRefs.headSha"
+        :old-path="diffFile.oldPath"
+        :old-sha="diffFile.diffRefs.baseSha"
+        :project-path="projectPath"/>
     </div>
   </div>
 </template>