windmill-components 1.85.0 → 1.87.0

package/dist/components/LightweightArgInput.svelte

@@ -0,0 +1,316 @@
+<script>import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { setInputCat as computeInputCat } from '../utils';
+import { Badge, Button } from './common';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import FieldHeader from './FieldHeader.svelte';
+import ObjectResourceInput from './ObjectResourceInput.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import autosize from 'svelte-autosize';
+import Toggle from './Toggle.svelte';
+import Range from './Range.svelte';
+import LightweightSchemaForm from './LightweightSchemaForm.svelte';
+export let label = '';
+export let value;
+export let defaultValue = undefined;
+export let description = '';
+export let format = '';
+export let contentEncoding = undefined;
+export let type = undefined;
+export let required = false;
+export let pattern = undefined;
+export let valid = required ? false : true;
+export let maxRows = 10;
+export let enum_ = undefined;
+export let itemsType = undefined;
+export let displayHeader = true;
+export let properties = undefined;
+export let extra = {};
+const dispatch = createEventDispatcher();
+$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
+$: validateInput(pattern, value);
+let error = '';
+let el = undefined;
+let rawValue = undefined;
+$: {
+    if (rawValue) {
+        try {
+            value = JSON.parse(rawValue);
+            error = '';
+        }
+        catch (err) {
+            error = err.toString();
+        }
+    }
+}
+$: {
+    error = '';
+    if (inputCat === 'object') {
+        evalValueToRaw();
+        validateInput(pattern, value);
+    }
+}
+export function evalValueToRaw() {
+    if (value) {
+        rawValue = JSON.stringify(value, null, 4);
+    }
+}
+function fileChanged(e, cb) {
+    let t = e.target;
+    if (t && 'files' in t && t.files.length > 0) {
+        let reader = new FileReader();
+        reader.onload = (e) => {
+            cb(e.target.result.split('base64,')[1]);
+        };
+        reader.readAsDataURL(t.files[0]);
+    }
+    else {
+        cb(undefined);
+    }
+}
+export function focus() {
+    el?.focus();
+    if (el) {
+        el.style.height = '5px';
+        el.style.height = el.scrollHeight + 50 + 'px';
+    }
+}
+function validateInput(pattern, v) {
+    if (required && (v == undefined || v == null || v === '')) {
+        error = 'This field is required';
+        valid = false;
+    }
+    else {
+        if (pattern && !testRegex(pattern, v)) {
+            error = `Should match ${pattern}`;
+            valid = false;
+        }
+        else {
+            error = '';
+            valid = true;
+        }
+    }
+}
+function testRegex(pattern, value) {
+    try {
+        const regex = new RegExp(pattern);
+        return regex.test(value);
+    }
+    catch (err) {
+        return false;
+    }
+}
+$: {
+    if (value == undefined || value == null) {
+        value = defaultValue;
+        if (defaultValue === undefined || defaultValue === null) {
+            if (inputCat === 'string') {
+                value = '';
+            }
+            else if (inputCat == 'enum') {
+                value = enum_?.[0];
+            }
+            else if (inputCat == 'boolean') {
+                value = false;
+            }
+        }
+    }
+}
+$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+</script>
+
+<div class="flex flex-col w-full min-w-[250px]">
+	<div>
+		{#if displayHeader}
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
+		{/if}
+
+		{#if description}
+			<div class="text-sm italic pb-1">
+				{description}
+			</div>
+		{/if}
+
+		<div class="flex space-x-1">
+			{#if inputCat == 'number'}
+				{#if extra['min'] != undefined && extra['max'] != undefined}
+					<div class="flex w-full gap-1">
+						<span>{extra['min']}</span>
+						<div class="grow">
+							<Range bind:value min={extra['min']} max={extra['max']} />
+						</div>
+						<span>{extra['max']}</span>
+						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
+					</div>
+				{:else}
+					<input
+						on:focus={(e) => {
+							dispatch('focus')
+						}}
+						type="number"
+						class={valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+						placeholder={defaultValue ?? ''}
+						bind:value
+						min={extra['min']}
+						max={extra['max']}
+					/>
+				{/if}
+			{:else if inputCat == 'boolean'}
+				<Toggle
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+					}}
+					class={valid
+						? ''
+						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+					bind:checked={value}
+				/>
+				{#if type == 'boolean' && value == undefined}
+					<span>&nbsp; Not set</span>
+				{/if}
+			{:else if inputCat == 'list'}
+				<div>
+					<div>
+						{#each value ?? [] as v, i}
+							<div class="flex flex-row max-w-md mt-1">
+								{#if itemsType?.type == 'number'}
+									<input type="number" bind:value={v} />
+								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+									<input
+										type="file"
+										class="my-6"
+										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+										multiple={false}
+									/>
+								{:else}
+									<input type="text" bind:value={v} />
+								{/if}
+								<Button
+									variant="border"
+									color="red"
+									size="sm"
+									btnClasses="mx-6"
+									on:click={() => {
+										value = value.filter((el) => el != v)
+										if (value.length == 0) {
+											value = undefined
+										}
+									}}
+								>
+									<Icon data={faMinus} />
+								</Button>
+							</div>
+						{/each}
+					</div>
+					<div class="flex">
+						<Button
+							variant="border"
+							color="blue"
+							size="sm"
+							btnClasses="mt-1"
+							on:click={() => {
+								if (value == undefined || !Array.isArray(value)) {
+									value = []
+								}
+								value = value.concat('')
+							}}
+						>
+							<Icon data={faPlus} class="mr-2" />
+							Add item
+						</Button>
+					</div>
+					<span class="ml-2">
+						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
+					</span>
+				</div>
+			{:else if inputCat == 'resource-object'}
+				<ObjectResourceInput {format} bind:value />
+			{:else if inputCat == 'object'}
+				{#if properties && Object.keys(properties).length > 0}
+					<div class="p-4 pl-8 border rounded w-full">
+						<LightweightSchemaForm
+							schema={{ properties, $schema: '', required: [], type: 'object' }}
+							bind:args={value}
+						/>
+					</div>
+				{:else}
+					<textarea
+						bind:this={el}
+						on:focus={(e) => {
+							dispatch('focus')
+						}}
+						use:autosize
+						style="max-height: {maxHeight}"
+						class="col-span-10 {valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
+						bind:value={rawValue}
+					/>
+				{/if}
+			{:else if inputCat == 'enum'}
+				<select
+					on:focus={(e) => {
+						dispatch('focus')
+					}}
+					class="px-6"
+					bind:value
+				>
+					{#each enum_ ?? [] as e}
+						<option>{e}</option>
+					{/each}
+				</select>
+			{:else if inputCat == 'date'}
+				<input class="inline-block" type="datetime-local" bind:value />
+			{:else if inputCat == 'base64'}
+				<input
+					type="file"
+					class="my-6"
+					on:change={(x) => fileChanged(x, (val) => (value = val))}
+					multiple={false}
+				/>
+			{:else if inputCat == 'resource-string'}
+				<ResourcePicker
+					bind:value
+					resourceType={format.split('-').length > 1
+						? format.substring('resource-'.length)
+						: undefined}
+				/>
+			{:else if inputCat == 'string'}
+				<div class="flex flex-col w-full">
+					<div class="flex flex-row w-full items- justify-between">
+						<textarea
+							rows="1"
+							bind:this={el}
+							on:focus={(e) => {
+								dispatch('focus')
+							}}
+							use:autosize
+							type="text"
+							class="col-span-10 {valid
+								? ''
+								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+							placeholder={defaultValue ?? ''}
+							bind:value
+							on:pointerdown|stopPropagation={(e) => {
+								dispatch('inputClicked', e)
+							}}
+						/>
+					</div>
+				</div>
+			{/if}
+			<slot name="actions" />
+		</div>
+		{#if error && error != ''}
+			<div class="text-right text-xs text-red-600">
+				{#if error === ''}
+					&nbsp;
+				{:else}
+					{error}
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/components/LightweightArgInput.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SchemaProperty } from '../common';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        value: any;
+        defaultValue?: any;
+        description?: string | undefined;
+        format?: string | undefined;
+        contentEncoding?: 'base64' | 'binary' | undefined;
+        type?: string | undefined;
+        required?: boolean | undefined;
+        pattern?: undefined | string;
+        valid?: boolean | undefined;
+        maxRows?: number | undefined;
+        enum_?: string[] | undefined;
+        itemsType?: {
+            type?: "string" | "number" | "object" | "bytes" | undefined;
+            contentEncoding?: "base64" | undefined;
+        } | undefined;
+        displayHeader?: boolean | undefined;
+        properties?: {
+            [name: string]: SchemaProperty;
+        } | undefined;
+        extra?: Record<string, any> | undefined;
+        evalValueToRaw?: (() => void) | undefined;
+        focus?: (() => void) | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+        inputClicked: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        actions: {};
+    };
+};
+export type LightweightArgInputProps = typeof __propDef.props;
+export type LightweightArgInputEvents = typeof __propDef.events;
+export type LightweightArgInputSlots = typeof __propDef.slots;
+export default class LightweightArgInput extends SvelteComponentTyped<LightweightArgInputProps, LightweightArgInputEvents, LightweightArgInputSlots> {
+    get evalValueToRaw(): () => void;
+    get focus(): () => void;
+}
+export {};

package/dist/components/LightweightSchemaForm.svelte

@@ -0,0 +1,32 @@
+<script>import LightweightArgInput from './LightweightArgInput.svelte';
+export let schema;
+export let args = undefined;
+$: if (args === undefined) {
+    args = {};
+}
+</script>
+
+<div class="w-full">
+	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
+		<div>
+			{#if typeof args == 'object' && schema?.properties[argName] && args}
+				<LightweightArgInput
+					label={argName}
+					description={schema.properties[argName].description}
+					bind:value={args[argName]}
+					type={schema.properties[argName].type}
+					required={schema.required.includes(argName)}
+					pattern={schema.properties[argName].pattern}
+					defaultValue={schema.properties[argName].default}
+					enum_={schema.properties[argName].enum}
+					format={schema.properties[argName].format}
+					contentEncoding={schema.properties[argName].contentEncoding}
+					properties={schema.properties[argName].properties}
+					itemsType={schema.properties[argName].items}
+					extra={schema.properties[argName]}
+					on:inputClicked
+				/>
+			{/if}
+		</div>
+	{/each}
+</div>

package/dist/components/LightweightSchemaForm.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+    };
+    events: {
+        inputClicked: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LightweightSchemaFormProps = typeof __propDef.props;
+export type LightweightSchemaFormEvents = typeof __propDef.events;
+export type LightweightSchemaFormSlots = typeof __propDef.slots;
+export default class LightweightSchemaForm extends SvelteComponentTyped<LightweightSchemaFormProps, LightweightSchemaFormEvents, LightweightSchemaFormSlots> {
+}
+export {};

package/dist/components/LogViewer.svelte

@@ -0,0 +1,59 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { Drawer, DrawerContent } from './common';
+export let content;
+export let isLoading;
+export let duration = undefined;
+export let mem = undefined;
+export let wrapperClass = '';
+let scroll = true;
+let div = null;
+$: if (content != undefined) {
+    isLoading = false;
+}
+$: content && scrollToBottom();
+export function scrollToBottom() {
+    scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
+}
+let logViewer;
+</script>
+
+<Drawer bind:this={logViewer} size="900px">
+	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
+		<div>
+			<pre class="bg-gray-50 text-xs w-full p-2"
+				>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+			>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<div class="relative w-full h-full {wrapperClass}">
+	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
+		<div
+			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
+		>
+			<div class="flex gap-1">
+				<button on:click={logViewer.openDrawer}>Expand</button>
+				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
+					Auto scroll
+					<input class="windmillapp" type="checkbox" bind:checked={scroll} />
+				</div>
+			</div>
+		</div>
+		{#if isLoading}
+			<Loader2 class="animate-spin absolute top-2 left-2" />
+		{:else if duration}
+			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
+		{/if}
+		{#if mem}
+			<span class="absolute text-xs text-gray-500 top-2 left-36"
+				>mem peak: {(mem / 1024).toPrecision(4)}MB</span
+			>
+		{/if}
+		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
+			>{#if content}<span>{content}</span>{:else if !isLoading}<span class="text-gray-600"
+					>No logs are available yet</span
+				>{/if}</pre
+		>
+	</div>
+</div>

package/dist/components/LogViewer.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string | undefined;
+        isLoading: boolean;
+        duration?: number | undefined;
+        mem?: number | undefined;
+        wrapperClass?: string | undefined;
+        scrollToBottom?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogViewerProps = typeof __propDef.props;
+export type LogViewerEvents = typeof __propDef.events;
+export type LogViewerSlots = typeof __propDef.slots;
+export default class LogViewer extends SvelteComponentTyped<LogViewerProps, LogViewerEvents, LogViewerSlots> {
+    get scrollToBottom(): () => void;
+}
+export {};

package/dist/components/ModulePreview.svelte

@@ -0,0 +1,113 @@
+<script>import { ScriptService } from '../gen';
+import { workspaceStore } from '../stores';
+import { getModifierKey, getScriptByPath } from '../utils';
+import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import Button from './common/button/Button.svelte';
+import DisplayResult from './DisplayResult.svelte';
+import LogViewer from './LogViewer.svelte';
+import RunForm from './RunForm.svelte';
+import TestJobLoader from './TestJobLoader.svelte';
+export let mod;
+export let schema;
+const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
+// Test
+let testJobLoader;
+let testIsLoading = false;
+let testJob = undefined;
+let stepArgs = $testStepStore[mod.id] ??
+    Object.entries(mod.value['input_transforms'] ?? {}).reduce((acc, [k, v]) => {
+        let t = v;
+        if (t.type == 'static') {
+            acc[k] = t.value;
+            return acc;
+        }
+        return acc;
+    }, {});
+$: $testStepStore[mod.id] = stepArgs;
+export function runTestWithStepArgs() {
+    runTest(stepArgs);
+}
+export async function runTest(args) {
+    const val = mod.value;
+    // let jobId: string | undefined = undefined
+    if (val.type == 'rawscript') {
+        await testJobLoader?.runPreview(val.path, val.content, val.language, args);
+    }
+    else if (val.type == 'script') {
+        const script = val.hash
+            ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
+            : await getScriptByPath(val.path);
+        await testJobLoader?.runPreview(val.path, script.content, script.language, args);
+    }
+    else {
+        throw Error('not testable module type');
+    }
+}
+function jobDone() {
+    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
+        if ($flowStateStore[mod.id]?.previewResult) {
+            $flowStateStore[mod.id].previewResult = testJob.result;
+            $flowStateStore = $flowStateStore;
+        }
+    }
+}
+</script>
+
+<TestJobLoader
+	on:done={() => jobDone()}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+/>
+<Splitpanes>
+	<Pane size={50} minSize={20} class="p-4">
+		{#if $flowStore.value.same_worker}
+			<div class="mb-1 bg-yellow-100 text-yellow-700 p-1 text-xs"
+				>The `./shared` folder is not passed across individual "Test this step"</div
+			>
+		{/if}
+
+		<RunForm
+			noVariablePicker
+			loading={testIsLoading}
+			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
+			runAction={(_, args) => runTest(args)}
+			schedulable={false}
+			buttonText={`Test (${getModifierKey()}+Enter)`}
+			detailed={false}
+			topButton
+			bind:args={stepArgs}
+			isFlow={false}
+		/>
+		{#if testIsLoading}
+			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">
+				<Loader2 class="animate-spin mr-1" />
+				Cancel
+			</Button>
+		{/if}
+	</Pane>
+	<Pane size={50} minSize={20}>
+		<Splitpanes horizontal>
+			<Pane size={50} minSize={10}>
+				<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+			</Pane>
+			<Pane size={50} minSize={10} class="text-sm text-gray-600">
+				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
+					<pre class="overflow-x-auto break-words relative h-full px-2">
+						<DisplayResult result={testJob.result} />
+					</pre>
+				{:else}
+					<div class="p-2">
+						{#if testIsLoading}
+							<Loader2 class="animate-spin" />
+						{:else}
+							Test to see the result here
+						{/if}
+					</div>
+				{/if}
+			</Pane>
+		</Splitpanes>
+	</Pane>
+</Splitpanes>