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>

options/locale/locale_en-US.ini

@@ -1572,6 +1572,8 @@ pulls.compare_changes_desc = Select the branch to merge into and the branch to p
 pulls.has_viewed_file = Viewed
 pulls.has_changed_since_last_review = Changed since your last review
 pulls.viewed_files_label = %[1]d / %[2]d files viewed
+pulls.expand_files = Expand all files
+pulls.collapse_files = Collapse all files
 pulls.compare_base = merge into
 pulls.compare_compare = pull from
 pulls.switch_comparison_type = Switch comparison type

templates/repo/diff/options_dropdown.tmpl

@@ -12,5 +12,7 @@
 			<a class="item" href="{{$.RepoLink}}/commit/{{PathEscape .Commit.ID.String}}.patch" download="{{ShortSha .Commit.ID.String}}.patch">{{.locale.Tr "repo.diff.download_patch"}}</a>
 			<a class="item" href="{{$.RepoLink}}/commit/{{PathEscape .Commit.ID.String}}.diff" download="{{ShortSha .Commit.ID.String}}.diff">{{.locale.Tr "repo.diff.download_diff"}}</a>
 		{{end}}
+		<a id="expand-files-btn" class="item">{{.locale.Tr "repo.pulls.expand_files"}}</a>
+		<a id="collapse-files-btn"class="item">{{.locale.Tr "repo.pulls.collapse_files"}}</a>
 	</div>
 </div>

web_src/css/review.css

@@ -256,7 +256,7 @@ a.blob-excerpt:hover {
 .changed-since-last-review {
   border: 1px var(--color-accent) solid;
   background-color: var(--color-small-accent);
-  border-radius: 15px;
+  border-radius: var(--border-radius);
   padding: 4px 8px;
   margin: -8px 0; /* just like other buttons in the diff box header */
   font-size: 0.857rem; /* just like .ui.tiny.button */

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();
+}

web_src/js/index.js

@@ -21,14 +21,8 @@ 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,
@@ -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();
 });