mirror of
				https://gitee.com/gitea/gitea
				synced 2025-11-04 16:40:24 +08:00 
			
		
		
		
	Do not reload page after adding comments in Pull Request reviews (#13877)
Fixed #8861 * use ajax on PR review page * handle review comments * extract duplicate code FetchCodeCommentsByLine was initially more or less copied from fetchCodeCommentsByReview. Now they both use a common findCodeComments function instead * use the Engine that was passed into the method Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
		@@ -907,7 +907,7 @@ async function initRepository() {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // Quote reply
 | 
			
		||||
    $('.quote-reply').on('click', function (event) {
 | 
			
		||||
    $(document).on('click', '.quote-reply', function (event) {
 | 
			
		||||
      $(this).closest('.dropdown').find('.menu').toggle('visible');
 | 
			
		||||
      const target = $(this).data('target');
 | 
			
		||||
      const quote = $(`#comment-${target}`).text().replace(/\n/g, '\n> ');
 | 
			
		||||
@@ -933,7 +933,7 @@ async function initRepository() {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // Edit issue or comment content
 | 
			
		||||
    $('.edit-content').on('click', async function (event) {
 | 
			
		||||
    $(document).on('click', '.edit-content', async function (event) {
 | 
			
		||||
      $(this).closest('.dropdown').find('.menu').toggle('visible');
 | 
			
		||||
      const $segment = $(this).closest('.header').next();
 | 
			
		||||
      const $editContentZone = $segment.find('.edit-content-zone');
 | 
			
		||||
@@ -1096,7 +1096,7 @@ async function initRepository() {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // Delete comment
 | 
			
		||||
    $('.delete-comment').on('click', function () {
 | 
			
		||||
    $(document).on('click', '.delete-comment', function () {
 | 
			
		||||
      const $this = $(this);
 | 
			
		||||
      if (window.confirm($this.data('locale'))) {
 | 
			
		||||
        $.post($this.data('url'), {
 | 
			
		||||
@@ -1105,6 +1105,15 @@ async function initRepository() {
 | 
			
		||||
          const $conversationHolder = $this.closest('.conversation-holder');
 | 
			
		||||
          $(`#${$this.data('comment-id')}`).remove();
 | 
			
		||||
          if ($conversationHolder.length && !$conversationHolder.find('.comment').length) {
 | 
			
		||||
            const path = $conversationHolder.data('path');
 | 
			
		||||
            const side = $conversationHolder.data('side');
 | 
			
		||||
            const idx = $conversationHolder.data('idx');
 | 
			
		||||
            const lineType = $conversationHolder.closest('tr').data('line-type');
 | 
			
		||||
            if (lineType === 'same') {
 | 
			
		||||
              $(`a.add-code-comment[data-path="${path}"][data-idx="${idx}"]`).removeClass('invisible');
 | 
			
		||||
            } else {
 | 
			
		||||
              $(`a.add-code-comment[data-path="${path}"][data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible');
 | 
			
		||||
            }
 | 
			
		||||
            $conversationHolder.remove();
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
@@ -1235,7 +1244,7 @@ function initPullRequestReview() {
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  $('.show-outdated').on('click', function (e) {
 | 
			
		||||
  $(document).on('click', '.show-outdated', function (e) {
 | 
			
		||||
    e.preventDefault();
 | 
			
		||||
    const id = $(this).data('comment');
 | 
			
		||||
    $(this).addClass('hide');
 | 
			
		||||
@@ -1244,7 +1253,7 @@ function initPullRequestReview() {
 | 
			
		||||
    $(`#hide-outdated-${id}`).removeClass('hide');
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  $('.hide-outdated').on('click', function (e) {
 | 
			
		||||
  $(document).on('click', '.hide-outdated', function (e) {
 | 
			
		||||
    e.preventDefault();
 | 
			
		||||
    const id = $(this).data('comment');
 | 
			
		||||
    $(this).addClass('hide');
 | 
			
		||||
@@ -1253,7 +1262,7 @@ function initPullRequestReview() {
 | 
			
		||||
    $(`#show-outdated-${id}`).removeClass('hide');
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  $('button.comment-form-reply').on('click', function (e) {
 | 
			
		||||
  $(document).on('click', 'button.comment-form-reply', function (e) {
 | 
			
		||||
    e.preventDefault();
 | 
			
		||||
    $(this).hide();
 | 
			
		||||
    const form = $(this).parent().find('.comment-form');
 | 
			
		||||
@@ -1284,7 +1293,7 @@ function initPullRequestReview() {
 | 
			
		||||
    $(this).closest('.menu').toggle('visible');
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  $('.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();
 | 
			
		||||
 | 
			
		||||
@@ -1292,18 +1301,13 @@ function initPullRequestReview() {
 | 
			
		||||
    const side = $(this).data('side');
 | 
			
		||||
    const idx = $(this).data('idx');
 | 
			
		||||
    const path = $(this).data('path');
 | 
			
		||||
    const form = $('#pull_review_add_comment').html();
 | 
			
		||||
    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
 | 
			
		||||
    const lineType = tr.data('line-type');
 | 
			
		||||
 | 
			
		||||
    let ntr = tr.next();
 | 
			
		||||
    if (!ntr.hasClass('add-comment')) {
 | 
			
		||||
      ntr = $(`
 | 
			
		||||
        <tr class="add-comment" data-add-comment-key="${addCommentKey}">
 | 
			
		||||
        <tr class="add-comment" data-line-type="${lineType}">
 | 
			
		||||
          ${isSplit ? `
 | 
			
		||||
            <td class="lines-num"></td>
 | 
			
		||||
            <td class="lines-type-marker"></td>
 | 
			
		||||
@@ -1312,8 +1316,7 @@ function initPullRequestReview() {
 | 
			
		||||
            <td class="lines-type-marker"></td>
 | 
			
		||||
            <td class="add-comment-right"></td>
 | 
			
		||||
          ` : `
 | 
			
		||||
            <td class="lines-num"></td>
 | 
			
		||||
            <td class="lines-num"></td>
 | 
			
		||||
            <td colspan="2" class="lines-num"></td>
 | 
			
		||||
            <td class="add-comment-left add-comment-right" colspan="2"></td>
 | 
			
		||||
          `}
 | 
			
		||||
        </tr>`);
 | 
			
		||||
@@ -1322,21 +1325,20 @@ function initPullRequestReview() {
 | 
			
		||||
 | 
			
		||||
    const td = ntr.find(`.add-comment-${side}`);
 | 
			
		||||
    let commentCloud = td.find('.comment-code-cloud');
 | 
			
		||||
    if (commentCloud.length === 0) {
 | 
			
		||||
      td.html(form);
 | 
			
		||||
    if (commentCloud.length === 0 && !ntr.find('button[name="is_review"]').length) {
 | 
			
		||||
      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();
 | 
			
		||||
    }
 | 
			
		||||
    const $textarea = commentCloud.find('textarea');
 | 
			
		||||
    attachTribute($textarea.get(), {mentions: true, emoji: true});
 | 
			
		||||
 | 
			
		||||
    const $simplemde = setCommentSimpleMDE($textarea);
 | 
			
		||||
    $textarea.focus();
 | 
			
		||||
    $simplemde.codemirror.focus();
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -2497,17 +2499,24 @@ $(document).ready(async () => {
 | 
			
		||||
    $(e).trigger('click');
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  $('.resolve-conversation').on('click', 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,
 | 
			
		||||
      action,
 | 
			
		||||
      comment_id: id,
 | 
			
		||||
    }).then(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();
 | 
			
		||||
@@ -3626,6 +3635,28 @@ 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', async (e) => {
 | 
			
		||||
  e.preventDefault();
 | 
			
		||||
  const form = $(e.target);
 | 
			
		||||
  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');
 | 
			
		||||
  if (form.length > 0 && form.hasClass('comment-form')) {
 | 
			
		||||
@@ -3636,13 +3667,6 @@ window.cancelCodeComment = function (btn) {
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
window.submitReply = function (btn) {
 | 
			
		||||
  const form = $(btn).closest('form');
 | 
			
		||||
  if (form.length > 0 && form.hasClass('comment-form')) {
 | 
			
		||||
    form.trigger('submit');
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
window.onOAuthLoginClick = function () {
 | 
			
		||||
  const oauthLoader = $('#oauth2-login-loader');
 | 
			
		||||
  const oauthNav = $('#oauth2-login-navigator');
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user