windmill-components 1.60.2 → 1.60.3

package/components/AppConnect.svelte

@@ -30,6 +30,10 @@ const apiTokenApps = {
             'Create an API key',
             'Copy your key'
         ]
+    },
+    supabase: {
+        img: '/supabase_connect.png',
+        instructions: ['Go to the API Settings of your app to find the project URL and key']
     }
 };
 </script>

package/components/ArgInput.svelte

@@ -132,7 +132,6 @@ $: {
         }
     }
 }
-export let inputCat = 'string';
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 

package/components/ArgInput.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import { type InputCat } from '../utils';
 import type { SchemaProperty } from '../common';
 import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
@@ -39,7 +38,6 @@ declare const __propDef: {
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;
-        inputCat?: InputCat | undefined;
     };
     events: {
         focus: CustomEvent<any>;

package/components/DisplayResult.svelte

@@ -44,7 +44,7 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'file') {
                 return 'file';
             }
-            else if (keys.length == 1 && keys[0] == 'error' && typeof result['error'] == 'string') {
+            else if (keys.length == 1 && keys[0] == 'error') {
                 return 'error';
             }
             else if (keys.length == 3 &&
@@ -81,7 +81,7 @@ let payload = '';
 						</div>
 						{#if Array.isArray(result[col])}
 							{#each result[col] as item}
-								<div class="px-12 text-left  whitespace-nowrap">
+								<div class="px-12 text-left text-xs whitespace-nowrap">
 									{typeof item === 'string' ? item : JSON.stringify(item)}
 								</div>
 							{/each}
@@ -90,14 +90,14 @@ let payload = '';
 				{/each}
 			</div>
 		{:else if !forceJson && resultKind == 'table-row'}<div
-				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+				class="grid grid-flow-col-dense border border-gray-200 "
 			>
 				<TableCustom>
 					<tbody slot="body">
 						{#each asListOfList(result) as row}
 							<tr>
 								{#each row as v}
-									<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
+									<td class="!text-xs">{truncate(JSON.stringify(v), 200) ?? ''}</td>
 								{/each}
 							</tr>
 						{/each}
@@ -126,8 +126,11 @@ let payload = '';
 					>Download</a
 				>
 			</div>
-		{:else if !forceJson && resultKind == 'error'}<div
-				><pre class="text-sm text-red-500 whitespace-pre-wrap">{result.error}</pre>
+		{:else if !forceJson && resultKind == 'error'}<div>
+				<span class="text-red-500 font-semibold text-sm"
+					>{result.error.name}: {result.error.message}</span
+				>
+				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
 			</div>
 		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-1 mx-4">
 				<Button

package/components/FlowMetadata.svelte

@@ -3,6 +3,17 @@ import Icon from 'svelte-awesome';
 import { displayDaysAgo } from '../utils';
 import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import ScheduleEditor from './ScheduleEditor.svelte';
+import { onDestroy, onMount } from 'svelte';
+let time = Date.now();
+let interval;
+onMount(() => {
+    interval = setInterval(() => {
+        time = Date.now();
+    }, 1000);
+});
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
 export let job;
 const SMALL_ICON_SCALE = 0.7;
 let scheduleEditor;
@@ -13,14 +24,19 @@ let scheduleEditor;
 <div class="rounded-md p-3 bg-gray-50 shadow-sm sm:text-sm md:text-base" style="min-height: 150px;">
 	<JobStatus {job} />
 	<div>
-		<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
-			Created {displayDaysAgo(job.created_at ?? '')}</span
+		<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+			class="mx-2 text-2xs text-gray-600"
+		>
+			{#key time}
+				Received job {displayDaysAgo(job.created_at ?? '')}
+			{/key}</span
 		>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
 		<div>
 			<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
-				Started {displayDaysAgo(job.started_at ?? '')}</span
+				{#key time}
+					Started {displayDaysAgo(job.started_at ?? '')}{/key}</span
 			>
 		</div>
 	{/if}

package/components/FlowPreviewContent.svelte

@@ -11,6 +11,7 @@ import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
 import { flowStateStore } from './flows/flowState';
 import CapturePayload from './flows/content/CapturePayload.svelte';
+import { Loader2 } from 'lucide-svelte';
 let capturePayload;
 export let previewMode;
 export let open;
@@ -111,8 +112,9 @@ $: if (job?.type === 'CompletedJob') {
 					jobId = undefined
 				}}
 				size="md"
-				btnClasses="w-full"
+				btnClasses="w-full max-w-lg"
 			>
+				<Loader2 class="animate-spin mr-2" />
 				Cancel
 			</Button>
 		{:else}
@@ -121,7 +123,7 @@ $: if (job?.type === 'CompletedJob') {
 				startIcon={{ icon: isRunning ? faRefresh : faPlay }}
 				color="blue"
 				size="sm"
-				btnClasses="w-full"
+				btnClasses="w-full max-w-lg"
 				disabled={!isValid}
 				on:click={() => runPreview($previewArgs)}
 			>
@@ -140,13 +142,17 @@ $: if (job?.type === 'CompletedJob') {
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
 	<div class="overflow-y-auto grow flex-col flex divide-y divide-gray-600 ">
-		<SchemaForm
-			compact
-			class="py-4"
-			schema={$flowStore.schema}
-			bind:isValid
-			bind:args={$previewArgs}
-		/>
+		<div class="max-h-1/2 overflow-auto">
+			<SchemaForm
+				noVariablePicker
+				compact
+				class="py-4 max-w-3xl"
+				schema={$flowStore.schema}
+				bind:isValid
+				bind:args={$previewArgs}
+			/>
+		</div>
+
 		<div class="h-full pt-4 grow">
 			{#if jobId}
 				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />

package/components/InputTransformForm.svelte

@@ -22,7 +22,7 @@ export let noDynamicToggle = false;
 let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
-let inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
+$: inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';
@@ -246,7 +246,6 @@ $: schema.properties[argName].default &&
 				bind:itemsType={schema.properties[argName].items}
 				properties={schema.properties[argName].properties}
 				displayHeader={false}
-				bind:inputCat
 				{variableEditor}
 				{itemPicker}
 				bind:pickForField

package/components/JobArgs.svelte

@@ -18,7 +18,7 @@ export let args;
 				</tr>
 			{/each}
 		{:else if args}
-			<tr>No arguments</tr>
+			<tr><div class="text-gray-600 pt-2 pl-1 text-sm">No arguments</div></tr>
 		{:else}
 			<tr>
 				<td>

package/components/ModulePreview.svelte

@@ -60,11 +60,12 @@ function jobDone() {
 		{/if}
 
 		<RunForm
+			noVariablePicker
 			loading={testIsLoading}
 			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
 			runAction={(_, args) => runTest(args)}
 			schedulable={false}
-			buttonText="Test just this step (Ctrl+Enter)"
+			buttonText="Test (Ctrl+Enter)"
 			detailed={false}
 			topButton
 			bind:args={stepArgs}

package/components/Popover.model.d.ts

@@ -0,0 +1,4 @@
+declare const SIDE: readonly ["auto", "top", "bottom", "left", "right"];
+declare const ALIGN: readonly ["start", "end"];
+export type PopoverPlacement = `${typeof SIDE[number]}` | `${typeof SIDE[number]}-${typeof ALIGN[number]}`;
+export {};

package/components/Popover.model.js

@@ -0,0 +1,3 @@
+const SIDE = ['auto', 'top', 'bottom', 'left', 'right'];
+const ALIGN = ['start', 'end'];
+export {};

package/components/Popover.svelte

@@ -1,6 +1,4 @@
 <script>import { createPopperActions } from 'svelte-popperjs';
-const SIDE = ['auto', 'top', 'bottom', 'left', 'right'];
-const ALIGN = ['start', 'end'];
 export let placement = 'auto';
 export let notClickable = false;
 export let popupClass = '';

package/components/Popover.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PopoverPlacement } from './Popover.model';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: "left" | "right" | "auto" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "auto-start" | "auto-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+        placement?: PopoverPlacement | undefined;
         notClickable?: boolean | undefined;
         popupClass?: string | undefined;
         disapperTimoout?: number | undefined;

package/components/ResourceEditor.svelte

@@ -20,6 +20,7 @@ let resourceSchema;
 let args = {};
 let can_write = true;
 let loadingSchema = false;
+let linkedVars = [];
 let drawer;
 let rawCode = undefined;
 const dispatch = createEventDispatcher();
@@ -38,6 +39,9 @@ export async function initEdit(p) {
     can_write =
         resourceToEdit.workspace_id == $workspaceStore &&
             canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore);
+    linkedVars = Object.entries(args)
+        .filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
+        .map(([k, _]) => k);
 }
 async function editResource() {
     if (resourceToEdit) {
@@ -47,7 +51,7 @@ async function editResource() {
             requestBody: { path, value: args, description }
         });
         sendUserToast(`Updated resource at ${path}`);
-        dispatch('refresh');
+        dispatch('refresh', path);
         drawer.closeDrawer?.();
     }
     else {
@@ -88,6 +92,12 @@ function parseJson() {
         jsonError = e.message;
     }
 }
+$: linkedVars.length > 0 && path && updateArgsFromLinkedVars();
+function updateArgsFromLinkedVars() {
+    linkedVars.forEach((k) => {
+        args[k] = `$var:${path}`;
+    });
+}
 </script>
 
 <Drawer bind:this={drawer} size="800px">

package/components/ResourcePicker.svelte

@@ -41,7 +41,16 @@ let resourceEditor;
 	bind:this={appConnect}
 />
 
-<ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
+<ResourceEditor
+	bind:this={resourceEditor}
+	on:refresh={async (e) => {
+		await loadResources(resourceType)
+		console.log(e)
+		if (e.detail) {
+			value = e.detail
+		}
+	}}
+/>
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select

package/components/RunForm.svelte

@@ -16,6 +16,7 @@ export let detailed = true;
 export let autofocus = false;
 export let topButton = false;
 export let loading = false;
+export let noVariablePicker = false;
 export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
 export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
@@ -84,52 +85,55 @@ let invisible_to_owner;
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<SchemaForm {autofocus} schema={runnable.schema} bind:isValid bind:args />
+			<SchemaForm {noVariablePicker} {autofocus} schema={runnable.schema} bind:isValid bind:args />
 		{/if}
 	{:else}
 		<div class="text-xs text-gray-600">No schema</div>
 	{/if}
-	{#if viewOptions}
-		<div transition:slide class="mt-6">
-			<h2>Run later</h2>
-			<div class="border rounded-md p-3 pt-4">
-				<div class="flex flex-row items-end">
-					<div class="w-max md:w-2/3 mt-2 mb-1">
-						<label for="run-time" />
-						<input
-							class="inline-block"
-							type="datetime-local"
-							id="run-time"
-							name="run-scheduled-time"
-							bind:value={scheduledForStr}
-							min={getToday().toISOString().slice(0, 16)}
-						/>
-					</div>
+	{#if schedulable}
+		<div class="flex gap-2 items-start flex-wrap justify-between mt-2 md:mt-6 mb-6">
+			<div class="flex flex-col">
+				<div>
 					<Button
-						variant="border"
-						color="blue"
+						color="light"
 						size="sm"
-						btnClasses="mx-2 mb-1"
-						on:click={() => {
-							scheduledForStr = undefined
-						}}
+						endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
+						on:click={() => (viewOptions = !viewOptions)}
 					>
-						Clear
+						Schedule to run later
 					</Button>
 				</div>
+				{#if viewOptions}
+					<div transition:slide class="mt-6">
+						<div class="border rounded-md p-3 pt-4">
+							<div class="flex flex-row items-end">
+								<div class="w-max md:w-2/3 mt-2 mb-1">
+									<label for="run-time" />
+									<input
+										class="inline-block"
+										type="datetime-local"
+										id="run-time"
+										name="run-scheduled-time"
+										bind:value={scheduledForStr}
+										min={getToday().toISOString().slice(0, 16)}
+									/>
+								</div>
+								<Button
+									variant="border"
+									color="blue"
+									size="sm"
+									btnClasses="mx-2 mb-1"
+									on:click={() => {
+										scheduledForStr = undefined
+									}}
+								>
+									Clear
+								</Button>
+							</div>
+						</div>
+					</div>
+				{/if}
 			</div>
-		</div>
-	{/if}
-	{#if schedulable}
-		<div class="flex gap-2 items-center flex-wrap justify-between mt-2 md:mt-6 mb-6">
-			<Button
-				color="light"
-				size="sm"
-				endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
-				on:click={() => (viewOptions = !viewOptions)}
-			>
-				Schedule to run later
-			</Button>
 			{#if runnable?.path?.startsWith(`u/${$userStore?.username}`) != true && (runnable?.path?.split('/')?.length ?? 0) > 2}
 				<div class="flex items-center gap-1">
 					<Toggle
@@ -150,7 +154,7 @@ let invisible_to_owner;
 					disabled={!isValid}
 					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
 				>
-					{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+					{scheduledForStr ? 'Schedule to run later' : buttonText}
 				</Button>
 			</div>
 		</div>

package/components/RunForm.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         autofocus?: boolean | undefined;
         topButton?: boolean | undefined;
         loading?: boolean | undefined;
+        noVariablePicker?: boolean | undefined;
         args?: Record<string, any> | undefined;
         run?: (() => void) | undefined;
         isValid?: boolean | undefined;

package/components/ScriptBuilder.svelte

@@ -4,7 +4,7 @@ import { page } from '$app/stores';
 import { inferArgs } from '../infer';
 import { initialCode, isInitialCode } from '../script_helpers';
 import { userStore, workspaceStore } from '../stores';
-import { encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import Path from './Path.svelte';
 import RadioButton from './RadioButton.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
@@ -43,6 +43,7 @@ async function editScript() {
     try {
         $dirtyStore = false;
         localStorage.removeItem(script.path);
+        script.schema = script.schema ?? emptySchema();
         if (!script.schema) {
             await inferArgs(script.language, script.content, script.schema);
         }
@@ -69,6 +70,7 @@ async function editScript() {
 }
 async function changeStep(step) {
     if (step > 1) {
+        script.schema = script.schema ?? emptySchema();
         await inferArgs(script.language, script.content, script.schema);
     }
     goto(`?step=${step}`);

package/components/ScriptEditor.svelte

@@ -56,6 +56,7 @@ async function loadPastTests() {
     });
 }
 async function inferSchema(code) {
+    schema = schema ?? emptySchema();
     let isDefault = [];
     Object.entries(args).forEach(([k, v]) => {
         if (schema.properties[k].default == v) {

package/components/TemplateEditor.svelte

@@ -338,6 +338,9 @@ export let extraLib = '';
 export let autoHeight = true;
 export let fixedOverflowWidgets = true;
 export let fontSize = 16;
+if (typeof code != 'string') {
+    code = '';
+}
 const lang = 'template';
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.ts`;
@@ -511,4 +514,14 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={divEl} class="{$$props.class} rounded-lg mx-0.5" bind:clientWidth={width} />
+<div
+	bind:this={divEl}
+	style="height: 18px;"
+	class="{$$props.class} template rounded-lg min-h-4 mx-0.5"
+	bind:clientWidth={width}
+/>
+
+<style>
+	:global(.template .mtk20) {
+		color: black !important;
+	}</style>

package/components/TestJobLoader.svelte

@@ -163,6 +163,6 @@ async function syncer(id) {
     setTimeout(() => syncer(id), nextIteration);
 }
 onDestroy(async () => {
-    await clearCurrentJob();
+    currentId = undefined;
 });
 </script>

package/components/Tooltip.svelte

@@ -2,13 +2,18 @@
 import Icon from 'svelte-awesome';
 import Popover from './Popover.svelte';
 export let light = false;
+export let scale = 0.8;
+export let wrapperClass = '';
+export let placement = undefined;
 </script>
 
-<Popover notClickable>
+<Popover notClickable {placement} class={wrapperClass}>
 	<Icon
-		class="{light ? 'text-gray-300' : ' text-gray-500'} font-thin inline-block align-middle w-4"
+		class="{light
+			? 'text-gray-300'
+			: ' text-gray-500'} font-thin inline-block align-middle w-4 {$$props.class}"
 		data={faInfoCircle}
-		scale={0.8}
+		{scale}
 	/>
 	<span slot="text"> <slot /> </span>
 </Popover>

package/components/Tooltip.svelte.d.ts

@@ -1,7 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PopoverPlacement } from './Popover.model';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         light?: boolean | undefined;
+        scale?: number | undefined;
+        wrapperClass?: string | undefined;
+        placement?: PopoverPlacement | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -18,6 +18,7 @@ let labelValue;
 let color;
 let size;
 let runnableComponent;
+let disabled = undefined;
 let isLoading = false;
 let ownClick = false;
 $: outputs = $worldStore?.outputsById[id];
@@ -33,11 +34,22 @@ $: outputs?.loading.subscribe({
     }
 });
 $: loading = isLoading && ownClick;
+let errors = {};
+$: errorsMessage = Object.values(errors)
+    .filter((x) => x != '')
+    .join('\n');
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue
+	row={extraQueryParams['row']}
+	{id}
+	input={configuration.disabled}
+	bind:value={disabled}
+	bind:error={errors.disabled}
+/>
 
 <RunnableWrapper
 	flexWrap
@@ -48,7 +60,11 @@ $: loading = isLoading && ownClick;
 	autoRefresh={false}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		{#if errorsMessage}
+			<div class="text-red-500 text-xs">{errorsMessage}</div>
+		{/if}
 		<Button
+			{disabled}
 			on:pointerdown={(e) => {
 				e?.stopPropagation()
 				window.dispatchEvent(new Event('pointerup'))

package/components/apps/components/dataDisplay/AppHtml.svelte

@@ -7,17 +7,29 @@ export let verticalAlignment = undefined;
 export let configuration;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
+let h = undefined;
+let w = undefined;
 </script>
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		<div
-			on:pointerdown={(e) => {
-				e?.preventDefault()
-			}}
-			class="h-full relative w-full overflow-hidden"
-		>
-			{@html result ?? 'No html'}
-		</div>
-	</AlignWrapper>
-</RunnableWrapper>
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class="h-full w-full"
+	bind:clientHeight={h}
+	bind:clientWidth={w}
+>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+			{#key result}
+				<iframe
+					frameborder="0"
+					style="height: {h}px; width: {w}px"
+					class="p-0"
+					title="sandbox"
+					srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
+				/>
+			{/key}
+		</AlignWrapper>
+	</RunnableWrapper>
+</div>

package/components/apps/components/dataDisplay/VegaLiteHtml.svelte

@@ -0,0 +1,28 @@
+<script>import { onMount } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let horizontalAlignment = 'left';
+export let verticalAlignment = undefined;
+export let configuration;
+export const staticOutputs = ['result', 'loading'];
+let result = undefined;
+let divEl = null;
+let vegaEmbed;
+onMount(async () => {
+    if (divEl) {
+        await import('https://cdn.jsdelivr.net/npm/vega@5.22.1');
+        await import('https://cdn.jsdelivr.net/npm/vega-lite@5.6.0');
+        vegaEmbed = await import('https://cdn.jsdelivr.net/npm/vega-embed@6.21.0');
+        console.log(vegaEmbed);
+        vegaEmbed(divEl, result);
+    }
+});
+</script>
+
+<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+		<div bind:this={divEl} />
+	</AlignWrapper>
+</RunnableWrapper>