windmill-components 1.504.6 → 1.511.0

package/package/components/apps/components/display/AppDisplayComponentByJobId.svelte

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
 import { initCss } from '../../utils';
-import TestJobLoader from '../../../TestJobLoader.svelte';
+import JobLoader from '../../../JobLoader.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
@@ -21,7 +21,7 @@ const outputs = initOutput($worldStore, id, {
 });
 initializing = false;
 let css = $state(initCss($app.css?.jobiddisplaycomponent, customCss));
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 let testIsLoading = $state(false);
 let testJob = $state(undefined);
 $effect(() => {
@@ -30,12 +30,22 @@ $effect(() => {
             outputs.loading.set(true);
             const jobId = resolvedConfig?.['jobId'];
             if (jobId) {
-                testJobLoader?.watchJob(jobId);
+                jobLoader?.watchJob(jobId, {
+                    done(x) {
+                        onDone(x);
+                    }
+                });
             }
         });
     }
 });
 let result = $state(undefined);
+function onDone(job) {
+    outputs.loading.set(false);
+    outputs.jobId.set(job.id);
+    outputs.result.set(job.result);
+    result = job.result;
+}
 </script>
 
 {#each Object.keys(components['jobiddisplaycomponent'].initialData.configuration) as key (key)}
@@ -57,17 +67,12 @@ let result = $state(undefined);
 	/>
 {/each}
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	workspaceOverride={workspace}
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
-	on:done={(e) => {
-		outputs.loading.set(false)
-		outputs.jobId.set(e.detail.id)
-		outputs.result.set(e.detail.result)
-		result = e.detail.result
-	}}
 />
 
 <InitializeComponent {id} />

package/package/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import LogViewer from '../../../LogViewer.svelte';
-import TestJobLoader from '../../../TestJobLoader.svelte';
+import JobLoader from '../../../JobLoader.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
@@ -23,7 +23,7 @@ const outputs = initOutput($worldStore, id, {
 });
 initializing = false;
 let css = $state(initCss($app.css?.jobidlogcomponent, customCss));
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 let testIsLoading = $state(false);
 let testJob = $state(undefined);
 $effect(() => {
@@ -32,7 +32,14 @@ $effect(() => {
             outputs.loading.set(true);
             const jobId = resolvedConfig?.['jobId'];
             if (jobId) {
-                testJobLoader?.watchJob(jobId);
+                let callbacks = {
+                    done(x) {
+                        outputs.loading.set(false);
+                        outputs.jobId.set(x.id);
+                        outputs.result.set(x.result);
+                    }
+                };
+                jobLoader?.watchJob(jobId, callbacks);
             }
         });
     }
@@ -58,16 +65,12 @@ $effect(() => {
 	/>
 {/each}
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	workspaceOverride={workspace}
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
-	on:done={(e) => {
-		outputs.loading.set(false)
-		outputs.jobId.set(e.detail.id)
-		outputs.result.set(e.detail.result)
-	}}
 />
 
 <InitializeComponent {id} />

package/package/components/apps/components/display/AppMenu.svelte

@@ -38,6 +38,7 @@ $effect(() => {
 $effect(() => {
     resolvedConfig.afterIcon && afterIconComponent && untrack(() => handleAfterIcon());
 });
+let menu = $state();
 </script>
 
 <InitializeComponent {id} />
@@ -66,6 +67,7 @@ $effect(() => {
 		<Menubar class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}>
 			{#snippet children({ createMenu })}
 				<Menu
+					bind:this={menu}
 					{createMenu}
 					placement="bottom-end"
 					justifyEnd={false}
@@ -134,6 +136,9 @@ $effect(() => {
 											componentInput={actionButton.componentInput}
 											noWFull={false}
 											isMenuItem={true}
+											onDone={() => {
+												menu?.close()
+											}}
 										/>
 									</div>
 								{/if}

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -150,7 +150,7 @@ let datasource = $state({
             return;
         }
         runnableComponent?.runComponent(undefined, undefined, undefined, currentParams, {
-            done: (items) => {
+            onDone: (items) => {
                 let lastRow = -1;
                 if (datasource?.rowCount && datasource.rowCount <= params.endRow) {
                     lastRow = datasource.rowCount;
@@ -178,10 +178,10 @@ let datasource = $state({
                     params.failCallback();
                 }
             },
-            cancel: () => {
+            onCancel: () => {
                 params.failCallback();
             },
-            error: () => {
+            onError: (error) => {
                 params.failCallback();
             }
         });

package/package/components/apps/components/display/dbtable/DeleteRow.svelte

@@ -26,14 +26,14 @@ export async function triggerDelete(resource, table, allColumns, data, dbType) {
             ndata[x.field] = data[x.field];
         });
         await runnableComponent?.runComponent(undefined, undefined, undefined, { ...ndata }, {
-            done: (x) => {
+            onDone: (_x) => {
                 sendUserToast('Row deleted', false);
                 dispatch('deleted');
             },
-            cancel: () => {
+            onCancel: () => {
                 sendUserToast('Error deleting row', true);
             },
-            error: () => {
+            onError: () => {
                 sendUserToast('Error updating row', true);
             }
         });

package/package/components/apps/components/display/dbtable/InsertRowRunnable.svelte

@@ -23,14 +23,14 @@ export async function insertRow(resource, workspace, table, columns, values, res
     await tick();
     if (runnableComponent) {
         await runnableComponent?.runComponent(undefined, undefined, undefined, values, {
-            done: (x) => {
+            onDone: (_x) => {
                 dispatch('insert');
                 sendUserToast('Row inserted', false);
             },
-            cancel: () => {
+            onCancel: () => {
                 sendUserToast('Error inserting row', true);
             },
-            error: () => {
+            onError: () => {
                 sendUserToast('Error inserting row', true);
             }
         });

package/package/components/apps/components/display/dbtable/UpdateCell.svelte

@@ -27,13 +27,13 @@ export async function triggerUpdate(resource, table, column, allColumns, valueTo
         });
         ndata[column.field] = oldValue;
         await runnableComponent?.runComponent(undefined, undefined, undefined, { value_to_update: valueToUpdate, ...ndata }, {
-            done: (x) => {
+            onDone: (x) => {
                 sendUserToast('Value updated', false);
             },
-            cancel: () => {
+            onCancel: () => {
                 sendUserToast('Error updating value', true);
             },
-            error: () => {
+            onError: () => {
                 sendUserToast('Error updating value', true);
             }
         });

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -67,7 +67,7 @@ const datasource = $state({
             return;
         }
         runnableComponent?.runComponent(undefined, undefined, undefined, currentParams, {
-            done: (items) => {
+            onDone: (items) => {
                 let lastRow = -1;
                 if (datasource?.rowCount && datasource.rowCount <= params.endRow) {
                     lastRow = datasource.rowCount;
@@ -92,10 +92,10 @@ const datasource = $state({
                     params.failCallback();
                 }
             },
-            cancel: () => {
+            onCancel: () => {
                 params.failCallback();
             },
-            error: () => {
+            onError: () => {
                 params.failCallback();
             }
         });

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -8,7 +8,6 @@ import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from '
 import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
 import { collectOneOfFields, selectId } from '../../editor/appUtils';
-import ResultJobLoader from '../../../ResultJobLoader.svelte';
 import { userStore } from '../../../../stores';
 import { get } from 'svelte/store';
 import RefreshButton from './RefreshButton.svelte';
@@ -16,6 +15,7 @@ import { ctxRegex } from '../../utils';
 import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { executeRunnable } from './executeRunnable';
 import SchemaForm from '../../../SchemaForm.svelte';
+import JobLoader, {} from '../../../JobLoader.svelte';
 let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, hasChildrens, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children } = $props();
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, jobsById, noBackend, errorByComponent, mode, stateId, state: stateStore, componentControl, initialized, selectedComponent, app, connectingInput, bgRuns, recomputeAllContext } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
@@ -34,7 +34,7 @@ function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
         console.debug('debounce execute');
-        executeComponent(true);
+        executeComponent();
     }, 200);
 }
 function computeStaticValues() {
@@ -56,6 +56,57 @@ function refreshOnStaticChange() {
 // $: sendUserToast('args' + JSON.stringify(runnableInputValues) + Boolean(extraQueryParams) || args)
 // $: console.log(runnableInputValues)
 let firstRefresh = true;
+function genCallbacks({ onDone, onCancel, onError }) {
+    const callbacks = {
+        started({ id }) {
+            console.log('started', id);
+            loading = true;
+            outputs.jobId?.set(id);
+            dispatch('started', id);
+        },
+        doneWithoutCompute(r) {
+            onDone?.(r);
+        },
+        doneResult({ id, result }) {
+            onDone?.(result);
+            lastJobId = id;
+            setResult(result, id);
+            loading = false;
+            dispatch('done', { id, result });
+        },
+        cancel({ id }) {
+            onCancel?.();
+            let jobId = id;
+            console.debug('cancel', jobId);
+            let job = $jobsById[jobId];
+            if (job && job.created_at && !job.duration_ms) {
+                $jobsById[jobId] = {
+                    ...job,
+                    started_at: job.started_at ?? Date.now(),
+                    duration_ms: Date.now() - (job.started_at ?? job.created_at)
+                };
+            }
+            dispatch('cancel', { id });
+        },
+        doneError({ id, error }) {
+            onError?.(error);
+            setResult({ error }, id);
+            loading = false;
+            dispatch('doneError', { id, error });
+        }
+    };
+    if (isEditor) {
+        callbacks.running = ({ id }) => {
+            console.log('running', id);
+            let jobId = id;
+            let job = $jobsById[jobId];
+            if (job && !job.started_at) {
+                $jobsById[jobId] = { ...job, started_at: Date.now() };
+            }
+        };
+    }
+    return callbacks;
+}
 function refreshIfAutoRefresh(src) {
     // console.log(
     // 	'refreshIfAutoRefresh',
@@ -151,7 +202,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
     let jobId;
     console.debug(`Executing ${id}`);
     if (iterContext && $iterContext.disabled) {
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         console.debug(`Skipping execution of ${id} because it is part of a disabled list`);
         return;
     }
@@ -185,7 +236,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
             await setResult(r, job);
         }
         loading = false;
-        callbacks?.done(r);
+        callbacks?.onDone?.(r);
         if (setRunnableJobEditorPanel && editorContext) {
             editorContext.runnableJobEditorPanel.update((p) => {
                 return {
@@ -200,16 +251,16 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         if (!noToast) {
             sendUserToast('This app is not connected to a windmill backend, it is a static preview');
         }
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         return;
     }
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         return;
     }
     if (!resultJobLoader) {
         console.warn('No test job loader');
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         return;
     }
     try {
@@ -219,7 +270,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
                 addJob(uuid);
             }
             return uuid;
-        }, callbacks);
+        }, genCallbacks(callbacks ?? {}));
         if (setRunnableJobEditorPanel && editorContext) {
             editorContext.runnableJobEditorPanel.update((p) => {
                 return {
@@ -234,7 +285,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         let error = e.body ?? e.message;
         updateResult({ error });
         $errorByComponent[id] = { error };
-        callbacks?.done({ error });
+        callbacks?.onError?.({ error });
         sendUserToast(error, true);
         loading = false;
     }
@@ -301,9 +352,6 @@ export async function runComponent(noToast = true, inlineScriptOverride, setRunn
         $errorByComponent[id] = { error };
     }
 }
-async function setJobId(jobId) {
-    outputs.jobId?.set(jobId);
-}
 function recordJob(jobId, result, jobError, transformer) {
     const error = jobError ?? JSON.stringify(transformer?.error, null, 4);
     if (isEditor && jobId) {
@@ -415,13 +463,13 @@ onMount(() => {
                 dispatch('recompute');
                 rejectCb = reject;
                 executeComponent(true, inlineScript, setRunnableJobEditorPanel, undefined, {
-                    done: (x) => {
+                    onDone: (x) => {
                         resolve(x);
                     },
-                    cancel: () => {
+                    onCancel: () => {
                         reject();
                     },
-                    error: (e) => {
+                    onError: (e) => {
                         console.error(e);
                         reject(e);
                     }
@@ -570,47 +618,10 @@ $effect(() => {
 	{/each}
 {/if}
 
-<ResultJobLoader
+<JobLoader
 	{allowConcurentRequests}
-	{isEditor}
-	on:started={(e) => {
-		console.log('started', e.detail)
-		loading = true
-		setJobId(e.detail)
-		dispatch('started', e.detail)
-	}}
+	onlyResult
 	workspaceOverride={workspace}
-	on:done={(e) => {
-		lastJobId = e.detail.id
-		setResult(e.detail.result, e.detail.id)
-		loading = false
-		dispatch('done', { id: e.detail?.id, result: e.detail?.result })
-	}}
-	on:cancel={(e) => {
-		let jobId = e.detail
-		console.debug('cancel', jobId)
-		let job = $jobsById[jobId]
-		if (job && job.created_at && !job.duration_ms) {
-			$jobsById[jobId] = {
-				...job,
-				started_at: job.started_at ?? Date.now(),
-				duration_ms: Date.now() - (job.started_at ?? job.created_at)
-			}
-		}
-		dispatch('cancel', { id: e.detail })
-	}}
-	on:running={(e) => {
-		let jobId = e.detail
-		let job = $jobsById[jobId]
-		if (job && !job.started_at) {
-			$jobsById[jobId] = { ...job, started_at: Date.now() }
-		}
-	}}
-	on:doneError={(e) => {
-		setResult({ error: e.detail.error }, e.detail.id)
-		loading = false
-		dispatch('doneError', { id: e.detail.id, result: e.detail.result })
-	}}
 	bind:this={resultJobLoader}
 />
 

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -36,10 +36,10 @@ interface Props {
     replaceCallback?: boolean;
     children?: import('svelte').Snippet;
 }
-type Callbacks = {
-    done: (x: any) => void;
-    cancel: () => void;
-    error: (e: any) => void;
+type RunnableCallback = {
+    onDone?: (r: any) => void;
+    onCancel?: () => void;
+    onError?: (e: any) => void;
 };
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -92,7 +92,7 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
         };
         force_viewer_allow_user_resources?: Array<(string)>;
     }>;
-    runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: Callbacks) => Promise<string | undefined>;
+    runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: RunnableCallback) => Promise<string | undefined>;
 }, "result" | "loading">;
 type RunnableComponent = InstanceType<typeof RunnableComponent>;
 export default RunnableComponent;

package/package/components/apps/components/inputs/AppUserResource.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext, onDestroy } from 'svelte';
+<script lang="ts">import { getContext, onDestroy, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
@@ -9,7 +9,7 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { twMerge } from 'tailwind-merge';
 import LightweightResourcePicker from '../../../LightweightResourcePicker.svelte';
 let { id, configuration, verticalAlignment = undefined, customCss = undefined, render } = $props();
-const { app, worldStore, componentControl } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, isEditor, mode } = getContext('AppViewerContext');
 let resolvedConfig = $state(initConfig(components['userresourcecomponent'].initialData.configuration, configuration));
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
@@ -18,8 +18,29 @@ let outputs = initOutput($worldStore, id, {
 });
 let css = $state(initCss($app.css?.['userresourcecomponent'], customCss));
 let classInput = $derived(twMerge('windmillapp w-full px-2', css?.input?.class ?? '', 'wm-input', 'wm-user-resource-select'));
-let value = $state(outputs.result.peak()?.replace('$res:', ''));
-value && assignValue(outputs.result.peak());
+function getDefaultValue() {
+    if (resolvedConfig.defaultValue && typeof resolvedConfig.defaultValue === 'string') {
+        const nval = resolvedConfig.defaultValue;
+        return nval.replace('$res:', '');
+    }
+    return undefined;
+}
+let value = $state(outputs.result.peak()?.replace('$res:', '') ?? getDefaultValue());
+$effect(() => {
+    value;
+    untrack(() => assignValue(value));
+});
+let lastDefaultValue = $state(getDefaultValue());
+$effect(() => {
+    // when in dnd mode, we react to the default value being changed for better UX
+    if (isEditor && $mode === 'dnd') {
+        const currentDefaultValue = getDefaultValue(); // reactive
+        if (lastDefaultValue !== currentDefaultValue) {
+            value = currentDefaultValue;
+            lastDefaultValue = currentDefaultValue;
+        }
+    }
+});
 onDestroy(() => {
     listInputs?.remove(id);
 });
@@ -76,10 +97,7 @@ let resourcePicker = $state(undefined);
 			<LightweightResourcePicker
 				expressOAuthSetup={resolvedConfig.expressOauthSetup}
 				bind:this={resourcePicker}
-				{value}
-				on:change={(e) => {
-					assignValue(e.detail)
-				}}
+				bind:value
 				disabled={resolvedConfig.disabled}
 				resourceType={resolvedConfig.resourceType}
 			/>

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -179,11 +179,17 @@ async function computeTriggerables() {
         .filter(Boolean);
     if (items.findIndex((x) => {
         const c = x.data;
-        if (c.type === 'schemaformcomponent') {
-            return (Object.values(c.componentInput?.value?.properties ?? {}).findIndex((p) => p?.type === 'object' && p?.format === 'resource-s3_object') !== -1);
-        }
-        else if (c.type === 'formbuttoncomponent' || c.type === 'formcomponent') {
-            return (Object.values(c.componentInput?.fields ?? {}).findIndex((p) => p?.fieldType === 'object' && p?.format === 'resource-s3_object') !== -1);
+        if (c.type === 'schemaformcomponent' ||
+            c.type === 'formbuttoncomponent' ||
+            c.type === 'formcomponent') {
+            const props = c.type === 'schemaformcomponent'
+                ? c.componentInput?.value?.properties
+                : c.componentInput?.runnable?.type === 'runnableByName'
+                    ? c.componentInput?.runnable?.inlineScript?.schema?.properties
+                    : c.componentInput?.runnable?.schema?.properties;
+            return (Object.values(props ?? {}).findIndex((p) => (p?.type === 'object' && p?.format === 'resource-s3_object') ||
+                (p?.type === 'array' &&
+                    (p?.items?.resourceType === 's3object' || p?.items?.resourceType === 's3_object'))) !== -1);
         }
         else {
             return false;

package/package/components/apps/editor/AppJobsDrawer.svelte

@@ -12,18 +12,18 @@ import { classNames, truncateRev, isFlowPreview } from '../../../utils';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import AppTimeline from './AppTimeline.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
-import TestJobLoader from '../../TestJobLoader.svelte';
+import JobLoader from '../../JobLoader.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 let { open = $bindable(false), jobs, jobsById, hasErrors = false, selectedJobId = $bindable(undefined), refreshComponents = undefined, errorByComponent = {} } = $props();
 const dispatch = createEventDispatcher();
-let testJobLoader = $state();
+let jobLoader = $state();
 let job = $state(undefined);
 let testIsLoading = $state(false);
 let rightColumnSelect = $state('timeline');
 $effect(() => {
     selectedJobId &&
         !selectedJobId?.includes('Frontend') &&
-        untrack(() => selectedJobId && testJobLoader?.watchJob(selectedJobId));
+        untrack(() => selectedJobId && jobLoader?.watchJob(selectedJobId));
 });
 $effect(() => {
     if (selectedJobId?.includes('Frontend') && selectedJobId) {
@@ -32,7 +32,7 @@ $effect(() => {
 });
 </script>
 
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
+<JobLoader noCode={true} bind:this={jobLoader} bind:isLoading={testIsLoading} bind:job />
 
 <Drawer bind:open size="900px">
 	<DrawerContent
@@ -149,7 +149,7 @@ $effect(() => {
 												<Button
 													color="red"
 													variant="border"
-													on:click={() => testJobLoader?.cancelJob()}
+													on:click={() => jobLoader?.cancelJob()}
 												>
 													<Loader2 size={14} class="animate-spin mr-2" />
 

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { getContext, untrack } from 'svelte';
-import TestJobLoader from '../../TestJobLoader.svelte';
+import JobLoader from '../../JobLoader.svelte';
 import RunnableJobPanelInner from './RunnableJobPanelInner.svelte';
 let { float = true, hidden = false, testJob = $bindable(undefined), jobToWatch = $bindable(undefined), width = undefined } = $props();
 const { runnableJobEditorPanel, selectedComponentInEditor } = getContext('AppEditorContext');
 let testIsLoading = $state(false);
-let testJobLoader = $state();
+let jobLoader = $state();
 function updateSelectedJob() {
     const selectedComponent = $selectedComponentInEditor;
     if (selectedComponent) {
@@ -17,7 +17,7 @@ function updateSelectedJob() {
                 testJob = undefined;
             }
             jobToWatch = { componentId: selectedComponent, job: backendJob };
-            testJobLoader?.watchJob(backendJob);
+            jobLoader?.watchJob(backendJob);
         }
         else {
             testJob = undefined;
@@ -38,7 +38,7 @@ $effect(() => {
 });
 </script>
 
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
+<JobLoader bind:this={jobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
 {#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen || !float}
 	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor ?? '']}

package/package/components/apps/editor/component/components.d.ts

@@ -2665,6 +2665,12 @@ export declare const components: {
             readonly componentInput: undefined;
             readonly configuration: {
                 readonly items: StaticAppInput;
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: undefined;
+                    readonly tooltip: "Format: $res:path/to/resource";
+                };
                 readonly placeholder: {
                     readonly type: "static";
                     readonly fieldType: "text";
@@ -2704,6 +2710,12 @@ export declare const components: {
                     readonly fieldType: "text";
                     readonly value: "postgresql";
                 };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: undefined;
+                    readonly tooltip: "Format: $res:path/to/resource";
+                };
                 readonly expressOauthSetup: {
                     readonly type: "static";
                     readonly fieldType: "boolean";