Merge branch 'tz-mr-new-datastructure' into 'master'

Vue MR Page - Data structure update

See merge request gitlab-org/gitlab-ce!21062

10 files changed, 411 insertions, 104 deletions

diff --git a/spec/features/merge_request/user_posts_diff_notes_spec.rb b/spec/features/merge_request/user_posts_diff_notes_spec.rb
index 77261f9375c..b6ed3686de2 100644
--- a/spec/features/merge_request/user_posts_diff_notes_spec.rb
+++ b/spec/features/merge_request/user_posts_diff_notes_spec.rb
@@ -186,11 +186,8 @@ describe 'Merge request > User posts diff notes', :js do
 
     describe 'posting a note' do
       it 'adds as discussion' do
-        expect(page).to have_css('.js-temp-notes-holder', count: 2)
-
         should_allow_commenting(find('[id="6eb14e00385d2fb284765eb1cd8d420d33d63fc9_22_22"]'), asset_form_reset: false)
         expect(page).to have_css('.notes_holder .note.note-discussion', count: 1)
-        expect(page).to have_css('.js-temp-notes-holder', count: 1)
         expect(page).to have_button('Reply...')
       end
     end
@@ -267,7 +264,7 @@ describe 'Merge request > User posts diff notes', :js do
   def assert_comment_persistence(line_holder, asset_form_reset:)
     notes_holder_saved = line_holder.find(:xpath, notes_holder_input_xpath)
 
-    expect(notes_holder_saved[:class]).not_to include(notes_holder_input_class)
+    expect(notes_holder_saved[:class]).not_to include('note-edit-form')
     expect(notes_holder_saved).to have_content test_note_comment
 
     assert_form_is_reset if asset_form_reset
@@ -281,6 +278,6 @@ describe 'Merge request > User posts diff notes', :js do
   end
 
   def assert_form_is_reset
-    expect(page).to have_no_css('.js-temp-notes-holder')
+    expect(page).to have_no_css('.note-edit-form')
   end
 end
diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index 44a38f7ca82..845fef23db6 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -51,7 +51,9 @@ describe('DiffFile', () => {
       });
 
       it('should have collapsed text and link', done => {
-        vm.file.collapsed = true;
+        vm.file.renderIt = true;
+        vm.file.collapsed = false;
+        vm.file.highlightedDiffLines = null;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).toContain('This diff is collapsed');
diff --git a/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js b/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
index a1a37b342b7..663c0680845 100644
--- a/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
@@ -6,61 +6,61 @@ import discussionsMockData from '../mock_data/diff_discussions';
 import diffFileMockData from '../mock_data/diff_file';
 
 describe('DiffLineGutterContent', () => {
-  const getDiscussionsMockData = () => [Object.assign({}, discussionsMockData)];
   const getDiffFileMock = () => Object.assign({}, diffFileMockData);
   const createComponent = (options = {}) => {
     const cmp = Vue.extend(DiffLineGutterContent);
     const props = Object.assign({}, options);
+    props.line = {
+      lineCode: 'LC_42',
+      type: 'new',
+      oldLine: null,
+      newLine: 1,
+      discussions: [],
+      text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+      richText: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+      metaData: null,
+    };
     props.fileHash = getDiffFileMock().fileHash;
     props.contextLinesPath = '/context/lines/path';
 
     return createComponentWithStore(cmp, store, props).$mount();
   };
-  const setDiscussions = component => {
-    component.$store.dispatch('setInitialNotes', getDiscussionsMockData());
-  };
-
-  const resetDiscussions = component => {
-    component.$store.dispatch('setInitialNotes', []);
-  };
 
   describe('computed', () => {
     describe('lineHref', () => {
       it('should prepend # to lineCode', () => {
         const lineCode = 'LC_42';
-        const component = createComponent({ lineCode });
+        const component = createComponent();
         expect(component.lineHref).toEqual(`#${lineCode}`);
       });
 
       it('should return # if there is no lineCode', () => {
-        const component = createComponent({ lineCode: null });
+        const component = createComponent();
+        component.line.lineCode = '';
         expect(component.lineHref).toEqual('#');
       });
     });
 
     describe('discussions, hasDiscussions, shouldShowAvatarsOnGutter', () => {
       it('should return empty array when there is no discussion', () => {
-        const component = createComponent({ lineCode: 'LC_42' });
-        expect(component.discussions).toEqual([]);
+        const component = createComponent();
         expect(component.hasDiscussions).toEqual(false);
         expect(component.shouldShowAvatarsOnGutter).toEqual(false);
       });
 
       it('should return discussions for the given lineCode', () => {
-        const { lineCode } = getDiffFileMock().highlightedDiffLines[1];
-        const component = createComponent({
-          lineCode,
+        const cmp = Vue.extend(DiffLineGutterContent);
+        const props = {
+          line: getDiffFileMock().highlightedDiffLines[1],
+          fileHash: getDiffFileMock().fileHash,
           showCommentButton: true,
-          discussions: getDiscussionsMockData(),
-        });
+          contextLinesPath: '/context/lines/path',
+        };
+        props.line.discussions = [Object.assign({}, discussionsMockData)];
+        const component = createComponentWithStore(cmp, store, props).$mount();
 
-        setDiscussions(component);
-
-        expect(component.discussions).toEqual(getDiscussionsMockData());
         expect(component.hasDiscussions).toEqual(true);
         expect(component.shouldShowAvatarsOnGutter).toEqual(true);
-
-        resetDiscussions(component);
       });
     });
   });
@@ -104,9 +104,7 @@ describe('DiffLineGutterContent', () => {
         lineCode: getDiffFileMock().highlightedDiffLines[1].lineCode,
       });
 
-      setDiscussions(component);
       expect(component.$el.querySelector('.diff-comment-avatar-holders')).toBeDefined();
-      resetDiscussions(component);
     });
   });
 });
