From 32dd02829eee58574e114c10764f3d775639526b Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
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 <git@yardenshoham.com>
(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 783264168..9e2b77373 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);
+  }
 }