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>

3 files changed, 40 insertions, 18 deletions

diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js
index 06d78d78c2..c6985efadb 100644
--- a/web_src/js/features/pull-view-file.js
+++ b/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);
+    }
+  });
+}
+
+
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index df66db7f6c..9be4bc8d0f 100644
--- a/web_src/js/features/repo-diff.js
+++ b/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();
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index f5584d2940..878afb10d7 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -21,15 +21,9 @@ import {initRepoIssueContentHistory} from './features/repo-issue-content.js';
 import {initStopwatch} from './features/stopwatch.js';
 import {initFindFileInRepo} from './features/repo-findfile.js';
 import {initCommentContent, initMarkupContent} from './markup/content.js';
-import {initDiffFileTree} from './features/repo-diff-filetree.js';
 
 import {initUserAuthLinkAccountView, initUserAuthOauth2} from './features/user-auth.js';
 import {
-  initRepoDiffConversationForm,
-  initRepoDiffFileViewToggle,
-  initRepoDiffReviewButton, initRepoDiffShowMore,
-} from './features/repo-diff.js';
-import {
   initRepoIssueDue,
   initRepoIssueReferenceRepositorySearch,
   initRepoIssueTimeTracking,
@@ -68,7 +62,7 @@ import {
   initRepoSettingsCollaboration,
   initRepoSettingSearchTeamBox,
 } from './features/repo-settings.js';
-import {initViewedCheckboxListenerFor} from './features/pull-view-file.js';
+import {initRepoDiffView} from './features/repo-diff.js';
 import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.js';
 import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.js';
 import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.js';
@@ -151,11 +145,6 @@ onDomReady(() => {
   initRepoCommentForm();
   initRepoEllipsisButton();
   initRepoCommitLastCommitLoader();
-  initRepoDiffConversationForm();
-  initRepoDiffFileViewToggle();
-  initRepoDiffReviewButton();
-  initRepoDiffShowMore();
-  initDiffFileTree();
   initRepoEditor();
   initRepoGraphGit();
   initRepoIssueContentHistory();
@@ -190,5 +179,5 @@ onDomReady(() => {
   initUserAuthWebAuthn();
   initUserAuthWebAuthnRegister();
   initUserSettings();
-  initViewedCheckboxListenerFor();
+  initRepoDiffView();
 });