diff --git a/spec/javascripts/diffs/components/parallel_diff_view_spec.js b/spec/javascripts/diffs/components/parallel_diff_view_spec.js
index 165e4b69b6c..091e01868d3 100644
--- a/spec/javascripts/diffs/components/parallel_diff_view_spec.js
+++ b/spec/javascripts/diffs/components/parallel_diff_view_spec.js
@@ -18,11 +18,11 @@ describe('ParallelDiffView', () => {
     }).$mount();
   });
 
-  describe('computed', () => {
-    describe('parallelDiffLines', () => {
+  describe('assigned', () => {
+    describe('diffLines', () => {
       it('should normalize lines for empty cells', () => {
-        expect(component.parallelDiffLines[0].left.type).toEqual(constants.EMPTY_CELL_TYPE);
-        expect(component.parallelDiffLines[1].left.type).toEqual(constants.EMPTY_CELL_TYPE);
+        expect(component.diffLines[0].left.type).toEqual(constants.EMPTY_CELL_TYPE);
+        expect(component.diffLines[1].left.type).toEqual(constants.EMPTY_CELL_TYPE);
       });
     });
   });
diff --git a/spec/javascripts/diffs/mock_data/diff_file.js b/spec/javascripts/diffs/mock_data/diff_file.js
index cce36ecc91f..372b8f066cf 100644
--- a/spec/javascripts/diffs/mock_data/diff_file.js
+++ b/spec/javascripts/diffs/mock_data/diff_file.js
@@ -49,6 +49,7 @@ export default {
       type: 'new',
       oldLine: null,
       newLine: 1,
+      discussions: [],
       text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
       richText: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
       metaData: null,
@@ -58,6 +59,7 @@ export default {
       type: 'new',
       oldLine: null,
       newLine: 2,
+      discussions: [],
       text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
       richText: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
       metaData: null,
@@ -67,6 +69,7 @@ export default {
       type: null,
       oldLine: 1,
       newLine: 3,
+      discussions: [],
       text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
       richText: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
       metaData: null,
@@ -76,6 +79,7 @@ export default {
       type: null,
       oldLine: 2,
       newLine: 4,
+      discussions: [],
       text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
       richText: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
       metaData: null,
@@ -85,6 +89,7 @@ export default {
       type: null,
       oldLine: 3,
       newLine: 5,
+      discussions: [],
       text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
       richText: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
       metaData: null,
@@ -94,6 +99,7 @@ export default {
       type: 'match',
       oldLine: null,
       newLine: null,
+      discussions: [],
       text: '',
       richText: '',
       metaData: {
@@ -112,6 +118,7 @@ export default {
         type: 'new',
         oldLine: null,
         newLine: 1,
+        discussions: [],
         text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
         richText: '<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
         metaData: null,
@@ -126,6 +133,7 @@ export default {
         type: 'new',
         oldLine: null,
         newLine: 2,
+        discussions: [],
         text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
         richText: '<span id="LC2" class="line" lang="plaintext"></span>\n',
         metaData: null,
@@ -137,6 +145,7 @@ export default {
         type: null,
         oldLine: 1,
         newLine: 3,
+        discussions: [],
         text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
         richText: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
         metaData: null,
@@ -146,6 +155,7 @@ export default {
         type: null,
         oldLine: 1,
         newLine: 3,
+        discussions: [],
         text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
         richText: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
         metaData: null,
@@ -157,6 +167,7 @@ export default {
         type: null,
         oldLine: 2,
         newLine: 4,
+        discussions: [],
         text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
         richText: '<span id="LC4" class="line" lang="plaintext"></span>\n',
         metaData: null,
@@ -166,6 +177,7 @@ export default {
         type: null,
         oldLine: 2,
         newLine: 4,
+        discussions: [],
         text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
         richText: '<span id="LC4" class="line" lang="plaintext"></span>\n',
         metaData: null,
@@ -177,6 +189,7 @@ export default {
         type: null,
         oldLine: 3,
         newLine: 5,
+        discussions: [],
         text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
         richText: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
         metaData: null,
@@ -186,6 +199,7 @@ export default {
         type: null,
         oldLine: 3,
         newLine: 5,
+        discussions: [],
         text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
         richText: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
         metaData: null,
@@ -197,6 +211,7 @@ export default {
         type: 'match',
         oldLine: null,
         newLine: null,
+        discussions: [],
         text: '',
         richText: '',
         metaData: {
@@ -209,6 +224,7 @@ export default {
         type: 'match',
         oldLine: null,
         newLine: null,
+        discussions: [],
         text: '',
         richText: '',
         metaData: {
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index c1560dac1a0..c162fc965ba 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -7,10 +7,30 @@ import {
 } from '~/diffs/constants';
 import * as actions from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
+import { reduceDiscussionsToLineCodes } from '~/notes/stores/utils';
 import axios from '~/lib/utils/axios_utils';
 import testAction from '../../helpers/vuex_action_helper';
 
 describe('DiffsStoreActions', () => {
+  const originalMethods = {
+    requestAnimationFrame: global.requestAnimationFrame,
+    requestIdleCallback: global.requestIdleCallback,
+  };
+
+  beforeEach(() => {
+    ['requestAnimationFrame', 'requestIdleCallback'].forEach(method => {
+      global[method] = cb => {
+        cb();
+      };
+    });
+  });
+
+  afterEach(() => {
+    ['requestAnimationFrame', 'requestIdleCallback'].forEach(method => {
+      global[method] = originalMethods[method];
+    });
+  });
+
   describe('setBaseConfig', () => {
     it('should set given endpoint and project path', done => {
       const endpoint = '/diffs/set/endpoint';
@@ -53,6 +73,162 @@ describe('DiffsStoreActions', () => {
     });
   });
 
+  describe('assignDiscussionsToDiff', () => {
+    it('should merge discussions into diffs', done => {
+      const state = {
+        diffFiles: [
+          {
+            fileHash: 'ABC',
+            parallelDiffLines: [
+              {
+                left: {
+                  lineCode: 'ABC_1_1',
+                  discussions: [],
+                },
+                right: {
+                  lineCode: 'ABC_1_1',
+                  discussions: [],
+                },
+              },
+            ],
+            highlightedDiffLines: [
+              {
+                lineCode: 'ABC_1_1',
+                discussions: [],
+              },
+            ],
+          },
+        ],
+      };
+
+      const singleDiscussion = {
+        line_code: 'ABC_1_1',
+        diff_discussion: {},
+        diff_file: {
+          file_hash: 'ABC',
+        },
+        resolvable: true,
+        fileHash: 'ABC',
+      };
+
+      const discussions = reduceDiscussionsToLineCodes([singleDiscussion]);
+
+      testAction(
+        actions.assignDiscussionsToDiff,
+        discussions,
+        state,
+        [
+          {
+            type: types.SET_LINE_DISCUSSIONS_FOR_FILE,
+            payload: {
+              fileHash: 'ABC',
+              discussions: [singleDiscussion],
+            },
+          },
+        ],
+        [],
+        () => {
+          done();
+        },
+      );
+    });
+  });
+
+  describe('removeDiscussionsFromDiff', () => {
+    it('should remove discussions from diffs', done => {
+      const state = {
+        diffFiles: [
+          {
+            fileHash: 'ABC',
+            parallelDiffLines: [
+              {
+                left: {
+                  lineCode: 'ABC_1_1',
+                  discussions: [
+                    {
+                      id: 1,
+                    },
+                  ],
+                },
+                right: {
+                  lineCode: 'ABC_1_1',
+                  discussions: [],
+                },
+              },
+            ],
+            highlightedDiffLines: [
+              {
+                lineCode: 'ABC_1_1',
+                discussions: [],
+              },
+            ],
+          },
+        ],
+      };
+      const singleDiscussion = {
+        fileHash: 'ABC',
+        line_code: 'ABC_1_1',
+      };
+
+      testAction(
+        actions.removeDiscussionsFromDiff,
+        singleDiscussion,
+        state,
+        [
+          {
+            type: types.REMOVE_LINE_DISCUSSIONS_FOR_FILE,
+            payload: {
+              fileHash: 'ABC',
+              lineCode: 'ABC_1_1',
+            },
+          },
+        ],
+        [],
+        () => {
+          done();
+        },
+      );
+    });
+  });
+
+  describe('startRenderDiffsQueue', () => {
+    it('should set all files to RENDER_FILE', done => {
+      const state = {
+        diffFiles: [
+          {
+            id: 1,
+            renderIt: false,
+            collapsed: false,
+          },
+          {
+            id: 2,
+            renderIt: false,
+            collapsed: false,
+          },
+        ],
+      };
+
+      const pseudoCommit = (commitType, file) => {
+        expect(commitType).toBe(types.RENDER_FILE);
+        Object.assign(file, {
+          renderIt: true,
+        });
+      };
+
+      actions
+        .startRenderDiffsQueue({ state, commit: pseudoCommit })
+        .then(() => {
+          expect(state.diffFiles[0].renderIt).toBeTruthy();
+          expect(state.diffFiles[1].renderIt).toBeTruthy();
+
+          done();
+        })
+        .catch(() => {
+          done.fail();
+        });
+    });
+  });
+
   describe('setInlineDiffViewType', () => {
     it('should set diff view type to inline and also set the cookie properly', done => {
       testAction(
@@ -204,7 +380,11 @@ describe('DiffsStoreActions', () => {
 
       actions.toggleFileDiscussions({ getters, dispatch });
 
-      expect(dispatch).toHaveBeenCalledWith('collapseDiscussion', { discussionId: 1 }, { root: true });
+      expect(dispatch).toHaveBeenCalledWith(
+        'collapseDiscussion',
+        { discussionId: 1 },
+        { root: true },
+      );
     });
 
     it('should dispatch expandDiscussion when all discussions are collapsed', () => {
@@ -218,7 +398,11 @@ describe('DiffsStoreActions', () => {
 
       actions.toggleFileDiscussions({ getters, dispatch });
 
-      expect(dispatch).toHaveBeenCalledWith('expandDiscussion', { discussionId: 1 }, { root: true });
+      expect(dispatch).toHaveBeenCalledWith(
+        'expandDiscussion',
+        { discussionId: 1 },
+        { root: true },
+      );
     });
 
     it('should dispatch expandDiscussion when some discussions are collapsed and others are expanded for the collapsed discussion', () => {
@@ -232,7 +416,11 @@ describe('DiffsStoreActions', () => {
 
       actions.toggleFileDiscussions({ getters, dispatch });
 
-      expect(dispatch).toHaveBeenCalledWith('expandDiscussion', { discussionId: 1 }, { root: true });
+      expect(dispatch).toHaveBeenCalledWith(
+        'expandDiscussion',
+        { discussionId: 1 },
+        { root: true },
+      );
     });
   });
 });
diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js
index a59b26b2634..4747e437c4e 100644
--- a/spec/javascripts/diffs/store/getters_spec.js
+++ b/spec/javascripts/diffs/store/getters_spec.js
@@ -184,101 +184,73 @@ describe('Diffs Module Getters', () => {
     });
   });
 
-  describe('singleDiscussionByLineCode', () => {
-    it('returns found discussion per line Code', () => {
-      const discussionsMock = {};
-      discussionsMock.ABC = discussionMock;
-
-      expect(
-        getters.singleDiscussionByLineCode(localState, {}, null, {
-          discussionsByLineCode: () => discussionsMock,
-        })('DEF'),
-      ).toEqual([]);
-    });
-
-    it('returns empty array when no discussions match', () => {
-      expect(
-        getters.singleDiscussionByLineCode(localState, {}, null, {
-          discussionsByLineCode: () => {},
-        })('DEF'),
-      ).toEqual([]);
-    });
-  });
-
   describe('shouldRenderParallelCommentRow', () => {
     let line;
 
     beforeEach(() => {
       line = {};
 
+      discussionMock.expanded = true;
+
       line.left = {
         lineCode: 'ABC',
+        discussions: [discussionMock],
       };
 
       line.right = {
         lineCode: 'DEF',
+        discussions: [discussionMock1],
       };
     });
 
     it('returns true when discussion is expanded', () => {
-      discussionMock.expanded = true;
-
-      expect(
-        getters.shouldRenderParallelCommentRow(localState, {
-          singleDiscussionByLineCode: () => [discussionMock],
-        })(line),
-      ).toEqual(true);
+      expect(getters.shouldRenderParallelCommentRow(localState)(line)).toEqual(true);
     });
 
     it('returns false when no discussion was found', () => {
+      line.left.discussions = [];
+      line.right.discussions = [];
+
       localState.diffLineCommentForms.ABC = false;
       localState.diffLineCommentForms.DEF = false;
 
-      expect(
-        getters.shouldRenderParallelCommentRow(localState, {
-          singleDiscussionByLineCode: () => [],
-        })(line),
-      ).toEqual(false);
+      expect(getters.shouldRenderParallelCommentRow(localState)(line)).toEqual(false);
     });
 
     it('returns true when discussionForm was found', () => {
       localState.diffLineCommentForms.ABC = {};
 
-      expect(
-        getters.shouldRenderParallelCommentRow(localState, {
-          singleDiscussionByLineCode: () => [discussionMock],
-        })(line),
-      ).toEqual(true);
+      expect(getters.shouldRenderParallelCommentRow(localState)(line)).toEqual(true);
     });
   });
 
   describe('shouldRenderInlineCommentRow', () => {
+    let line;
+
+    beforeEach(() => {
+      discussionMock.expanded = true;
+
+      line = {
+        lineCode: 'ABC',
+        discussions: [discussionMock],
+      };
+    });
+
     it('returns true when diffLineCommentForms has form', () => {
       localState.diffLineCommentForms.ABC = {};
 
-      expect(
-        getters.shouldRenderInlineCommentRow(localState)({
-          lineCode: 'ABC',
-        }),
-      ).toEqual(true);
+      expect(getters.shouldRenderInlineCommentRow(localState)(line)).toEqual(true);
     });
 
     it('returns false when no line discussions were found', () => {
-      expect(
-        getters.shouldRenderInlineCommentRow(localState, {
-          singleDiscussionByLineCode: () => [],
-        })('DEF'),
-      ).toEqual(false);
+      line.discussions = [];
+      expect(getters.shouldRenderInlineCommentRow(localState)(line)).toEqual(false);
     });
 
     it('returns true if all found discussions are expanded', () => {
       discussionMock.expanded = true;
 
-      expect(
-        getters.shouldRenderInlineCommentRow(localState, {
-          singleDiscussionByLineCode: () => [discussionMock],
-        })('ABC'),
-      ).toEqual(true);
+      expect(getters.shouldRenderInlineCommentRow(localState)(line)).toEqual(true);
     });
   });
 
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index 8f89984c6e5..9a89bc57404 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -138,10 +138,9 @@ describe('DiffsStoreMutations', () => {
 
       const fileHash = 123;
       const state = { diffFiles: [{}, { fileHash, existingField: 0 }] };
-      const file = { fileHash };
       const data = { diff_files: [{ file_hash: fileHash, extra_field: 1, existingField: 1 }] };
 
-      mutations[types.ADD_COLLAPSED_DIFFS](state, { file, data });
+      mutations[types.ADD_COLLAPSED_DIFFS](state, { file: state.diffFiles[1], data });
       expect(spy).toHaveBeenCalledWith(data, { deep: true });
 
       expect(state.diffFiles[1].fileHash).toEqual(fileHash);
@@ -149,4 +148,107 @@ describe('DiffsStoreMutations', () => {
       expect(state.diffFiles[1].extraField).toEqual(1);
     });
   });
+
+  describe('SET_LINE_DISCUSSIONS_FOR_FILE', () => {
+    it('should add discussions to the given line', () => {
+      const state = {
+        diffFiles: [
+          {
+            fileHash: 'ABC',
+            parallelDiffLines: [
+              {
+                left: {
+                  lineCode: 'ABC_1',
+                  discussions: [],
+                },
+                right: {
+                  lineCode: 'ABC_1',
+                  discussions: [],
+                },
+              },
+            ],
+            highlightedDiffLines: [
+              {
+                lineCode: 'ABC_1',
+                discussions: [],
+              },
+            ],
+          },
+        ],
+      };
+      const discussions = [
+        {
+          id: 1,
+          line_code: 'ABC_1',
+        },
+        {
+          id: 2,
+          line_code: 'ABC_1',
+        },
+      ];
+
+      mutations[types.SET_LINE_DISCUSSIONS_FOR_FILE](state, { fileHash: 'ABC', discussions });
+
+      expect(state.diffFiles[0].parallelDiffLines[0].left.discussions.length).toEqual(2);
+      expect(state.diffFiles[0].parallelDiffLines[0].left.discussions[1].id).toEqual(2);
+
+      expect(state.diffFiles[0].highlightedDiffLines[0].discussions.length).toEqual(2);
+      expect(state.diffFiles[0].highlightedDiffLines[0].discussions[1].id).toEqual(2);
+    });
+  });
+
+  describe('REMOVE_LINE_DISCUSSIONS', () => {
+    it('should remove the existing discussions on the given line', () => {
+      const state = {
+        diffFiles: [
+          {
+            fileHash: 'ABC',
+            parallelDiffLines: [
+              {
+                left: {
+                  lineCode: 'ABC_1',
+                  discussions: [
+                    {
+                      id: 1,
+                      line_code: 'ABC_1',
+                    },
+                    {
+                      id: 2,
+                      line_code: 'ABC_1',
+                    },
+                  ],
+                },
+                right: {
+                  lineCode: 'ABC_1',
+                  discussions: [],
+                },
+              },
+            ],
+            highlightedDiffLines: [
+              {
+                lineCode: 'ABC_1',
+                discussions: [
+                  {
+                    id: 1,
+                    line_code: 'ABC_1',
+                  },
+                  {
+                    id: 2,
+                    line_code: 'ABC_1',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      mutations[types.REMOVE_LINE_DISCUSSIONS_FOR_FILE](state, {
+        fileHash: 'ABC',
+        lineCode: 'ABC_1',
+      });
+      expect(state.diffFiles[0].parallelDiffLines[0].left.discussions.length).toEqual(0);
+      expect(state.diffFiles[0].highlightedDiffLines[0].discussions.length).toEqual(0);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index 32136d9ebff..bd9d63769a1 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -179,32 +179,64 @@ describe('DiffsStoreUtils', () => {
 
   describe('trimFirstCharOfLineContent', () => {
     it('trims the line when it starts with a space', () => {
-      expect(utils.trimFirstCharOfLineContent({ richText: ' diff' })).toEqual({ richText: 'diff' });
+      expect(utils.trimFirstCharOfLineContent({ richText: ' diff' })).toEqual({
+        discussions: [],
+        richText: 'diff',
+      });
     });
 
     it('trims the line when it starts with a +', () => {
-      expect(utils.trimFirstCharOfLineContent({ richText: '+diff' })).toEqual({ richText: 'diff' });
+      expect(utils.trimFirstCharOfLineContent({ richText: '+diff' })).toEqual({
+        discussions: [],
+        richText: 'diff',
+      });
     });
 
     it('trims the line when it starts with a -', () => {
-      expect(utils.trimFirstCharOfLineContent({ richText: '-diff' })).toEqual({ richText: 'diff' });
+      expect(utils.trimFirstCharOfLineContent({ richText: '-diff' })).toEqual({
+        discussions: [],
+        richText: 'diff',
+      });
     });
 
     it('does not trims the line when it starts with a letter', () => {
-      expect(utils.trimFirstCharOfLineContent({ richText: 'diff' })).toEqual({ richText: 'diff' });
+      expect(utils.trimFirstCharOfLineContent({ richText: 'diff' })).toEqual({
+        discussions: [],
+        richText: 'diff',
+      });
     });
 
     it('does not modify the provided object', () => {
       const lineObj = {
+        discussions: [],
         richText: ' diff',
       };
 
       utils.trimFirstCharOfLineContent(lineObj);
-      expect(lineObj).toEqual({ richText: ' diff' });
+      expect(lineObj).toEqual({ discussions: [], richText: ' diff' });
     });
 
     it('handles a undefined or null parameter', () => {
-      expect(utils.trimFirstCharOfLineContent()).toEqual({});
+      expect(utils.trimFirstCharOfLineContent()).toEqual({ discussions: [] });
+    });
+  });
+
+  describe('prepareDiffData', () => {
+    it('sets the renderIt and collapsed attribute on files', () => {
+      const preparedDiff = { diffFiles: [getDiffFileMock()] };
+      utils.prepareDiffData(preparedDiff);
+
+      const firstParallelDiffLine = preparedDiff.diffFiles[0].parallelDiffLines[2];
+      expect(firstParallelDiffLine.left.discussions.length).toBe(0);
+      expect(firstParallelDiffLine.left).not.toHaveAttr('text');
+      expect(firstParallelDiffLine.right.discussions.length).toBe(0);
+      expect(firstParallelDiffLine.right).not.toHaveAttr('text');
+
+      expect(preparedDiff.diffFiles[0].highlightedDiffLines[0].discussions.length).toBe(0);
+      expect(preparedDiff.diffFiles[0].highlightedDiffLines[0]).not.toHaveAttr('text');
+
+      expect(preparedDiff.diffFiles[0].renderIt).toBeTruthy();
+      expect(preparedDiff.diffFiles[0].collapsed).toBeFalsy();
     });
   });
 });
diff --git a/spec/javascripts/lazy_loader_spec.js b/spec/javascripts/lazy_loader_spec.js
index 1d81e4e2d1a..c177d79b9e0 100644
--- a/spec/javascripts/lazy_loader_spec.js
+++ b/spec/javascripts/lazy_loader_spec.js
@@ -2,10 +2,10 @@ import LazyLoader from '~/lazy_loader';
 
 let lazyLoader = null;
 
-describe('LazyLoader', function () {
+describe('LazyLoader', function() {
   preloadFixtures('issues/issue_with_comment.html.raw');
 
-  beforeEach(function () {
+  beforeEach(function() {
     loadFixtures('issues/issue_with_comment.html.raw');
     lazyLoader = new LazyLoader({
       observerNode: 'body',
@@ -13,8 +13,8 @@ describe('LazyLoader', function () {
     // Doing everything that happens normally in onload
     lazyLoader.loadCheck();
   });
-  describe('behavior', function () {
-    it('should copy value from data-src to src for img 1', function (done) {
+  describe('behavior', function() {
+    it('should copy value from data-src to src for img 1', function(done) {
       const img = document.querySelectorAll('img[data-src]')[0];
       const originalDataSrc = img.getAttribute('data-src');
       img.scrollIntoView();
@@ -26,7 +26,7 @@ describe('LazyLoader', function () {
       }, 100);
     });
 
-    it('should lazy load dynamically added data-src images', function (done) {
+    it('should lazy load dynamically added data-src images', function(done) {
       const newImg = document.createElement('img');
       const testPath = '/img/testimg.png';
       newImg.className = 'lazy';
@@ -41,7 +41,7 @@ describe('LazyLoader', function () {
       }, 100);
     });
 
-    it('should not alter normal images', function (done) {
+    it('should not alter normal images', function(done) {
       const newImg = document.createElement('img');
       const testPath = '/img/testimg.png';
       newImg.setAttribute('src', testPath);