Don't add same line code comment box twice (#11837)

* Don't add same line code comment box twice

Clicking the same '+' button multiple times adds multiple comment boxes
to the same line. Prevent this by assigning a unique key to each comment
box and checking if it already exists in the DOM.

Also cleaned up the code around this a bit.

* Update web_src/js/index.js

Co-authored-by: Lauris BH <lauris@nix.lv>

Co-authored-by: techknowlogick <matti@mdranta.net>
Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2020-06-11 00:16:35 +02:00 committed by GitHub
parent 8ffc0ed13f
commit a05a30c1c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1226,25 +1226,41 @@ function initPullRequestReview() {
$(this).closest('tr').removeClass('focus-lines-new focus-lines-old'); $(this).closest('tr').removeClass('focus-lines-new focus-lines-old');
}); });
$('.add-code-comment').on('click', function (e) { $('.add-code-comment').on('click', function (e) {
// https://github.com/go-gitea/gitea/issues/4745 if ($(e.target).hasClass('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745
if ($(e.target).hasClass('btn-add-single')) {
return;
}
e.preventDefault(); e.preventDefault();
const isSplit = $(this).closest('.code-diff').hasClass('code-diff-split'); const isSplit = $(this).closest('.code-diff').hasClass('code-diff-split');
const side = $(this).data('side'); const side = $(this).data('side');
const idx = $(this).data('idx'); const idx = $(this).data('idx');
const path = $(this).data('path'); const path = $(this).data('path');
const form = $('#pull_review_add_comment').html(); const form = $('#pull_review_add_comment').html();
const tr = $(this).closest('tr'); const tr = $(this).closest('tr');
const oldLineNum = tr.find('.lines-num-old').data('line-num');
const newLineNum = tr.find('.lines-num-new').data('line-num');
const addCommentKey = `${oldLineNum}|${newLineNum}`;
if (document.querySelector(`[data-add-comment-key="${addCommentKey}"]`)) return; // don't add same comment box twice
let ntr = tr.next(); let ntr = tr.next();
if (!ntr.hasClass('add-comment')) { if (!ntr.hasClass('add-comment')) {
ntr = $(`<tr class="add-comment">${ ntr = $(`
isSplit ? '<td class="lines-num"></td><td class="lines-type-marker"></td><td class="add-comment-left"></td><td class="lines-num"></td><td class="lines-type-marker"></td><td class="add-comment-right"></td>' : <tr class="add-comment" data-add-comment-key="${addCommentKey}">
'<td class="lines-num"></td><td class="lines-num"></td><td class="add-comment-left add-comment-right" colspan="2"></td>' ${isSplit ? `
}</tr>`); <td class="lines-num"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-left"></td>
<td class="lines-num"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-right"></td>
` : `
<td class="lines-num"></td>
<td class="lines-num"></td>
<td class="add-comment-left add-comment-right" colspan="2"></td>
`}
</tr>`);
tr.after(ntr); tr.after(ntr);
} }
const td = ntr.find(`.add-comment-${side}`); const td = ntr.find(`.add-comment-${side}`);
let commentCloud = td.find('.comment-code-cloud'); let commentCloud = td.find('.comment-code-cloud');
if (commentCloud.length === 0) { if (commentCloud.length === 0) {