Change form actions to fetch for submit review box

routers/web/repo/pull_review.go

@@ -193,7 +193,9 @@ func SubmitReview(ctx *context.Context) {
 	}
 	if ctx.HasError() {
 		ctx.Flash.Error(ctx.Data["ErrorMsg"].(string))
-		ctx.Redirect(fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index))
+		ctx.JSON(http.StatusOK, map[string]interface{}{
+			"redirectLink": fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index),
+		})
 		return
 	}
 
@@ -214,7 +216,9 @@ func SubmitReview(ctx *context.Context) {
 			}
 
 			ctx.Flash.Error(translated)
-			ctx.Redirect(fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index))
+			ctx.JSON(http.StatusOK, map[string]interface{}{
+				"redirectLink": fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index),
+			})
 			return
 		}
 	}
@@ -228,14 +232,17 @@ func SubmitReview(ctx *context.Context) {
 	if err != nil {
 		if issues_model.IsContentEmptyErr(err) {
 			ctx.Flash.Error(ctx.Tr("repo.issues.review.content.empty"))
-			ctx.Redirect(fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index))
+			ctx.JSON(http.StatusOK, map[string]interface{}{
+				"redirectLink": fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index),
+			})
 		} else {
 			ctx.ServerError("SubmitReview", err)
 		}
 		return
 	}
-
-	ctx.Redirect(fmt.Sprintf("%s/pulls/%d#%s", ctx.Repo.RepoLink, issue.Index, comm.HashTag()))
+	ctx.JSON(http.StatusOK, map[string]interface{}{
+		"redirectLink": fmt.Sprintf("%s/pulls/%d#%s", ctx.Repo.RepoLink, issue.Index, comm.HashTag()),
+	})
 }
 
 // DismissReview dismissing stale review by repo admin

services/forms/repo_form.go

@@ -636,10 +636,10 @@ func (f *CodeCommentForm) Validate(req *http.Request, errs binding.Errors) bindi
 
 // SubmitReviewForm for submitting a finished code review
 type SubmitReviewForm struct {
-	Content  string
-	Type     string
-	CommitID string
-	Files    []string
+	Content  string   `json:"content"`
+	Type     string   `json:"type"`
+	CommitID string   `json:"commitID"`
+	Files    []string `json:"files"`
 }
 
 // Validate validates the fields

templates/repo/diff/new_review.tmpl

@@ -4,11 +4,9 @@
 		<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
 		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	</button>
-	<div class="review-box-panel tippy-target">
+	<div class="review-box-panel tippy-target" data-url="{{.Link}}/reviews/submit" data-commit-id="{{.AfterCommitID}}">
 		<div class="ui segment">
-			<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
-				{{.CsrfTokenHtml}}
-				<input type="hidden" name="commit_id" value="{{.AfterCommitID}}">
+			<div class="ui form">
 				<div class="field gt-df gt-ac">
 					<div class="gt-f1">{{$.locale.Tr "repo.diff.review.header"}}</div>
 					<a class="muted close">{{svg "octicon-x" 16}}</a>
@@ -32,20 +30,20 @@
 				{{$showSelfTooltip := (and $.IsSigned ($.Issue.IsPoster $.SignedUser.ID))}}
 				{{if $showSelfTooltip}}
 					<span class="gt-dib" data-tooltip-content="{{$.locale.Tr "repo.diff.review.self_approve"}}">
-						<button type="submit" name="type" value="approve" disabled class="ui submit green tiny button btn-submit">{{$.locale.Tr "repo.diff.review.approve"}}</button>
+						<button data-type="approve" disabled class="ui submit green tiny button btn-submit">{{$.locale.Tr "repo.diff.review.approve"}}</button>
 					</span>
 				{{else}}
-					<button type="submit" name="type" value="approve" class="ui submit green tiny button btn-submit">{{$.locale.Tr "repo.diff.review.approve"}}</button>
+					<button data-type="approve" class="ui submit green tiny button btn-submit">{{$.locale.Tr "repo.diff.review.approve"}}</button>
 				{{end}}
-				<button type="submit" name="type" value="comment" class="ui submit tiny basic button btn-submit">{{$.locale.Tr "repo.diff.review.comment"}}</button>
+				<button data-type="comment" class="ui submit tiny basic button btn-submit">{{$.locale.Tr "repo.diff.review.comment"}}</button>
 				{{if $showSelfTooltip}}
 					<span class="gt-dib" data-tooltip-content="{{$.locale.Tr "repo.diff.review.self_reject"}}">
-						<button type="submit" name="type" value="reject" disabled class="ui submit red tiny button btn-submit">{{$.locale.Tr "repo.diff.review.reject"}}</button>
+						<button data-type="reject" disabled class="ui submit red tiny button btn-submit">{{$.locale.Tr "repo.diff.review.reject"}}</button>
 					</span>
 				{{else}}
-					<button type="submit" name="type" value="reject" class="ui submit red tiny button btn-submit">{{$.locale.Tr "repo.diff.review.reject"}}</button>
+					<button data-type="reject" class="ui submit red tiny button btn-submit">{{$.locale.Tr "repo.diff.review.reject"}}</button>
 				{{end}}
-			</form>
+			</div>
 		</div>
 	</div>
 </div>

web_src/js/features/repo-issue.js

@@ -391,6 +391,47 @@ export async function handleReply($el) {
   return editor;
 }
 
+function prepareReviewBoxButtons ($reviewBox) {
+  for (const btn of $reviewBox.find('.btn-submit')) {
+    $(btn).on('click', async function () {
+      // Do not fetch repeatedly if post request has sent.
+      // Added to $reviewBox to avoid sending several requests when approve, comment,
+      // and request change buttons are clicked.
+      if ($reviewBox.hasClass('isFetching')) return;
+      $reviewBox.addClass('isFetching');
+      $(this).addClass('loading');
+      const fileIds = [];
+      for (const fileInput of $reviewBox.find('.dropzone .files input')) {
+        fileIds.push($(fileInput).attr('id'));
+      }
+      const $textEditor = $reviewBox.find('textarea.markdown-text-editor');
+      const data = {
+        'commitID': $reviewBox.attr('data-commit-id'),
+        'type': $(this).attr('data-type'),
+        'content': $textEditor.val(),
+      };
+      if (fileIds.length > 0) data['files'] = fileIds;
+      const response = await fetch($reviewBox.attr('data-url'), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Csrf-Token': csrfToken,
+        },
+        body: JSON.stringify(data),
+      });
+      // if page is redirected, no need to remove loading status
+      if (response.status === 200) {
+        const {redirectLink} = await response.json();
+        window.location.href = redirectLink;
+      // error occurs, still on the same page, remove loading status
+      } else {
+        $reviewBox.removeClass('isFetching');
+        $(this).removeClass('loading');
+      }
+    });
+  }
+}
+
 export function initRepoPullRequestReview() {
   if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) {
     // set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing
@@ -453,6 +494,7 @@ export function initRepoPullRequestReview() {
   const $reviewBox = $('.review-box-panel');
   if ($reviewBox.length === 1) {
     const _promise = initComboMarkdownEditor($reviewBox.find('.combo-markdown-editor'));
+    prepareReviewBoxButtons($reviewBox);
   }
 
   // The following part is only for diff views