windmill-components 1.60.4 → 1.75.0

package/components/apps/components/{table → display/table}/AppTableFooter.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         result: Record<string, any>[];
         paginationEnabled?: boolean | undefined;
         table: Readable<Table<Record<string, any>>>;
+        class?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/AlignWrapper.svelte

@@ -1,30 +1,36 @@
-<script>import { classNames } from '../../../../utils';
+<script>import { twMerge } from 'tailwind-merge';
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
-function tailwindHorizontalAlignment(horizontalAlignment) {
-    switch (horizontalAlignment) {
-        case 'left':
-            return 'justify-start';
-        case 'center':
-            return 'justify-center';
-        case 'right':
-            return 'justify-end';
-    }
+let c = '';
+export { c as class };
+export let style = '';
+export let render = true;
+function tailwindHorizontalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end'
+    };
+    return classes[alignment];
 }
-function tailwindVerticalAlignment(verticalAlignment) {
-    switch (verticalAlignment) {
-        case 'top':
-            return 'items-start';
-        case 'center':
-            return 'items-center';
-        case 'bottom':
-            return 'items-end';
-    }
+function tailwindVerticalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        top: 'items-start',
+        center: 'items-center',
+        bottom: 'items-end'
+    };
+    return classes[alignment];
 }
-$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '');
+$: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', c);
 </script>
 
