From 5d3459aaf1829051cd9f451ece624394a1eb9fbf Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 25 Mar 2025 13:19:02 +0000
Subject: [PATCH] keep job sync on cancel

---
 frontend/src/lib/components/ModulePreview.svelte | 14 +++++++++++---
 frontend/src/lib/components/TestJobLoader.svelte |  8 +++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index dc6005c92a..4169fa7edf 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -36,6 +36,7 @@
 	let testJobLoader: TestJobLoader
 	let testIsLoading = false
 	let testJob: Job | undefined = undefined
+	let cancelLoading = false
 
 	let jobProgressReset: () => void
 
@@ -101,11 +102,17 @@
 	}
 
 	let forceJson = false
+
+	// cancelLoading is true when the job is being cancelled
+	$: if (cancelLoading && !testIsLoading) {
+		cancelLoading = false
+	}
 </script>
 
 <TestJobLoader
 	toastError={noEditor}
 	on:done={() => jobDone()}
+	on:cancel-loading={({ detail }) => (cancelLoading = detail)}
 	bind:scriptProgress
 	bind:this={testJobLoader}
 	bind:isLoading={testIsLoading}
@@ -121,14 +128,15 @@
 
 		<div class="w-full justify-center flex">
 			{#if testIsLoading}
-				<Button size="sm" on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red">
+				<Button size="sm" on:click={testJobLoader?.cancelJob} btnClasses="w-28" color="red">
 					<Loader2 size={16} class="animate-spin mr-1" />
-					Cancel
+					{cancelLoading ? 'Canceling...' : 'Cancel'}
 				</Button>
 			{:else}
 				<Button
 					color="dark"
-					btnClasses="truncate"
+					btnClasses="truncate w-28"
+					wrapClasses="w-28"
 					size="sm"
 					on:click={() => runTest(stepArgs)}
 					shortCut={{
diff --git a/frontend/src/lib/components/TestJobLoader.svelte b/frontend/src/lib/components/TestJobLoader.svelte
index e16ea23dc3..5262ef9da0 100644
--- a/frontend/src/lib/components/TestJobLoader.svelte
+++ b/frontend/src/lib/components/TestJobLoader.svelte
@@ -150,8 +150,9 @@
 	export async function cancelJob() {
 		const id = currentId
 		if (id) {
-			dispatch('cancel', id)
-			currentId = undefined
+			// currentId = undefined why do we need this? This leads to not watching the job anymore hence not getting the update of the cancelled job
+			// dispatch('cancel', id) this event is not used anywhere
+			dispatch('cancel-loading', true)
 			try {
 				await JobService.cancelQueuedJob({
 					workspace: $workspaceStore ?? '',
@@ -159,6 +160,7 @@
 					requestBody: {}
 				})
 			} catch (err) {
+				dispatch('cancel-loading', false)
 				console.error(err)
 			}
 		}
@@ -283,7 +285,7 @@
 
 	async function syncer(id: string): Promise<void> {
 		if (currentId != id) {
-			dispatch('cancel', id)
+			// dispatch('cancel', id) This event is not used anywhere
 			return
 		}
 		syncIteration++