windmill-components 1.623.2 → 1.642.0

package/package/components/SaveButton.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">import { Button } from './common';
+import {} from './common/button/model';
+import { Save, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte';
+import { fly } from 'svelte/transition';
+let { onSave, disabled = false, label = 'Save settings', size = undefined, unifiedSize = undefined, variant = 'accent' } = $props();
+let isSaving = $state(false);
+let saveStatus = $state(null);
+let statusTimeout = null;
+function clearStatusTimeout() {
+    if (statusTimeout !== null) {
+        clearTimeout(statusTimeout);
+        statusTimeout = null;
+    }
+}
+function handleClick() {
+    if (isSaving)
+        return;
+    isSaving = true;
+    saveStatus = null;
+    clearStatusTimeout();
+    Promise.resolve(onSave())
+        .then(() => {
+        saveStatus = 'success';
+        statusTimeout = setTimeout(() => {
+            saveStatus = null;
+            statusTimeout = null;
+        }, 1500);
+    })
+        .catch((error) => {
+        console.error('Save failed:', error);
+        saveStatus = 'error';
+        statusTimeout = setTimeout(() => {
+            saveStatus = null;
+            statusTimeout = null;
+        }, 3000);
+    })
+        .finally(() => {
+        isSaving = false;
+    });
+}
+$effect(() => {
+    return () => {
+        clearStatusTimeout();
+    };
+});
+</script>
+
+<div class="relative overflow-hidden rounded-md">
+	<Button
+		{variant}
+		{size}
+		{unifiedSize}
+		startIcon={{
+			icon: isSaving ? Loader2 : Save,
+			classes: isSaving ? 'animate-spin' : ''
+		}}
+		disabled={disabled || isSaving}
+		onClick={handleClick}
+	>
+		{isSaving ? 'Saving...' : label}
+	</Button>
+
+	{#if saveStatus === 'success'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-green-200 dark:bg-green-800 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<CheckCircle2 class="w-5 h-5 text-green-700 dark:text-green-300" />
+		</div>
+	{:else if saveStatus === 'error'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<AlertCircle class="w-5 h-5 text-white" />
+		</div>
+	{/if}
+</div>

package/package/components/SaveButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonType } from './common/button/model';
+type $$ComponentProps = {
+    onSave: () => void | Promise<void>;
+    disabled?: boolean;
+    label?: string;
+    size?: ButtonType.Size | undefined;
+    unifiedSize?: ButtonType.UnifiedSize | undefined;
+    variant?: ButtonType.Variant;
+};
+declare const SaveButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SaveButton = ReturnType<typeof SaveButton>;
+export default SaveButton;

package/package/components/SaveInputsButton.svelte

@@ -43,7 +43,7 @@ async function saveInput(args) {
 	loading={savingInputs}
 	startIcon={{ icon: Save }}
 	variant={small ? 'subtle' : 'default'}
-	unifiedSize="md"
+	unifiedSize="sm"
 >
 	<span>{small ? 'Save inputs' : 'Save current input'}</span>
 	{#if showTooltip}

package/package/components/SavedInputsV2.svelte

@@ -121,9 +121,7 @@ let filteredSchema = $derived({
 							{/snippet}
 						</Popover>
 						<Button
-							size="xs2"
-							color="light"
-							btnClasses="!text-primary"
+							unifiedSize="sm"
 							endIcon={{ icon: ExternalLink }}
 							on:click={() => {
 								window.open(`/runs/${runnableId}`, '_blank')

package/package/components/SchemaFormWithArgPicker.svelte

@@ -6,15 +6,10 @@ import { History, Save } from 'lucide-svelte';
 import CaptureIcon from './triggers/CaptureIcon.svelte';
 import CaptureButton from './triggers/CaptureButton.svelte';
 import SavedInputsPicker from './SavedInputsPicker.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import CaptureTable from './triggers/CaptureTable.svelte';
 import RefreshButton from './common/button/RefreshButton.svelte';
-export let runnableId = '';
-export let stablePathForCaptures = '';
-export let runnableType;
-export let previewArgs;
-export let isValid = true;
-export let jsonView = false;
+let { runnableId = '', stablePathForCaptures = '', runnableType, previewArgs, isValid = true, jsonView = false, children } = $props();
 const dispatch = createEventDispatcher();
 export function refreshHistory() {
     historicInputs?.refresh();
@@ -73,15 +68,20 @@ const getDropdownItems = () => {
         }
     ];
 };
-let rightHeight = 0;
-let selectedTab = undefined;
-let dropdownItems;
-let rightPanelOpen = false;
-let savedInputsPicker = undefined;
-let captureTable = undefined;
-let historicInputs = undefined;
-$: (selectedTab, (dropdownItems = getDropdownItems()));
-let inputPanelSize = 70;
+let rightHeight = $state(0);
+let selectedTab = $state(undefined);
+let dropdownItems = $state();
+let rightPanelOpen = $state(false);
+let savedInputsPicker = $state(undefined);
+let captureTable = $state(undefined);
+let historicInputs = $state(undefined);
+$effect(() => {
+    selectedTab;
+    untrack(() => {
+        dropdownItems = getDropdownItems();
+    });
+});
+let inputPanelSize = $state(70);
 </script>
 
 <div class="h-fit">
@@ -93,7 +93,7 @@ let inputPanelSize = 70;
 	<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>
 		<Pane bind:size={inputPanelSize} class="!overflow-visible" minSize={30}>
 			<div class="relative w-full h-fit pr-12 pb-4" bind:clientHeight={rightHeight}>
-				<slot />
+				{@render children?.()}
 			</div>
 		</Pane>
 
@@ -102,14 +102,16 @@ let inputPanelSize = 70;
 				<div style="height: {rightHeight}px" class="border-t border-r pb-2">
 					{#if selectedTab === 'history'}
 						<FlowInputEditor title="History">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<RefreshButton
-										loading={historicInputs?.loading() ?? false}
-										onClick={() => historicInputs?.refresh()}
-									/>
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<RefreshButton
+											loading={historicInputs?.loading() ?? false}
+											onClick={() => historicInputs?.refresh()}
+										/>
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<HistoricInputs
 								bind:this={historicInputs}
 								{runnableId}
@@ -135,11 +137,13 @@ let inputPanelSize = 70;
 						</FlowInputEditor>
 					{:else if selectedTab === 'captures'}
 						<FlowInputEditor title="Trigger captures">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<CaptureButton on:openTriggers small={true} />
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<CaptureButton on:openTriggers small={true} />
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<div class="h-full">
 								<CaptureTable
 									path={stablePathForCaptures}

package/package/components/SchemaFormWithArgPicker.svelte.d.ts

@@ -1,3 +1,12 @@
+interface Props {
+    runnableId?: string;
+    stablePathForCaptures?: string;
+    runnableType: any;
+    previewArgs: any;
+    isValid?: boolean;
+    jsonView?: boolean;
+    children?: import('svelte').Snippet;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,32 +20,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SchemaFormWithArgPicker: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    runnableId?: string;
-    stablePathForCaptures?: string;
-    runnableType: any;
-    previewArgs: any;
-    isValid?: boolean;
-    jsonView?: boolean;
-    refreshHistory?: () => void;
-    resetSelected?: () => void;
-}, {
-    default: {};
-}>, {
+declare const SchemaFormWithArgPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     openTriggers: CustomEvent<any>;
     select: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+}, {}, {
     refreshHistory: () => void;
     resetSelected: () => void;
-}, string>;
+}, "">;
 type SchemaFormWithArgPicker = InstanceType<typeof SchemaFormWithArgPicker>;
 export default SchemaFormWithArgPicker;

package/package/components/SchemaViewer.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">import { copyToClipboard, emptySchema } from '../utils';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import TableCustom from './TableCustom.svelte';
+import DataTable from './table/DataTable.svelte';
+import Head from './table/Head.svelte';
+import Cell from './table/Cell.svelte';
+import Row from './table/Row.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
@@ -22,67 +25,67 @@ function getProperties(schema) {
 
 <div class="w-full">
 	<Tabs selected="arguments">
-		<Tab value="arguments" label="Arguments" />
-		<Tab value="advanced" label="Advanced" />
+		<Tab value="arguments" label="Inputs" />
+		<Tab value="json" label="JSON" />
 		{#snippet content()}
 			<div class="overflow-auto pt-2">
 				<TabContent value="arguments">
 					{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-						<div class="flex flex-row">
-							<TableCustom>
-								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-								<tr slot="header-row" class="underline">
-									<th>name</th>
-									<th>type</th>
-									<th>description</th>
-									<th>default</th>
-									<th>format</th>
-									<th>required</th>
+						<DataTable size="sm" containerClass="bg-surface-tertiary">
+							<Head>
+								<tr class="w-full">
+									<Cell head first>Name</Cell>
+									<Cell head>Type</Cell>
+									<Cell head>Description</Cell>
+									<Cell head>Default</Cell>
+									<Cell head>Format</Cell>
+									<Cell head last>Required</Cell>
 								</tr>
-								{#snippet body()}
-									<tbody>
-										{#each getProperties(schema) as [name, property] (name)}
-											<tr>
-												<td class="font-semibold pl-1">{name}</td>
-												<td
-													><Badge color="blue"
-														>{#if !property.type}
-															any
-														{:else}
-															{property.type}
-														{/if}</Badge
-													></td
-												>
-												<td>{property.description ?? ''}</td>
-												<td
-													>{property.default == '<function call>'
-														? '<function call>'
-														: property.default
-															? JSON.stringify(property.default)
-															: ''}</td
-												>
-												<td
-													>{property.format ?? ''}
-													{property.contentEncoding
-														? `(encoding: ${property.contentEncoding})`
-														: ''}</td
-												>
-												<td
-													>{#if schema.required.includes(name)}
-														<span class="text-red-600 font-bold text-lg">*</span>
-													{/if}</td
-												>
-											</tr>
-										{/each}
-									</tbody>
-								{/snippet}
-							</TableCustom>
-						</div>
+							</Head>
+
+							<tbody class="divide-y w-full">
+								{#each getProperties(schema) as [name, property] (name)}
+									<Row>
+										<Cell first>
+											<span class="font-semibold">{name}</span>
+										</Cell>
+										<Cell>
+											<Badge color="blue">
+												{#if !property.type}
+													any
+												{:else}
+													{property.type}
+												{/if}
+											</Badge>
+										</Cell>
+										<Cell wrap>
+											{property.description ?? ''}
+										</Cell>
+										<Cell>
+											{property.default == '<function call>'
+												? '<function call>'
+												: property.default
+													? JSON.stringify(property.default)
+													: ''}
+										</Cell>
+										<Cell>
+											{property.format ?? ''}
+											{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}
+										</Cell>
+										<Cell last>
+											{#if schema.required.includes(name)}
+												<span class="text-red-600 font-bold text-lg">*</span>
+											{/if}
+										</Cell>
+									</Row>
+								{/each}
+							</tbody>
+						</DataTable>
 					{:else}
 						<div class="text-secondary text-xs italic m-1">No arguments</div>
 					{/if}
 				</TabContent>
-				<TabContent value="advanced">
+				<TabContent value="json">
 					<div class="h-full relative">
 						<Button
 							wrapperClasses="absolute top-2 right-2 z-20"

package/package/components/ScriptBuilder.svelte

@@ -576,15 +576,16 @@ function computeDropdownItems(initialPath, savedScript, diffDrawer) {
                             }
                             await syncWithDeployed();
                             const currentDraftTriggers = structuredClone(triggersState.getDraftTriggersSnapshot());
+                            const deployed = deployedValue ?? savedScript;
+                            const current = { ...script, draft_triggers: currentDraftTriggers };
+                            if (current.assets && !current.assets.length)
+                                delete current.assets;
                             diffDrawer?.openDrawer();
                             diffDrawer?.setDiff({
                                 mode: 'normal',
-                                deployed: deployedValue ?? savedScript,
+                                deployed,
                                 draft: savedScript['draft'],
-                                current: {
-                                    ...script,
-                                    draft_triggers: currentDraftTriggers
-                                }
+                                current
                             });
                         }
                     }
@@ -1101,9 +1102,7 @@ async function loadWorkerTags() {
 											/>
 											{#if script.cache_ttl}
 												<div class="text-2xs text-secondary">How long to keep the cache valid</div>
-												<div class="-mt-5">
-													<SecondsInput bind:seconds={script.cache_ttl} />
-												</div>
+												<SecondsInput bind:seconds={script.cache_ttl} />
 												<Toggle
 													size="2xs"
 													bind:checked={
@@ -1205,6 +1204,7 @@ async function loadWorkerTags() {
 											disabled={!$enterpriseLicense ||
 												isCloudHosted() ||
 												(script.language != 'bun' &&
+													script.language != 'bunnative' &&
 													script.language != 'python3' &&
 													script.language != 'deno')}
 											size="sm"
@@ -1223,8 +1223,8 @@ async function loadWorkerTags() {
 										{#if script.dedicated_worker}
 											<div class="py-2">
 												<Alert type="info" title="Require dedicated workers">
-													One worker in a worker group needs to be configured with dedicated worker
-													set to: <pre>{$workspaceStore}:{script.path}</pre>
+													A worker group needs to be configured to listen to this script. Select it
+													in the dedicated workers section of the worker group configuration.
 												</Alert>
 											</div>
 										{/if}
@@ -1234,8 +1234,8 @@ async function loadWorkerTags() {
 											>
 												In this mode, the script is meant to be run on dedicated workers that run
 												the script at native speed. Can reach &gt;1500rps per dedicated worker. Only
-												available on enterprise edition and for Python3, Deno and Bun. For other
-												languages, the efficiency is already on par with deidcated workers since
+												available on enterprise edition and for Python3, Deno, Bun and Bunnative. For other
+												languages, the efficiency is already on par with dedicated workers since
 												they do not spawn a full runtime</Tooltip
 											>
 										{/snippet}

package/package/components/ScriptEditor.svelte

@@ -623,7 +623,8 @@ function asKind(str) {
 function collabUrl() {
     let url = new URL(window.location.toString().split('#')[0]);
     url.search = '';
-    return `${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` + (edit ? '' : `&path=${path}`);
+    return (`${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` +
+        (edit ? '' : `&path=${path}`));
 }
 let showTabs = $derived(hasPreprocessor);
 $effect(() => {
@@ -735,12 +736,17 @@ $effect(() => {
 <Modal title="Debug Feature (Beta)" bind:open={showDebugBetaWarning}>
 	<div class="flex items-start gap-3">
 		<div class="flex-shrink-0">
-			<div class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-800/50">
+			<div
+				class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-800/50"
+			>
 				<AlertTriangle class="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
 			</div>
 		</div>
 		<div class="text-secondary text-sm">
-			<p>The Debug feature is currently in <strong>beta</strong>. You may encounter unexpected behavior or limitations.</p>
+			<p
+				>The Debug feature is currently in <strong>beta</strong>. You may encounter unexpected
+				behavior or limitations.</p
+			>
 			<p class="mt-2">By continuing, you acknowledge that this feature is experimental.</p>
 		</div>
 	</div>
@@ -884,41 +890,36 @@ $effect(() => {
 						/>
 					</div>
 					{#if !(debugMode && isDebuggableScript)}
-						{#if testIsLoading}
-							<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
-								<WindmillIcon
-									white={true}
-									class="mr-2 text-white"
-									height="16px"
-									width="20px"
-									spin="fast"
-								/>
-								Cancel
-							</Button>
-						{:else}
-							{@const disableTriggerButton = customUi?.previewPanel?.disableTriggerButton === true}
-							<div
-								class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch"
-							>
+						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
+							{#if testIsLoading}
+								<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
+									<WindmillIcon
+										white={true}
+										class="mr-2 text-white"
+										height="16px"
+										width="20px"
+										spin="fast"
+									/>
+									Cancel
+								</Button>
+							{:else}
+								{@const disableTriggerButton =
+									customUi?.previewPanel?.disableTriggerButton === true}
 								<Button
 									on:click={() => runTest()}
+									unifiedSize="md"
 									btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
-									size="xs"
 									variant="accent-secondary"
 									startIcon={{ icon: Play, classes: 'animate-none' }}
-									shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
+									shortCut={{ Icon: CornerDownLeft }}
 								>
-									{#if testIsLoading}
-										Running
-									{:else}
-										Test
-									{/if}
+									Test
 								</Button>
 								{#if !disableTriggerButton}
 									<CaptureButton on:openTriggers />
 								{/if}
-							</div>
-						{/if}
+							{/if}
+						</div>
 					{/if}
 					<div class="absolute top-2 right-2"
 						><Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} /></div
@@ -1194,6 +1195,7 @@ $effect(() => {
 			{args}
 			{enablePreprocessorSnippet}
 			preparedAssetsSqlQueries={preparedSqlQueries.current}
+			customTag={tag}
 		/>
 		<DiffEditor
 			className="h-full"

package/package/components/Section.svelte

@@ -56,9 +56,9 @@ let { label = undefined, tooltip = undefined, documentationLink = undefined, eeO
 			transition:slide={animate || collapsable ? { duration: 200 } : { duration: 0 }}
 		>
 			{#if description}
-				<div class="text-xs text-primary mt-1">{@html description}</div>
+				<div class="text-xs text-primary mt-1 mb-2">{@html description}</div>
 			{/if}
-			<div class="flex flex-col gap-6 grow min-h-0 mt-6">
+			<div class="flex flex-col gap-6 grow min-h-0 mt-4">
 				<div class={twMerge('grow min-h-0', clazz)}>
 					{@render children?.()}
 				</div>