Fix diff files not rendering

Fixes some diff files not rendering when the renderIt
property is updated.
Previously it was using a local copy of renderIt which meant
Vue wouldn't update it when the files renderIt property was updates

4 files changed, 15 insertions, 8 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 347a35b9c54..1141a197c6a 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -35,7 +35,6 @@ export default {
       isLoadingCollapsedDiff: false,
       forkMessageVisible: false,
       isCollapsed: this.file.viewer.collapsed || false,
-      renderIt: this.file.renderIt,
     };
   },
   computed: {
@@ -53,7 +52,7 @@ export default {
       );
     },
     showLoadingIcon() {
-      return this.isLoadingCollapsedDiff || (!this.renderIt && !this.isCollapsed);
+      return this.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
     },
     hasDiffLines() {
       return (
@@ -80,13 +79,13 @@ export default {
     eventHub.$on(`loadCollapsedDiff/${this.file.file_hash}`, this.handleLoadCollapsedDiff);
   },
   methods: {
-    ...mapActions('diffs', ['loadCollapsedDiff', 'assignDiscussionsToDiff']),
+    ...mapActions('diffs', ['loadCollapsedDiff', 'assignDiscussionsToDiff', 'setRenderIt']),
     handleToggle() {
       if (!this.hasDiffLines) {
         this.handleLoadCollapsedDiff();
       } else {
         this.isCollapsed = !this.isCollapsed;
-        this.renderIt = true;
+        this.setRenderIt(this.file);
       }
     },
     handleLoadCollapsedDiff() {
@@ -96,7 +95,7 @@ export default {
         .then(() => {
           this.isLoadingCollapsedDiff = false;
           this.isCollapsed = false;
-          this.renderIt = true;
+          this.setRenderIt(this.file);
         })
         .then(() => {
           requestIdleCallback(
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index c37a5c3a45f..82ff2e3be76 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -131,6 +131,8 @@ export const startRenderDiffsQueue = ({ state, commit }) => {
   return checkItem();
 };
 
+export const setRenderIt = ({ commit }, file) => commit(types.RENDER_FILE, file);
+
 export const setInlineDiffViewType = ({ commit }) => {
   commit(types.SET_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE);
 
diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index d16bc21022f..65a1c9b8f15 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -28,8 +28,7 @@ describe('DiffFile', () => {
       expect(el.querySelector('.file-title-name').innerText.indexOf(file_path)).toBeGreaterThan(-1);
       expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
 
-      expect(vm.renderIt).toEqual(false);
-      vm.renderIt = true;
+      vm.file.renderIt = true;
 
       vm.$nextTick(() => {
         expect(el.querySelectorAll('.line_content').length).toBeGreaterThan(5);
@@ -41,7 +40,7 @@ describe('DiffFile', () => {
         expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(1);
         expect(vm.isCollapsed).toEqual(false);
         vm.isCollapsed = true;
-        vm.renderIt = true;
+        vm.file.renderIt = true;
 
         vm.$nextTick(() => {
           expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(0);
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index 7caa37f45b9..acff80bca62 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -29,6 +29,7 @@ import actions, {
   renderFileForDiscussionId,
   setRenderTreeList,
   setShowWhitespace,
+  setRenderIt,
 } from '~/diffs/store/actions';
 import eventHub from '~/notes/event_hub';
 import * as types from '~/diffs/store/mutation_types';
@@ -855,4 +856,10 @@ describe('DiffsStoreActions', () => {
       expect(window.history.pushState).toHaveBeenCalled();
     });
   });
+
+  describe('setRenderIt', () => {
+    it('commits RENDER_FILE', done => {
+      testAction(setRenderIt, 'file', {}, [{ type: types.RENDER_FILE, payload: 'file' }], [], done);
+    });
+  });
 });