Replaced part of diff file properties with diff viewer

- replaced file.too_large
- replaced file.text
- replaced file.collapsed

14 files changed, 109 insertions, 51 deletions

diff --git a/spec/features/merge_request/user_creates_image_diff_notes_spec.rb b/spec/features/merge_request/user_creates_image_diff_notes_spec.rb
index d19408ee87f..c837a6752f9 100644
--- a/spec/features/merge_request/user_creates_image_diff_notes_spec.rb
+++ b/spec/features/merge_request/user_creates_image_diff_notes_spec.rb
@@ -222,6 +222,11 @@ describe 'Merge request > User creates image diff notes', :js do
   end
 
   def create_image_diff_note
+    expand_text = 'Click to expand it.'
+    page.all('a', text: expand_text).each do |element|
+      element.click
+    end
+
     find('.js-add-image-diff-note-button', match: :first).click
     find('.diff-content .note-textarea').native.send_keys('image diff test comment')
     click_button 'Comment'
diff --git a/spec/fixtures/api/schemas/entities/diff_viewer.json b/spec/fixtures/api/schemas/entities/diff_viewer.json
index 81325cd86c6..ae0fb32d3ac 100644
--- a/spec/fixtures/api/schemas/entities/diff_viewer.json
+++ b/spec/fixtures/api/schemas/entities/diff_viewer.json
@@ -14,6 +14,17 @@
         "string",
         "null"
       ]
+    },
+    "error_message": {
+      "type": [
+        "string",
+        "null"
+      ]
+    },
+    "collapsed": {
+      "type": [
+        "boolean"
+      ]
     }
   },
   "additionalProperties": false
diff --git a/spec/javascripts/diffs/components/diff_content_spec.js b/spec/javascripts/diffs/components/diff_content_spec.js
index 9e158327a77..a1bb51963d6 100644
--- a/spec/javascripts/diffs/components/diff_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_content_spec.js
@@ -6,6 +6,7 @@ import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
 import '~/behaviors/markdown/render_gfm';
 import diffFileMockData from '../mock_data/diff_file';
 import discussionsMockData from '../mock_data/diff_discussions';
