Do not reload page after adding comments in Pull Request reviews

[jpraet]

Fixes #8861.

Use ajax on PR review page for submitting review comments, adding replies and (un)resolving conversations, instead of refreshing the entire page on each interaction.

[codecov-io]

Codecov Report

Merging #13877 (a8becbe) into master (3c96a37) will decrease coverage by 0.03%.
The diff coverage is 26.38%.

@@            Coverage Diff             @@
##           master   #13877      +/-   ##
==========================================
- Coverage   41.85%   41.81%   -0.04%     
==========================================
  Files         743      743              
  Lines       79393    79453      +60     
==========================================
- Hits        33228    33223       -5     
- Misses      40703    40766      +63     
- Partials     5462     5464       +2     

Impacted Files	Coverage Δ
modules/auth/repo_form.go	39.83% <ø> (ø)
routers/repo/pull_review.go	0.00% <0.00%> (ø)
models/issue_comment.go	52.28% <62.06%> (-0.44%)	⬇️
routers/routes/macaron.go	93.18% <100.00%> (+<0.01%)	⬆️
modules/util/timer.go	42.85% <0.00%> (-42.86%)	⬇️
modules/queue/manager.go	62.13% <0.00%> (-2.96%)	⬇️
modules/charset/charset.go	68.53% <0.00%> (-2.25%)	⬇️
services/gitdiff/gitdiff.go	68.99% <0.00%> (-1.94%)	⬇️
routers/api/v1/repo/pull.go	24.84% <0.00%> (-0.61%)	⬇️
services/pull/pull.go	42.57% <0.00%> (ø)
... and 5 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3c96a37...a8becbe. Read the comment docs.

[silverwind]

Some suggestions. Mostly async ajax requests and simplification.

diff --git a/web_src/js/index.js b/web_src/js/index.js
index fbbd97bdf..b94bf527c 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1275,9 +1275,9 @@ function initPullRequestReview() {
     e.preventDefault();
     $(this).closest('.menu').toggle('visible');
   });

-  $('a.add-code-comment').on('click', function (e) {
+  $('a.add-code-comment').on('click', async function (e) {
     if ($(e.target).hasClass('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745
     e.preventDefault();

     const isSplit = $(this).closest('.code-diff').hasClass('code-diff-split');
@@ -1308,22 +1308,20 @@ function initPullRequestReview() {

     const td = ntr.find(`.add-comment-${side}`);
     let commentCloud = td.find('.comment-code-cloud');
     if (commentCloud.length === 0 && !ntr.find('button[name="is_review"]').length) {
-      const url = $(this).data('new-comment-url');
-      $.get(url, (data) => {
-        td.html(data);
-        commentCloud = td.find('.comment-code-cloud');
-        assingMenuAttributes(commentCloud.find('.menu'));
-        td.find("input[name='line']").val(idx);
-        td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
-        td.find("input[name='path']").val(path);
-        const $textarea = commentCloud.find('textarea');
-        attachTribute($textarea.get(), {mentions: true, emoji: true});
-        const $simplemde = setCommentSimpleMDE($textarea);
-        $textarea.focus();
-        $simplemde.codemirror.focus();
-      });
+      const data = await $.get($(this).data('new-comment-url'));
+      td.html(data);
+      commentCloud = td.find('.comment-code-cloud');
+      assingMenuAttributes(commentCloud.find('.menu'));
+      td.find("input[name='line']").val(idx);
+      td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
+      td.find("input[name='path']").val(path);
+      const $textarea = commentCloud.find('textarea');
+      attachTribute($textarea.get(), {mentions: true, emoji: true});
+      const $simplemde = setCommentSimpleMDE($textarea);
+      $textarea.focus();
+      $simplemde.codemirror.focus();
     }
   });
 }

@@ -2483,31 +2481,26 @@ $(document).ready(async () => {
     e.checked = false;
     $(e).trigger('click');
   });

-  $(document).on('click', '.resolve-conversation', function (e) {
+  $(document).on('click', '.resolve-conversation', async function (e) {
     e.preventDefault();
-    const id = $(this).data('comment-id');
+    const comment_id = $(this).data('comment-id');
     const origin = $(this).data('origin');
     const action = $(this).data('action');
     const url = $(this).data('update-url');

-    $.post(url, {
-      _csrf: csrf,
-      origin,
-      action,
-      comment_id: id,
-    }, (data) => {
-      if ($(this).closest('.conversation-holder').length) {
-        const conversation = $(data);
-        $(this).closest('.conversation-holder').replaceWith(conversation);
-        conversation.find('.dropdown').dropdown();
-        initReactionSelector(conversation);
-        initClipboard();
-      } else {
-        reload();
-      }
-    });
+    const data = await $.post(url, {_csrf: csrf, origin, action, comment_id});

+    if ($(this).closest('.conversation-holder').length) {
+      const conversation = $(data);
+      $(this).closest('.conversation-holder').replaceWith(conversation);
+      conversation.find('.dropdown').dropdown();
+      initReactionSelector(conversation);
+      initClipboard();
+    } else {
+      reload();
+    }
   });

   buttonsClickOnEnter();
   searchUsers();
@@ -3617,27 +3610,23 @@ function initIssueList() {
 $(document).on('click', 'button[name="is_review"]', (e) => {
   $(e.target).closest('form').append('<input type="hidden" name="is_review" value="true">');
 });

-$(document).on('submit', '.conversation-holder form', (e) => {
+$(document).on('submit', '.conversation-holder form', async (e) => {
   e.preventDefault();
   const form = $(e.target);
-  $.post(form.attr('action'), form.serialize(), (data) => {
-    const conversation = $(data);
-    const path = conversation.data('path');
-    const side = conversation.data('side');
-    const idx = conversation.data('idx');
-    const lineType = form.closest('tr').data('line-type');
-    form.closest('.conversation-holder').replaceWith(conversation);
-    if (lineType === 'same') {
-      $(`a.add-code-comment[data-path="${path}"][data-idx="${idx}"]`).addClass('invisible');
-    } else {
-      $(`a.add-code-comment[data-path="${path}"][data-side="${side}"][data-idx="${idx}"]`).addClass('invisible');
-    }
-    conversation.find('.dropdown').dropdown();
-    initReactionSelector(conversation);
-    initClipboard();
-  });
+  const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
+  const {path, side, idx} = newConversationHolder.data();

+  form.closest('.conversation-holder').replaceWith(newConversationHolder);
+  if (form.closest('tr').data('line-type') === 'same') {
+    $(`a.add-code-comment[data-path="${path}"][data-idx="${idx}"]`).addClass('invisible');
+  } else {
+    $(`a.add-code-comment[data-path="${path}"][data-side="${side}"][data-idx="${idx}"]`).addClass('invisible');
+  }
+  newConversationHolder.find('.dropdown').dropdown();
+  initReactionSelector(newConversationHolder);
+  initClipboard();
 });

 window.cancelCodeComment = function (btn) {
   const form = $(btn).closest('form');

[jpraet]

Rebased because there were some merge conflicts. I also extracted some duplicate code. FetchCodeCommentsByLine was initially more or less copied from fetchCodeCommentsByReview. Now they both use a common findCodeComments function instead.

[jpraet]

ping 👀

[lafriks]

🚀