1 files changed, 26 insertions, 12 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index e76c7afd863..5da0bfb5bfe 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { __, sprintf } from '~/locale';
 import createFlash from '~/flash';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import DiffFileHeader from './diff_file_header.vue';
 import DiffContent from './diff_content.vue';
 
@@ -32,6 +32,7 @@ export default {
   computed: {
     ...mapState('diffs', ['currentDiffFileId']),
     ...mapGetters(['isNotesFetched']),
+    ...mapGetters('diffs', ['getDiffFileDiscussions']),
     isCollapsed() {
       return this.file.collapsed || false;
     },
@@ -39,7 +40,7 @@ export default {
       return sprintf(
         __('You can %{linkStart}view the blob%{linkEnd} instead.'),
         {
-          linkStart: `<a href="${_.escape(this.file.viewPath)}">`,
+          linkStart: `<a href="${_.escape(this.file.view_path)}">`,
           linkEnd: '</a>',
         },
         false,
@@ -48,21 +49,34 @@ export default {
     showExpandMessage() {
       return (
         this.isCollapsed ||
-        (!this.file.highlightedDiffLines &&
+        (!this.file.highlighted_diff_lines &&
           !this.isLoadingCollapsedDiff &&
-          !this.file.tooLarge &&
+          !this.file.too_large &&
           this.file.text)
       );
     },
     showLoadingIcon() {
       return this.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
     },
+    hasDiffLines() {
+      return (
+        this.file.highlighted_diff_lines &&
+        this.file.parallel_diff_lines &&
+        this.file.parallel_diff_lines.length > 0
+      );
+    },
+  },
+  watch: {
+    'file.collapsed': function fileCollapsedWatch(newVal, oldVal) {
+      if (!newVal && oldVal && !this.hasDiffLines) {
+        this.handleLoadCollapsedDiff();
+      }
+    },
   },
   methods: {
     ...mapActions('diffs', ['loadCollapsedDiff', 'assignDiscussionsToDiff']),
     handleToggle() {
-      const { highlightedDiffLines, parallelDiffLines } = this.file;
-      if (!highlightedDiffLines && parallelDiffLines !== undefined && !parallelDiffLines.length) {
+      if (!this.hasDiffLines) {
         this.handleLoadCollapsedDiff();
       } else {
         this.file.collapsed = !this.file.collapsed;
@@ -81,7 +95,7 @@ export default {
         .then(() => {
           requestIdleCallback(
             () => {
-              this.assignDiscussionsToDiff();
+              this.assignDiscussionsToDiff(this.getDiffFileDiscussions(this.file));
             },
             { timeout: 1000 },
           );
@@ -103,9 +117,9 @@ export default {
 
 <template>
   <div
-    :id="file.fileHash"
+    :id="file.file_hash"
     :class="{
-      'is-active': currentDiffFileId === file.fileHash
+      'is-active': currentDiffFileId === file.file_hash
     }"
     class="diff-file file-holder"
   >
@@ -129,7 +143,7 @@ export default {
         make your changes there, and submit a merge request.
       </span>
       <a
-        :href="file.forkPath"
+        :href="file.fork_path"
         class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
       >
         Fork
@@ -145,7 +159,7 @@ export default {
 
     <diff-content
       v-if="!isCollapsed && file.renderIt"
-      :class="{ hidden: isCollapsed || file.tooLarge }"
+      :class="{ hidden: isCollapsed || file.too_large }"
       :diff-file="file"
     />
     <gl-loading-icon
@@ -166,7 +180,7 @@ export default {
       </a>
     </div>
     <div
-      v-if="file.tooLarge"
+      v-if="file.too_large"
       class="nothing-here-block diff-collapsed js-too-large-diff"
     >
       {{ __('This source diff could not be displayed because it is too large.') }}