1 files changed, 33 insertions, 34 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 449f7007077..347a35b9c54 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -7,6 +7,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../../notes/event_hub';
 import DiffFileHeader from './diff_file_header.vue';
 import DiffContent from './diff_content.vue';
+import { diffViewerErrors } from '~/ide/constants';
 
 export default {
   components: {
@@ -33,15 +34,14 @@ export default {
     return {
       isLoadingCollapsedDiff: false,
       forkMessageVisible: false,
+      isCollapsed: this.file.viewer.collapsed || false,
+      renderIt: this.file.renderIt,
     };
   },
   computed: {
     ...mapState('diffs', ['currentDiffFileId']),
     ...mapGetters(['isNotesFetched']),
     ...mapGetters('diffs', ['getDiffFileDiscussions']),
-    isCollapsed() {
-      return this.file.collapsed || false;
-    },
     viewBlobLink() {
       return sprintf(
         __('You can %{linkStart}view the blob%{linkEnd} instead.'),
@@ -52,19 +52,8 @@ export default {
         false,
       );
     },
-    showExpandMessage() {
-      return (
-        this.isCollapsed ||
-        (!this.file.highlighted_diff_lines &&
-          !this.isLoadingCollapsedDiff &&
-          !this.file.too_large &&
-          this.file.text &&
-          !this.file.renamed_file &&
-          !this.file.mode_changed)
-      );
-    },
     showLoadingIcon() {
-      return this.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
+      return this.isLoadingCollapsedDiff || (!this.renderIt && !this.isCollapsed);
     },
     hasDiffLines() {
       return (
@@ -73,9 +62,15 @@ export default {
         this.file.parallel_diff_lines.length > 0
       );
     },
+    isFileTooLarge() {
+      return this.file.viewer.error === diffViewerErrors.too_large;
+    },
+    errorMessage() {
+      return this.file.viewer.error_message;
+    },
   },
   watch: {
-    'file.collapsed': function fileCollapsedWatch(newVal, oldVal) {
+    isCollapsed: function fileCollapsedWatch(newVal, oldVal) {
       if (!newVal && oldVal && !this.hasDiffLines) {
         this.handleLoadCollapsedDiff();
       }
@@ -90,8 +85,8 @@ export default {
       if (!this.hasDiffLines) {
         this.handleLoadCollapsedDiff();
       } else {
-        this.file.collapsed = !this.file.collapsed;
-        this.file.renderIt = true;
+        this.isCollapsed = !this.isCollapsed;
+        this.renderIt = true;
       }
     },
     handleLoadCollapsedDiff() {
@@ -100,8 +95,8 @@ export default {
       this.loadCollapsedDiff(this.file)
         .then(() => {
           this.isLoadingCollapsedDiff = false;
-          this.file.collapsed = false;
-          this.file.renderIt = true;
+          this.isCollapsed = false;
+          this.renderIt = true;
         })
         .then(() => {
           requestIdleCallback(
@@ -164,21 +159,25 @@ export default {
         Cancel
       </button>
     </div>
-
-    <diff-content
-      v-if="!isCollapsed && file.renderIt"
-      :class="{ hidden: isCollapsed || file.too_large }"
-      :diff-file="file"
-      :help-page-path="helpPagePath"
-    />
     <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
-    <div v-else-if="showExpandMessage" class="nothing-here-block diff-collapsed">
-      {{ __('This diff is collapsed.') }}
-      <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
-        __('Click to expand it.')
-      }}</a>
-    </div>
-    <div v-if="file.too_large" class="nothing-here-block diff-collapsed js-too-large-diff">
+    <template v-else>
+      <div v-if="errorMessage" class="diff-viewer">
+        <div class="nothing-here-block" v-html="errorMessage"></div>
+      </div>
+      <div v-else-if="isCollapsed" class="nothing-here-block diff-collapsed">
+        {{ __('This diff is collapsed.') }}
+        <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
+          __('Click to expand it.')
+        }}</a>
+      </div>
+      <diff-content
+        v-else
+        :class="{ hidden: isCollapsed || isFileTooLarge }"
+        :diff-file="file"
+        :help-page-path="helpPagePath"
+      />
+    </template>
+    <div v-if="isFileTooLarge" class="nothing-here-block diff-collapsed js-too-large-diff">
       {{ __('This source diff could not be displayed because it is too large.') }}
       <span v-html="viewBlobLink"></span>
     </div>