windmill-components 1.85.0 → 1.87.0

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

@@ -0,0 +1,366 @@
+<script>import Alert from '../../../common/alert/Alert.svelte';
+import LightweightSchemaForm from '../../../LightweightSchemaForm.svelte';
+import Popover from '../../../Popover.svelte';
+import TestJobLoader from '../../../TestJobLoader.svelte';
+import { AppService } from '../../../../gen';
+import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
+import { deepEqual } from 'fast-equals';
+import { Bug } from 'lucide-svelte';
+import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+import { computeGlobalContext, eval_like } from './eval';
+import InputValue from './InputValue.svelte';
+import RefreshButton from './RefreshButton.svelte';
+import { selectId } from '../../editor/appUtils';
+// Component props
+export let id;
+export let fields;
+export let runnable;
+export let transformer;
+export let extraQueryParams = {};
+export let autoRefresh = true;
+export let result = undefined;
+export let forceSchemaDisplay = false;
+export let wrapperClass = '';
+export let wrapperStyle = '';
+export let initializing = undefined;
+export let render;
+export let outputs;
+export let extraKey = '';
+export let recomputeOnInputChanged = true;
+export let loading = false;
+export let recomputableByRefreshButton = true;
+export let refreshOnStart = false;
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl, initialized, selectedComponent, app, connectingInput } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+let donePromise = undefined;
+const cancellableRun = (inlineScript) => {
+    let rejectCb;
+    let p = new Promise((resolve, reject) => {
+        rejectCb = reject;
+        donePromise = resolve;
+        executeComponent(true, inlineScript).catch(reject);
+    });
+    p.cancel = () => {
+        testJobLoader?.cancelJob();
+        loading = false;
+        rejectCb(new Error('Canceled'));
+    };
+    return p;
+};
+$runnableComponents[id] = {
+    autoRefresh: autoRefresh && recomputableByRefreshButton,
+    refreshOnStart,
+    cb: cancellableRun
+};
+if (!$initialized.initializedComponents.includes(id)) {
+    $initialized.initializedComponents = [...$initialized.initializedComponents, id];
+}
+onDestroy(() => {
+    $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id);
+});
+$runnableComponents = $runnableComponents;
+let args = undefined;
+let testIsLoading = false;
+let runnableInputValues = {};
+let executeTimeout = undefined;
+$: outputs.loading?.set(loading);
+function setDebouncedExecute() {
+    executeTimeout && clearTimeout(executeTimeout);
+    executeTimeout = setTimeout(() => {
+        executeComponent(true);
+    }, 200);
+}
+function computeStaticValues() {
+    return Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'static')
+        .map(([name, field]) => {
+        return [name, field['value']];
+    });
+}
+let lazyStaticValues = computeStaticValues();
+let currentStaticValues = lazyStaticValues;
+$: fields && (currentStaticValues = computeStaticValues());
+$: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
+    lazyStaticValues = currentStaticValues;
+    refreshIfAutoRefresh('static changed');
+}
+$: (runnableInputValues || extraQueryParams || args) &&
+    testJobLoader &&
+    refreshIfAutoRefresh('arg changed');
+$: refreshOn =
+    runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [];
+function refreshIfAutoRefresh(_src) {
+    const refreshEnabled = autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0);
+    if (refreshEnabled && $initialized.initialized) {
+        setDebouncedExecute();
+    }
+}
+// Test job internal state
+let testJob = undefined;
+let testJobLoader = undefined;
+let schemaStripped = autoRefresh || forceSchemaDisplay ? emptySchema() : undefined;
+$: (autoRefresh || forceSchemaDisplay) &&
+    Object.keys(fields ?? {}).length > 0 &&
+    (schemaStripped = stripSchema(fields, $stateId));
+function stripSchema(inputs, s) {
+    if (inputs === undefined) {
+        return emptySchema();
+    }
+    let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
+    try {
+        schemaStripped = JSON.parse(JSON.stringify(schema));
+    }
+    catch (e) {
+        console.warn('Error loading schema');
+        return emptySchema();
+    }
+    // Remove hidden static inputs
+    Object.keys(inputs ?? {}).forEach((key) => {
+        const input = inputs[key];
+        if (input.type === 'static' && schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+        if (input.type === 'connected' && schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+    });
+    return schemaStripped;
+}
+function generateNextFrontendJobId() {
+    const prefix = 'Frontend: ';
+    let nextJobNumber = 1;
+    while ($jobs.find((j) => j.job === `${prefix}#${nextJobNumber}`)) {
+        nextJobNumber++;
+    }
+    return `${prefix}#${nextJobNumber}`;
+}
+async function executeComponent(noToast = false, inlineScriptOverride) {
+    console.debug('execute', id);
+    if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
+        loading = true;
+        try {
+            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            await setResult(r);
+            $state = $state;
+        }
+        catch (e) {
+            sendUserToast(`Error running frontend script ${id}: ` + e.message, true);
+            // Manually add a fake job to the job list to show the error
+            const job = generateNextFrontendJobId();
+            const error = e.body ?? e.message;
+            $errorByComponent[job] = {
+                error,
+                componentId: id
+            };
+            $jobs = [{ job, component: id, error }, ...$jobs];
+        }
+        loading = false;
+        return;
+    }
+    else if (noBackend) {
+        if (!noToast) {
+            sendUserToast('This app is not connected to a windmill backend, it is a static preview');
+        }
+        return;
+    }
+    if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
+        return;
+    }
+    loading = true;
+    try {
+        let njob = await testJobLoader?.abstractRun(() => {
+            const nonStaticRunnableInputs = {};
+            const staticRunnableInputs = {};
+            Object.keys(fields ?? {}).forEach((k) => {
+                let field = fields[k];
+                if (field?.type == 'static' && fields[k]) {
+                    staticRunnableInputs[k] = field.value;
+                }
+                else if (field?.type == 'user') {
+                    nonStaticRunnableInputs[k] = args?.[k];
+                }
+                else {
+                    nonStaticRunnableInputs[k] = runnableInputValues[k];
+                }
+            });
+            const requestBody = {
+                args: nonStaticRunnableInputs,
+                force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs
+            };
+            if (runnable?.type === 'runnableByName') {
+                const { inlineScript } = inlineScriptOverride
+                    ? { inlineScript: inlineScriptOverride }
+                    : runnable;
+                if (inlineScript) {
+                    requestBody['raw_code'] = {
+                        content: inlineScript.content,
+                        language: inlineScript.language,
+                        path: inlineScript.path
+                    };
+                }
+            }
+            else if (runnable?.type === 'runnableByPath') {
+                const { path, runType } = runnable;
+                requestBody['path'] = runType !== 'hubscript' ? `${runType}/${path}` : `script/${path}`;
+            }
+            return AppService.executeComponent({
+                workspace,
+                path: defaultIfEmptyString(appPath, 'newapp'),
+                requestBody
+            });
+        });
+        if (njob) {
+            $jobs = [{ job: njob, component: id }, ...$jobs];
+        }
+    }
+    catch (e) {
+        setResult({ error: e.body ?? e.message });
+        loading = false;
+    }
+}
+export async function runComponent() {
+    try {
+        await executeComponent();
+    }
+    catch (e) {
+        setResult({ error: e.body ?? e.message });
+    }
+}
+let lastStartedAt = Date.now();
+function recordError(error) {
+    if (testJob) {
+        $errorByComponent[testJob.id] = {
+            error: error,
+            componentId: id
+        };
+    }
+}
+async function setResult(res) {
+    const hasRes = res !== undefined && res !== null;
+    if (transformer) {
+        $worldStore.newOutput(id, 'raw', res);
+        res = await eval_like(transformer.content, computeGlobalContext($worldStore, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        if (hasRes && res === undefined) {
+            res = {
+                error: {
+                    name: 'TransformerError',
+                    message: 'An error occured in the transformer',
+                    stack: 'Transformer returned undefined'
+                }
+            };
+        }
+    }
+    outputs.result?.set(res);
+    result = res;
+    if (res?.error) {
+        recordError(res.error);
+    }
+    else {
+        dispatch('success');
+    }
+    const previousJobId = Object.keys($errorByComponent).find((key) => $errorByComponent[key].componentId === id);
+    if (previousJobId && !result?.error) {
+        delete $errorByComponent[previousJobId];
+        $errorByComponent = $errorByComponent;
+    }
+}
+function handleInputClick(e) {
+    const event = e;
+    !$connectingInput.opened && selectId(event, id, selectedComponent, $app);
+}
+</script>
+
+{#each Object.entries(fields ?? {}) as [key, v] (key)}
+	{#if v.type != 'static' && v.type != 'user'}
+		<InputValue
+			key={key + extraKey}
+			{id}
+			input={fields[key]}
+			bind:value={runnableInputValues[key]}
+		/>
+	{/if}
+{/each}
+
+{#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
+	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
+		{@const fkey = `${tid}-${key}${extraKey}`}
+		<InputValue
+			{id}
+			key={fkey}
+			input={{ type: 'connected', connection: { componentId: tid, path: key }, fieldType: 'any' }}
+			bind:value={runnableInputValues[fkey]}
+		/>
+	{/each}
+{/if}
+
+<TestJobLoader
+	workspaceOverride={workspace}
+	on:done={(e) => {
+		if (testJob) {
+			const startedAt = new Date(testJob.started_at).getTime()
+			if (startedAt > lastStartedAt) {
+				lastStartedAt = startedAt
+				setResult(e.detail.result)
+				donePromise?.()
+			}
+		}
+		loading = false
+	}}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+	bind:this={testJobLoader}
+/>
+
+{#if render}
+	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
+		{#if (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
+			<div class="px-2 h-fit min-h-0">
+				<LightweightSchemaForm
+					schema={schemaStripped}
+					bind:args
+					on:inputClicked={handleInputClick}
+				/>
+			</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 && $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 {loading} componentId={id} />
+			</div>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,47 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInputs, Runnable } from '../../inputType';
+import type { Output } from '../../rx';
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        fields: AppInputs;
+        runnable: Runnable;
+        transformer: (InlineScript & {
+            language: 'frontend';
+        }) | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        autoRefresh?: boolean | undefined;
+        result?: any;
+        forceSchemaDisplay?: boolean | undefined;
+        wrapperClass?: string | undefined;
+        wrapperStyle?: string | undefined;
+        initializing?: boolean | undefined;
+        render: boolean;
+        outputs: {
+            result: Output<any>;
+            loading: Output<boolean>;
+        };
+        extraKey?: string | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
+        loading?: boolean | undefined;
+        recomputableByRefreshButton?: boolean | undefined;
+        refreshOnStart?: boolean | undefined;
+        runComponent?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        success: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RunnableComponentProps = typeof __propDef.props;
+export type RunnableComponentEvents = typeof __propDef.events;
+export type RunnableComponentSlots = typeof __propDef.slots;
+export default class RunnableComponent extends SvelteComponentTyped<RunnableComponentProps, RunnableComponentEvents, RunnableComponentSlots> {
+    get runComponent(): () => Promise<void>;
+}
+export {};

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

@@ -0,0 +1,107 @@
+<script>import { getContext, onMount } from 'svelte';
+import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils';
+import NonRunnableComponent from './NonRunnableComponent.svelte';
+import RunnableComponent from './RunnableComponent.svelte';
+import { goto } from '$app/navigation';
+import { sendUserToast } from '../../../../utils';
+import InitializeComponent from './InitializeComponent.svelte';
+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;
+export let forceSchemaDisplay = false;
+export let runnableClass = '';
+export let runnableStyle = '';
+export let doOnSuccess = undefined;
+export let render;
+export let recomputeIds = [];
+export let outputs;
+export let extraKey = undefined;
+export let refreshOnStart = false;
+const { staticExporter, noBackend, componentControl, runnableComponents } = getContext('AppViewerContext');
+$: if (initializing && result != undefined) {
+    initializing = false;
+}
+if (noBackend && componentInput?.type == 'runnable') {
+    result = componentInput?.['value'];
+}
+onMount(() => {
+    $staticExporter[id] = () => {
+        return result;
+    };
+});
+function isRunnableDefined(componentInput) {
+    return isScriptByNameDefined(componentInput) || isScriptByPathDefined(componentInput);
+}
+export function onSuccess() {
+    if (recomputeIds) {
+        recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
+    }
+    if (!doOnSuccess)
+        return;
+    if (doOnSuccess.selected == 'none')
+        return;
+    if (doOnSuccess.selected == 'setTab') {
+        if (Array.isArray(doOnSuccess.configuration.setTab.setTab)) {
+            doOnSuccess.configuration.setTab?.setTab?.forEach((tab) => {
+                if (tab) {
+                    const { id, index } = tab;
+                    $componentControl[id].setTab?.(index);
+                }
+            });
+        }
+    }
+    else if (doOnSuccess.selected == 'gotoUrl' &&
+        doOnSuccess.configuration.gotoUrl.url &&
+        doOnSuccess.configuration.gotoUrl.url != '') {
+        if (doOnSuccess.configuration.gotoUrl.newTab) {
+            window.open(doOnSuccess.configuration.gotoUrl.url, '_blank');
+        }
+        else {
+            goto(doOnSuccess.configuration.gotoUrl.url);
+        }
+    }
+    else if (doOnSuccess.selected == 'sendToast' &&
+        doOnSuccess.configuration.sendToast.message &&
+        doOnSuccess.configuration.sendToast.message != '') {
+        sendUserToast(doOnSuccess.configuration.sendToast.message);
+    }
+}
+</script>
+
+{#if componentInput === undefined}
+	<InitializeComponent {id} />
+	<slot />
+{:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
+	<RunnableComponent
+		{refreshOnStart}
+		{extraKey}
+		bind:loading
+		bind:this={runnableComponent}
+		fields={componentInput.fields}
+		bind:result
+		runnable={componentInput.runnable}
+		transformer={componentInput.transformer}
+		{autoRefresh}
+		bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
+		{id}
+		{extraQueryParams}
+		{forceSchemaDisplay}
+		{initializing}
+		wrapperClass={runnableClass}
+		wrapperStyle={runnableStyle}
+		{render}
+		on:success={onSuccess}
+		{outputs}
+	>
+		<slot />
+	</RunnableComponent>
+{:else}
+	<NonRunnableComponent {render} bind:result {id} {componentInput}>
+		<slot />
+	</NonRunnableComponent>
+{/if}

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

@@ -0,0 +1,59 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { Output } from '../../rx';
+import RunnableComponent from './RunnableComponent.svelte';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput | undefined;
+        id: string;
+        result?: any;
+        initializing?: boolean | undefined;
+        loading?: boolean | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        autoRefresh?: boolean | undefined;
+        runnableComponent?: RunnableComponent | undefined;
+        forceSchemaDisplay?: boolean | undefined;
+        runnableClass?: string | undefined;
+        runnableStyle?: string | undefined;
+        doOnSuccess?: {
+            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast';
+            configuration: {
+                gotoUrl: {
+                    url: string | undefined;
+                    newTab: boolean | undefined;
+                };
+                setTab: {
+                    setTab: {
+                        id: string;
+                        index: number;
+                    }[] | undefined;
+                };
+                sendToast: {
+                    message: string | undefined;
+                };
+            };
+        } | undefined;
+        render: boolean;
+        recomputeIds?: string[] | undefined;
+        outputs: {
+            result: Output<any>;
+            loading: Output<boolean>;
+        };
+        extraKey?: string | undefined;
+        refreshOnStart?: boolean | undefined;
+        onSuccess?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RunnableWrapperProps = typeof __propDef.props;
+export type RunnableWrapperEvents = typeof __propDef.events;
+export type RunnableWrapperSlots = typeof __propDef.slots;
+export default class RunnableWrapper extends SvelteComponentTyped<RunnableWrapperProps, RunnableWrapperEvents, RunnableWrapperSlots> {
+    get onSuccess(): () => void;
+}
+export {};

package/dist/components/apps/components/inputs/AppCheckbox.svelte

@@ -0,0 +1,41 @@
+<script>import Toggle from '../../../Toggle.svelte';
+import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+let defaultValue = undefined;
+let labelValue = '';
+// As the checkbox is a special case and has no input
+// we need to manually set the output
+let outputs = initOutput($worldStore, id, {
+    result: false
+});
+$: defaultValue != undefined && outputs?.result.set(defaultValue);
+$: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<Toggle
+		checked={defaultValue}
+		options={{ right: labelValue }}
+		textClass={css?.text?.class ?? ''}
+		textStyle={css?.text?.style ?? ''}
+		on:change={(e) => {
+			outputs.result.set(e.detail)
+		}}
+	/>
+</AlignWrapper>

package/dist/components/apps/components/inputs/AppDateInput.svelte

@@ -0,0 +1,52 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let configuration;
+export let inputType;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+let labelValue = 'Title';
+let minValue = '';
+let maxValue = '';
+let defaultValue = undefined;
+let value = undefined;
+let outputs = initOutput($worldStore, id, {
+    result: undefined
+});
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value);
+function handleDefault(defaultValue) {
+    value = defaultValue;
+}
+$: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.minDate} bind:value={minValue} />
+<InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} {verticalAlignment}>
+	{#if inputType === 'date'}
+		<input
+			on:focus={() => ($selectedComponent = [id])}
+			on:pointerdown|stopPropagation
+			type="date"
+			bind:value
+			min={minValue}
+			max={maxValue}
+			placeholder="Type..."
+			class={twMerge(css?.input?.class ?? '')}
+			style={css?.input?.style ?? ''}
+		/>
+	{/if}
+</AlignWrapper>