From 32dd02829eee58574e114c10764f3d775639526b Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sun, 10 Mar 2024 21:26:41 +0200 Subject: [PATCH] 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 (cherry picked from commit b5ed42864e306f22305beba50d6ff71df2aea0c6) --- web_src/js/features/repo-issue-content.js | 58 ++++++++++++++--------- 1 file changed, 36 insertions(+), 22 deletions(-) diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 7832641687..9e2b773730 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -1,8 +1,9 @@ import $ from 'jquery'; import {svg} from '../svg.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 i18nTextOptions; let i18nTextDeleteFromHistory; @@ -31,19 +32,27 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH $dialog.find('.dialog-header-options').dropdown({ showOnFocus: false, allowReselection: true, - onChange(_value, _text, $item) { + async onChange(_value, _text, $item) { const optionItem = $item.data('option-item'); if (optionItem === 'delete') { if (window.confirm(i18nTextDeleteFromHistoryConfirm)) { - $.post(`${issueBaseUrl}/content-history/soft-delete?comment_id=${commentId}&history_id=${historyId}`, { - _csrf: csrfToken, - }).done((resp) => { + try { + const params = new URLSearchParams(); + 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) { $dialog.modal('hide'); } else { showErrorToast(resp.message); } - }); + } catch (error) { + console.error('Error:', error); + showErrorToast('An error occurred while deleting the history.'); + } } } else { // required by eslint showErrorToast(`unknown option item: ${optionItem}`); @@ -54,19 +63,24 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH } }); $dialog.modal({ - onShow() { - $.ajax({ - url: `${issueBaseUrl}/content-history/detail?comment_id=${commentId}&history_id=${historyId}`, - data: { - _csrf: csrfToken, - }, - }).done((resp) => { + async onShow() { + try { + const params = new URLSearchParams(); + params.append('comment_id', commentId); + params.append('history_id', historyId); + + 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); // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden. if (resp.canSoftDelete) { $dialog.find('.dialog-header-options').removeClass('gt-hidden'); } - }); + } catch (error) { + console.error('Error:', error); + } }, onHidden() { $dialog.remove(); @@ -103,7 +117,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) { }); } -export function initRepoIssueContentHistory() { +export async function initRepoIssueContentHistory() { const issueIndex = $('#issueIndex').val(); if (!issueIndex) return; @@ -114,12 +128,10 @@ export function initRepoIssueContentHistory() { const repoLink = $('#repolink').val(); const issueBaseUrl = `${appSubUrl}/${repoLink}/issues/${issueIndex}`; - $.ajax({ - url: `${issueBaseUrl}/content-history/overview`, - data: { - _csrf: csrfToken, - }, - }).done((resp) => { + try { + const response = await GET(`${issueBaseUrl}/content-history/overview`); + const resp = await response.json(); + i18nTextEdited = resp.i18n.textEdited; i18nTextDeleteFromHistory = resp.i18n.textDeleteFromHistory; i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm; @@ -133,5 +145,7 @@ export function initRepoIssueContentHistory() { const $itemComment = $(`#issuecomment-${commentId}`); showContentHistoryMenu(issueBaseUrl, $itemComment, commentId); } - }); + } catch (error) { + console.error('Error:', error); + } }