From 7d3c4c3e8a7b3bf505e3115cbf05b8bb7029a7e8 Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Wed, 8 Feb 2023 15:55:57 +0800
Subject: [PATCH] Fix rerun button of Actions (#22798)

When clicking the return button, the page should be refreshed. However,
the browser may cancel the previous fetch request, and it fails to rerun
the job. It's easier to reproduce the bug in Safari or Firefox than
Chrome for some reason.

<img width="384" alt="image"
src="https://user-images.githubusercontent.com/9418365/217142792-a783f9a1-7089-44db-b7d8-46c46c72d284.png">


<img width="752" alt="image"
src="https://user-images.githubusercontent.com/9418365/217132406-b8381b63-b323-474e-935b-2596b1b5c046.png">
---
 web_src/js/components/RepoActionView.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 4c7408d1b3..703fe59d81 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -20,7 +20,8 @@
               <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/>
               <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
               {{ job.name }}
-              <button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun">
+              <!-- TODO: it will be a better idea to move "button" out from "a", and the ".prevent" will not be needed. But it needs some work with CSS -->
+              <button class="job-brief-rerun" @click.prevent="rerunJob(index)" v-if="job.canRerun">
                 <SvgIcon name="octicon-sync" class="ui text black"/>
               </button>
             </a>
@@ -162,12 +163,14 @@ const sfc = {
       }
     },
     // rerun a job
-    rerunJob(idx) {
-      this.fetch(`${this.run.link}/jobs/${idx}/rerun`);
+    async rerunJob(idx) {
+      const jobLink = `${this.run.link}/jobs/${idx}`;
+      await this.fetchPost(`${jobLink}/rerun`);
+      window.location.href = jobLink;
     },
     // cancel a run
     cancelRun() {
-      this.fetch(`${this.run.link}/cancel`);
+      this.fetchPost(`${this.run.link}/cancel`);
     },
 
     createLogLine(line) {
@@ -205,7 +208,7 @@ const sfc = {
         // for example: make cursor=null means the first time to fetch logs, cursor=eof means no more logs, etc
         return {step: idx, cursor: it.cursor, expanded: it.expanded};
       });
-      const resp = await this.fetch(
+      const resp = await this.fetchPost(
         `${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}`,
         JSON.stringify({logCursors}),
       );
@@ -245,7 +248,7 @@ const sfc = {
       }
     },
 
-    fetch(url, body) {
+    fetchPost(url, body) {
       return fetch(url, {
         method: 'POST',
         headers: {