From fa6c3c12eee2476c4f1fd596736f347decc201ae Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Tue, 7 Feb 2023 10:23:23 +0800
Subject: [PATCH 1/4] fix: refresh page after rerun

---
 web_src/js/components/RepoActionView.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 4c7408d1b3c2a..b9fb456df3da9 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -20,7 +20,7 @@
               <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">
+              <button class="job-brief-rerun" @click.prevent="rerunJob(index)" v-if="job.canRerun">
                 <SvgIcon name="octicon-sync" class="ui text black"/>
               </button>
             </a>
@@ -163,7 +163,13 @@ const sfc = {
     },
     // rerun a job
     rerunJob(idx) {
-      this.fetch(`${this.run.link}/jobs/${idx}/rerun`);
+      const jobLink = `${this.run.link}/jobs/${idx}`;
+      this.fetch(`${jobLink}/rerun`, null, () => {
+        // The button to rerun job is under "a" tag, so the browser will refresh the page and cancel fetching "rerun".
+        // However, it should refresh the page because the logs have been reset, or it's another job which has been clicked.
+        // So we prevent the default behavior and refresh the page after the fetching is done.
+        window.location.href = jobLink;
+      });
     },
     // cancel a run
     cancelRun() {
@@ -245,7 +251,7 @@ const sfc = {
       }
     },
 
-    fetch(url, body) {
+    fetch(url, body, callback) {
       return fetch(url, {
         method: 'POST',
         headers: {
@@ -253,6 +259,10 @@ const sfc = {
           'X-Csrf-Token': csrfToken,
         },
         body,
+      }).finally(() => {
+        if (callback) {
+          callback();
+        }
       });
     },
   },

From 0d99de3e1e6131f78d086467964390d67909ee7f Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Tue, 7 Feb 2023 11:01:21 +0800
Subject: [PATCH 2/4] fix: rename to fetchPost and remove callback

---
 web_src/js/components/RepoActionView.vue | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index b9fb456df3da9..901333a643d1b 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -162,18 +162,17 @@ const sfc = {
       }
     },
     // rerun a job
-    rerunJob(idx) {
+    async rerunJob(idx) {
       const jobLink = `${this.run.link}/jobs/${idx}`;
-      this.fetch(`${jobLink}/rerun`, null, () => {
-        // The button to rerun job is under "a" tag, so the browser will refresh the page and cancel fetching "rerun".
-        // However, it should refresh the page because the logs have been reset, or it's another job which has been clicked.
-        // So we prevent the default behavior and refresh the page after the fetching is done.
-        window.location.href = jobLink;
-      });
+      await this.fetchPost(`${jobLink}/rerun`);
+      // The button to rerun job is under "a" tag, so the browser will refresh the page and cancel fetching "rerun".
+      // However, it should refresh the page because the logs have been reset, or it's another job which has been clicked.
+      // So we prevent the default behavior and refresh the page after the fetching is done.
+      window.location.href = jobLink;
     },
     // cancel a run
     cancelRun() {
-      this.fetch(`${this.run.link}/cancel`);
+      this.fetchPost(`${this.run.link}/cancel`);
     },
 
     createLogLine(line) {
@@ -211,7 +210,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}),
       );
@@ -251,7 +250,7 @@ const sfc = {
       }
     },
 
-    fetch(url, body, callback) {
+    fetchPost(url, body) {
       return fetch(url, {
         method: 'POST',
         headers: {
@@ -259,10 +258,6 @@ const sfc = {
           'X-Csrf-Token': csrfToken,
         },
         body,
-      }).finally(() => {
-        if (callback) {
-          callback();
-        }
       });
     },
   },

From a2748b8bc0b958220c30c42a138469963f508884 Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Tue, 7 Feb 2023 11:29:16 +0800
Subject: [PATCH 3/4] chore: code can talk

---
 web_src/js/components/RepoActionView.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 901333a643d1b..0d8a0d7055726 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -165,9 +165,6 @@ const sfc = {
     async rerunJob(idx) {
       const jobLink = `${this.run.link}/jobs/${idx}`;
       await this.fetchPost(`${jobLink}/rerun`);
-      // The button to rerun job is under "a" tag, so the browser will refresh the page and cancel fetching "rerun".
-      // However, it should refresh the page because the logs have been reset, or it's another job which has been clicked.
-      // So we prevent the default behavior and refresh the page after the fetching is done.
       window.location.href = jobLink;
     },
     // cancel a run

From 104a4f3a479723c16cb5e261e361456474f212dc Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Tue, 7 Feb 2023 11:58:28 +0800
Subject: [PATCH 4/4] chore: comments for button

---
 web_src/js/components/RepoActionView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 0d8a0d7055726..703fe59d811cc 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -20,6 +20,7 @@
               <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 }}
+              <!-- 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>