Impove the performance of expanding full diff

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/58597

4 files changed, 181 insertions, 20 deletions

diff --git a/spec/javascripts/diffs/components/diff_content_spec.js b/spec/javascripts/diffs/components/diff_content_spec.js
index bc9288e4150..124bdeea45d 100644
--- a/spec/javascripts/diffs/components/diff_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_content_spec.js
@@ -29,6 +29,10 @@ describe('DiffContent', () => {
     });
   });
 
+  afterEach(() => {
+    vm.$destroy();
+  });
+
   describe('text based files', () => {
     it('should render diff inline view', done => {
       vm.$store.state.diffs.diffViewType = 'inline';
@@ -49,6 +53,16 @@ describe('DiffContent', () => {
         done();
       });
     });
+
+    it('renders rendering more lines loading icon', done => {
+      vm.diffFile.renderingLines = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
+
+        done();
+      });
+    });
   });
 
   describe('empty files', () => {
diff --git a/spec/javascripts/diffs/mock_data/diff_file.js b/spec/javascripts/diffs/mock_data/diff_file.js
index 32af9ea8ddd..27428197c1c 100644
--- a/spec/javascripts/diffs/mock_data/diff_file.js
+++ b/spec/javascripts/diffs/mock_data/diff_file.js
@@ -240,4 +240,5 @@ export default {
     },
   ],
   discussions: [],
+  renderingLines: false,
 };
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index bca99caa920..c82dcadd2f1 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -36,6 +36,7 @@ import actions, {
   fetchFullDiff,
   toggleFullDiff,
   setFileCollapsed,
+  setExpandedDiffLines,
 } from '~/diffs/store/actions';
 import eventHub from '~/notes/event_hub';
 import * as types from '~/diffs/store/mutation_types';
