Expand/Collapse all changed files (#23639)

close #23628 

Now in `...` dropdown, you can expand or collapse all diff files that
have loaded.

https://user-images.githubusercontent.com/33891828/227749688-2d406916-3347-49f6-93a5-4092a00e8809.mov

Co-authored-by: silverwind <me@silverwind.io>

web_src/js/features/pull-view-file.js

@@ -4,6 +4,8 @@ const {csrfToken, pageData} = window.config;
 const prReview = pageData.prReview || {};
 const viewedStyleClass = 'viewed-file-checked-form';
 const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all "Viewed" checkbox forms can be found
+const expandFilesBtnSelector = '#expand-files-btn';
+const collapseFilesBtnSelector = '#collapse-files-btn';
 
 
 // Refreshes the summary of viewed files if present
@@ -69,3 +71,21 @@ export function initViewedCheckboxListenerFor() {
     });
   }
 }
+
+export function initExpandAndCollapseFilesButton() {
+  // expand btn
+  document.querySelector(expandFilesBtnSelector)?.addEventListener('click', () => {
+    for (const box of document.querySelectorAll('.file-content[data-folded="true"]')) {
+      setFileFolding(box, box.querySelector('.fold-file'), false);
+    }
+  });
+  // collapse btn, need to exclude the div of “show more”
+  document.querySelector(collapseFilesBtnSelector)?.addEventListener('click', () => {
+    for (const box of document.querySelectorAll('.file-content:not([data-folded="true"])')) {
+      if (box.getAttribute('id') === 'diff-incomplete') continue;
+      setFileFolding(box, box.querySelector('.fold-file'), true);
+    }
+  });
+}
+
+

web_src/js/features/repo-diff.js

@@ -1,12 +1,13 @@
 import $ from 'jquery';
 import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
-import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
+import {initDiffFileTree} from './repo-diff-filetree.js';
 import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
+import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
 
 const {csrfToken} = window.config;
 
-export function initRepoDiffReviewButton() {
+function initRepoDiffReviewButton() {
   const $reviewBox = $('#review-box');
   const $counter = $reviewBox.find('.review-comments-counter');
 
@@ -25,7 +26,7 @@ export function initRepoDiffReviewButton() {
   });
 }
 
-export function initRepoDiffFileViewToggle() {
+function initRepoDiffFileViewToggle() {
   $('.file-view-toggle').on('click', function () {
     const $this = $(this);
     $this.parent().children().removeClass('active');
@@ -37,7 +38,7 @@ export function initRepoDiffFileViewToggle() {
   });
 }
 
-export function initRepoDiffConversationForm() {
+function initRepoDiffConversationForm() {
   $(document).on('submit', '.conversation-holder form', async (e) => {
     e.preventDefault();
 
@@ -152,7 +153,7 @@ function loadMoreFiles(url, callback) {
   });
 }
 
-export function initRepoDiffShowMore() {
+function initRepoDiffShowMore() {
   $(document).on('click', 'a#diff-show-more-files', (e) => {
     e.preventDefault();
 
@@ -186,3 +187,15 @@ export function initRepoDiffShowMore() {
     });
   });
 }
+
+export function initRepoDiffView() {
+  const diffFileList = $('#diff-file-list');
+  if (diffFileList.length === 0) return;
+  initDiffFileTree();
+  initRepoDiffShowMore();
+  initRepoDiffReviewButton();
+  initRepoDiffFileViewToggle();
+  initRepoDiffConversationForm();
+  initViewedCheckboxListenerFor();
+  initExpandAndCollapseFilesButton();
+}