Merge branch 'bug-fix-27164-Image-cannot-be-collapsed-on-merge-request-changes-tab' into 'master'

Bug fix 27164 image cannot be collapsed on merge request changes tab

See merge request gitlab-org/gitlab!18917

app/assets/javascripts/diffs/components/diff_file.vue

@@ -54,11 +54,12 @@ export default {
     showLoadingIcon() {
       return this.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
     },
-    hasDiffLines() {
+    hasDiff() {
       return (
-        this.file.highlighted_diff_lines &&
-        this.file.parallel_diff_lines &&
-        this.file.parallel_diff_lines.length > 0
+        (this.file.highlighted_diff_lines &&
+          this.file.parallel_diff_lines &&
+          this.file.parallel_diff_lines.length > 0) ||
+        !this.file.blob.readable_text
       );
     },
     isFileTooLarge() {
@@ -82,7 +83,7 @@ export default {
   },
   watch: {
     isCollapsed: function fileCollapsedWatch(newVal, oldVal) {
-      if (!newVal && oldVal && !this.hasDiffLines) {
+      if (!newVal && oldVal && !this.hasDiff) {
         this.handleLoadCollapsedDiff();
       }
 
@@ -103,7 +104,7 @@ export default {
       'setFileCollapsed',
     ]),
     handleToggle() {
-      if (!this.hasDiffLines) {
+      if (!this.hasDiff) {
         this.handleLoadCollapsedDiff();
       } else {
         this.isCollapsed = !this.isCollapsed;

changelogs/unreleased/bug-fix-27164-Image-cannot-be-collapsed-on-merge-request-changes-tab.yml

+---
+title: 'fixed #27164 Image cannot be collapsed on merge request changes tab'
+merge_request: 18917
+author: Jannik Lehmann
+type: fixed

spec/javascripts/diffs/components/diff_file_spec.js

@@ -3,14 +3,15 @@ import DiffFileComponent from '~/diffs/components/diff_file.vue';
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
 import { createStore } from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import diffFileMockData from '../mock_data/diff_file';
+import diffFileMockDataReadable from '../mock_data/diff_file';
+import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 
 describe('DiffFile', () => {
   let vm;
 
   beforeEach(() => {
     vm = createComponentWithStore(Vue.extend(DiffFileComponent), createStore(), {
-      file: JSON.parse(JSON.stringify(diffFileMockData)),
+      file: JSON.parse(JSON.stringify(diffFileMockDataReadable)),
       canCurrentUserFork: false,
     }).$mount();
   });
@@ -81,6 +82,24 @@ describe('DiffFile', () => {
         });
       });
 
+      it('should be collapsable for unreadable files', done => {
+        vm.$destroy();
+        vm = createComponentWithStore(Vue.extend(DiffFileComponent), createStore(), {
+          file: JSON.parse(JSON.stringify(diffFileMockDataUnreadable)),
+          canCurrentUserFork: false,
+        }).$mount();
+
+        vm.renderIt = false;
+        vm.isCollapsed = true;
+
+        vm.$nextTick(() => {
+          expect(vm.$el.innerText).toContain('This diff is collapsed');
+          expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
+
+          done();
+        });
+      });
+
       it('should be collapsed for renamed files', done => {
         vm.renderIt = true;
         vm.isCollapsed = false;
@@ -184,5 +203,31 @@ describe('DiffFile', () => {
         .then(done)
         .catch(done.fail);
     });
+
+    it('does not call handleLoadCollapsedDiff if collapsed changed & file is unreadable', done => {
+      vm.$destroy();
+      vm = createComponentWithStore(Vue.extend(DiffFileComponent), createStore(), {
+        file: JSON.parse(JSON.stringify(diffFileMockDataUnreadable)),
+        canCurrentUserFork: false,
+      }).$mount();
+
+      spyOn(vm, 'handleLoadCollapsedDiff');
+
+      vm.file.highlighted_diff_lines = undefined;
+      vm.file.parallel_diff_lines = [];
+      vm.isCollapsed = true;
+
+      vm.$nextTick()
+        .then(() => {
+          vm.isCollapsed = false;
+
+          return vm.$nextTick();
+        })
+        .then(() => {
+          expect(vm.handleLoadCollapsedDiff).not.toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 });

spec/javascripts/diffs/mock_data/diff_file_unreadable.js

+export default {
+  submodule: false,
+  submodule_link: null,
+  blob: {
+    id: '9e10516ca50788acf18c518a231914a21e5f16f7',
+    path: 'CHANGELOG',
+    name: 'CHANGELOG',
+    mode: '100644',
+    readable_text: false,
+    icon: 'file-text-o',
+  },
+  blob_path: 'CHANGELOG',
+  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',
+  new_file: false,
+  deleted_file: false,
+  renamed_file: false,
+  old_path: 'CHANGELOG',
+  new_path: 'CHANGELOG',
+  mode_changed: false,
+  a_mode: '100644',
+  b_mode: '100644',
+  text: true,
+  viewer: {
+    name: 'text',
+    error: null,
+    collapsed: false,
+  },
+  added_lines: 0,
+  removed_lines: 0,
+  diff_refs: {
+    base_sha: 'e63f41fe459e62e1228fcef60d7189127aeba95a',
+    start_sha: 'd9eaefe5a676b820c57ff18cf5b68316025f7962',
+    head_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
+  },
+  content_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
+  stored_externally: null,
+  external_storage: null,
+  old_path_html: 'CHANGELOG',
+  new_path_html: 'CHANGELOG',
+  edit_path: '/gitlab-org/gitlab-test/edit/spooky-stuff/CHANGELOG',
+  view_path: '/gitlab-org/gitlab-test/blob/spooky-stuff/CHANGELOG',
+  replaced_view_path: null,
+  collapsed: false,
+  renderIt: false,
+  too_large: false,
+  context_lines_path:
+    '/gitlab-org/gitlab-test/blob/c48ee0d1bf3b30453f5b32250ce03134beaa6d13/CHANGELOG/diff',
+  highlighted_diff_lines: [
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1',
+      type: 'new',
+      old_line: null,
+      new_line: 1,
+      discussions: [],
+      text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+      rich_text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
+      type: 'new',
+      old_line: null,
+      new_line: 2,
+      discussions: [],
+      text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
+      rich_text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
+      type: null,
+      old_line: 1,
+      new_line: 3,
+      discussions: [],
+      text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+      rich_text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
+      type: null,
+      old_line: 2,
+      new_line: 4,
+      discussions: [],
+      text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+      rich_text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
+      type: null,
+      old_line: 3,
+      new_line: 5,
+      discussions: [],
+      text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+      rich_text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: null,
+      type: 'match',
+      old_line: null,
+      new_line: null,
+      discussions: [],
+      text: '',
+      rich_text: '',
+      meta_data: {
+        old_pos: 3,
+        new_pos: 5,
+      },
+    },
+  ],
+  parallel_diff_lines: [
+    {
+      left: {
+        type: 'empty-cell',
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1',
+        type: 'new',
+        old_line: null,
+        new_line: 1,
+        discussions: [],
+        text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+        rich_text: '<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        type: 'empty-cell',
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
+        type: 'new',
+        old_line: null,
+        new_line: 2,
+        discussions: [],
+        text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
+        rich_text: '<span id="LC2" class="line" lang="plaintext"></span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_Code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
+        type: null,
+        old_line: 1,
+        new_line: 3,
+        discussions: [],
+        text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        meta_data: null,
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
+        type: null,
+        old_line: 1,
+        new_line: 3,
+        discussions: [],
+        text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
+        type: null,
+        old_line: 2,
+        new_line: 4,
+        discussions: [],
+        text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+        rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n',
+        meta_data: null,
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
+        type: null,
+        old_line: 2,
+        new_line: 4,
+        discussions: [],
+        text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+        rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
+        type: null,
+        old_line: 3,
+        new_line: 5,
+        discussions: [],
+        text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        rich_text: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        meta_data: null,
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
+        type: null,
+        old_line: 3,
+        new_line: 5,
+        discussions: [],
+        text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        rich_text: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_code: null,
+        type: 'match',
+        old_line: null,
+        new_line: null,
+        discussions: [],
+        text: '',
+        rich_text: '',
+        meta_data: {
+          old_pos: 3,
+          new_pos: 5,
+        },
+      },
+      right: {
+        line_code: null,
+        type: 'match',
+        old_line: null,
+        new_line: null,
+        discussions: [],
+        text: '',
+        rich_text: '',
+        meta_data: {
+          old_pos: 3,
+          new_pos: 5,
+        },
+      },
+    },
+  ],
+  discussions: [],
+  renderingLines: false,
+};