@@ -879,9 +880,9 @@ describe('DiffsStoreActions', () => {
     it('commits REQUEST_FULL_DIFF', done => {
       testAction(
         receiveFullDiffSucess,
-        { filePath: 'test', data: 'test' },
+        { filePath: 'test' },
         {},
-        [{ type: types.RECEIVE_FULL_DIFF_SUCCESS, payload: { filePath: 'test', data: 'test' } }],
+        [{ type: types.RECEIVE_FULL_DIFF_SUCCESS, payload: { filePath: 'test' } }],
         [],
         done,
       );
@@ -903,11 +904,8 @@ describe('DiffsStoreActions', () => {
 
   describe('fetchFullDiff', () => {
     let mock;
-    let scrollToElementSpy;
 
     beforeEach(() => {
-      scrollToElementSpy = spyOnDependency(actions, 'scrollToElement').and.stub();
-
       mock = new MockAdapter(axios);
     });
 
@@ -921,28 +919,23 @@ describe('DiffsStoreActions', () => {
       });
 
       it('dispatches receiveFullDiffSucess', done => {
+        const file = {
+          context_lines_path: `${gl.TEST_HOST}/context`,
+          file_path: 'test',
+          file_hash: 'test',
+        };
         testAction(
           fetchFullDiff,
-          { context_lines_path: `${gl.TEST_HOST}/context`, file_path: 'test', file_hash: 'test' },
+          file,
           null,
           [],
-          [{ type: 'receiveFullDiffSucess', payload: { filePath: 'test', data: ['test'] } }],
+          [
+            { type: 'receiveFullDiffSucess', payload: { filePath: 'test' } },
+            { type: 'setExpandedDiffLines', payload: { file, data: ['test'] } },
+          ],
           done,
         );
       });
-
-      it('scrolls to element', done => {
-        fetchFullDiff(
-          { dispatch() {} },
-          { context_lines_path: `${gl.TEST_HOST}/context`, file_path: 'test', file_hash: 'test' },
-        )
-          .then(() => {
-            expect(scrollToElementSpy).toHaveBeenCalledWith('#test');
-
-            done();
-          })
-          .catch(done.fail);
-      });
     });
 
     describe('error', () => {
@@ -999,4 +992,63 @@ describe('DiffsStoreActions', () => {
       );
     });
   });
+
+  describe('setExpandedDiffLines', () => {
+    beforeEach(() => {
+      spyOnDependency(actions, 'idleCallback').and.callFake(cb => {
+        cb({ timeRemaining: () => 50 });
+      });
+    });
+
+    it('commits SET_CURRENT_VIEW_DIFF_FILE_LINES when lines less than MAX_RENDERING_DIFF_LINES', done => {
+      spyOnDependency(actions, 'convertExpandLines').and.callFake(() => ['test']);
+
+      testAction(
+        setExpandedDiffLines,
+        { file: { file_path: 'path' }, data: [] },
+        { diffViewType: 'inline' },
+        [
+          {
+            type: 'SET_HIDDEN_VIEW_DIFF_FILE_LINES',
+            payload: { filePath: 'path', lines: ['test'] },
+          },
+          {
+            type: 'SET_CURRENT_VIEW_DIFF_FILE_LINES',
+            payload: { filePath: 'path', lines: ['test'] },
+          },
+        ],
+        [],
+        done,
+      );
+    });
+
+    it('commits ADD_CURRENT_VIEW_DIFF_FILE_LINES when lines more than MAX_RENDERING_DIFF_LINES', done => {
+      const lines = new Array(501).fill().map((_, i) => `line-${i}`);
+      spyOnDependency(actions, 'convertExpandLines').and.callFake(() => lines);
+
+      testAction(
+        setExpandedDiffLines,
+        { file: { file_path: 'path' }, data: [] },
+        { diffViewType: 'inline' },
+        [
+          {
+            type: 'SET_HIDDEN_VIEW_DIFF_FILE_LINES',
+            payload: { filePath: 'path', lines },
+          },
+          {
+            type: 'SET_CURRENT_VIEW_DIFF_FILE_LINES',
+            payload: { filePath: 'path', lines: lines.slice(0, 200) },
+          },
+          { type: 'TOGGLE_DIFF_FILE_RENDERING_MORE', payload: 'path' },
+          ...new Array(301).fill().map((_, i) => ({
+            type: 'ADD_CURRENT_VIEW_DIFF_FILE_LINES',
+            payload: { filePath: 'path', line: `line-${i + 200}` },
+          })),
+          { type: 'TOGGLE_DIFF_FILE_RENDERING_MORE', payload: 'path' },
+        ],
+        [],
+        done,
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index 5556a994a14..fa193e1d3b9 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -756,4 +756,98 @@ describe('DiffsStoreMutations', () => {
       expect(state.diffFiles[0].viewer.collapsed).toBe(true);
     });
   });
+
+  describe('SET_HIDDEN_VIEW_DIFF_FILE_LINES', () => {
+    [
+      { current: 'highlighted', hidden: 'parallel', diffViewType: 'inline' },
+      { current: 'parallel', hidden: 'highlighted', diffViewType: 'parallel' },
+    ].forEach(({ current, hidden, diffViewType }) => {
+      it(`sets the ${hidden} lines when diff view is ${diffViewType}`, () => {
+        const file = { file_path: 'test', parallel_diff_lines: [], highlighted_diff_lines: [] };
+        const state = {
+          diffFiles: [file],
+          diffViewType,
+        };
+
+        mutations[types.SET_HIDDEN_VIEW_DIFF_FILE_LINES](state, {
+          filePath: 'test',
+          lines: ['test'],
+        });
+
+        expect(file[`${current}_diff_lines`]).toEqual([]);
+        expect(file[`${hidden}_diff_lines`]).toEqual(['test']);
+      });
+    });
+  });
+
+  describe('SET_CURRENT_VIEW_DIFF_FILE_LINES', () => {
+    [
+      { current: 'highlighted', hidden: 'parallel', diffViewType: 'inline' },
+      { current: 'parallel', hidden: 'highlighted', diffViewType: 'parallel' },
+    ].forEach(({ current, hidden, diffViewType }) => {
+      it(`sets the ${current} lines when diff view is ${diffViewType}`, () => {
+        const file = { file_path: 'test', parallel_diff_lines: [], highlighted_diff_lines: [] };
+        const state = {
+          diffFiles: [file],
+          diffViewType,
+        };
+
+        mutations[types.SET_CURRENT_VIEW_DIFF_FILE_LINES](state, {
+          filePath: 'test',
+          lines: ['test'],
+        });
+
+        expect(file[`${current}_diff_lines`]).toEqual(['test']);
+        expect(file[`${hidden}_diff_lines`]).toEqual([]);
+      });
+    });
+  });
+
+  describe('ADD_CURRENT_VIEW_DIFF_FILE_LINES', () => {
+    [
+      { current: 'highlighted', hidden: 'parallel', diffViewType: 'inline' },
+      { current: 'parallel', hidden: 'highlighted', diffViewType: 'parallel' },
+    ].forEach(({ current, hidden, diffViewType }) => {
+      it(`pushes to ${current} lines when diff view is ${diffViewType}`, () => {
+        const file = { file_path: 'test', parallel_diff_lines: [], highlighted_diff_lines: [] };
+        const state = {
+          diffFiles: [file],
+          diffViewType,
+        };
+
+        mutations[types.ADD_CURRENT_VIEW_DIFF_FILE_LINES](state, {
+          filePath: 'test',
+          line: 'test',
+        });
+
+        expect(file[`${current}_diff_lines`]).toEqual(['test']);
+        expect(file[`${hidden}_diff_lines`]).toEqual([]);
+
+        mutations[types.ADD_CURRENT_VIEW_DIFF_FILE_LINES](state, {
+          filePath: 'test',
+          line: 'test2',
+        });
+
+        expect(file[`${current}_diff_lines`]).toEqual(['test', 'test2']);
+        expect(file[`${hidden}_diff_lines`]).toEqual([]);
+      });
+    });
+  });
+
+  describe('TOGGLE_DIFF_FILE_RENDERING_MORE', () => {
+    it('toggles renderingLines on file', () => {
+      const file = { file_path: 'test', renderingLines: false };
+      const state = {
+        diffFiles: [file],
+      };
+
+      mutations[types.TOGGLE_DIFF_FILE_RENDERING_MORE](state, 'test');
+
+      expect(file.renderingLines).toBe(true);
+
+      mutations[types.TOGGLE_DIFF_FILE_RENDERING_MORE](state, 'test');
+
+      expect(file.renderingLines).toBe(false);
+    });
+  });
 });