Remove jQuery AJAX from the comment edit history (#29703)

- Removed all jQuery AJAX calls and replaced with our fetch wrapper
- Tested the comment edit history list, diff, and delete functionality
and it works as before

# Demo using `fetch` instead of jQuery AJAX

![demo](https://github.com/go-gitea/gitea/assets/20454870/e8c557bc-f2b9-4d73-b55e-0850c1b19364)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
This commit is contained in:
Yarden Shoham 2024-03-10 21:26:41 +02:00 committed by GitHub
parent 5665a0212b
commit b5ed42864e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 22 deletions

View File

@ -1,8 +1,9 @@
import $ from 'jquery'; import $ from 'jquery';
import {svg} from '../svg.js'; import {svg} from '../svg.js';
import {showErrorToast} from '../modules/toast.js'; import {showErrorToast} from '../modules/toast.js';
import {GET, POST} from '../modules/fetch.js';
const {appSubUrl, csrfToken} = window.config; const {appSubUrl} = window.config;
let i18nTextEdited; let i18nTextEdited;
let i18nTextOptions; let i18nTextOptions;
let i18nTextDeleteFromHistory; let i18nTextDeleteFromHistory;
@ -31,19 +32,27 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
$dialog.find('.dialog-header-options').dropdown({ $dialog.find('.dialog-header-options').dropdown({
showOnFocus: false, showOnFocus: false,
allowReselection: true, allowReselection: true,
onChange(_value, _text, $item) { async onChange(_value, _text, $item) {
const optionItem = $item.data('option-item'); const optionItem = $item.data('option-item');
if (optionItem === 'delete') { if (optionItem === 'delete') {
if (window.confirm(i18nTextDeleteFromHistoryConfirm)) { if (window.confirm(i18nTextDeleteFromHistoryConfirm)) {
$.post(`${issueBaseUrl}/content-history/soft-delete?comment_id=${commentId}&history_id=${historyId}`, { try {
_csrf: csrfToken, const params = new URLSearchParams();
}).done((resp) => { params.append('comment_id', commentId);
params.append('history_id', historyId);
const response = await POST(`${issueBaseUrl}/content-history/soft-delete?${params.toString()}`);
const resp = await response.json();
if (resp.ok) { if (resp.ok) {
$dialog.modal('hide'); $dialog.modal('hide');
} else { } else {
showErrorToast(resp.message); showErrorToast(resp.message);
} }
}); } catch (error) {
console.error('Error:', error);
showErrorToast('An error occurred while deleting the history.');
}
} }
} else { // required by eslint } else { // required by eslint
showErrorToast(`unknown option item: ${optionItem}`); showErrorToast(`unknown option item: ${optionItem}`);
@ -54,19 +63,24 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
} }
}); });
$dialog.modal({ $dialog.modal({
onShow() { async onShow() {
$.ajax({ try {
url: `${issueBaseUrl}/content-history/detail?comment_id=${commentId}&history_id=${historyId}`, const params = new URLSearchParams();
data: { params.append('comment_id', commentId);
_csrf: csrfToken, params.append('history_id', historyId);
},
}).done((resp) => { const url = `${issueBaseUrl}/content-history/detail?${params.toString()}`;
const response = await GET(url);
const resp = await response.json();
$dialog.find('.comment-diff-data').removeClass('is-loading').html(resp.diffHtml); $dialog.find('.comment-diff-data').removeClass('is-loading').html(resp.diffHtml);
// there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden. // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
if (resp.canSoftDelete) { if (resp.canSoftDelete) {
$dialog.find('.dialog-header-options').removeClass('gt-hidden'); $dialog.find('.dialog-header-options').removeClass('gt-hidden');
} }
}); } catch (error) {
console.error('Error:', error);
}
}, },
onHidden() { onHidden() {
$dialog.remove(); $dialog.remove();
@ -103,7 +117,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
}); });
} }
export function initRepoIssueContentHistory() { export async function initRepoIssueContentHistory() {
const issueIndex = $('#issueIndex').val(); const issueIndex = $('#issueIndex').val();
if (!issueIndex) return; if (!issueIndex) return;
@ -114,12 +128,10 @@ export function initRepoIssueContentHistory() {
const repoLink = $('#repolink').val(); const repoLink = $('#repolink').val();
const issueBaseUrl = `${appSubUrl}/${repoLink}/issues/${issueIndex}`; const issueBaseUrl = `${appSubUrl}/${repoLink}/issues/${issueIndex}`;
$.ajax({ try {
url: `${issueBaseUrl}/content-history/overview`, const response = await GET(`${issueBaseUrl}/content-history/overview`);
data: { const resp = await response.json();
_csrf: csrfToken,
},
}).done((resp) => {
i18nTextEdited = resp.i18n.textEdited; i18nTextEdited = resp.i18n.textEdited;
i18nTextDeleteFromHistory = resp.i18n.textDeleteFromHistory; i18nTextDeleteFromHistory = resp.i18n.textDeleteFromHistory;
i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm; i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm;
@ -133,5 +145,7 @@ export function initRepoIssueContentHistory() {
const $itemComment = $(`#issuecomment-${commentId}`); const $itemComment = $(`#issuecomment-${commentId}`);
showContentHistoryMenu(issueBaseUrl, $itemComment, commentId); showContentHistoryMenu(issueBaseUrl, $itemComment, commentId);
} }
}); } catch (error) {
console.error('Error:', error);
}
} }