feat(frontend): Fix how runnable tied to a table actions are triggered + Display the sync columnDef error only in the editor (#3862)

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}

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'}

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">

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)) {

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}