From 76b65771a03e35b6d489731f210e24640efda54b Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 3 Jun 2024 16:02:21 +0200
Subject: [PATCH] feat(frontend): Fix how runnable tied to a table actions are
 triggered + Display the sync columnDef error only in the editor (#3862)

---
 .../apps/components/buttons/AppButton.svelte    |  2 ++
 .../display/table/AppAggridTableActions.svelte  |  2 ++
 .../display/table/SyncColumnDefs.svelte         |  2 +-
 .../components/helpers/RunnableComponent.svelte | 17 +++++++++++++----
 .../components/helpers/RunnableWrapper.svelte   |  2 ++
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 69325d2bff..05c3c3c5ad 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -37,6 +37,7 @@
 	export let extraKey: string | undefined = undefined
 	export let isMenuItem: boolean = false
 	export let noInitialize = false
+	export let replaceCallback: boolean = false
 
 	export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
 		undefined
@@ -194,6 +195,7 @@
 		}
 	}}
 	refreshOnStart={resolvedConfig.triggerOnAppLoad}
+	{replaceCallback}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment} class="wm-button-wrapper">
 		{#if errorsMessage}
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
index 4e70d49145..0112a8dcdd 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
@@ -150,6 +150,7 @@
 							}}
 							componentInput={action.componentInput}
 							verticalAlignment="center"
+							replaceCallback={true}
 							{controls}
 						/>
 					{:else if action.type == 'checkboxcomponent'}
@@ -207,6 +208,7 @@
 						extraQueryParams={{
 							row
 						}}
+						replaceCallback={true}
 						componentInput={action.componentInput}
 					/>
 				{:else if action.type == 'checkboxcomponent'}
diff --git a/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte b/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
index 67c92d6361..2665ac8d4f 100644
--- a/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
@@ -105,7 +105,7 @@
 				</div>
 			</Alert>
 		</div>
-	{:else}
+	{:else if $mode === 'dnd'}
 		<div class="m-16">
 			<Alert title="Parsing issues" type="error" size="xs">
 				<div class="flex flex-col items-start gap-2">
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index d2be2e41aa..6aa2571197 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -56,6 +56,7 @@
 	export let noInitialize = false
 	export let overrideCallback: (() => CancelablePromise<void>) | undefined = undefined
 	export let overrideAutoRefresh: boolean = false
+	export let replaceCallback: boolean = false
 
 	const {
 		worldStore,
@@ -606,10 +607,18 @@
 			}
 		}
 
-		$runnableComponents[id] = {
-			autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh,
-			refreshOnStart: refreshOnStart,
-			cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun]
+		if (replaceCallback) {
+			$runnableComponents[id] = {
+				autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh,
+				refreshOnStart: refreshOnStart,
+				cb: [cancellableRun]
+			}
+		} else {
+			$runnableComponents[id] = {
+				autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh,
+				refreshOnStart: refreshOnStart,
+				cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun]
+			}
 		}
 
 		if (!noInitialize && !$initialized.initializedComponents.includes(id)) {
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index 09098cd712..9bd8204c01 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -15,6 +15,7 @@
 	export let hideRefreshButton: boolean | undefined = undefined
 	export let overrideCallback: (() => CancelablePromise<void>) | undefined = undefined
 	export let overrideAutoRefresh: boolean = false
+	export let replaceCallback: boolean = false
 
 	type SideEffectAction =
 		| {
@@ -252,6 +253,7 @@
 		{refreshOnStart}
 		{extraKey}
 		{hasChildrens}
+		{replaceCallback}
 		bind:loading
 		bind:this={runnableComponent}
 		fields={componentInput.fields}