Display click to expand on collapsed diffs

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 &&

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

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;