Add option to expand diff to full file

The user can also toggle between the diff changes and
the full file diff.

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

5 files changed, 304 insertions, 1 deletions

diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index 1201f066d2f..66c5b17b825 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -23,6 +23,9 @@ describe('diff_file_header', () => {
   });
 
   beforeEach(() => {
+    gon.features = {
+      expandDiffFullFile: true,
+    };
     const diffFile = diffDiscussionMock.diff_file;
 
     diffFile.added_lines = 2;
@@ -382,7 +385,7 @@ describe('diff_file_header', () => {
         props.diffFile.edit_path = '/';
         vm = mountComponentWithStore(Component, { props, store });
 
-        expect(vm.$el.querySelector('.js-edit-blob')).toContainText('Edit');
+        expect(vm.$el.querySelector('.js-edit-blob')).not.toBe(null);
       });
 
       it('should not show edit button when file is deleted', () => {
@@ -576,4 +579,66 @@ describe('diff_file_header', () => {
       });
     });
   });
+
+  describe('expand full file button', () => {
+    beforeEach(() => {
+      props.addMergeRequestButtons = true;
+      props.diffFile.edit_path = '/';
+    });
+
+    it('does not render button', () => {
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file')).toBe(null);
+    });
+
+    it('renders button', () => {
+      props.diffFile.is_fully_expanded = false;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file')).not.toBe(null);
+    });
+
+    it('shows fully expanded text', () => {
+      props.diffFile.is_fully_expanded = false;
+      props.diffFile.isShowingFullFile = true;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file').textContent).toContain('Show changes only');
+    });
+
+    it('shows expand text', () => {
+      props.diffFile.is_fully_expanded = false;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file').textContent).toContain('Show full file');
+    });
+
+    it('renders loading icon', () => {
+      props.diffFile.is_fully_expanded = false;
+      props.diffFile.isLoadingFullFile = true;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      expect(vm.$el.querySelector('.js-expand-file .loading-container')).not.toBe(null);
+    });
+
+    it('calls toggleFullDiff on click', () => {
+      props.diffFile.is_fully_expanded = false;
+
+      vm = mountComponentWithStore(Component, { props, store });
+
+      spyOn(vm.$store, 'dispatch').and.stub();
+
+      vm.$el.querySelector('.js-expand-file').click();
+
+      expect(vm.$store.dispatch).toHaveBeenCalledWith(
+        'diffs/toggleFullDiff',
+        props.diffFile.file_path,
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/mock_data/diff_discussions.js b/spec/javascripts/diffs/mock_data/diff_discussions.js
index 4a091b4580b..fd5dd611383 100644
--- a/spec/javascripts/diffs/mock_data/diff_discussions.js
+++ b/spec/javascripts/diffs/mock_data/diff_discussions.js
@@ -288,6 +288,7 @@ export default {
     external_storage: null,
     old_path_html: 'CHANGELOG_OLD',
     new_path_html: 'CHANGELOG',
+    is_fully_expanded: true,
     context_lines_path:
       '/gitlab-org/gitlab-test/blob/c48ee0d1bf3b30453f5b32250ce03134beaa6d13/CHANGELOG/diff',
     highlighted_diff_lines: [
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index e47c7906fcb..070bfb2ccd0 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -30,6 +30,11 @@ import actions, {
   setRenderTreeList,
   setShowWhitespace,
   setRenderIt,
+  requestFullDiff,
+  receiveFullDiffSucess,
+  receiveFullDiffError,
+  fetchFullDiff,
+  toggleFullDiff,
 } from '~/diffs/store/actions';
 import eventHub from '~/notes/event_hub';
 import * as types from '~/diffs/store/mutation_types';
@@ -847,4 +852,129 @@ describe('DiffsStoreActions', () => {
       testAction(setRenderIt, 'file', {}, [{ type: types.RENDER_FILE, payload: 'file' }], [], done);
     });
   });
+
+  describe('requestFullDiff', () => {
+    it('commits REQUEST_FULL_DIFF', done => {
+      testAction(
+        requestFullDiff,
+        'file',
+        {},
+        [{ type: types.REQUEST_FULL_DIFF, payload: 'file' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveFullDiffSucess', () => {
+    it('commits REQUEST_FULL_DIFF', done => {
+      testAction(
+        receiveFullDiffSucess,
+        { filePath: 'test', data: 'test' },
+        {},
+        [{ type: types.RECEIVE_FULL_DIFF_SUCCESS, payload: { filePath: 'test', data: 'test' } }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveFullDiffError', () => {
+    it('commits REQUEST_FULL_DIFF', done => {
+      testAction(
+        receiveFullDiffError,
+        'file',
+        {},
+        [{ type: types.RECEIVE_FULL_DIFF_ERROR, payload: 'file' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchFullDiff', () => {
+    let mock;
+    let scrollToElementSpy;
+
+    beforeEach(() => {
+      scrollToElementSpy = spyOnDependency(actions, 'scrollToElement').and.stub();
+
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('success', () => {
+      beforeEach(() => {
+        mock.onGet(`${gl.TEST_HOST}/context`).replyOnce(200, ['test']);
+      });
+
+      it('dispatches receiveFullDiffSucess', done => {
+        testAction(
+          fetchFullDiff,
+          { context_lines_path: `${gl.TEST_HOST}/context`, file_path: 'test', file_hash: 'test' },
+          null,
+          [],
+          [{ type: 'receiveFullDiffSucess', payload: { filePath: 'test', 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', () => {
+      beforeEach(() => {
+        mock.onGet(`${gl.TEST_HOST}/context`).replyOnce(500);
+      });
+
+      it('dispatches receiveFullDiffError', done => {
+        testAction(
+          fetchFullDiff,
+          { context_lines_path: `${gl.TEST_HOST}/context`, file_path: 'test', file_hash: 'test' },
+          null,
+          [],
+          [{ type: 'receiveFullDiffError', payload: 'test' }],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('toggleFullDiff', () => {
+    let state;
+
+    beforeEach(() => {
+      state = {
+        diffFiles: [{ file_path: 'test', isShowingFullFile: false }],
+      };
+    });
+
+    it('dispatches fetchFullDiff when file is not expanded', done => {
+      testAction(
+        toggleFullDiff,
+        'test',
+        state,
+        [],
+        [
+          { type: 'requestFullDiff', payload: 'test' },
+          { type: 'fetchFullDiff', payload: state.diffFiles[0] },
+        ],
+        done,
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index 09ee691b602..270e7d75666 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -680,4 +680,66 @@ describe('DiffsStoreMutations', () => {
       expect(state.showWhitespace).toBe(false);
     });
   });
+
+  describe('REQUEST_FULL_DIFF', () => {
+    it('sets isLoadingFullFile to true', () => {
+      const state = {
+        diffFiles: [{ file_path: 'test', isLoadingFullFile: false }],
+      };
+
+      mutations[types.REQUEST_FULL_DIFF](state, 'test');
+
+      expect(state.diffFiles[0].isLoadingFullFile).toBe(true);
+    });
+  });
+
+  describe('RECEIVE_FULL_DIFF_ERROR', () => {
+    it('sets isLoadingFullFile to false', () => {
+      const state = {
+        diffFiles: [{ file_path: 'test', isLoadingFullFile: true }],
+      };
+
+      mutations[types.RECEIVE_FULL_DIFF_ERROR](state, 'test');
+
+      expect(state.diffFiles[0].isLoadingFullFile).toBe(false);
+    });
+  });
+
+  describe('RECEIVE_FULL_DIFF_SUCCESS', () => {
+    it('sets isLoadingFullFile to false', () => {
+      const state = {
+        diffFiles: [
+          {
+            file_path: 'test',
+            isLoadingFullFile: true,
+            isShowingFullFile: false,
+            highlighted_diff_lines: [],
+            parallel_diff_lines: [],
+          },
+        ],
+      };
+
+      mutations[types.RECEIVE_FULL_DIFF_SUCCESS](state, { filePath: 'test', data: [] });
+
+      expect(state.diffFiles[0].isLoadingFullFile).toBe(false);
+    });
+
+    it('sets isShowingFullFile to true', () => {
+      const state = {
+        diffFiles: [
+          {
+            file_path: 'test',
+            isLoadingFullFile: true,
+            isShowingFullFile: false,
+            highlighted_diff_lines: [],
+            parallel_diff_lines: [],
+          },
+        ],
+      };
+
+      mutations[types.RECEIVE_FULL_DIFF_SUCCESS](state, { filePath: 'test', data: [] });
+
+      expect(state.diffFiles[0].isShowingFullFile).toBe(true);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index 599ea9cd420..1f877910125 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -781,4 +781,49 @@ describe('DiffsStoreUtils', () => {
       ]);
     });
   });
+
+  describe('convertExpandLines', () => {
+    it('converts expanded lines to normal lines', () => {
+      const diffLines = [
+        {
+          type: 'match',
+          old_line: 1,
+          new_line: 1,
+        },
+        {
+          type: '',
+          old_line: 2,
+          new_line: 2,
+        },
+      ];
+
+      const lines = utils.convertExpandLines({
+        diffLines,
+        data: [{ text: 'expanded' }],
+        typeKey: 'type',
+        oldLineKey: 'old_line',
+        newLineKey: 'new_line',
+        mapLine: ({ line, oldLine, newLine }) => ({
+          ...line,
+          old_line: oldLine,
+          new_line: newLine,
+        }),
+      });
+
+      expect(lines).toEqual([
+        {
+          text: 'expanded',
+          new_line: 1,
+          old_line: 1,
+          discussions: [],
+          hasForm: false,
+        },
+        {
+          type: '',
+          old_line: 2,
+          new_line: 2,
+        },
+      ]);
+    });
+  });
 });