From d4f30bb585db92d0021dd937c3b5ba7bee38b9d1 Mon Sep 17 00:00:00 2001 From: Andrew Thornton Date: Tue, 10 Jan 2023 22:07:52 +0000 Subject: [PATCH 1/4] Restore function to Show more button There was a serious regression in #21012 which broke the Show More button on the diff page, and the show more button was also broken on the file tree too. This PR fixes this by resetting the pageData.diffFiles as the vue watched value and reattachs a function to the show more button outside of the file tree view. Fix #22380 Signed-off-by: Andrew Thornton --- web_src/js/components/DiffFileTree.vue | 1 + web_src/js/features/repo-diff.js | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index e592574ac175c..9adc1a8f77b7c 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -29,6 +29,7 @@ export default { }, computed: { fileTree() { + pageData.diffFileInfo.files = this.files; const result = []; for (const file of this.files) { // Split file into directories diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 0fb7ee22d7b44..036fb4f3bf3b0 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -119,25 +119,46 @@ function onShowMoreFiles() { export function doLoadMoreFiles(link, diffEnd, callback) { const url = `${link}?skip-to=${diffEnd}&file-only=true`; + loadMoreFiles(url, callback); +} + +function loadMoreFiles(url, callback) { + const $target = $('a#diff-show-more-files'); + if ($target.hasClass('disabled')) { + callback(); + return; + } + $target.addClass('disabled'); $.ajax({ type: 'GET', url, }).done((resp) => { if (!resp) { + $target.removeClass('disabled'); callback(resp); return; } + $('#diff-incomplete').replaceWith($(resp).find('#diff-file-boxes').children()); // By simply rerunning the script we add the new data to our existing // pagedata object. this triggers vue and the filetree and filelist will // render the new elements. $('body').append($(resp).find('script#diff-data-script')); + onShowMoreFiles(); callback(resp); }).fail(() => { + $target.removeClass('disabled'); callback(); }); } export function initRepoDiffShowMore() { + $(document).on('click', 'a#diff-show-more-files', (e) => { + e.preventDefault(); + + const $target = $(e.target); + loadMoreFiles($target.data('href'), () => {}); + }); + $(document).on('click', 'a.diff-show-more-button', (e) => { e.preventDefault(); const $target = $(e.target); From dfc7723de59e8af3ca53ec624db43858e84e02c4 Mon Sep 17 00:00:00 2001 From: Andrew Thornton Date: Tue, 10 Jan 2023 22:26:22 +0000 Subject: [PATCH 2/4] fix margins slightly Signed-off-by: Andrew Thornton --- web_src/js/components/DiffFileTree.vue | 2 +- web_src/less/_repository.less | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 9adc1a8f77b7c..f6abad500a2e2 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -8,7 +8,7 @@
- {{ tooManyFilesMessage }}{{ showMoreMessage }} + {{ tooManyFilesMessage }}{{ showMoreMessage }}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 3ceb9e30c3c89..646cf4e60e28a 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1667,6 +1667,9 @@ background-color: var(--color-teal); } } + .button { + padding: 8px 12px; + } } .diff-box .header:not(.resolved-placeholder) { From 23032e21a3864e91ed2944d06b6cc9e346cff569 Mon Sep 17 00:00:00 2001 From: Andrew Thornton Date: Thu, 12 Jan 2023 22:50:23 +0000 Subject: [PATCH 3/4] move the pageData expose into mounted Signed-off-by: Andrew Thornton --- web_src/js/components/DiffFileTree.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index f6abad500a2e2..6d77b202410f6 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -29,7 +29,6 @@ export default { }, computed: { fileTree() { - pageData.diffFileInfo.files = this.files; const result = []; for (const file of this.files) { // Split file into directories @@ -95,6 +94,9 @@ export default { mounted() { // ensure correct buttons when we are mounted to the dom this.adjustToggleButton(this.fileTreeIsVisible); + // replace the pageData.diffFileInfo.files with our watched data so we get updates + pageData.diffFileInfo.files = this.files; + document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility); }, unmounted() { From a531c6ed02a8938a04a9d5a252a93f5f059249ce Mon Sep 17 00:00:00 2001 From: Andrew Thornton Date: Thu, 12 Jan 2023 22:56:05 +0000 Subject: [PATCH 4/4] rename diff-show-more-button to diff-load-button as it is loading the diff for a specific file and clearly the old name is confusing people Signed-off-by: Andrew Thornton --- templates/repo/diff/box.tmpl | 2 +- web_src/js/features/repo-diff.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 15eff81099bbd..8482c31cdc9c4 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -143,7 +143,7 @@ {{$.locale.Tr "repo.diff.file_suppressed_line_too_long"}} {{else}} {{$.locale.Tr "repo.diff.file_suppressed"}} - {{$.locale.Tr "repo.diff.load"}} + {{$.locale.Tr "repo.diff.load"}} {{end}} {{else}} {{$.locale.Tr "repo.diff.bin_not_shown"}} diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 036fb4f3bf3b0..9b5da7de828b1 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -159,7 +159,7 @@ export function initRepoDiffShowMore() { loadMoreFiles($target.data('href'), () => {}); }); - $(document).on('click', 'a.diff-show-more-button', (e) => { + $(document).on('click', 'a.diff-load-button', (e) => { e.preventDefault(); const $target = $(e.target);