Skip to content

Remove jQuery .attr from the common issue page functions #30083

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 26, 2024
Merged

Remove jQuery .attr from the common issue page functions #30083

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8228dcd
Remove jQuery `.attr` from the common issue page functions
yardenshoham Mar 25, 2024
fdb8bc9
Update web_src/js/features/repo-issue.js
yardenshoham Mar 26, 2024
20fe9b0
Apply suggestions from code review
yardenshoham Mar 26, 2024
6e33f3f
Merge branch 'main' into repo-issue-jquery-attr
yardenshoham Mar 26, 2024
1579b43
Move functions to outer scope
yardenshoham Mar 26, 2024
ae8c68c
Merge branch 'main' into repo-issue-jquery-attr
yardenshoham Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 83 additions & 73 deletions web_src/js/features/repo-issue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,23 @@ export function initRepoIssueTimeTracking() {
}

async function updateDeadline(deadlineString) {
hideElem($('#deadline-err-invalid-date'));
$('#deadline-loader').addClass('is-loading');
hideElem('#deadline-err-invalid-date');
document.getElementById('deadline-loader')?.classList.add('is-loading');

let realDeadline = null;
if (deadlineString !== '') {
const newDate = Date.parse(deadlineString);

if (Number.isNaN(newDate)) {
$('#deadline-loader').removeClass('is-loading');
showElem($('#deadline-err-invalid-date'));
document.getElementById('deadline-loader')?.classList.remove('is-loading');
showElem('#deadline-err-invalid-date');
return false;
}
realDeadline = new Date(newDate);
}

try {
const response = await POST($('#update-issue-deadline-form').attr('action'), {
const response = await POST(document.getElementById('update-issue-deadline-form').getAttribute('action'), {
data: {due_date: realDeadline},
});

Expand All @@ -69,8 +69,8 @@ async function updateDeadline(deadlineString) {
}
} catch (error) {
console.error(error);
$('#deadline-loader').removeClass('is-loading');
showElem($('#deadline-err-invalid-date'));
document.getElementById('deadline-loader').classList.remove('is-loading');
showElem('#deadline-err-invalid-date');
}
}

Expand All @@ -87,6 +87,19 @@ export function initRepoIssueDue() {
});
}

/**
* @param {HTMLElement} item
*/
function excludeLabel(item) {
const href = item.getAttribute('href');
const id = item.getAttribute('data-label-id');

const regStr = `labels=((?:-?[0-9]+%2c)*)(${id})((?:%2c-?[0-9]+)*)&`;
const newStr = 'labels=$1-$2$3&';

window.location = href.replace(new RegExp(regStr), newStr);
}

export function initRepoIssueSidebarList() {
const repolink = $('#repolink').val();
const repoId = $('#repoId').val();
Expand Down Expand Up @@ -123,16 +136,6 @@ export function initRepoIssueSidebarList() {
fullTextSearch: true,
});

function excludeLabel(item) {
const href = $(item).attr('href');
const id = $(item).data('label-id');

const regStr = `labels=((?:-?[0-9]+%2c)*)(${id})((?:%2c-?[0-9]+)*)&`;
const newStr = 'labels=$1-$2$3&';

window.location = href.replace(new RegExp(regStr), newStr);
}

