Remove jQuery AJAX from the diff functions (#29743)

- Removed all jQuery AJAX calls and replaced with our fetch wrapper
- Tested the review conversation comment, resolve, unresolve, show more
files, and load diff functionality and it works as before

![demo](https://github.com/go-gitea/gitea/assets/20454870/cc0bed59-f11f-4e48-bfa3-59ab52d9889e)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 70e077036f8d3026cecddb746a1de69e02ab9b9a)

Conflicts:
	web_src/js/features/repo-diff.js
This commit is contained in:
Yarden Shoham 2024-03-15 00:21:14 +02:00 committed by Earl Warren
parent 9df7f56361
commit edf28c7432
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00

View file

@ -8,8 +8,9 @@ import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndC
import {initImageDiff} from './imagediff.js'; import {initImageDiff} from './imagediff.js';
import {showErrorToast} from '../modules/toast.js'; import {showErrorToast} from '../modules/toast.js';
import {submitEventSubmitter} from '../utils/dom.js'; import {submitEventSubmitter} from '../utils/dom.js';
import {POST, GET} from '../modules/fetch.js';
const {csrfToken, pageData, i18n} = window.config; const {pageData, i18n} = window.config;
function initRepoDiffReviewButton() { function initRepoDiffReviewButton() {
const $reviewBox = $('#review-box'); const $reviewBox = $('#review-box');
@ -65,8 +66,9 @@ function initRepoDiffConversationForm() {
if (isSubmittedByButton && submitter.name) { if (isSubmittedByButton && submitter.name) {
formData.append(submitter.name, submitter.value); formData.append(submitter.name, submitter.value);
} }
const formDataString = String(new URLSearchParams(formData));
const $newConversationHolder = $(await $.post($form.attr('action'), formDataString)); const response = await POST($form.attr('action'), {data: formData});
const $newConversationHolder = $(await response.text());
const {path, side, idx} = $newConversationHolder.data(); const {path, side, idx} = $newConversationHolder.data();
$form.closest('.conversation-holder').replaceWith($newConversationHolder); $form.closest('.conversation-holder').replaceWith($newConversationHolder);
@ -92,7 +94,9 @@ function initRepoDiffConversationForm() {
const action = $(this).data('action'); const action = $(this).data('action');
const url = $(this).data('update-url'); const url = $(this).data('update-url');
const data = await $.post(url, {_csrf: csrfToken, origin, action, comment_id}); try {
const response = await POST(url, {data: new URLSearchParams({origin, action, comment_id})});
const data = await response.text();
if ($(this).closest('.conversation-holder').length) { if ($(this).closest('.conversation-holder').length) {
const conversation = $(data); const conversation = $(data);
@ -102,6 +106,9 @@ function initRepoDiffConversationForm() {
} else { } else {
window.location.reload(); window.location.reload();
} }
} catch (error) {
console.error('Error:', error);
}
}); });
} }
@ -135,7 +142,7 @@ function onShowMoreFiles() {
initImageDiff(); initImageDiff();
} }
export function loadMoreFiles(url) { export async function loadMoreFiles(url) {
const $target = $('a#diff-show-more-files'); const $target = $('a#diff-show-more-files');
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) { if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
return; return;
@ -143,10 +150,10 @@ export function loadMoreFiles(url) {
pageData.diffFileInfo.isLoadingNewData = true; pageData.diffFileInfo.isLoadingNewData = true;
$target.addClass('disabled'); $target.addClass('disabled');
$.ajax({
type: 'GET', try {
url, const response = await GET(url);
}).done((resp) => { const resp = await response.text();
const $resp = $(resp); const $resp = $(resp);
// the response is a full HTML page, we need to extract the relevant contents: // the response is a full HTML page, we need to extract the relevant contents:
// 1. append the newly loaded file list items to the existing list // 1. append the newly loaded file list items to the existing list
@ -155,10 +162,13 @@ export function loadMoreFiles(url) {
$('body').append($resp.find('script#diff-data-script')); $('body').append($resp.find('script#diff-data-script'));
onShowMoreFiles(); onShowMoreFiles();
}).always(() => { } catch (error) {
console.error('Error:', error);
showErrorToast('An error occurred while loading more files.');
} finally {
$target.removeClass('disabled'); $target.removeClass('disabled');
pageData.diffFileInfo.isLoadingNewData = false; pageData.diffFileInfo.isLoadingNewData = false;
}); }
} }
function initRepoDiffShowMore() { function initRepoDiffShowMore() {
@ -170,7 +180,7 @@ function initRepoDiffShowMore() {
loadMoreFiles(linkLoadMore); loadMoreFiles(linkLoadMore);
}); });
$(document).on('click', 'a.diff-load-button', (e) => { $(document).on('click', 'a.diff-load-button', async (e) => {
e.preventDefault(); e.preventDefault();
const $target = $(e.target); const $target = $(e.target);
@ -181,19 +191,21 @@ function initRepoDiffShowMore() {
$target.addClass('disabled'); $target.addClass('disabled');
const url = $target.data('href'); const url = $target.data('href');
$.ajax({
type: 'GET', try {
url, const response = await GET(url);
}).done((resp) => { const resp = await response.text();
if (!resp) { if (!resp) {
$target.removeClass('disabled');
return; return;
} }
$target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children()); $target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children());
onShowMoreFiles(); onShowMoreFiles();
}).fail(() => { } catch (error) {
console.error('Error:', error);
} finally {
$target.removeClass('disabled'); $target.removeClass('disabled');
}); }
}); });
} }