remove donePromise

frontend/src/lib/components/ResultJobLoader.svelte

@@ -28,7 +28,7 @@
 
 	$: isLoading = currentId !== undefined
 
-	type Callbacks = { done: (x: any[]) => void; cancel: () => void; error: () => void }
+	type Callbacks = { done: (x: any) => void; cancel: () => void; error: (err: Error) => void }
 
 	let running = false
 	let lastCallbacks: Callbacks | undefined = undefined
@@ -59,7 +59,7 @@
 			}
 			return testId
 		} catch (err) {
-			callbacks?.error()
+			callbacks?.error(err)
 			// if error happens on submitting the job, reset UI state so the user can try again
 			isLoading = false
 			currentId = undefined
@@ -178,7 +178,7 @@
 						job = { ...maybe_job, id }
 						await tick()
 						if (!job?.success && typeof job?.result == 'object' && 'error' in (job?.result ?? {})) {
-							callbacks?.error()
+							callbacks?.error(job.result.error)
 							dispatch('doneError', {
 								id,
 								error: job.result.error

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -85,8 +85,6 @@
 
 	const dispatch = createEventDispatcher()
 
-	let donePromise: ((v: any) => void) | undefined = undefined
-
 	$runnableComponents = $runnableComponents
 
 	export function setArgs(value: any) {
@@ -269,6 +267,7 @@
 				job = generateNextFrontendJobId()
 				addJob(job)
 			}
+			console.log('Frontend job started', id)
 
 			let r: any
 			try {
@@ -295,7 +294,7 @@
 				await setResult(r, job)
 			}
 			loading = false
-			donePromise?.(r)
+			callbacks?.done(r)
 			if (setRunnableJobEditorPanel && editorContext) {
 				editorContext.runnableJobEditorPanel.update((p) => {
 					return {
@@ -309,7 +308,7 @@
 			if (!noToast) {
 				sendUserToast('This app is not connected to a windmill backend, it is a static preview')
 			}
-			donePromise?.(undefined)
+			callbacks?.done({})
 			return
 		}
 		if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
@@ -403,12 +402,12 @@
 			updateResult({ error })
 			$errorByComponent[id] = { error }
 
-			donePromise?.({ error })
+			callbacks?.done({ error })
 			sendUserToast(error, true)
 			loading = false
 		}
 	}
-	type Callbacks = { done: (x: any[]) => void; cancel: () => void; error: () => void }
+	type Callbacks = { done: (x: any) => void; cancel: () => void; error: (e: any) => void }
 
 	export async function runComponent(
 		noToast = false,
@@ -421,7 +420,7 @@
 			if (cancellableRun && !dynamicArgsOverride) {
 				await cancellableRun()
 			} else {
-				console.log('Run component')
+				console.log('Run component', id)
 				return await executeComponent(
 					noToast,
 					inlineScriptOverride,
@@ -534,7 +533,7 @@
 			recordJob(jobId, errors, errors, transformerResult)
 			updateResult(res)
 			dispatch('handleError', errors)
-			donePromise?.(res)
+			// callbacks?.done(res)
 			return
 		}
 
@@ -553,7 +552,7 @@
 			recordJob(jobId, res, undefined, transformerResult)
 			updateResult(transformerResult)
 			dispatch('handleError', transformerResult.error)
-			donePromise?.(res)
+			// callbacks?.done(res)
 			return
 		}
 
@@ -562,7 +561,7 @@
 		delete $errorByComponent[id]
 
 		dispatch('success', result)
-		donePromise?.(result)
+		// callbacks?.done(res)
 	}
 
 	function handleInputClick(e: CustomEvent) {
@@ -581,8 +580,18 @@
 				let rejectCb: (err: Error) => void
 				let p: Partial<CancelablePromise<any>> = new Promise<any>((resolve, reject) => {
 					rejectCb = reject
-					donePromise = resolve
-					executeComponent(true, inlineScript, setRunnableJobEditorPanel).catch(reject)
+					executeComponent(true, inlineScript, setRunnableJobEditorPanel, undefined, {
+						done: (x) => {
+							resolve(x)
+						},
+						cancel: () => {
+							reject()
+						},
+						error: (e) => {
+							console.error(e)
+							reject()
+						}
+					}).catch(reject)
 				})
 				p.cancel = () => {
 					resultJobLoader?.cancelJob()

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -742,7 +742,6 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
-
 <UnsavedConfirmationModal
 	{diffDrawer}
 	savedValue={savedApp}

frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte

@@ -54,6 +54,7 @@
 		onClick(!inter)
 	}
 
+	let refreshing: string[] = []
 	function refresh() {
 		let isFirstLoad = false
 		if (!firstLoad) {
@@ -64,6 +65,7 @@
 		loading = true
 
 		console.log('refresh all')
+		refreshing = []
 		const promises = Object.keys($runnableComponents)
 			.flatMap((id) => {
 				if (
@@ -73,10 +75,22 @@
 					return
 				}
 
-				console.log('refresh start', id)
-				return $runnableComponents?.[id]?.cb?.map((f) =>
-					f().then(() => console.log('refreshed', id))
-				)
+				let cb = $runnableComponents?.[id]?.cb
+				if (cb) {
+					console.log('refresh start', id)
+					refreshing.push(id)
+					return cb.map((f) =>
+						f()
+							.then(() => {
+								console.log('refreshed', id)
+								refreshing = refreshing.filter((x) => x !== id)
+							})
+							.catch((e) => {
+								console.error('refresh error', id)
+								refreshing = refreshing.filter((x) => x !== id)
+							})
+					)
+				}
 			})
 			.filter(Boolean)
 
@@ -128,7 +142,7 @@
 		btnClasses="!rounded-r-none text-tertiary !text-2xs {timeout ? '!border !border-blue-500' : ''}"
 		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
 			? `every ${interval / 1000} seconds`
-			: 'once'}"
+			: 'once'} {refreshing.length > 0 ? `(live: ${refreshing.join(', ')}))` : ''}"
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={14} /> &nbsp;{componentNumber}
 	</Button>

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -458,30 +458,27 @@
 						Show
 					</Button>
 				</div>
-
-				{#if componentSettings?.item?.[12]?.fullHeight !== undefined}
-					<Toggle
-						bind:checked={componentSettings.item[12].fullHeight}
-						size="xs"
-						options={{
-							right: 'Desktop full height',
-							rightTooltip:
-								'When enabled, the component will take the full height of the parent container.'
-						}}
-					/>
-				{/if}
-				{#if componentSettings?.item?.[3]?.fullHeight !== undefined}
-					<Toggle
-						bind:checked={componentSettings.item[3].fullHeight}
-						size="xs"
-						options={{
-							right: 'Mobile full height',
-							rightTooltip:
-								'When enabled, the component will take the full height of the parent container.'
-						}}
-					/>
-				{/if}
-
+				<div class="flex gap-2 items-center">
+					<div class="!text-2xs">Full height</div>
+					{#if componentSettings?.item?.[12]?.fullHeight !== undefined}
+						<Toggle
+							bind:checked={componentSettings.item[12].fullHeight}
+							size="xs"
+							options={{
+								right: 'Desktop'
+							}}
+						/>
+					{/if}
+					{#if componentSettings?.item?.[3]?.fullHeight !== undefined}
+						<Toggle
+							bind:checked={componentSettings.item[3].fullHeight}
+							size="xs"
+							options={{
+								right: 'Mobile'
+							}}
+						/>
+					{/if}
+				</div>
 				<AlignmentEditor bind:component={componentSettings.item.data} />
 				{#if viewCssOptions}
 					<div transition:slide|local class="w-full">

frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -75,7 +75,7 @@
 		<div class="flex justify-between items-end">
 			<div class="flex flex-row gap-4 items-center">
 				<div class="flex items-center">
-					<span class="text-xs font-semibold truncate text-primary">
+					<span class="!text-2xs font-semibold text-ellipsis text-primary">
 						{customTitle
 							? customTitle
 							: shouldCapitalize