windmill-components 1.493.9 → 1.501.4

package/package/components/raw_apps/RawAppEditorHeader.svelte

@@ -22,6 +22,7 @@ import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import AppJobsDrawer from '../apps/editor/AppJobsDrawer.svelte';
 import { collectStaticFields, hash } from '../apps/editor/commonAppUtils';
 import DropdownV2 from '../DropdownV2.svelte';
+import { stateSnapshot } from '../../svelte5Utils.svelte';
 // async function hash(message) {
 // 	try {
 // 		const msgUint8 = new TextEncoder().encode(message) // encode as (utf-8) Uint8Array
@@ -142,7 +143,7 @@ async function createApp(path) {
         });
         savedApp = {
             summary: summary,
-            value: structuredClone(app),
+            value: structuredClone(stateSnapshot(app)),
             path: path,
             policy: policy,
             custom_path: customPath
@@ -240,7 +241,7 @@ async function updateApp(npath) {
     });
     savedApp = {
         summary: summary,
-        value: structuredClone(app),
+        value: structuredClone(stateSnapshot(app)),
         path: npath,
         policy,
         custom_path: customPath
@@ -327,13 +328,13 @@ async function saveInitialDraft() {
         });
         savedApp = {
             summary: summary,
-            value: structuredClone(app),
+            value: structuredClone(stateSnapshot(app)),
             path: newEditedPath,
             policy,
             draft_only: true,
             draft: {
                 summary: summary,
-                value: structuredClone(app),
+                value: structuredClone(stateSnapshot(app)),
                 path: newEditedPath,
                 policy,
                 custom_path: customPath
@@ -422,7 +423,7 @@ async function saveDraft(forceSave = false) {
             ...(savedApp?.draft_only
                 ? {
                     summary: summary,
-                    value: structuredClone(app),
+                    value: structuredClone(stateSnapshot(app)),
                     path: savedApp.draft_only ? newEditedPath || path : path,
                     policy,
                     draft_only: true,
@@ -431,7 +432,7 @@ async function saveDraft(forceSave = false) {
                 : savedApp),
             draft: {
                 summary: summary,
-                value: structuredClone(app),
+                value: structuredClone(stateSnapshot(app)),
                 path: newEditedPath || path,
                 policy,
                 custom_path: customPath
@@ -629,15 +630,17 @@ function getInitialAndModifiedValues() {
 			/>
 			<div class="py-4"></div>
 
-			<div slot="actions">
-				<Button
-					startIcon={{ icon: Save }}
-					disabled={pathError != '' || app == undefined}
-					on:click={() => saveInitialDraft()}
-				>
-					Save initial draft
-				</Button>
-			</div>
+			{#snippet actions()}
+				<div>
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != '' || app == undefined}
+						on:click={() => saveInitialDraft()}
+					>
+						Save initial draft
+					</Button>
+				</div>
+			{/snippet}
 		</DrawerContent>
 	</Drawer>
 {/if}
@@ -696,63 +699,65 @@ function getInitialAndModifiedValues() {
 			autofocus={false}
 		/>
 
-		<div slot="actions" class="flex flex-row gap-4">
-			<Button
-				variant="border"
-				color="light"
-				disabled={!savedApp || savedApp.draft_only}
-				on:click={async () => {
-					if (!savedApp) {
-						return
-					}
-					// deployedValue should be syncronized when we open Diff
-					await syncWithDeployed()
+		{#snippet actions()}
+			<div class="flex flex-row gap-4">
+				<Button
+					variant="border"
+					color="light"
+					disabled={!savedApp || savedApp.draft_only}
+					on:click={async () => {
+						if (!savedApp) {
+							return
+						}
+						// deployedValue should be syncronized when we open Diff
+						await syncWithDeployed()
 
-					saveDrawerOpen = false
-					diffDrawer?.openDrawer()
-					diffDrawer?.setDiff({
-						mode: 'normal',
-						deployed: deployedValue ?? savedApp,
-						draft: savedApp.draft,
-						current: {
-							summary: summary,
-							value: app,
-							path: newEditedPath || savedApp.draft?.path || savedApp.path,
-							policy,
-							custom_path: customPath
-						},
-						button: {
-							text: 'Looks good, deploy',
-							onClick: () => {
-								if (appPath == '') {
-									createApp(newEditedPath)
-								} else {
-									handleUpdateApp(newEditedPath)
+						saveDrawerOpen = false
+						diffDrawer?.openDrawer()
+						diffDrawer?.setDiff({
+							mode: 'normal',
+							deployed: deployedValue ?? savedApp,
+							draft: savedApp.draft,
+							current: {
+								summary: summary,
+								value: app,
+								path: newEditedPath || savedApp.draft?.path || savedApp.path,
+								policy,
+								custom_path: customPath
+							},
+							button: {
+								text: 'Looks good, deploy',
+								onClick: () => {
+									if (appPath == '') {
+										createApp(newEditedPath)
+									} else {
+										handleUpdateApp(newEditedPath)
+									}
 								}
 							}
+						})
+					}}
+				>
+					<div class="flex flex-row gap-2 items-center">
+						<DiffIcon size={14} />
+						Diff
+					</div>
+				</Button>
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || customPathError != '' || app == undefined}
+					on:click={() => {
+						if (appPath == '') {
+							createApp(newEditedPath)
+						} else {
+							handleUpdateApp(newEditedPath)
 						}
-					})
-				}}
-			>
-				<div class="flex flex-row gap-2 items-center">
-					<DiffIcon size={14} />
-					Diff
-				</div>
-			</Button>
-			<Button
-				startIcon={{ icon: Save }}
-				disabled={pathError != '' || customPathError != '' || app == undefined}
-				on:click={() => {
-					if (appPath == '') {
-						createApp(newEditedPath)
-					} else {
-						handleUpdateApp(newEditedPath)
-					}
-				}}
-			>
-				Deploy
-			</Button>
-		</div>
+					}}
+				>
+					Deploy
+				</Button>
+			</div>
+		{/snippet}
 		<div class="py-2"></div>
 		{#if appPath == ''}
 			<Alert title="Require saving" type="error">

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte

@@ -5,8 +5,7 @@ import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelt
 import DocLink from '../apps/editor/settingsPanel/DocLink.svelte';
 import HideButton from '../apps/editor/settingsPanel/HideButton.svelte';
 import { getNextId } from '../flows/idUtils';
-export let selectedRunnable;
-export let runnables;
+let { selectedRunnable = $bindable(), runnables } = $props();
 function createBackgroundScript() {
     const nid = getNextId(Object.keys($runnables ?? {}));
     const newScriptPath = `Backend Runnable ${nid}`;
@@ -18,14 +17,13 @@ function createBackgroundScript() {
         };
         return r;
     });
-    console.log('BAR 2');
     selectedRunnable = nid;
 }
 const dispatch = createEventDispatcher();
 </script>
 
 <PanelSection title="Backend Runnables" id="app-editor-runnable-panel">
-	<svelte:fragment slot="action">
+	{#snippet action()}
 		<div class="flex flex-row gap-1">
 			<HideButton
 				direction="bottom"
@@ -49,7 +47,7 @@ const dispatch = createEventDispatcher();
 				<Plus size={14} class="!text-primary" />
 			</Button>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>
 			<div class="flex flex-col gap-1 w-full">
@@ -62,7 +60,7 @@ const dispatch = createEventDispatcher();
 								{selectedRunnable === id
 									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
 									: 'hover:bg-blue-50 dark:hover:bg-frost-900/50'}"
-								on:click={() => (selectedRunnable = id)}
+								onclick={() => (selectedRunnable = id)}
 							>
 								<span class="text-2xs truncate">{runnable?.name}</span>
 								<Badge color="indigo">{id}</Badge>

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte.d.ts

@@ -1,5 +1,9 @@
 import type { Writable } from 'svelte/store';
 import type { Runnable } from '../apps/inputType';
+interface Props {
+    selectedRunnable: string | undefined;
+    runnables: Writable<Record<string, Runnable>>;
+}
 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;
@@ -13,13 +17,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RawAppInlineScriptPanelList: $$__sveltets_2_IsomorphicComponent<{
-    selectedRunnable: string | undefined;
-    runnables: Writable<Record<string, Runnable>>;
-}, {
+declare const RawAppInlineScriptPanelList: $$__sveltets_2_IsomorphicComponent<Props, {
     hidePanel: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "selectedRunnable">;
 type RawAppInlineScriptPanelList = InstanceType<typeof RawAppInlineScriptPanelList>;
 export default RawAppInlineScriptPanelList;

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import EmptyInlineScript from '../apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte';
 import InlineScriptRunnableByPath from '../apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import RawAppInlineScriptEditor from './RawAppInlineScriptEditor.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import Tabs from '../common/tabs/Tabs.svelte';
@@ -10,9 +10,7 @@ import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import SchemaForm from '../SchemaForm.svelte';
 import RunnableJobPanelInner from '../apps/editor/RunnableJobPanelInner.svelte';
 import TestJobLoader from '../TestJobLoader.svelte';
-export let runnable;
-export let id;
-export let appPath;
+let { runnable = $bindable(), id, appPath } = $props();
 const dispatch = createEventDispatcher();
 async function fork(nrunnable) {
     runnable = nrunnable == undefined ? undefined : { ...runnable, ...nrunnable };
@@ -27,8 +25,8 @@ function onPick(o) {
                 fields: o.fields
             };
 }
-let selectedTab = 'inputs';
-let args = {};
+let selectedTab = $state('inputs');
+let args = $state({});
 function getSchema(runnable) {
     if (runnable?.type == 'runnableByPath') {
         console.log('runnable.schema', runnable.schema);
@@ -39,11 +37,10 @@ function getSchema(runnable) {
     }
     return {};
 }
-let testJobLoader;
-let testJob;
-let testIsLoading = false;
-let scriptProgress = 0;
-$: onFieldsChange(runnable?.fields ?? {});
+let testJobLoader = $state();
+let testJob = $state();
+let testIsLoading = $state(false);
+let scriptProgress = $state(0);
 function onFieldsChange(fields) {
     if (args == undefined) {
         args = {};
@@ -70,6 +67,11 @@ async function testPreview() {
         }
     }
 }
+$effect(() => {
+    ;
+    [runnable?.fields];
+    untrack(() => onFieldsChange(runnable?.fields ?? {}));
+});
 </script>
 
 <TestJobLoader
@@ -125,7 +127,7 @@ async function testPreview() {
 			<Tabs bind:selected={selectedTab}>
 				<Tab value="inputs">Inputs</Tab>
 				<Tab value="test">Test</Tab>
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					{#if selectedTab == 'inputs'}
 						{#if runnable?.fields}
 							<div class="w-full flex flex-col gap-4 p-2">
@@ -161,12 +163,11 @@ async function testPreview() {
 									<div class="px-2 py-3 h-full overflow-auto">
 										<SchemaForm
 											on:keydownCmdEnter={testPreview}
-											disabledArgs={Object.entries(runnable.fields ?? {})
+											disabledArgs={Object.entries(runnable?.fields ?? {})
 												.filter(([k, v]) => v.type == 'static')
 												.map(([k]) => k)}
-											schema={getSchema(runnable)}
+											schema={runnable ? getSchema(runnable) : {}}
 											bind:args
-											shouldCapitalize
 										/>
 									</div>
 								</Pane>
@@ -176,7 +177,7 @@ async function testPreview() {
 							</Splitpanes>
 						</SplitPanesWrapper>
 					{/if}
-				</svelte:fragment>
+				{/snippet}
 			</Tabs>
 		</Pane>
 	</Splitpanes>

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte.d.ts

@@ -1,4 +1,9 @@
 import type { RunnableWithFields } from '../apps/inputType';
+interface Props {
+    runnable: RunnableWithFields | undefined;
+    id: string;
+    appPath: string;
+}
 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,15 +17,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RawAppInlineScriptRunnable: $$__sveltets_2_IsomorphicComponent<{
-    runnable: RunnableWithFields | undefined;
-    id: string;
-    appPath: string;
-}, {
+declare const RawAppInlineScriptRunnable: $$__sveltets_2_IsomorphicComponent<Props, {
     delete: CustomEvent<any>;
     createScriptFromInlineScript: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "runnable">;
 type RawAppInlineScriptRunnable = InstanceType<typeof RawAppInlineScriptRunnable>;
 export default RawAppInlineScriptRunnable;

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { addWhitespaceBeforeCapitals, capitalize, classNames } from '../../utils';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { addWhitespaceBeforeCapitals, capitalize, classNames } from '../../utils';
 import Tooltip from '../Tooltip.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
@@ -6,29 +7,15 @@ import { Loader2, Pen, User } from 'lucide-svelte';
 import Toggle from '../Toggle.svelte';
 import StaticInputEditor from '../apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte';
 import { fieldTypeToTsType } from '../apps/utils';
-export let id;
-export let componentInput;
-export let key;
-export let shouldCapitalize = true;
-export let resourceOnly = false;
-export let tooltip = undefined;
-export let fieldType;
-export let subFieldType;
-export let format;
-export let selectOptions;
-export let placeholder;
-export let customTitle = undefined;
-export let displayType = false;
-export let allowTypeChange = true;
-export let loading = false;
-export let documentationLink = undefined;
-export let markdownTooltip = undefined;
-$: if (componentInput == undefined) {
-    //@ts-ignore
-    componentInput = {
-        type: 'user'
-    };
-}
+let { id, componentInput = $bindable(), key, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, loading = false, documentationLink = undefined, markdownTooltip = undefined } = $props();
+run(() => {
+    if (componentInput == undefined) {
+        //@ts-ignore
+        componentInput = {
+            type: 'user'
+        };
+    }
+});
 </script>
 
 {#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
@@ -63,9 +50,11 @@ $: if (componentInput == undefined) {
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
-					<ToggleButtonGroup class="h-7" bind:selected={componentInput.type} let:item>
-						<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
-						<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
+					<ToggleButtonGroup class="h-7" bind:selected={componentInput.type}>
+						{#snippet children({ item })}
+							<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
+							<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
+						{/snippet}
 					</ToggleButtonGroup>
 				{/if}
 			</div>

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte.d.ts

@@ -1,19 +1,6 @@
 import type { RichConfiguration } from '../apps/types';
 import type { InputType } from '../apps/inputType';
-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 RawAppInputsSpecEditor: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     componentInput: RichConfiguration;
     key: string;
@@ -31,8 +18,7 @@ declare const RawAppInputsSpecEditor: $$__sveltets_2_IsomorphicComponent<{
     loading?: boolean;
     documentationLink?: string | undefined;
     markdownTooltip?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RawAppInputsSpecEditor = InstanceType<typeof RawAppInputsSpecEditor>;
+}
+declare const RawAppInputsSpecEditor: import("svelte").Component<Props, {}, "componentInput">;
+type RawAppInputsSpecEditor = ReturnType<typeof RawAppInputsSpecEditor>;
 export default RawAppInputsSpecEditor;

package/package/components/resourceTypesStore.d.ts

@@ -1,2 +1,2 @@
 export declare const resourceTypesStore: import("svelte/store").Writable<string[] | undefined>;
-export declare function getResourceTypes(): Promise<string[]>;
+export declare function getResourceTypes(): Promise<string[] | undefined>;

package/package/components/resourceTypesStore.js

@@ -2,20 +2,38 @@ import { ResourceService } from "../gen";
 import { workspaceStore } from "../stores";
 import { get, writable } from "svelte/store";
 export const resourceTypesStore = writable(undefined);
+let loading = false;
 export async function getResourceTypes() {
     const rts = get(resourceTypesStore);
     if (rts) {
         return rts;
     }
     else {
+        if (loading) {
+            let counter = 0;
+            while (loading) {
+                await new Promise(resolve => setTimeout(resolve, 50));
+                counter++;
+                if (counter > 10) {
+                    console.error('Resource types loading timeout');
+                    break;
+                }
+            }
+            if (!loading) {
+                return get(resourceTypesStore);
+            }
+        }
+        loading = true;
         let workspace = get(workspaceStore);
         if (workspace) {
             try {
                 const nrts = await ResourceService.listResourceTypeNames({ workspace: workspace });
                 resourceTypesStore.set(nrts);
+                loading = false;
                 return nrts;
             }
             catch (e) {
+                loading = false;
                 return ["error_fetching_names"];
             }
         }

package/package/components/runs/BatchReRunOptionsPane.svelte

@@ -6,7 +6,7 @@ import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelt
 import { JobService } from '../../gen';
 import { workspaceStore } from '../../stores';
 import InputTransformForm from '../InputTransformForm.svelte';
-import { setContext } from 'svelte';
+import { setContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 import Alert from '../common/alert/Alert.svelte';
 import { batchReRunDefaultPropertyExpr, buildExtraLibForBatchReruns, mergeSchemasForBatchReruns } from '../jobs/batchReruns';
@@ -103,7 +103,7 @@ function propertyAlwaysHasSameType(propertyName, group) {
 const selectedUsesLatestSchema = $derived(!!selected &&
     (selected?.kind === 'flow' ||
         (options[selected.kind][selected.script_path]?.use_latest_version ?? false)));
-const jobGroupsPromise = $derived(selectedIds && fetchJobGroups());
+const jobGroupsPromise = $derived(selectedIds && untrack(() => fetchJobGroups()));
 </script>
 
 <div class="flex-1 flex flex-col">
@@ -194,7 +194,7 @@ const jobGroupsPromise = $derived(selectedIds && fetchJobGroups());
 										schema={displayedSchema}
 										{extraLib}
 										previousModuleId={undefined}
-										pickablepropertyMap={{
+										pickableProperties={{
 											hasResume: false,
 											previousId: undefined,
 											priorIds: {},