Auto expand collapsed diffs when in single diff file mode

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/230511

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

@@ -89,8 +89,25 @@ export default {
 
       this.setFileCollapsed({ filePath: this.file.file_path, collapsed: newVal });
     },
+    'file.file_hash': {
+      handler: function watchFileHash() {
+        if (
+          window.gon?.features?.autoExpandCollapsedDiffs &&
+          this.viewDiffsFileByFile &&
+          this.file.viewer.collapsed
+        ) {
+          this.isCollapsed = false;
+          this.handleLoadCollapsedDiff();
+        } else {
+          this.isCollapsed = this.file.viewer.collapsed || false;
+        }
+      },
+      immediate: true,
+    },
     'file.viewer.collapsed': function setIsCollapsed(newVal) {
-      this.isCollapsed = newVal;
+      if (!this.viewDiffsFileByFile && !window.gon?.features?.autoExpandCollapsedDiffs) {
+        this.isCollapsed = newVal;
+      }
     },
   },
   created() {

app/controllers/projects/merge_requests_controller.rb

@@ -36,6 +36,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:multiline_comments, @project)
     push_frontend_feature_flag(:file_identifier_hash)
     push_frontend_feature_flag(:batch_suggestions, @project, default_enabled: true)
+    push_frontend_feature_flag(:auto_expand_collapsed_diffs, @project)
   end
 
   before_action do

spec/features/merge_request/user_views_auto_expanding_diff_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'User views diffs file-by-file', :js do
+  let(:merge_request) do
+    create(:merge_request, source_branch: 'squash-large-files', source_project: project, target_project: project)
+  end
+
+  let(:project) { create(:project, :repository) }
+  let(:user) { create(:user, view_diffs_file_by_file: true) }
+
+  before do
+    allow(Gitlab::Git::Diff).to receive(:size_limit).and_return(100.kilobytes)
+    allow(Gitlab::Git::Diff).to receive(:collapse_limit).and_return(10.kilobytes)
+
+    project.add_developer(user)
+
+    sign_in(user)
+
+    visit(diffs_project_merge_request_path(project, merge_request, anchor: '5091f7b9dd6202e37eaedd73d7b75d82f25fdb61'))
+
+    wait_for_requests
+  end
+
+  it 'shows diffs file-by-file' do
+    page.within('#diffs') do
+      expect(page).not_to have_content('This diff is collapsed')
+
+      click_button 'Next'
+
+      expect(page).not_to have_content('This diff is collapsed')
+    end
+  end
+end

spec/frontend/diffs/components/diff_file_spec.js

@@ -128,6 +128,26 @@ describe('DiffFile', () => {
         });
       });
 
+      it('should auto-expand collapsed files when viewDiffsFileByFile is true', done => {
+        vm.$destroy();
+        window.gon = {
+          features: { autoExpandCollapsedDiffs: true },
+        };
+        vm = createComponentWithStore(Vue.extend(DiffFileComponent), createStore(), {
+          file: JSON.parse(JSON.stringify(diffFileMockDataUnreadable)),
+          canCurrentUserFork: false,
+          viewDiffsFileByFile: true,
+        }).$mount();
+
+        vm.$nextTick(() => {
+          expect(vm.$el.innerText).not.toContain('This diff is collapsed');
+
+          window.gon = {};
+
+          done();
+        });
+      });
+
       it('should be collapsed for renamed files', done => {
         vm.renderIt = true;
         vm.isCollapsed = false;