Change form actions to fetch for submit review box

modules/context/base.go

@@ -132,6 +132,10 @@ func (b *Base) JSON(status int, content interface{}) {
 	}
 }
 
+func (b *Base) JSONRedirect(redirect string) {
+	b.JSON(http.StatusOK, map[string]any{"redirect": redirect})
+}
+
 // RemoteAddr returns the client machine ip address
 func (b *Base) RemoteAddr() string {
 	return b.Req.RemoteAddr

routers/web/repo/pull_review.go

@@ -193,7 +193,7 @@ 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.JSONRedirect(fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index))
 		return
 	}
 
@@ -214,7 +214,7 @@ func SubmitReview(ctx *context.Context) {
 			}
 
 			ctx.Flash.Error(translated)
-			ctx.Redirect(fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index))
+			ctx.JSONRedirect(fmt.Sprintf("%s/pulls/%d/files", ctx.Repo.RepoLink, issue.Index))
 			return
 		}
 	}
@@ -228,14 +228,13 @@ 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.JSONRedirect(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.JSONRedirect(fmt.Sprintf("%s/pulls/%d#%s", ctx.Repo.RepoLink, issue.Index, comm.HashTag()))
 }
 
 // DismissReview dismissing stale review by repo admin

templates/repo/diff/new_review.tmpl

@@ -6,7 +6,7 @@
 	</button>
 	<div class="review-box-panel tippy-target">
 		<div class="ui segment">
-			<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
+			<form class="ui form form-fetch-action" action="{{.Link}}/reviews/submit" method="post">
 				{{.CsrfTokenHtml}}
 				<input type="hidden" name="commit_id" value="{{.AfterCommitID}}">
 				<div class="field gt-df gt-ac">

web_src/js/features/common-global.js

@@ -60,6 +60,57 @@ export function initGlobalButtonClickOnEnter() {
   });
 }
 
+async function fetchFormAction(e) {
+  if (!e.target.classList.contains('form-fetch-action')) return;
+
+  e.preventDefault();
+  const formEl = e.target;
+  if (formEl.classList.contains('loading')) return;
+
+  // TODO: fine tune the UI feedback
+  formEl.classList.add('loading');
+  e.submitter?.classList.add('loading');
+
+  const formMethod = formEl.getAttribute('method') || 'get';
+  const formActionUrl = formEl.getAttribute('action');
+  const formData = new FormData(formEl);
+  const [submitterName, submitterValue] = [e.submitter?.getAttribute('name'), e.submitter?.getAttribute('value')];
+  if (submitterName) {
+    formData.append(submitterName, submitterValue);
+  }
+
+  const req = {method: formMethod.toUpperCase(), headers: {'X-Csrf-Token': csrfToken}};
+  if (formMethod === 'GET') {
+    // TODO: append to the action URL
+  } else {
+    req.body = formData;
+  }
+
+  const onError = () => {
+    // TODO: show error to end users
+    formEl.classList.remove('loading');
+    e.submitter?.classList.remove('loading');
+  };
+
+  try {
+    const resp = await fetch(formActionUrl, req);
+    if (resp.status === 200) {
+      const {redirect} = await resp.json();
+      if (redirect) {
+        window.location.href = redirect;
+      } else {
+        // TODO: remove areYouSure form check
+        window.reload();
+      }
+    } else {
+      // TODO: show error to end users
+      onError();
+    }
+  } catch {
+    onError();
+  }
+}
+
 export function initGlobalCommon() {
   // Semantic UI modules.
   const $uiDropdowns = $('.ui.dropdown');
@@ -114,6 +165,8 @@ export function initGlobalCommon() {
     if (btn.classList.contains('loading')) return e.preventDefault();
     btn.classList.add('loading');
   });
+
+  document.addEventListener('submit', fetchFormAction);
 }
 
 export function initGlobalDropzone() {