1 files changed, 19 insertions, 11 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index 6dc2f5d3f68..cb92093db32 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -1,7 +1,8 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
-import EmptyFileViewer from '~/vue_shared/components/diff_viewer/viewers/empty_file.vue';
+import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue';
+import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
 import NoteForm from '../../notes/components/note_form.vue';
@@ -9,6 +10,7 @@ import ImageDiffOverlay from './image_diff_overlay.vue';
 import DiffDiscussions from './diff_discussions.vue';
 import { IMAGE_DIFF_POSITION_TYPE } from '../constants';
 import { getDiffMode } from '../store/utils';
+import { diffViewerModes } from '~/ide/constants';
 
 export default {
   components: {
@@ -18,7 +20,8 @@ export default {
     NoteForm,
     DiffDiscussions,
     ImageDiffOverlay,
-    EmptyFileViewer,
+    NotDiffableViewer,
+    NoPreviewViewer,
   },
   props: {
     diffFile: {
@@ -42,11 +45,17 @@ export default {
     diffMode() {
       return getDiffMode(this.diffFile);
     },
+    diffViewerMode() {
+      return this.diffFile.viewer.name;
+    },
     isTextFile() {
-      return this.diffFile.viewer.name === 'text';
+      return this.diffViewerMode === diffViewerModes.text;
+    },
+    noPreview() {
+      return this.diffViewerMode === diffViewerModes.no_preview;
     },
-    errorMessage() {
-      return this.diffFile.viewer.error;
+    notDiffable() {
+      return this.diffViewerMode === diffViewerModes.not_diffable;
     },
     diffFileCommentForm() {
       return this.getCommentFormForDiffFile(this.diffFile.file_hash);
@@ -78,11 +87,10 @@ export default {
 
 <template>
   <div class="diff-content">
-    <div v-if="!errorMessage" class="diff-viewer">
+    <div class="diff-viewer">
       <template v-if="isTextFile">
-        <empty-file-viewer v-if="diffFile.empty" />
         <inline-diff-view
-          v-else-if="isInlineView"
+          v-if="isInlineView"
           :diff-file="diffFile"
           :diff-lines="diffFile.highlighted_diff_lines || []"
           :help-page-path="helpPagePath"
@@ -94,9 +102,12 @@ export default {
           :help-page-path="helpPagePath"
         />
       </template>
+      <not-diffable-viewer v-else-if="notDiffable" />
+      <no-preview-viewer v-else-if="noPreview" />
       <diff-viewer
         v-else
         :diff-mode="diffMode"
+        :diff-viewer-mode="diffViewerMode"
         :new-path="diffFile.new_path"
         :new-sha="diffFile.diff_refs.head_sha"
         :old-path="diffFile.old_path"
@@ -132,8 +143,5 @@ export default {
         </div>
       </diff-viewer>
     </div>
-    <div v-else class="diff-viewer">
-      <div class="nothing-here-block" v-html="errorMessage"></div>
-    </div>
   </div>
 </template>