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

2 files changed, 6 insertions, 5 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 feda882e826..871279d10de 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -130,6 +130,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);