$('.menu a.label-filter-item').each(function () {
$(this).on('click', function (e) {
if (e.altKey) {
Expand All @@ -144,9 +147,9 @@ export function initRepoIssueSidebarList() {

$('.menu .ui.dropdown.label-filter').on('keydown', (e) => {
if (e.altKey && e.keyCode === 13) {
const $selectedItems = $('.menu .ui.dropdown.label-filter .menu .item.selected');
if ($selectedItems.length > 0) {
excludeLabel($($selectedItems[0]));
const selectedItem = document.querySelector('.menu .ui.dropdown.label-filter .menu .item.selected');
if (selectedItem) {
excludeLabel(selectedItem);
}
}
});
Expand All @@ -166,11 +169,11 @@ export function initRepoIssueCommentDelete() {
const $parentTimelineGroup = $this.closest('.timeline-item-group');
// Check if this was a pending comment.
if ($conversationHolder.find('.pending-label').length) {
const $counter = $('#review-box .review-comments-counter');
let num = parseInt($counter.attr('data-pending-comment-number')) - 1 || 0;
const counter = document.querySelector('#review-box .review-comments-counter');
let num = parseInt(counter?.getAttribute('data-pending-comment-number')) - 1 || 0;
num = Math.max(num, 0);
$counter.attr('data-pending-comment-number', num);
$counter.text(num);
counter.setAttribute('data-pending-comment-number', num);
counter.textContent = String(num);
}

$(`#${$this.data('comment-id')}`).remove();
Expand Down Expand Up @@ -279,14 +282,16 @@ export function initRepoPullRequestMergeInstruction() {
}

export function initRepoPullRequestAllowMaintainerEdit() {
const $checkbox = $('#allow-edits-from-maintainers');
if (!$checkbox.length) return;
const checkbox = document.getElementById('allow-edits-from-maintainers');
if (!checkbox) return;

const $checkbox = $(checkbox);

const promptError = $checkbox.attr('data-prompt-error');
const promptError = checkbox.getAttribute('data-prompt-error');
$checkbox.checkbox({
'onChange': async () => {
const checked = $checkbox.checkbox('is checked');
let url = $checkbox.attr('data-url');
let url = checkbox.getAttribute('data-url');
url += '/set_allow_maintainer_edit';
$checkbox.checkbox('set disabled');
try {
Expand All @@ -298,7 +303,7 @@ export function initRepoPullRequestAllowMaintainerEdit() {
}
} catch (error) {
console.error(error);
showTemporaryTooltip($checkbox[0], promptError);
showTemporaryTooltip(checkbox, promptError);
} finally {
$checkbox.checkbox('set enabled');
}
Expand All @@ -325,7 +330,9 @@ export function initRepoIssueReferenceRepositorySearch() {
},
onChange(_value, _text, $choice) {
const $form = $choice.closest('form');
$form.attr('action', `${appSubUrl}/${_text}/issues/new`);
if (!$form.length) return;

$form[0].setAttribute('action', `${appSubUrl}/${_text}/issues/new`);
},
fullTextSearch: true,
});
Expand Down Expand Up @@ -375,17 +382,16 @@ export function initRepoIssueComments() {
window.location.reload();
});

$(document).on('click', (event) => {
const $urlTarget = $(':target');
if (!$urlTarget.length) return;
document.addEventListener('click', (e) => {
const urlTarget = document.querySelector(':target');
if (!urlTarget) return;

const urlTargetId = $urlTarget.attr('id');
const urlTargetId = urlTarget.id;
if (!urlTargetId) return;
if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;

const $target = $(event.target);
if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;

if (!$target.closest(`#${urlTargetId}`).length) {
if (!e.target.closest(`#${urlTargetId}`)) {
const scrollPosition = $(window).scrollTop();
window.location.hash = '';
$(window).scrollTop(scrollPosition);
Expand Down Expand Up @@ -419,30 +425,33 @@ export function initRepoPullRequestReview() {
if (window.history.scrollRestoration !== 'manual') {
window.history.scrollRestoration = 'manual';
}
const $commentDiv = $(window.location.hash);
if ($commentDiv) {
const commentDiv = document.querySelector(window.location.hash);
if (commentDiv) {
// get the name of the parent id
const groupID = $commentDiv.closest('div[id^="code-comments-"]').attr('id');
const groupID = commentDiv.closest('div[id^="code-comments-"]')?.getAttribute('id');
if (groupID && groupID.startsWith('code-comments-')) {
const id = groupID.slice(14);
const $ancestorDiffBox = $commentDiv.closest('.diff-file-box');
const ancestorDiffBox = commentDiv.closest('.diff-file-box');
// on pages like conversation, there is no diff header
const $diffHeader = $ancestorDiffBox.find('.diff-file-header');
const diffHeader = ancestorDiffBox?.querySelector('.diff-file-header');

// offset is for scrolling
let offset = 30;
if ($diffHeader[0]) {
offset += $('.diff-detail-box').outerHeight() + $diffHeader.outerHeight();
if (diffHeader) {
offset += $('.diff-detail-box').outerHeight() + $(diffHeader).outerHeight();
}
$(`#show-outdated-${id}`).addClass('tw-hidden');
$(`#code-comments-${id}`).removeClass('tw-hidden');
$(`#code-preview-${id}`).removeClass('tw-hidden');
$(`#hide-outdated-${id}`).removeClass('tw-hidden');

document.getElementById(`show-outdated-${id}`).classList.add('tw-hidden');
document.getElementById(`code-comments-${id}`).classList.remove('tw-hidden');
document.getElementById(`code-preview-${id}`).classList.remove('tw-hidden');
document.getElementById(`hide-outdated-${id}`).classList.remove('tw-hidden');
// if the comment box is folded, expand it
if ($ancestorDiffBox.attr('data-folded') && $ancestorDiffBox.attr('data-folded') === 'true') {
setFileFolding($ancestorDiffBox[0], $ancestorDiffBox.find('.fold-file')[0], false);
if (ancestorDiffBox.getAttribute('data-folded') === 'true') {
setFileFolding(ancestorDiffBox, ancestorDiffBox.querySelector('.fold-file'), false);
}

window.scrollTo({
top: $commentDiv.offset().top - offset,
top: $(commentDiv).offset().top - offset,
behavior: 'instant',
});
}
Expand Down Expand Up @@ -529,7 +538,7 @@ export function initRepoPullRequestReview() {
const $commentCloud = $td.find('.comment-code-cloud');
if (!$commentCloud.length && !$ntr.find('button[name="pending_review"]').length) {
try {
const response = await GET($(this).closest('[data-new-comment-url]').attr('data-new-comment-url'));
const response = await GET(this.closest('[data-new-comment-url]')?.getAttribute('data-new-comment-url'));
const html = await response.text();
$td.html(html);
$td.find("input[name='line']").val(idx);
Expand Down Expand Up @@ -585,6 +594,22 @@ export function initRepoIssueWipToggle() {
});
}

async function pullrequest_targetbranch_change(update_url) {
const targetBranch = $('#pull-target-branch').data('branch');
const $branchTarget = $('#branch_target');
if (targetBranch === $branchTarget.text()) {
window.location.reload();
return false;
}
try {
await POST(update_url, {data: new URLSearchParams({target_branch: targetBranch})});
} catch (error) {
console.error(error);
} finally {
window.location.reload();
}
}

export function initRepoIssueTitleEdit() {
// Edit issue title
const $issueTitle = $('#issue-title');
Expand All @@ -607,31 +632,15 @@ export function initRepoIssueTitleEdit() {
$('#edit-title').on('click', editTitleToggle);
$('#cancel-edit-title').on('click', editTitleToggle);
$('#save-edit-title').on('click', editTitleToggle).on('click', async function () {
const pullrequest_targetbranch_change = async function (update_url) {
const targetBranch = $('#pull-target-branch').data('branch');
const $branchTarget = $('#branch_target');
if (targetBranch === $branchTarget.text()) {
window.location.reload();
return false;
}
try {
await POST(update_url, {data: new URLSearchParams({target_branch: targetBranch})});
} catch (error) {
console.error(error);
} finally {
window.location.reload();
}
};

const pullrequest_target_update_url = $(this).attr('data-target-update-url');
const pullrequest_target_update_url = this.getAttribute('data-target-update-url');
if (!$editInput.val().length || $editInput.val() === $issueTitle.text()) {
$editInput.val($issueTitle.text());
await pullrequest_targetbranch_change(pullrequest_target_update_url);
} else {
try {
const params = new URLSearchParams();
params.append('title', $editInput.val());
const response = await POST($(this).attr('data-update-url'), {data: params});
const response = await POST(this.getAttribute('data-update-url'), {data: params});
const data = await response.json();
$editInput.val(data.title);
$issueTitle.text(data.title);
Expand Down Expand Up @@ -671,10 +680,11 @@ export function initSingleCommentEditor($commentForm) {
// * normal new issue/pr page, no status-button
// * issue/pr view page, with comment form, has status-button
const opts = {};
const $statusButton = $('#status-button');
if ($statusButton.length) {
const statusButton = document.getElementById('status-button');
if (statusButton) {
opts.onContentChanged = (editor) => {
$statusButton.text($statusButton.attr(editor.value().trim() ? 'data-status-and-comment' : 'data-status'));
const statusText = statusButton.getAttribute(editor.value().trim() ? 'data-status-and-comment' : 'data-status');
statusButton.textContent = statusText;
};
}
initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);
Expand Down