+import { diffViewerModes } from '~/ide/constants';
 
 describe('DiffContent', () => {
   const Component = Vue.extend(DiffContentComponent);
@@ -52,26 +53,39 @@ describe('DiffContent', () => {
 
   describe('empty files', () => {
     beforeEach(() => {
-      vm.diffFile.empty = true;
       vm.diffFile.highlighted_diff_lines = [];
       vm.diffFile.parallel_diff_lines = [];
     });
 
-    it('should render a message', done => {
+    it('should render a no preview message if viewer returns no preview', done => {
+      vm.diffFile.viewer.name = diffViewerModes.no_preview;
       vm.$nextTick(() => {
         const block = vm.$el.querySelector('.diff-viewer .nothing-here-block');
 
         expect(block).not.toBe(null);
-        expect(block.textContent.trim()).toContain('Empty file');
+        expect(block.textContent.trim()).toContain('No preview for this file type');
+
+        done();
+      });
+    });
+
+    it('should render a not diffable message if viewer returns not diffable', done => {
+      vm.diffFile.viewer.name = diffViewerModes.not_diffable;
+      vm.$nextTick(() => {
+        const block = vm.$el.querySelector('.diff-viewer .nothing-here-block');
+
+        expect(block).not.toBe(null);
+        expect(block.textContent.trim()).toContain(
+          'This diff was suppressed by a .gitattributes entry',
+        );
 
         done();
       });
     });
 
     it('should not render multiple messages', done => {
-      vm.diffFile.mode_changed = true;
       vm.diffFile.b_mode = '100755';
-      vm.diffFile.viewer.name = 'mode_changed';
+      vm.diffFile.viewer.name = diffViewerModes.mode_changed;
 
       vm.$nextTick(() => {
         expect(vm.$el.querySelectorAll('.nothing-here-block').length).toBe(1);
@@ -81,6 +95,7 @@ describe('DiffContent', () => {
     });
 
     it('should not render diff table', done => {
+      vm.diffFile.viewer.name = diffViewerModes.no_preview;
       vm.$nextTick(() => {
         expect(vm.$el.querySelector('table')).toBe(null);
 
@@ -157,6 +172,7 @@ describe('DiffContent', () => {
         vm.diffFile.new_sha = 'DEF';
         vm.diffFile.old_path = 'test.abc';
         vm.diffFile.old_sha = 'ABC';
+        vm.diffFile.viewer.name = diffViewerModes.added;
 
         vm.$nextTick(() => {
           expect(el.querySelectorAll('.js-diff-inline-view').length).toEqual(0);
diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js
index 787a81fd88f..005a4751ea1 100644
--- a/spec/javascripts/diffs/components/diff_file_header_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_header_spec.js
@@ -4,15 +4,15 @@ import diffsModule from '~/diffs/store/modules';
 import notesModule from '~/notes/stores/modules';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffDiscussionsMockData from '../mock_data/diff_discussions';
+import { diffViewerModes } from '~/ide/constants';
 
 Vue.use(Vuex);
 
-const discussionFixture = 'merge_requests/diff_discussion.json';
-
 describe('diff_file_header', () => {
   let vm;
   let props;
-  const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
+  const diffDiscussionMock = diffDiscussionsMockData;
   const Component = Vue.extend(DiffFileHeader);
 
   const store = new Vuex.Store({
@@ -303,13 +303,13 @@ describe('diff_file_header', () => {
       });
 
       it('displays old and new path if the file was renamed', () => {
-        props.diffFile.renamed_file = true;
+        props.diffFile.viewer.name = diffViewerModes.renamed;
 
         vm = mountComponentWithStore(Component, { props, store });
 
         expect(filePaths()).toHaveLength(2);
-        expect(filePaths()[0]).toHaveText(props.diffFile.old_path);
-        expect(filePaths()[1]).toHaveText(props.diffFile.new_path);
+        expect(filePaths()[0]).toHaveText(props.diffFile.old_path_html);
+        expect(filePaths()[1]).toHaveText(props.diffFile.new_path_html);
       });
     });
 
@@ -319,14 +319,12 @@ describe('diff_file_header', () => {
       const button = vm.$el.querySelector('.btn-clipboard');
 
       expect(button).not.toBe(null);
-      expect(button.dataset.clipboardText).toBe(
-        '{"text":"files/ruby/popen.rb","gfm":"`files/ruby/popen.rb`"}',
-      );
+      expect(button.dataset.clipboardText).toBe('{"text":"CHANGELOG.rb","gfm":"`CHANGELOG.rb`"}');
     });
 
     describe('file mode', () => {
       it('it displays old and new file mode if it changed', () => {
-        props.diffFile.mode_changed = true;
+        props.diffFile.viewer.name = diffViewerModes.mode_changed;
 
         vm = mountComponentWithStore(Component, { props, store });
 
@@ -338,7 +336,7 @@ describe('diff_file_header', () => {
       });
 
       it('does not display the file mode if it has not changed', () => {
-        props.diffFile.mode_changed = false;
+        props.diffFile.viewer.name = diffViewerModes.text;
 
         vm = mountComponentWithStore(Component, { props, store });
 
diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index 1af49282c36..d16bc21022f 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import DiffFileComponent from '~/diffs/components/diff_file.vue';
+import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
 import store from '~/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
@@ -27,8 +28,8 @@ describe('DiffFile', () => {
       expect(el.querySelector('.file-title-name').innerText.indexOf(file_path)).toBeGreaterThan(-1);
       expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
 
-      expect(vm.file.renderIt).toEqual(false);
-      vm.file.renderIt = true;
+      expect(vm.renderIt).toEqual(false);
+      vm.renderIt = true;
 
       vm.$nextTick(() => {
         expect(el.querySelectorAll('.line_content').length).toBeGreaterThan(5);
@@ -38,9 +39,9 @@ describe('DiffFile', () => {
     describe('collapsed', () => {
       it('should not have file content', done => {
         expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(1);
-        expect(vm.file.collapsed).toEqual(false);
-        vm.file.collapsed = true;
-        vm.file.renderIt = true;
+        expect(vm.isCollapsed).toEqual(false);
+        vm.isCollapsed = true;
+        vm.renderIt = true;
 
         vm.$nextTick(() => {
           expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(0);
@@ -50,9 +51,8 @@ describe('DiffFile', () => {
       });
 
       it('should have collapsed text and link', done => {
-        vm.file.renderIt = true;
-        vm.file.collapsed = false;
-        vm.file.highlighted_diff_lines = null;
+        vm.renderIt = true;
+        vm.isCollapsed = true;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).toContain('This diff is collapsed');
@@ -63,8 +63,8 @@ describe('DiffFile', () => {
       });
 
       it('should have collapsed text and link even before rendered', done => {
-        vm.file.renderIt = false;
-        vm.file.collapsed = true;
+        vm.renderIt = false;
+        vm.isCollapsed = true;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).toContain('This diff is collapsed');
@@ -75,10 +75,10 @@ describe('DiffFile', () => {
       });
 
       it('should be collapsed for renamed files', done => {
-        vm.file.renderIt = true;
-        vm.file.collapsed = false;
+        vm.renderIt = true;
+        vm.isCollapsed = false;
         vm.file.highlighted_diff_lines = null;
-        vm.file.renamed_file = true;
+        vm.file.viewer.name = diffViewerModes.renamed;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).not.toContain('This diff is collapsed');
@@ -88,10 +88,10 @@ describe('DiffFile', () => {
       });
 
       it('should be collapsed for mode changed files', done => {
-        vm.file.renderIt = true;
-        vm.file.collapsed = false;
+        vm.renderIt = true;
+        vm.isCollapsed = false;
         vm.file.highlighted_diff_lines = null;
-        vm.file.mode_changed = true;
+        vm.file.viewer.name = diffViewerModes.mode_changed;
 
         vm.$nextTick(() => {
           expect(vm.$el.innerText).not.toContain('This diff is collapsed');
@@ -101,7 +101,7 @@ describe('DiffFile', () => {
       });
 
       it('should have loading icon while loading a collapsed diffs', done => {
-        vm.file.collapsed = true;
+        vm.isCollapsed = true;
         vm.isLoadingCollapsedDiff = true;
 
         vm.$nextTick(() => {
@@ -116,7 +116,7 @@ describe('DiffFile', () => {
   describe('too large diff', () => {
     it('should have too large warning and blob link', done => {
       const BLOB_LINK = '/file/view/path';
-      vm.file.too_large = true;
+      vm.file.viewer.error = diffViewerErrors.too_large;
       vm.file.view_path = BLOB_LINK;
 
       vm.$nextTick(() => {
@@ -140,11 +140,11 @@ describe('DiffFile', () => {
 
       vm.file.highlighted_diff_lines = undefined;
       vm.file.parallel_diff_lines = [];
-      vm.file.collapsed = true;
+      vm.isCollapsed = true;
 
       vm.$nextTick()
         .then(() => {
-          vm.file.collapsed = false;
+          vm.isCollapsed = false;
 
           return vm.$nextTick();
         })
diff --git a/spec/javascripts/diffs/mock_data/diff_discussions.js b/spec/javascripts/diffs/mock_data/diff_discussions.js
index c1e9f791925..4a091b4580b 100644
--- a/spec/javascripts/diffs/mock_data/diff_discussions.js
+++ b/spec/javascripts/diffs/mock_data/diff_discussions.js
@@ -266,7 +266,7 @@ export default {
     blob_name: 'CHANGELOG',
     blob_icon: '<i aria-hidden="true" data-hidden="true" class="fa fa-file-text-o fa-fw"></i>',
     file_hash: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a',
-    file_path: 'CHANGELOG',
+    file_path: 'CHANGELOG.rb',
     new_file: false,
     deleted_file: false,
     renamed_file: false,
@@ -286,7 +286,7 @@ export default {
     content_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
     stored_externally: null,
     external_storage: null,
-    old_path_html: ['CHANGELOG', 'CHANGELOG'],
+    old_path_html: 'CHANGELOG_OLD',
     new_path_html: 'CHANGELOG',
     context_lines_path:
       '/gitlab-org/gitlab-test/blob/c48ee0d1bf3b30453f5b32250ce03134beaa6d13/CHANGELOG/diff',
@@ -485,6 +485,10 @@ export default {
         },
       },
     ],
+    viewer: {
+      name: 'text',
+      error: null,
+    },
   },
   diff_discussion: true,
   truncated_diff_lines: [
diff --git a/spec/javascripts/diffs/mock_data/diff_file.js b/spec/javascripts/diffs/mock_data/diff_file.js
index 031c9842f2f..32af9ea8ddd 100644
--- a/spec/javascripts/diffs/mock_data/diff_file.js
+++ b/spec/javascripts/diffs/mock_data/diff_file.js
@@ -25,6 +25,8 @@ export default {
   text: true,
   viewer: {
     name: 'text',
+    error: null,
+    collapsed: false,
   },
   added_lines: 2,
   removed_lines: 0,
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index b53ae4cecfd..7caa37f45b9 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -262,12 +262,16 @@ describe('DiffsStoreActions', () => {
           {
             id: 1,
             renderIt: false,
-            collapsed: false,
+            viewer: {
+              collapsed: false,
+            },
           },
           {
             id: 2,
             renderIt: false,
-            collapsed: false,
+            viewer: {
+              collapsed: false,
+            },
           },
         ],
       };
@@ -766,7 +770,9 @@ describe('DiffsStoreActions', () => {
       diffFiles: [
         {
           file_hash: 'HASH',
-          collapsed,
+          viewer: {
+            collapsed,
+          },
           renderIt,
         },
       ],
diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js
index 4f69dc92ab8..0ab88e6b2aa 100644
--- a/spec/javascripts/diffs/store/getters_spec.js
+++ b/spec/javascripts/diffs/store/getters_spec.js
@@ -51,13 +51,13 @@ describe('Diffs Module Getters', () => {
 
   describe('hasCollapsedFile', () => {
     it('returns true when all files are collapsed', () => {
-      localState.diffFiles = [{ collapsed: true }, { collapsed: true }];
+      localState.diffFiles = [{ viewer: { collapsed: true } }, { viewer: { collapsed: true } }];
 
       expect(getters.hasCollapsedFile(localState)).toEqual(true);
     });
 
     it('returns true when at least one file is collapsed', () => {
-      localState.diffFiles = [{ collapsed: false }, { collapsed: true }];
+      localState.diffFiles = [{ viewer: { collapsed: false } }, { viewer: { collapsed: true } }];
 
       expect(getters.hasCollapsedFile(localState)).toEqual(true);
     });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index a6f3f9b9dc3..09ee691b602 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -121,8 +121,14 @@ describe('DiffsStoreMutations', () => {
   describe('ADD_COLLAPSED_DIFFS', () => {
     it('should update the state with the given data for the given file hash', () => {
       const fileHash = 123;
-      const state = { diffFiles: [{}, { file_hash: fileHash, existing_field: 0 }] };
-      const data = { diff_files: [{ file_hash: fileHash, extra_field: 1, existing_field: 1 }] };
+      const state = {
+        diffFiles: [{}, { file_hash: fileHash, existing_field: 0 }],
+      };
+      const data = {
+        diff_files: [
+          { file_hash: fileHash, extra_field: 1, existing_field: 1, viewer: { name: 'text' } },
+        ],
+      };
 
       mutations[types.ADD_COLLAPSED_DIFFS](state, { file: state.diffFiles[1], data });
 
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index baf6e111f9f..599ea9cd420 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -601,7 +601,7 @@ describe('DiffsStoreUtils', () => {
     it('returns mode_changed if key has no match', () => {
       expect(
         utils.getDiffMode({
-          mode_changed: true,
+          viewer: { name: 'mode_changed' },
         }),
       ).toBe('mode_changed');
     });
diff --git a/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js
index 6add6cdac4d..660eaddf01f 100644
--- a/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js
+++ b/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js
@@ -22,6 +22,7 @@ describe('DiffViewer', () => {
 
     createComponent({
       diffMode: 'replaced',
+      diffViewerMode: 'image',
       newPath: GREEN_BOX_IMAGE_URL,
       newSha: 'ABC',
       oldPath: RED_BOX_IMAGE_URL,
@@ -45,6 +46,7 @@ describe('DiffViewer', () => {
   it('renders fallback download diff display', done => {
     createComponent({
       diffMode: 'replaced',
+      diffViewerMode: 'added',
       newPath: 'test.abc',
       newSha: 'ABC',
       oldPath: 'testold.abc',
@@ -72,6 +74,7 @@ describe('DiffViewer', () => {
   it('renders renamed component', () => {
     createComponent({
       diffMode: 'renamed',
+      diffViewerMode: 'renamed',
       newPath: 'test.abc',
       newSha: 'ABC',
       oldPath: 'testold.abc',
@@ -84,6 +87,7 @@ describe('DiffViewer', () => {
   it('renders mode changed component', () => {
     createComponent({
       diffMode: 'mode_changed',
+      diffViewerMode: 'image',
       newPath: 'test.abc',
       newSha: 'ABC',
       oldPath: 'testold.abc',
diff --git a/spec/serializers/diff_file_entity_spec.rb b/spec/serializers/diff_file_entity_spec.rb
index 073c13c2cbb..92b649f5b6c 100644
--- a/spec/serializers/diff_file_entity_spec.rb
+++ b/spec/serializers/diff_file_entity_spec.rb
@@ -22,7 +22,7 @@ describe DiffFileEntity do
     let(:request) { EntityRequest.new(project: project, current_user: user) }
     let(:merge_request) { create(:merge_request, source_project: project, target_project: project) }
     let(:entity) { described_class.new(diff_file, request: request, merge_request: merge_request) }
-    let(:exposed_urls) { %i(load_collapsed_diff_url edit_path view_path context_lines_path) }
+    let(:exposed_urls) { %i(edit_path view_path context_lines_path) }
 
     it_behaves_like 'diff file entity'
 
@@ -38,6 +38,12 @@ describe DiffFileEntity do
         expect(response[attribute]).to include(merge_request.target_project.to_param)
       end
     end
+
+    it 'exposes load_collapsed_diff_url if the file viewer is collapsed' do
+      allow(diff_file.viewer).to receive(:collapsed?) { true }
+
+      expect(subject).to include(:load_collapsed_diff_url)
+    end
   end
 
   context '#parallel_diff_lines' do
diff --git a/spec/support/shared_examples/serializers/diff_file_entity_examples.rb b/spec/support/shared_examples/serializers/diff_file_entity_examples.rb
index 1770308f789..96cb71be737 100644
--- a/spec/support/shared_examples/serializers/diff_file_entity_examples.rb
+++ b/spec/support/shared_examples/serializers/diff_file_entity_examples.rb
@@ -6,9 +6,9 @@ shared_examples 'diff file base entity' do
                                :submodule_tree_url, :old_path_html,
                                :new_path_html, :blob, :can_modify_blob,
                                :file_hash, :file_path, :old_path, :new_path,
-                               :collapsed, :text, :diff_refs, :stored_externally,
+                               :viewer, :diff_refs, :stored_externally,
                                :external_storage, :renamed_file, :deleted_file,
-                               :mode_changed, :a_mode, :b_mode, :new_file)
+                               :a_mode, :b_mode, :new_file)
   end
 
   # Converted diff files from GitHub import does not contain blob file
@@ -30,9 +30,9 @@ shared_examples 'diff file entity' do
   it_behaves_like 'diff file base entity'
 
   it 'exposes correct attributes' do
-    expect(subject).to include(:too_large, :added_lines, :removed_lines,
+    expect(subject).to include(:added_lines, :removed_lines,
                                :context_lines_path, :highlighted_diff_lines,
-                               :parallel_diff_lines, :empty)
+                               :parallel_diff_lines)
   end
 
   it 'includes viewer' do