-<div class={classes}>
-	<slot />
-</div>
+{#if render}
+	<div class={classes} {style}>
+		<slot />
+	</div>
+{/if}

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

@@ -1,9 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HorizontalAlignment, VerticalAlignment } from '../../types';
 declare const __propDef: {
     props: {
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
         noWFull?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        render?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -0,0 +1,23 @@
+<script>import RunnableComponent from './RunnableComponent.svelte';
+export let id;
+export let name;
+export let inlineScript;
+export let fields;
+let result = undefined;
+export const staticOutputs = ['result', 'loading'];
+</script>
+
+<RunnableComponent
+	render={false}
+	{id}
+	{fields}
+	bind:result
+	runnable={{
+		name,
+		inlineScript,
+		type: 'runnableByName'
+	}}
+	wrapperClass="hidden"
+>
+	<slot />
+</RunnableComponent>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        inlineScript: InlineScript | undefined;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HiddenComponentProps = typeof __propDef.props;
+export type HiddenComponentEvents = typeof __propDef.events;
+export type HiddenComponentSlots = typeof __propDef.slots;
+export default class HiddenComponent extends SvelteComponentTyped<HiddenComponentProps, HiddenComponentEvents, HiddenComponentSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/helpers/InputDefaultValue.svelte

@@ -0,0 +1,17 @@
+<script>export let input = undefined;
+export let defaultValue = undefined;
+function setInputValueToDefaultValue() {
+    if (defaultValue !== undefined && input) {
+        input.value = String(defaultValue);
+    }
+}
+function clearInputValue() {
+    if (input) {
+        input.value = '';
+    }
+}
+$: input && defaultValue && setInputValueToDefaultValue();
+$: input &&
+    (defaultValue === '' || defaultValue === undefined || defaultValue === null) &&
+    clearInputValue();
+</script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        input?: HTMLInputElement | undefined;
+        defaultValue?: (string | number | boolean) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputDefaultValueProps = typeof __propDef.props;
+export type InputDefaultValueEvents = typeof __propDef.events;
+export type InputDefaultValueSlots = typeof __propDef.slots;
+export default class InputDefaultValue extends SvelteComponentTyped<InputDefaultValueProps, InputDefaultValueEvents, InputDefaultValueSlots> {
+}
+export {};

package/components/apps/components/helpers/InputValue.svelte

@@ -1,31 +1,53 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
+import { deepEqual } from 'fast-equals';
 import { getContext } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
 export let id = undefined;
-export let row = {};
 export let error = '';
-const { worldStore } = getContext('AppEditorContext');
+let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
+$: if (input && !deepEqual(input, lastInput)) {
+    lastInput = JSON.parse(JSON.stringify(input));
+    // Needed because of file uploads
+    if (input?.['value'] instanceof ArrayBuffer) {
+        lastInput.value = input?.['value'];
+    }
+}
+const { worldStore } = getContext('AppViewerContext');
 $: state = $worldStore?.state;
-$: input && $worldStore && row && handleConnection();
-$: input && input.type == 'template' && $state && (value = getValue(input));
-$: input && input.type == 'eval' && $state && (value = evalExpr(input));
+let timeout = undefined;
+const debounce_ms = 50;
+function debounce(cb) {
+    if (timeout) {
+        clearTimeout(timeout);
+    }
+    timeout = setTimeout(cb, debounce_ms);
+}
+$: lastInput && $worldStore && debounce(handleConnection);
+$: lastInput &&
+    lastInput.type == 'template' &&
+    $state &&
+    debounce(() => (value = getValue(lastInput)));
+$: lastInput &&
+    lastInput.type == 'eval' &&
+    $state &&
+    debounce(() => (value = evalExpr(lastInput)));
 function handleConnection() {
-    if (input.type === 'connected') {
-        $worldStore?.connect(input, onValueChange);
+    if (lastInput.type === 'connected') {
+        $worldStore?.connect(lastInput, onValueChange);
     }
-    else if (input.type === 'row') {
-        setTimeout(() => (value = row?.[input['column']]), 0);
+    else if (lastInput.type === 'static' || lastInput.type == 'template') {
+        value = getValue(lastInput);
     }
-    else if (input.type === 'static' || input.type == 'template') {
-        setTimeout(() => (value = getValue(input)), 0);
+    else if (lastInput.type == 'eval') {
+        value = evalExpr(lastInput);
     }
-    else if (input.type == 'eval') {
-        setTimeout(() => ((value = evalExpr(input)), 0));
+    else if (lastInput.type == 'upload') {
+        value = lastInput.value;
     }
     else {
-        setTimeout(() => (value = undefined), 0);
+        value = undefined;
     }
 }
 function evalExpr(input) {
@@ -47,8 +69,7 @@ function computeGlobalContext() {
             key,
             Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
         ];
-    })
-        .concat(row ? [['row', row]] : []));
+    }));
 }
 export function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {
@@ -89,8 +110,8 @@ function eval_like(text, context = {}) {
     return evaluator(context);
 }
 function onValueChange(newValue) {
-    if (input.type === 'connected' && newValue !== undefined && newValue !== null) {
-        const { connection } = input;
+    if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
+        const { connection } = lastInput;
         if (!connection) {
             // No connection
             return;

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         input: AppInput;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
-        row?: Record<string, any> | undefined;
         error?: string | undefined;
         getValue?: ((input: AppInput) => any) | undefined;
     };

package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -1,10 +1,13 @@
-<script>import { getContext } from 'svelte';
+<script>import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { fade } from 'svelte/transition';
 import InputValue from './InputValue.svelte';
 export let componentInput;
 export let id;
 export let result;
+export let render;
 // Sync the result to the output
-const { worldStore } = getContext('AppEditorContext');
+const { worldStore } = getContext('AppViewerContext');
 $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
@@ -19,4 +22,16 @@ $: result && outputs && setOutput(result);
 	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}
 
-<slot />
+{#if render}
+	<slot />
+{:else}
+	<div class="w-full h-full">
+		<div
+			out:fade|local={{ duration: 50 }}
+			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+		>
+			<Loader2 class="animate-spin" size={16} />
+			<span class="text-xs mt-1">Loading</span>
+		</div>
+	</div>
+{/if}

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         componentInput: AppInput;
         id: string;
         result: any;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/RefreshButton.svelte

@@ -3,7 +3,7 @@ import { faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { RefreshCcw, RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-const { runnableComponents, worldStore } = getContext('AppEditorContext');
+const { runnableComponents, worldStore } = getContext('AppViewerContext');
 async function refresh() {
     window.dispatchEvent(new Event('pointerup'));
     await $runnableComponents[componentId]?.();

package/components/apps/components/helpers/ResizeWrapper.svelte

@@ -0,0 +1,24 @@
+<script>import { getContext } from 'svelte';
+import { findGridItem } from '../../editor/appUtils';
+export let id;
+export let shouldWrap = false;
+const { app, breakpoint } = getContext('AppViewerContext');
+$: gridItem = findGridItem($app, id);
+let wrapper;
+$: {
+    if (wrapper && gridItem && shouldWrap) {
+        const wrapperHeight = wrapper.getBoundingClientRect().height;
+        const width = $breakpoint === 'sm' ? 3 : 12;
+        gridItem[width].h = Math.ceil(wrapperHeight / 36);
+        gridItem = gridItem;
+    }
+}
+</script>
+
+{#if shouldWrap}
+	<div bind:this={wrapper}>
+		<slot />
+	</div>
+{:else}
+	<slot />
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        shouldWrap?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ResizeWrapperProps = typeof __propDef.props;
+export type ResizeWrapperEvents = typeof __propDef.events;
+export type ResizeWrapperSlots = typeof __propDef.slots;
+export default class ResizeWrapper extends SvelteComponentTyped<ResizeWrapperProps, ResizeWrapperEvents, ResizeWrapperSlots> {
+}
+export {};

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

@@ -1,10 +1,13 @@
-<script>import Alert from '../../../common/alert/Alert.svelte';
+<script>import { goto } from '$app/navigation';
+import Alert from '../../../common/alert/Alert.svelte';
+import Popover from '../../../Popover.svelte';
 import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
-import { defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
+import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
+import { Bug, Loader2 } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
-import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
+import { fade } from 'svelte/transition';
 import InputValue from './InputValue.svelte';
 import RefreshButton from './RefreshButton.svelte';
 // Component props
@@ -15,11 +18,14 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
-export let noMinH = false;
-export let defaultUserInput = false;
 export let flexWrap = false;
 export let wrapperClass = '';
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend } = getContext('AppEditorContext');
+export let wrapperStyle = '';
+export let initializing = undefined;
+export let gotoUrl = undefined;
+export let gotoNewTab = undefined;
+export let render;
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId } = getContext('AppViewerContext');
 onMount(() => {
     if (autoRefresh) {
         $runnableComponents[id] = async () => {
@@ -28,7 +34,7 @@ onMount(() => {
         executeComponent(true);
     }
 });
-let args = {};
+let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
@@ -55,9 +61,7 @@ $: if (JSON.stringify(currentStaticValues) != JSON.stringify(lazyStaticValues))
     }
 }
 $: fields && (lazyStaticValues = computeStaticValues());
-$: runnableInputValues &&
-    extraQueryParams &&
-    args &&
+$: (runnableInputValues || extraQueryParams || args) &&
     autoRefresh &&
     testJobLoader &&
     setDebouncedExecute();
@@ -69,53 +73,8 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading?.set(testIsLoading);
-$: runnable?.type === 'runnableByName' && loadSchemaAndInputsByName();
-async function loadSchemaAndInputsByName() {
-    if (runnable?.type === 'runnableByName') {
-        const { inlineScript } = runnable;
-        // Inline scripts directly provide the schema
-        if (inlineScript) {
-            const newSchema = inlineScript.schema;
-            const newFields = reloadInputs(newSchema);
-            if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
-                setTimeout(() => {
-                    fields = newFields;
-                }, 0);
-            }
-        }
-    }
-}
-// When the schema is loaded, we need to update the inputs spec
-// in order to render the inputs the component panel
-function reloadInputs(schema) {
-    let schemaCopy = JSON.parse(JSON.stringify(schema));
-    const result = {};
-    const newInputs = schemaToInputsSpec(schemaCopy, defaultUserInput);
-    if (!fields) {
-        return newInputs;
-    }
-    Object.keys(newInputs).forEach((key) => {
-        const newInput = newInputs[key];
-        const oldInput = fields[key];
-        // If the input is not present in the old inputs, add it
-        if (oldInput === undefined) {
-            result[key] = newInput;
-        }
-        else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
-                newInput.format !== oldInput.format ||
-                newInput.subFieldType !== oldInput.subFieldType) {
-                result[key] = newInput;
-            }
-            else {
-                result[key] = oldInput;
-            }
-        }
-    });
-    return result;
-}
-$: schemaStripped = runnable && stripSchema(fields);
-function stripSchema(inputs) {
+$: schemaStripped = stripSchema(fields, $stateId);
+function stripSchema(inputs, s) {
     let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
     try {
         schemaStripped = JSON.parse(JSON.stringify(schema));
@@ -162,7 +121,7 @@ async function executeComponent(noToast = false) {
                 staticRunnableInputs[k] = field.value;
             }
             else if (field?.type == 'user') {
-                nonStaticRunnableInputs[k] = args[k];
+                nonStaticRunnableInputs[k] = args?.[k];
             }
             else {
                 nonStaticRunnableInputs[k] = runnableInputValues[k];
@@ -200,16 +159,20 @@ export async function runComponent() {
     await executeComponent();
 }
 let lastStartedAt = Date.now();
+function recordError(error) {
+    if (testJob) {
+        $errorByComponent[testJob.id] = {
+            error: error,
+            componentId: id
+        };
+    }
+}
+$: result?.error && recordError(result.error);
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v]}
 	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue
-			{id}
-			input={fields[key]}
-			bind:value={runnableInputValues[key]}
-			row={extraQueryParams['row'] ?? {}}
-		/>
+		<InputValue {id} input={fields[key]} bind:value={runnableInputValues[key]} />
 	{/if}
 {/each}
 
@@ -222,6 +185,22 @@ let lastStartedAt = Date.now();
 				lastStartedAt = startedAt
 				outputs.result?.set(testJob?.result)
 				result = testJob.result
+
+				const previousJobId = Object.keys($errorByComponent).find(
+					(key) => $errorByComponent[key].componentId === id
+				)
+
+				if (previousJobId && !result?.error) {
+					delete $errorByComponent[previousJobId]
+					$errorByComponent = $errorByComponent
+				}
+				if (gotoUrl && gotoUrl != '' && result?.error == undefined) {
+					if (gotoNewTab) {
+						window.open(gotoUrl, '_blank')
+					} else {
+						goto(gotoUrl)
+					}
+				}
 			}
 		}
 	}}
@@ -230,43 +209,61 @@ let lastStartedAt = Date.now();
 	bind:this={testJobLoader}
 />
 
-<div class="h-full flex relative flex-row flex-wrap {wrapperClass}">
-	{#if autoRefresh === true}
-		<div class="flex absolute top-1 right-1">
-			<RefreshButton componentId={id} />
-		</div>
-	{/if}
-	{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
-		<div class="px-2 h-fit min-h-0">
-			<SchemaForm
-				{flexWrap}
-				schema={schemaStripped}
-				bind:args
-				{disabledArgs}
-				shouldHideNoInputs
-				noVariablePicker
-			/>
-		</div>
-	{/if}
+{#if render}
+	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
+		{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
+			<div class="px-2 h-fit min-h-0">
+				<SchemaForm
+					{flexWrap}
+					schema={schemaStripped}
+					bind:args
+					{disabledArgs}
+					shouldHideNoInputs
+					noVariablePicker
+				/>
+			</div>
+		{/if}
 
-	{#if !runnable && autoRefresh}
-		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
-			Please select a runnable
-		</Alert>
-	{:else if result?.error}
-		<div class="p-2">
-			<Alert type="error" title="Error during execution">
-				See "Debug Runs" on the top right for more details
-				<pre
-					title={JSON.stringify(result.error, null, 4)}
-					class=" mt-2 text-2xs whitespace-pre-wrap">{JSON.stringify(result.error, null, 4)}</pre
-				>
+		{#if !runnable && autoRefresh}
+			<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
+				Please select a runnable
 			</Alert>
-			<slot />
-		</div>
-	{:else}
-		<div class="block w-full h-full">
-			<slot />
-		</div>
-	{/if}
-</div>
+		{:else if result?.error && $mode === 'preview'}
+			<div
+				title="Error"
+				class={classNames(
+					'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-2  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+					'bg-red-100/80'
+				)}
+			>
+				<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+					<Bug size={14} />
+					<span slot="text">
+						<div class="bg-white">
+							<Alert type="error" title="Error during execution">
+								<div class="flex flex-col gap-2">
+									An error occured, please contact the app author.
+									<span class="font-semibold">Job id: {testJob?.id}</span>
+								</div>
+							</Alert>
+						</div>
+					</span>
+				</Popover>
+			</div>
+			<div class="block grow w-full max-h-full border border-red-300 bg-red-50 relative">
+				<slot />
+			</div>
+		{:else}
+			<div class="block grow w-full max-h-full">
+				<slot />
+			</div>
+		{/if}
+		{#if !initializing && autoRefresh === true}
+			<div class="flex absolute top-1 right-1 z-50">
+				<RefreshButton componentId={id} />
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="w-full h-full" />
+{/if}

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

@@ -9,10 +9,13 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         result?: any;
         forceSchemaDisplay?: boolean | undefined;
-        noMinH?: boolean | undefined;
-        defaultUserInput?: boolean | undefined;
         flexWrap?: boolean | undefined;
         wrapperClass?: string | undefined;
+        wrapperStyle?: string | undefined;
+        initializing?: boolean | undefined;
+        gotoUrl?: string | undefined;
+        gotoNewTab?: boolean | undefined;
+        render: boolean;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {