windmill-components 1.642.0 → 1.655.0

package/package/components/S3ObjectPicker.svelte

@@ -4,13 +4,12 @@ import { Button } from './common';
 import Toggle from './Toggle.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 import FileUpload from './common/fileUpload/FileUpload.svelte';
-export let value;
-export let editor = undefined;
+let { value = $bindable(), editor = $bindable(undefined) } = $props();
 const dispatch = createEventDispatcher();
-let s3FilePicker;
-let s3FileUploadRawMode;
+let s3FilePicker = $state();
+let s3FileUploadRawMode = $state();
 let el = undefined;
-let rawValue = undefined;
+let rawValue = $state(undefined);
 function evalValueToRaw() {
     rawValue = JSON.stringify(value, null, 2);
 }

package/package/components/S3ObjectPicker.svelte.d.ts

@@ -1,4 +1,8 @@
 import type SimpleEditor from './SimpleEditor.svelte';
+interface Props {
+    value: any;
+    editor?: SimpleEditor | undefined;
+}
 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;
@@ -12,16 +16,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const S3ObjectPicker: $$__sveltets_2_IsomorphicComponent<{
-    value: any;
-    editor?: SimpleEditor | undefined;
-    focus?: () => void;
-}, {
+declare const S3ObjectPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, string>;
+}, "value" | "editor">;
 type S3ObjectPicker = InstanceType<typeof S3ObjectPicker>;
 export default S3ObjectPicker;

package/package/components/SaveButton.svelte

@@ -2,6 +2,7 @@
 import {} from './common/button/model';
 import { Save, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte';
 import { fly } from 'svelte/transition';
+import { sendUserToast } from '../toast';
 let { onSave, disabled = false, label = 'Save settings', size = undefined, unifiedSize = undefined, variant = 'accent' } = $props();
 let isSaving = $state(false);
 let saveStatus = $state(null);
@@ -28,6 +29,7 @@ function handleClick() {
     })
         .catch((error) => {
         console.error('Save failed:', error);
+        sendUserToast(error?.message ?? 'Save failed', true);
         saveStatus = 'error';
         statusTimeout = setTimeout(() => {
             saveStatus = null;

package/package/components/SaveInputsButton.svelte

@@ -7,13 +7,8 @@ import { sendUserToast } from '../utils.js';
 import { createEventDispatcher } from 'svelte';
 import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
-export let runnableId;
-export let runnableType;
-export let args;
-export let disabled = false;
-export let small = undefined;
-export let showTooltip = undefined;
-let savingInputs = false;
+let { runnableId, runnableType, args, disabled = false, small = undefined, showTooltip = undefined } = $props();
+let savingInputs = $state(false);
 async function saveInput(args) {
     savingInputs = true;
     const requestBody = {

package/package/components/SaveInputsButton.svelte.d.ts

@@ -1,4 +1,12 @@
 import { type RunnableType } from '../gen/index.js';
+interface Props {
+    runnableId: string | undefined;
+    runnableType: RunnableType | undefined;
+    args: object;
+    disabled?: boolean;
+    small?: boolean | undefined;
+    showTooltip?: boolean | undefined;
+}
 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;
@@ -12,17 +20,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SaveInputsButton: $$__sveltets_2_IsomorphicComponent<{
-    runnableId: string | undefined;
-    runnableType: RunnableType | undefined;
-    args: object;
-    disabled?: boolean;
-    small?: boolean | undefined;
-    showTooltip?: boolean | undefined;
-}, {
+declare const SaveInputsButton: $$__sveltets_2_IsomorphicComponent<Props, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type SaveInputsButton = InstanceType<typeof SaveInputsButton>;
 export default SaveInputsButton;

package/package/components/SavedInputsPickerViewer.svelte

@@ -1,17 +1,14 @@
-<script lang="ts">import { Button } from './common';
+<script lang="ts">import { run, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Button } from './common';
 import Popover from './meltComponents/Popover.svelte';
 import ObjectViewerWrapper from './propertyPicker/ObjectViewerWrapper.svelte';
 import { copyToClipboard, isObjectTooBig } from '../utils';
 import { Eye, CopyIcon, Loader2 } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
-export let payloadData;
-export let limitPayloadSize = false;
-export let hover = false;
-export let viewerOpen = false;
-export let maxWidth = undefined;
-export let editOptions = true;
+import { createEventDispatcher, untrack } from 'svelte';
+let { payloadData, limitPayloadSize = false, hover = false, viewerOpen = false, maxWidth = undefined, editOptions = true } = $props();
 const dispatch = createEventDispatcher();
-const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData);
+const payloadTooBigForPreview = untrack(() => payloadData) != 'WINDMILL_TOO_BIG' && isObjectTooBig(untrack(() => payloadData));
 const buttonWidth = 34;
 const floatingConfig = {
     placement: 'bottom-end',
@@ -27,12 +24,12 @@ const floatingConfig = {
         }
     ]
 };
-const xOffset = editOptions ? 218 : 168; // width of the optional buttons on the right
-let popover;
+const xOffset = untrack(() => editOptions) ? 218 : 168; // width of the optional buttons on the right
+let popover = $state();
 let popoverOpen = false;
 let hoverTimeout;
-let objectViewerLoaded = false;
-let popoverFullyOpened = false;
+let objectViewerLoaded = $state(false);
+let popoverFullyOpened = $state(false);
 function handlePopoverChange(event) {
     const isOpen = event.detail;
     popoverOpen = isOpen;
@@ -66,8 +63,10 @@ function handleHoverChange(isHovering) {
         }
     }
 }
-$: handleHoverChange(hover);
-$: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
+run(() => {
+    handleHoverChange(hover);
+});
+let ajustedWidth = $derived(maxWidth ? Math.abs(maxWidth - xOffset) : undefined);
 </script>
 
 <Popover
@@ -78,10 +77,10 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 		e.stopPropagation()
 	}}
 	closeOnOtherPopoverOpen
-	closeOnClickOutside={false}
+	closeOnOutsideClick={false}
 	usePointerDownOutside
 >
-	<svelte:fragment slot="trigger" let:isOpen>
+	{#snippet trigger({ isOpen })}
 		<Button
 			variant="subtle"
 			unifiedSize="sm"
@@ -91,8 +90,8 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 			nonCaptureEvent
 			startIcon={{ icon: Eye }}
 		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<div
 			class="p-2 overflow-auto"
 			style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
@@ -111,10 +110,10 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 					role="button"
 					tabindex="0"
 					aria-label="Copy JSON payload to clipboard"
-					on:click={() => {
+					onclick={() => {
 						copyToClipboard(JSON.stringify(payloadData))
 					}}
-					on:keydown
+					onkeydown={bubble('keydown')}
 				>
 					{#if !objectViewerLoaded && payloadTooBigForPreview}
 						<div class="flex justify-center items-center py-4">
@@ -151,5 +150,5 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 				</div>
 			{/if}
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>

package/package/components/SavedInputsPickerViewer.svelte.d.ts

@@ -1,3 +1,11 @@
+interface Props {
+    payloadData: any;
+    limitPayloadSize?: boolean;
+    hover?: boolean;
+    viewerOpen?: boolean;
+    maxWidth?: number | undefined;
+    editOptions?: boolean;
+}
 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,18 +19,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SavedInputsPickerViewer: $$__sveltets_2_IsomorphicComponent<{
-    payloadData: any;
-    limitPayloadSize?: boolean;
-    hover?: boolean;
-    viewerOpen?: boolean;
-    maxWidth?: number | undefined;
-    editOptions?: boolean;
-}, {
-    keydown: KeyboardEvent;
+declare const SavedInputsPickerViewer: $$__sveltets_2_IsomorphicComponent<Props, {
     openChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type SavedInputsPickerViewer = InstanceType<typeof SavedInputsPickerViewer>;
 export default SavedInputsPickerViewer;

package/package/components/SchemaEditorProperty.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import Badge from './common/badge/Badge.svelte';
-export let property;
+let { property } = $props();
 </script>
 
 <div class="flex flex-row flex-wrap gap-1">

package/package/components/SchemaEditorProperty.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { SchemaProperty } from '../common';
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SchemaEditorProperty: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     property: SchemaProperty;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SchemaEditorProperty = InstanceType<typeof SchemaEditorProperty>;
+}
+declare const SchemaEditorProperty: import("svelte").Component<Props, {}, "">;
+type SchemaEditorProperty = ReturnType<typeof SchemaEditorProperty>;
 export default SchemaEditorProperty;

package/package/components/SchemaForm.svelte.d.ts

@@ -85,6 +85,6 @@ declare const SchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     setDefaults: () => void;
-}, "args" | "schema" | "isValid" | "linkedSecret">;
+}, "args" | "schema" | "linkedSecret" | "isValid">;
 type SchemaForm = InstanceType<typeof SchemaForm>;
 export default SchemaForm;

package/package/components/ScriptBuilder.svelte

@@ -3,6 +3,7 @@ const bubble = createBubbler();
 import { DraftService, ScriptService, PostgresTriggerService, CaptureService, WorkerService } from '../gen';
 import { inferArgs } from '../infer';
 import { initialCode, canHavePreprocessor, getPreprocessorFullCode, getMainFunctionPattern } from '../script_helpers';
+import { isWorkflowAsCode } from './graph/wacToFlow';
 import AIFormSettings from './copilot/AIFormSettings.svelte';
 import { defaultScripts, enterpriseLicense, usedTriggerKinds, userStore, workerTags, workspaceStore } from '../stores';
 import { cleanValueProperties, emptySchema, emptyString, encodeState, generateRandomString, orderedJsonStringify, readFieldsRecursively, replaceFalseWithUndefined } from '../utils';
@@ -42,6 +43,9 @@ import { Triggers } from './triggers/triggers.svelte';
 import WorkerTagSelect from './WorkerTagSelect.svelte';
 import { inputSizeClasses } from './text_input/TextInput.svelte';
 import DebounceLimit from './flows/DebounceLimit.svelte';
+import { isRuleActive } from '../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../utils/editInFork';
+import OnBehalfOfSelector, {} from './OnBehalfOfSelector.svelte';
 let { script = $bindable(), fullyLoaded = true, initialPath = $bindable(''), template = $bindable('script'), initialArgs = {}, lockedLanguage = false, showMeta = false, neverShowMeta = false, diffDrawer = undefined, savedScript = $bindable(undefined), searchParams = new URLSearchParams(), disableHistoryChange = false, replaceStateFn = (url) => window.history.replaceState(null, '', url), customUi = {}, savedPrimarySchedule = undefined, functionExports = undefined, children, onDeploy, onDeployError, onSaveInitial, onSeeDetails, onSaveDraftError, onSaveDraft, disableAi } = $props();
 export function getInitialAndModifiedValues() {
     return {
@@ -63,15 +67,22 @@ let deployedValue = $state(undefined); // Value to diff against
 let deployedBy = $state(undefined); // Author
 let confirmCallback = $state(() => { }); // What happens when user clicks `override` in warning
 let open = $state(false); // Is confirmation modal open
-let args = $state(initialArgs); // Test args input
+let args = $state(untrack(() => initialArgs)); // Test args input
 let selectedInputTab = $state('main');
 let hasPreprocessor = $state(false);
-let metadataOpen = $state(!neverShowMeta &&
-    (showMeta ||
-        searchParams.get('metadata_open') == 'true' ||
+let preserveOnBehalfOf = $state(false);
+const WM_DEPLOYERS_GROUP = 'wm_deployers';
+let isDeployer = $derived($userStore?.groups?.includes(WM_DEPLOYERS_GROUP) ?? false);
+let canPreserve = $derived(!!$userStore?.is_admin || !!$userStore?.is_super_admin || isDeployer);
+let originalOnBehalfOfEmail = $derived(savedScript?.on_behalf_of_email);
+let onBehalfOfChoice = $state(undefined);
+let customOnBehalfOfEmail = $state('');
+let metadataOpen = $state(!untrack(() => neverShowMeta) &&
+    (untrack(() => showMeta) ||
+        untrack(() => searchParams).get('metadata_open') == 'true' ||
         (initialPath == '' &&
-            searchParams.get('state') == undefined &&
-            searchParams.get('collab') == undefined)));
+            untrack(() => searchParams).get('state') == undefined &&
+            untrack(() => searchParams).get('collab') == undefined)));
 let editor = $state(undefined);
 let scriptEditor = $state(undefined);
 let captureTable = $state(undefined);
@@ -84,9 +95,12 @@ async function handleDraftTriggersConfirmed(event) {
     draftTriggersModalOpen = false;
     confirmDeploymentCallback(selectedTriggers);
 }
-const primaryScheduleStore = writable(savedPrimarySchedule); // keep for legacy
-const triggersCount = writable(savedPrimarySchedule
-    ? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
+const primaryScheduleStore = writable(untrack(() => savedPrimarySchedule)); // keep for legacy
+const triggersCount = writable(untrack(() => savedPrimarySchedule)
+    ? {
+        schedule_count: 1,
+        primary_schedule: { schedule: untrack(() => savedPrimarySchedule).cron }
+    }
     : undefined);
 const simplifiedPoll = writable(false);
 export function setPrimarySchedule(schedule) {
@@ -374,6 +388,7 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
                 has_preprocessor: script.has_preprocessor,
                 deployment_message: deploymentMsg || undefined,
                 on_behalf_of_email: script.on_behalf_of_email,
+                preserve_on_behalf_of: preserveOnBehalfOf || undefined,
                 assets: script.assets
             }
         });
@@ -396,7 +411,7 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
         if (!disableHistoryChange) {
             history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
         }
-        if (stay || (script.no_main_func && script.kind !== 'preprocessor')) {
+        if (stay || (script.no_main_func && script.kind !== 'preprocessor' && !isWorkflowAsCode(script.content, script.language))) {
             script.parent_hash = newHash;
             sendUserToast('Deployed');
         }
@@ -566,6 +581,16 @@ function computeDropdownItems(initialPath, savedScript, diffDrawer) {
                     window.open(`/scripts/add?template=${initialPath}`);
                 }
             },
+            ...(!isCloudHosted() && !isRuleActive('DisableWorkspaceForking')
+                ? [
+                    {
+                        label: 'Edit in workspace fork',
+                        onClick: () => {
+                            window.open(buildForkEditUrl('script', initialPath));
+                        }
+                    }
+                ]
+                : []),
             ...(customUi?.topBar?.diff !== false && savedScript && diffDrawer
                 ? [
                     {
@@ -633,7 +658,7 @@ let selectedTab = $state((() => {
     }
     return 'metadata';
 })());
-setContext('disableTooltips', customUi?.disableTooltips === true);
+setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true);
 function langToLanguage(lang) {
     if (lang == 'docker') {
         return 'bash';
@@ -915,9 +940,10 @@ async function loadWorkerTags() {
 											<div class=" grid grid-cols-3 gap-2">
 												{#each langs as [label, lang] (lang)}
 													{@const isPicked =
-														(lang == script.language && template == 'script') ||
+														(lang == script.language && template != 'bunnative' && template != 'docker' && template != 'claudesandbox') ||
 														(template == 'bunnative' && lang == 'bunnative') ||
-														(template == 'docker' && lang == 'docker')}
+														(template == 'docker' && lang == 'docker') ||
+														(template == 'claudesandbox' && lang == 'bun')}
 													<Popover
 														disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
 													>
@@ -950,6 +976,25 @@ async function loadWorkerTags() {
 											</div>
 										</Section>
 									{/if}
+									<div class="flex items-center gap-2 mt-2">
+										<span class="text-2xs text-secondary">Template</span>
+										<Button
+											size="xs2"
+											variant="border"
+											color="light"
+											startIcon={{
+												icon: LanguageIcon,
+												props: { lang: 'claudesandbox', width: 16, height: 16 }
+											} as ButtonType.Icon}
+											on:click={() => {
+												template = 'claudesandbox'
+												script.language = 'bun'
+												initContent('bun', script.kind, template)
+											}}
+										>
+											Claude Sandbox
+										</Button>
+									</div>
 									{#if customUi?.settingsPanel?.metadata?.disableScriptKind !== true}
 										<Section label="Script kind">
 											{#snippet header()}
@@ -1234,9 +1279,9 @@ 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, Bun and Bunnative. For other
-												languages, the efficiency is already on par with dedicated workers since
-												they do not spawn a full runtime</Tooltip
+												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}
 									</Section>
@@ -1363,20 +1408,58 @@ async function loadWorkerTags() {
 											</Tooltip>
 										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
-											<Toggle
-												size="sm"
-												checked={Boolean(script.on_behalf_of_email)}
-												on:change={() => {
-													if (script.on_behalf_of_email) {
-														script.on_behalf_of_email = undefined
-													} else {
-														script.on_behalf_of_email = $userStore?.email
-													}
-												}}
-												options={{
-													right: 'Run on behalf of last editor'
-												}}
-											/>
+											<span class="inline-flex gap-2">
+												<Toggle
+													size="sm"
+													checked={Boolean(script.on_behalf_of_email)}
+													on:change={() => {
+														if (script.on_behalf_of_email) {
+															script.on_behalf_of_email = undefined
+															preserveOnBehalfOf = false
+															onBehalfOfChoice = undefined
+														} else {
+															script.on_behalf_of_email = $userStore?.email
+														}
+													}}
+													options={{
+														right: `Run on behalf of ${canPreserve ? 'a specified user' : 'last editor'}`
+													}}
+												/>
+												{#if script.on_behalf_of_email && canPreserve}
+													&rarr; <OnBehalfOfSelector
+														targetWorkspace={$workspaceStore ?? ''}
+														targetEmail={originalOnBehalfOfEmail}
+														selected={onBehalfOfChoice}
+														onSelect={(choice, email) => {
+															onBehalfOfChoice = choice
+															if (choice === 'me') {
+																script.on_behalf_of_email = $userStore?.email
+																customOnBehalfOfEmail = ''
+																preserveOnBehalfOf = false
+															} else if (choice === 'target') {
+																script.on_behalf_of_email = originalOnBehalfOfEmail
+																customOnBehalfOfEmail = ''
+																preserveOnBehalfOf = true
+															} else if (choice === 'custom' && email) {
+																script.on_behalf_of_email = email
+																customOnBehalfOfEmail = email
+																preserveOnBehalfOf = true
+															}
+														}}
+														kind="script"
+														{canPreserve}
+														customEmail={customOnBehalfOfEmail}
+														isDeployment={false}
+													/>
+												{:else if script.on_behalf_of_email && !canPreserve}
+													<span class="text-xs text-tertiary">
+														Currently: <span class="font-medium"
+															>{originalOnBehalfOfEmail ?? script.on_behalf_of_email}</span
+														>. Will be set to <span class="font-medium">{$userStore?.email}</span> on
+														deploy (requires admin or wm_deployers group to override)
+													</span>
+												{/if}
+											</span>
 										</div>
 									</Section>
 									{#if !isCloudHosted()}