Merge branch '7573-show-click-to-expand-on-not-rendered-diffs' into 'master'

Display click to expand on collapsed diffs

Closes #51466

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

3 files changed, 19 insertions, 1 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 940e06a75cc..bcbe374a90c 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -44,7 +44,7 @@ export default {
     },
     showExpandMessage() {
       return (
-        !this.isCollapsed &&
+        this.isCollapsed ||
         !this.file.highlightedDiffLines &&
         !this.isLoadingCollapsedDiff &&
         !this.file.tooLarge &&
diff --git a/changelogs/unreleased/7573-show-click-to-expand-on-not-rendered-diffs.yml b/changelogs/unreleased/7573-show-click-to-expand-on-not-rendered-diffs.yml
new file mode 100644
index 00000000000..4611a1f1f29
--- /dev/null
+++ b/changelogs/unreleased/7573-show-click-to-expand-on-not-rendered-diffs.yml
@@ -0,0 +1,6 @@
+---
+title: Fix absent Click to Expand link on diffs not rendered on first load of Merge
+  Requests Changes tab
+merge_request: 21716
+author:
+type: fixed
diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js
index 845fef23db6..2a52cd2b179 100644
--- a/spec/javascripts/diffs/components/diff_file_spec.js
+++ b/spec/javascripts/diffs/components/diff_file_spec.js
@@ -63,6 +63,18 @@ describe('DiffFile', () => {
         });
       });
 
+      it('should have collapsed text and link even before rendered', done => {
+        vm.file.renderIt = false;
+        vm.file.collapsed = 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 have loading icon while loading a collapsed diffs', done => {
         vm.file.collapsed = true;
         vm.isLoadingCollapsedDiff = true;