Skip to content
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

Fix repo diff review comment counter increment behaviour #31641

Closed
wants to merge 5 commits into from
Closed

Fix repo diff review comment counter increment behaviour #31641

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3bbb210
Fix repo diff review comment counter increment behaviour
Jul 16, 2024
4cd3734
Remove JQuery usage
Aug 2, 2024
25f947d
Fix lint err
Aug 2, 2024
2f1a5ce
Remove attached flag after callback function has finished
Aug 2, 2024
1e05144
Merge branch 'main' into fix-repo-diff-review-comment-counter
techknowlogick Sep 11, 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
35 changes: 30 additions & 5 deletions web_src/js/features/repo-diff.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,40 @@ function initRepoDiffReviewButton() {
const counter = reviewBox.querySelector('.review-comments-counter');
if (!counter) return;

$(document).on('click', 'button[name="pending_review"]', (e) => {
const $form = $(e.target).closest('form');
// Watch for the form's submit event.
$form.on('submit', () => {
const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1;
function handleFormSubmit(form, textarea) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This architecture is a bit weird:
Why remove and re-add the handler all the time?
Typically, our behavior would rather be "initialize once on page load, and then keep it".

if (form.getAttribute('data-handler-attached') === 'true') return;
form.setAttribute('data-handler-attached', 'true');
form.addEventListener('submit', (event) => {
if (textarea.value.trim() === '') {
event.preventDefault();
return;
}
const num = (parseInt(counter.getAttribute('data-pending-comment-number')) || 0) + 1;
counter.setAttribute('data-pending-comment-number', num);
counter.textContent = num;
animateOnce(reviewBox, 'pulse-1p5-200');
form.removeAttribute('data-handler-attached');
});
}

// Handle submit on click
document.addEventListener('click', (e) => {
if (e.target.name === 'pending_review') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This condition seems wrong to me:
Isn't the target name button here?
Shouldn't it be hasAttribute?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Either way, it's probably better to use

Suggested change
if (e.target.name === 'pending_review') {
if (e.target.matches('[name="pending_review"]') {

const form = e.target.closest('form');
const textarea = form.querySelector('textarea');
handleFormSubmit(form, textarea);
}
});

// Handle submit by ctrl+enter
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'Enter') {
const textarea = e.target;
if (textarea.tagName.toLowerCase() === 'textarea') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

toLowerCase? 🤨

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, why is web_src/js/features/common_form.ts not dispatching this event already?
Fixing the reason why it isn't handled sounds like a better idea to me than duplicating the Ctrl+Enter behavior here manually.

const form = textarea.closest('form');
handleFormSubmit(form, textarea);
}
}
});
}

Expand Down