windmill-components 1.82.1 → 1.82.2

package/components/apps/components/buttons/AppButton.svelte

@@ -32,6 +32,8 @@ if (controls) {
     $componentControl[id] = controls;
 }
 let runnableComponent;
+let isLoading = false;
+let ownClick = false;
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && handleBeforeIcon();
@@ -47,6 +49,19 @@ async function handleAfterIcon() {
     }
 }
 $: resolvedConfig?.triggerOnAppLoad && runnableComponent?.runComponent();
+$: if (outputs?.loading != undefined) {
+    outputs.loading.set(false, true);
+}
+$: outputs?.loading.subscribe({
+    id: 'loading-' + id,
+    next: (value) => {
+        isLoading = value;
+        if (ownClick && !value) {
+            ownClick = false;
+        }
+    }
+});
+$: loading = isLoading && ownClick;
 let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
@@ -59,6 +74,7 @@ async function handleClick(event) {
     if (preclickAction) {
         await preclickAction();
     }
+    ownClick = true;
     if (!runnableComponent) {
         runnableWrapper.onSuccess();
     }
@@ -66,7 +82,6 @@ async function handleClick(event) {
         await runnableComponent?.runComponent();
     }
 }
-let loading = false;
 </script>
 
 {#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
@@ -85,7 +100,6 @@ let loading = false;
 	bind:this={runnableWrapper}
 	{recomputeIds}
 	bind:runnableComponent
-	bind:loading
 	{componentInput}
 	doOnSuccess={resolvedConfig.onSuccess}
 	{id}

package/components/apps/components/buttons/AppForm.svelte

@@ -28,8 +28,16 @@ let isLoading = false;
 $: noInputs =
     $stateId != undefined &&
         (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
+$: if (outputs?.loading != undefined) {
+    outputs.loading.set(false, true);
+}
+$: outputs?.loading.subscribe({
+    id: 'loading-' + id,
+    next: (value) => {
+        isLoading = value;
+    }
+});
 $: css = concatCustomCss($app.css?.formcomponent, customCss);
-let loading = false;
 </script>
 
 {#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
@@ -45,7 +53,6 @@ let loading = false;
 	{recomputeIds}
 	{render}
 	bind:runnableComponent
-	bind:loading
 	{componentInput}
 	{id}
 	doOnSuccess={resolvedConfig.onSuccess}

package/components/apps/components/buttons/AppFormButton.svelte

@@ -25,6 +25,8 @@ let outputs = initOutput($worldStore, id, {
 });
 let resolvedConfig = initConfig(components['formbuttoncomponent'].initialData.configuration, configuration);
 let runnableComponent;
+let isLoading = false;
+let ownClick = false;
 let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
@@ -34,9 +36,18 @@ $: noInputs =
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
+$: outputs?.loading.subscribe({
+    id: 'loading-' + id,
+    next: (value) => {
+        isLoading = value;
+        if (ownClick && !value) {
+            ownClick = false;
+        }
+    }
+});
+$: loading = isLoading && ownClick;
 $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 let runnableWrapper;
-let loading = false;
 </script>
 
 {#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}

package/components/apps/components/display/PlotlyHtml.svelte

@@ -27,7 +27,7 @@ $: Plotly &&
     divEl &&
     h &&
     w &&
-    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
+    Plotly.newPlot(divEl, [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
 </script>
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>

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

@@ -221,8 +221,7 @@ $componentControl[id] = {
 										on:click={() => toggleRow(row, rowIndex)}
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
-											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
-												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+											{#each actionButtons as actionButton, actionIndex (actionIndex)}
 												<div
 													on:mouseover|stopPropagation={() => {
 														if (actionButton.id !== $hoverStore) {
@@ -256,15 +255,12 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
+															{...actionButton}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
 															extraQueryParams={{ row: row.original }}
-															componentInput={actionButton.componentInput}
+															bind:componentInput={actionButton.componentInput}
 															controls={{
 																left: () => {
 																	if (actionIndex === 0) {
@@ -292,15 +288,12 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
+															{...actionButton}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
 															extraQueryParams={{ row: row.original }}
-															componentInput={actionButton.componentInput}
+															bind:componentInput={actionButton.componentInput}
 														/>
 													{/if}
 												</div>
@@ -326,9 +319,9 @@ $componentControl[id] = {
 		<div class="flex flex-col h-full w-full overflow-auto">
 			<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
 				The result should be an array of objects. Received:
-				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
-					>{JSON.stringify(result, null, 4)}</pre
-				>
+				<pre class="w-full bg-white p-2 rounded-md">
+				{JSON.stringify(result, null, 4)}
+				</pre>
 			</Alert>
 		</div>
 	{/if}

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

@@ -27,7 +27,6 @@ export let recomputable = false;
 export let outputs;
 export let extraKey = '';
 export let doNotRecomputeOnInputChanged = false;
-export let loading = false;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (recomputable || autoRefresh) {
@@ -40,7 +39,6 @@ let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
-$: outputs.loading?.set(loading);
 function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
@@ -105,7 +103,7 @@ function stripSchema(inputs, s) {
 }
 async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
-        loading = true;
+        outputs.loading?.set(true);
         try {
             const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore);
             await setResult(r);
@@ -114,7 +112,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         catch (e) {
             sendUserToast('Error running frontend script: ' + e.message, true);
         }
-        loading = false;
+        outputs.loading?.set(false);
         return;
     }
     if (noBackend) {
@@ -126,7 +124,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
         return;
     }
-    loading = true;
+    outputs.loading?.set(true);
     try {
         let njob = await testJobLoader?.abstractRun(() => {
             const nonStaticRunnableInputs = {};
@@ -174,8 +172,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         }
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message });
-        loading = false;
+        outputs.loading?.set(false);
     }
 }
 export async function runComponent() {
@@ -183,7 +180,7 @@ export async function runComponent() {
         await executeComponent();
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message });
+        console.error(e);
     }
 }
 let lastStartedAt = Date.now();
@@ -259,7 +256,7 @@ async function setResult(res) {
 				setResult(e.detail.result)
 			}
 		}
-		loading = false
+		outputs.loading?.set(false)
 	}}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}

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

@@ -25,7 +25,6 @@ declare const __propDef: {
         };
         extraKey?: string | undefined;
         doNotRecomputeOnInputChanged?: boolean | undefined;
-        loading?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -8,7 +8,6 @@ export let componentInput;
 export let id;
 export let result = undefined;
 export let initializing = true;
-export let loading = false;
 export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
@@ -74,7 +73,6 @@ export function onSuccess() {
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
 		{extraKey}
-		bind:loading
 		bind:this={runnableComponent}
 		fields={componentInput.fields}
 		bind:result

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         id: string;
         result?: any;
         initializing?: boolean | undefined;
-        loading?: boolean | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;

package/components/apps/editor/component/Component.svelte

@@ -143,7 +143,7 @@ $: hasError = componentWithErrors.includes(component.id);
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				actionButtons={component.actionButtons}
+				bind:actionButtons={component.actionButtons}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponent'}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.82.1",
+	"version": "1.82.2",
 	"devDependencies": {
 		"@playwright/test": "^1.31.1",
 		"@sveltejs/adapter-static": "^1.0.0",