Skip to content

Commit 0679e60

Browse files
yardenshohamsilverwind
yardenshoham
and
silverwind
authored
Remove jQuery AJAX from the repo-issue.js file (go-gitea#29776)
Removed all jQuery AJAX calls and replaced with our fetch wrapper. Tested the following functionalities and they work as before: - due-date update - comment deletion - branch update by merge or rebase - allow edits from maintainers button - reviewer addition or deletion - WIP toggle button - new diff code comment button - issue title edit button # Demo using `fetch` instead of jQuery AJAX ## Updating the due-date of an issue ![due_date](https://github.com/go-gitea/gitea/assets/20454870/7de395d3-63e8-49e8-9a13-8d14fc26810d) ## Deleting a comment ![comment_delete](https://github.com/go-gitea/gitea/assets/20454870/2814e695-44e3-4548-9ee7-7b437bef4b01) ## Updating a branch in a pull request ![branch_update](https://github.com/go-gitea/gitea/assets/20454870/137da77e-acc4-4984-a1bc-be58583bf52a) ## Checking and unchecking the "Allow edits from maintainers" checkbox ![allow_edits](https://github.com/go-gitea/gitea/assets/20454870/8d4829af-5813-432d-90ef-da057f8cdafc) ## Requesting review and removing review request ![reviewer_addition](https://github.com/go-gitea/gitea/assets/20454870/08f210e0-be3f-41af-b271-214a1dd2d0ba) ## Toggling the WIP status of a pull request ![wip](https://github.com/go-gitea/gitea/assets/20454870/dea5e668-1c89-4f3d-a5d6-4c26aefc4814) ## Clicking the new code comment button on the diff page ![code_comment](https://github.com/go-gitea/gitea/assets/20454870/1d17174e-3bba-4cf8-81fe-c3a2c21f80b9) ## Editing the issue title and target branch ![issue_title](https://github.com/go-gitea/gitea/assets/20454870/7099888e-81c0-47d4-9371-8e4469e9e519) --------- Signed-off-by: Yarden Shoham <[email protected]> Co-authored-by: silverwind <[email protected]>
1 parent ce085b2 commit 0679e60

File tree

1 file changed

+114
-84
lines changed

1 file changed

+114
-84
lines changed

‎web_src/js/features/repo-issue.js‎

Lines changed: 114 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import {setFileFolding} from './file-fold.js';
66
import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
77
import {toAbsoluteUrl} from '../utils.js';
88
import {initDropzone} from './common-global.js';
9+
import {POST, GET} from '../modules/fetch.js';
910

10-
const {appSubUrl, csrfToken} = window.config;
11+
const {appSubUrl} = window.config;
1112

1213
export function initRepoIssueTimeTracking() {
1314
$(document).on('click', '.issue-add-time', () => {
@@ -40,7 +41,7 @@ export function initRepoIssueTimeTracking() {
4041
});
4142
}
4243

43-
function updateDeadline(deadlineString) {
44+
async function updateDeadline(deadlineString) {
4445
hideElem($('#deadline-err-invalid-date'));
4546
$('#deadline-loader').addClass('loading');
4647

@@ -56,23 +57,21 @@ function updateDeadline(deadlineString) {
5657
realDeadline = new Date(newDate);
5758
}
5859

59-
$.ajax(`${$('#update-issue-deadline-form').attr('action')}`, {
60-
data: JSON.stringify({
61-
due_date: realDeadline,
62-
}),
63-
headers: {
64-
'X-Csrf-Token': csrfToken,
65-
},
66-
contentType: 'application/json',
67-
type: 'POST',
68-
success() {
60+
try {
61+
const response = await POST($('#update-issue-deadline-form').attr('action'), {
62+
data: {due_date: realDeadline}
63+
});
64+
65+
if (response.ok) {
6966
window.location.reload();
70-
},
71-
error() {
72-
$('#deadline-loader').removeClass('loading');
73-
showElem($('#deadline-err-invalid-date'));
74-
},
75-
});
67+
} else {
68+
throw new Error('Invalid response');
69+
}
70+
} catch (error) {
71+
console.error(error);
72+
$('#deadline-loader').removeClass('loading');
73+
showElem($('#deadline-err-invalid-date'));
74+
}
7675
}
7776

7877
export function initRepoIssueDue() {
@@ -156,12 +155,12 @@ export function initRepoIssueSidebarList() {
156155

157156
export function initRepoIssueCommentDelete() {
158157
// Delete comment
159-
$(document).on('click', '.delete-comment', function () {
158+
$(document).on('click', '.delete-comment', async function () {
160159
const $this = $(this);
161160
if (window.confirm($this.data('locale'))) {
162-
$.post($this.data('url'), {
163-
_csrf: csrfToken,
164-
}).done(() => {
161+
try {
162+
const response = await POST($this.data('url'));
163+
if (!response.ok) throw new Error('Failed to delete comment');
165164
const $conversationHolder = $this.closest('.conversation-holder');
166165

167166
// Check if this was a pending comment.
@@ -186,7 +185,9 @@ export function initRepoIssueCommentDelete() {
186185
}
187186
$conversationHolder.remove();
188187
}
189-
});
188+
} catch (error) {
189+
console.error(error);
190+
}
190191
}
191192
return false;
192193
});
@@ -226,22 +227,32 @@ export function initRepoIssueCodeCommentCancel() {
226227
export function initRepoPullRequestUpdate() {
227228
// Pull Request update button
228229
const $pullUpdateButton = $('.update-button > button');
229-
$pullUpdateButton.on('click', function (e) {
230+
$pullUpdateButton.on('click', async function (e) {
230231
e.preventDefault();
231232
const $this = $(this);
232233
const redirect = $this.data('redirect');
233234
$this.addClass('loading');
234-
$.post($this.data('do'), {
235-
_csrf: csrfToken
236-
}).done((data) => {
237-
if (data.redirect) {
238-
window.location.href = data.redirect;
239-
} else if (redirect) {
240-
window.location.href = redirect;
241-
} else {
242-
window.location.reload();
243-
}
244-
});
235+
let response;
236+
try {
237+
response = await POST($this.data('do'));
238+
} catch (error) {
239+
console.error(error);
240+
} finally {
241+
$this.removeClass('loading');
242+
}
243+
let data;
244+
try {
245+
data = await response?.json(); // the response is probably not a JSON
246+
} catch (error) {
247+
console.error(error);
248+
}
249+
if (data?.redirect) {
250+
window.location.href = data.redirect;
251+
} else if (redirect) {
252+
window.location.href = redirect;
253+
} else {
254+
window.location.reload();
255+
}
245256
});
246257

247258
$('.update-button > .dropdown').dropdown({
@@ -267,20 +278,24 @@ export function initRepoPullRequestAllowMaintainerEdit() {
267278

268279
const promptError = $checkbox.attr('data-prompt-error');
269280
$checkbox.checkbox({
270-
'onChange': () => {
281+
'onChange': async () => {
271282
const checked = $checkbox.checkbox('is checked');
272283
let url = $checkbox.attr('data-url');
273284
url += '/set_allow_maintainer_edit';
274285
$checkbox.checkbox('set disabled');
275-
$.ajax({url, type: 'POST',
276-
data: {_csrf: csrfToken, allow_maintainer_edit: checked},
277-
error: () => {
278-
showTemporaryTooltip($checkbox[0], promptError);
279-
},
280-
complete: () => {
281-
$checkbox.checkbox('set enabled');
282-
},
283-
});
286+
try {
287+
const response = await POST(url, {
288+
data: {allow_maintainer_edit: checked},
289+
});
290+
if (!response.ok) {
291+
throw new Error('Failed to update maintainer edit permission');
292+
}
293+
} catch (error) {
294+
console.error(error);
295+
showTemporaryTooltip($checkbox[0], promptError);
296+
} finally {
297+
$checkbox.checkbox('set enabled');
298+
}
284299
},
285300
});
286301
}
@@ -329,17 +344,15 @@ export function initRepoIssueWipTitle() {
329344
});
330345
}
331346

332-
export async function updateIssuesMeta(url, action, issueIds, elementId) {
333-
return $.ajax({
334-
type: 'POST',
335-
url,
336-
data: {
337-
_csrf: csrfToken,
338-
action,
339-
issue_ids: issueIds,
340-
id: elementId,
341-
},
342-
});
347+
export async function updateIssuesMeta(url, action, issue_ids, id) {
348+
try {
349+
const response = await POST(url, {data: new URLSearchParams({action, issue_ids, id})});
350+
if (!response.ok) {
351+
throw new Error('Failed to update issues meta');
352+
}
353+
} catch (error) {
354+
console.error(error);
355+
}
343356
}
344357

345358
export function initRepoIssueComments() {
@@ -511,15 +524,20 @@ export function initRepoPullRequestReview() {
511524
const td = ntr.find(`.add-comment-${side}`);
512525
const commentCloud = td.find('.comment-code-cloud');
513526
if (commentCloud.length === 0 && !ntr.find('button[name="pending_review"]').length) {
514-
const html = await $.get($(this).closest('[data-new-comment-url]').attr('data-new-comment-url'));
515-
td.html(html);
516-
td.find("input[name='line']").val(idx);
517-
td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
518-
td.find("input[name='path']").val(path);
519-
520-
initDropzone(td.find('.dropzone')[0]);
521-
const editor = await initComboMarkdownEditor(td.find('.combo-markdown-editor'));
522-
editor.focus();
527+
try {
528+
const response = await GET($(this).closest('[data-new-comment-url]').attr('data-new-comment-url'));
529+
const html = await response.text();
530+
td.html(html);
531+
td.find("input[name='line']").val(idx);
532+
td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
533+
td.find("input[name='path']").val(path);
534+
535+
initDropzone(td.find('.dropzone')[0]);
536+
const editor = await initComboMarkdownEditor(td.find('.combo-markdown-editor'));
537+
editor.focus();
538+
} catch (error) {
539+
console.error(error);
540+
}
523541
}
524542
});
525543
}
@@ -547,11 +565,19 @@ export function initRepoIssueWipToggle() {
547565
const title = toggleWip.getAttribute('data-title');
548566
const wipPrefix = toggleWip.getAttribute('data-wip-prefix');
549567
const updateUrl = toggleWip.getAttribute('data-update-url');
550-
await $.post(updateUrl, {
551-
_csrf: csrfToken,
552-
title: title?.startsWith(wipPrefix) ? title.slice(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`,
553-
});
554-
window.location.reload();
568+
569+
try {
570+
const params = new URLSearchParams();
571+
params.append('title', title?.startsWith(wipPrefix) ? title.slice(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`);
572+
573+
const response = await POST(updateUrl, {data: params});
574+
if (!response.ok) {
575+
throw new Error('Failed to toggle WIP status');
576+
}
577+
window.location.reload();
578+
} catch (error) {
579+
console.error(error);
580+
}
555581
});
556582
}
557583

@@ -576,39 +602,43 @@ export function initRepoIssueTitleEdit() {
576602

577603
$('#edit-title').on('click', editTitleToggle);
578604
$('#cancel-edit-title').on('click', editTitleToggle);
579-
$('#save-edit-title').on('click', editTitleToggle).on('click', function () {
580-
const pullrequest_targetbranch_change = function (update_url) {
605+
$('#save-edit-title').on('click', editTitleToggle).on('click', async function () {
606+
const pullrequest_targetbranch_change = async function (update_url) {
581607
const targetBranch = $('#pull-target-branch').data('branch');
582608
const $branchTarget = $('#branch_target');
583609
if (targetBranch === $branchTarget.text()) {
584610
window.location.reload();
585611
return false;
586612
}
587-
$.post(update_url, {
588-
_csrf: csrfToken,
589-
target_branch: targetBranch
590-
}).always(() => {
613+
try {
614+
await POST(update_url, {data: new URLSearchParams({target_branch: targetBranch})});
615+
} catch (error) {
616+
console.error(error);
617+
} finally {
591618
window.location.reload();
592-
});
619+
}
593620
};
594621

595622
const pullrequest_target_update_url = $(this).attr('data-target-update-url');
596623
if ($editInput.val().length === 0 || $editInput.val() === $issueTitle.text()) {
597624
$editInput.val($issueTitle.text());
598-
pullrequest_targetbranch_change(pullrequest_target_update_url);
625+
await pullrequest_targetbranch_change(pullrequest_target_update_url);
599626
} else {
600-
$.post($(this).attr('data-update-url'), {
601-
_csrf: csrfToken,
602-
title: $editInput.val()
603-
}, (data) => {
627+
try {
628+
const params = new URLSearchParams();
629+
params.append('title', $editInput.val());
630+
const response = await POST($(this).attr('data-update-url'), {data: params});
631+
const data = await response.json();
604632
$editInput.val(data.title);
605633
$issueTitle.text(data.title);
606634
if (pullrequest_target_update_url) {
607-
pullrequest_targetbranch_change(pullrequest_target_update_url); // it will reload the window
635+
await pullrequest_targetbranch_change(pullrequest_target_update_url); // it will reload the window
608636
} else {
609637
window.location.reload();
610638
}
611-
});
639+
} catch (error) {
640+
console.error(error);
641+
}
612642
}
613643
return false;
614644
});

0 commit comments

Comments
 (0)