windmill-components 1.493.10 → 1.501.4

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -1,23 +1,14 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
 import { Skeleton } from '../../common';
 import { classNames } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import { IntegrationService, ScriptService } from '../../../gen';
 import { Circle } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
-export let kind = 'script';
-export let filter = '';
-export let loading = false;
-export let selected = undefined;
-let hubNotAvailable = false;
+let hubNotAvailable = $state(false);
 const dispatch = createEventDispatcher();
-export let appFilter = undefined;
-export let items = [];
-export let displayPath = false;
-export let apps = [];
+let { kind = 'script', filter = $bindable(''), loading = $bindable(false), selected = undefined, appFilter = undefined, items = $bindable([]), displayPath = false, apps = $bindable([]) } = $props();
 let allApps = [];
-$: applyFilter(filter, kind, appFilter);
-$: getAllApps(kind);
 async function getAllApps(filterKind) {
     try {
         hubNotAvailable = false;
@@ -49,11 +40,11 @@ async function applyFilter(filter, filterKind, appFilter) {
                 limit: 40,
                 kind: filterKind
             })
-            : (await ScriptService.getTopHubScripts({
+            : ((await ScriptService.getTopHubScripts({
                 limit: 40,
                 kind: filterKind,
                 app: appFilter
-            })).asks ?? [];
+            })).asks ?? []);
         const mappedItems = scripts.map((x) => ({
             ...x,
             path: `hub/${x.version_id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
@@ -88,9 +79,22 @@ function onKeyDown(e) {
         dispatch('pickScript', item);
     }
 }
+$effect(() => {
+    ;
+    [filter, kind, appFilter];
+    untrack(() => {
+        applyFilter(filter, kind, appFilter);
+    });
+});
+$effect(() => {
+    kind;
+    untrack(() => {
+        getAllApps(kind);
+    });
+});
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 {#if hubNotAvailable}
 	<div class="text-2xs text-red-400 ftext-2xs font-light text-center py-2 px-3 items-center">
 		Hub not available
@@ -104,7 +108,7 @@ function onKeyDown(e) {
 		{#each items as item, index (item.path)}
 			<li class="w-full">
 				<Popover class="w-full" placement="right" forceOpen={index === selected}>
-					<svelte:fragment slot="text">
+					{#snippet text()}
 						<div class="flex flex-col">
 							<div class="text-left text-xs font-normal leading-tight py-0"
 								>{item.summary ?? ''}</div
@@ -113,21 +117,18 @@ function onKeyDown(e) {
 								{item.path ?? ''}
 							</div>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 					<button
 						class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
 						selected
 							? 'bg-surface-hover'
 							: ''}"
-						on:click={() => dispatch('pickScript', item)}
+						onclick={() => dispatch('pickScript', item)}
 					>
 						<div class={classNames('flex justify-center items-center')}>
 							{#if item['app'] in APP_TO_ICON_COMPONENT}
-								<svelte:component
-									this={APP_TO_ICON_COMPONENT[item['app']]}
-									height={14}
-									width={14}
-								/>
+								{@const SvelteComponent = APP_TO_ICON_COMPONENT[item['app']]}
+								<SvelteComponent height={14} width={14} />
 							{:else}
 								<div
 									class="w-[14px] h-[14px] text-gray-400 flex flex-row items-center justify-center"

package/package/components/flows/pickers/PickHubScriptQuick.svelte.d.ts

@@ -1,18 +1,5 @@
 import { type HubScriptKind } from '../../../gen';
-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 PickHubScriptQuick: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     kind?: HubScriptKind & string;
     filter?: string;
     loading?: boolean;
@@ -29,10 +16,24 @@ declare const PickHubScriptQuick: $$__sveltets_2_IsomorphicComponent<{
     }[];
     displayPath?: boolean;
     apps?: 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PickHubScriptQuick: $$__sveltets_2_IsomorphicComponent<Props, {
     pickScript: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "filter" | "items" | "loading" | "apps">;
 type PickHubScriptQuick = InstanceType<typeof PickHubScriptQuick>;
 export default PickHubScriptQuick;

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { workspaceStore } from '../../../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { FlowService, ScriptService } from '../../../gen';
 import SearchItems from '../../SearchItems.svelte';
 import { Skeleton } from '../../common';
@@ -7,16 +7,8 @@ import { emptyString } from '../../../utils';
 import { Code2 } from 'lucide-svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import Popover from '../../Popover.svelte';
-export let kind = 'script';
-export let isTemplate = undefined;
-export let selected = undefined;
-export let displayPath = false;
-let items = undefined;
-let filteredItems = undefined;
-export let filteredWithOwner = undefined;
-export let filter = '';
-export let owners = [];
-$: $workspaceStore && kind && loadItems();
+let items = $state(undefined);
+let filteredItems = $state(undefined);
 async function loadItems() {
     items =
         kind == 'flow'
@@ -27,27 +19,9 @@ async function loadItems() {
                 isTemplate
             });
 }
-export let ownerFilter = undefined;
-$: if ($workspaceStore) {
-    ownerFilter = undefined;
-}
-$: owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort((a, b) => {
-    if (a.startsWith('u/') && !b.startsWith('u/'))
-        return -1;
-    if (b.startsWith('u/') && !a.startsWith('u/'))
-        return 1;
-    if (a.startsWith('f/') && !b.startsWith('f/'))
-        return -1;
-    if (b.startsWith('f/') && !a.startsWith('f/'))
-        return 1;
-    return a.localeCompare(b);
-});
+let { kind = 'script', isTemplate = undefined, selected = undefined, displayPath = false, filteredWithOwner = $bindable(undefined), filter = '', owners = $bindable([]), ownerFilter = $bindable(undefined) } = $props();
 const dispatch = createEventDispatcher();
 let lockHash = false;
-$: filteredWithOwner =
-    ownerFilter != undefined
-        ? filteredItems?.filter((x) => x.path.startsWith(ownerFilter?.name))
-        : filteredItems;
 function onKeyDown(e) {
     if (selected != undefined &&
         filteredWithOwner &&
@@ -64,6 +38,33 @@ function onKeyDown(e) {
         }
     }
 }
+$effect(() => {
+    $workspaceStore && kind && untrack(() => loadItems());
+});
+$effect(() => {
+    if ($workspaceStore) {
+        ownerFilter = undefined;
+    }
+});
+$effect(() => {
+    owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort((a, b) => {
+        if (a.startsWith('u/') && !b.startsWith('u/'))
+            return -1;
+        if (b.startsWith('u/') && !a.startsWith('u/'))
+            return 1;
+        if (a.startsWith('f/') && !b.startsWith('f/'))
+            return -1;
+        if (b.startsWith('f/') && !a.startsWith('f/'))
+            return 1;
+        return a.localeCompare(b);
+    });
+});
+$effect(() => {
+    filteredWithOwner =
+        ownerFilter != undefined
+            ? filteredItems?.filter((x) => x.path.startsWith(ownerFilter?.name))
+            : filteredItems;
+});
 </script>
 
 <SearchItems
@@ -73,7 +74,7 @@ function onKeyDown(e) {
 	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
 />
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 {#if filteredItems}
 	{#if filteredItems.length == 0}
 		<div class="text-2xs text-tertiary font-light text-center py-2 px-3 items-center">
@@ -84,20 +85,20 @@ function onKeyDown(e) {
 		{#each filteredWithOwner ?? [] as { path, hash, summary, marked }, index}
 			<li class="w-full">
 				<Popover class="w-full " placement="right" forceOpen={index === selected}>
-					<svelte:fragment slot="text">
+					{#snippet text()}
 						<div class="flex flex-col">
 							<div class="text-left text-xs font-normal leading-tight py-0">{summary ?? ''}</div>
 							<div class="text-left text-2xs font-normal">
 								{path ?? ''}
 							</div>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 					<button
 						class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
 						selected
 							? 'bg-surface-hover'
 							: ''}"
-						on:click={() => {
+						onclick={() => {
 							if (kind == 'flow') {
 								dispatch('pickFlow', { path: path })
 							} else {

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte.d.ts

@@ -1,3 +1,24 @@
+type Item = {
+    path: string;
+    summary?: string;
+    description?: string;
+    hash?: string;
+};
+interface Props {
+    kind?: 'script' | 'trigger' | 'approval' | 'failure' | 'flow' | 'preprocessor';
+    isTemplate?: boolean | undefined;
+    selected?: number | undefined;
+    displayPath?: boolean;
+    filteredWithOwner?: (Item & {
+        marked?: string;
+    })[] | undefined;
+    filter?: string;
+    owners?: string[];
+    ownerFilter?: {
+        kind: 'inline' | 'owner' | 'integrations';
+        name: string | undefined;
+    } | 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;
@@ -11,30 +32,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const WorkspaceScriptPickerQuick: $$__sveltets_2_IsomorphicComponent<{
-    kind?: "script" | "trigger" | "approval" | "failure" | "flow" | "preprocessor";
-    isTemplate?: boolean | undefined;
-    selected?: number | undefined;
-    displayPath?: boolean;
-    filteredWithOwner?: ({
-        path: string;
-        summary?: string;
-        description?: string;
-        hash?: string;
-    } & {
-        marked?: string;
-    })[] | undefined;
-    filter?: string;
-    owners?: string[];
-    ownerFilter?: {
-        kind: "inline" | "owner" | "integrations";
-        name: string | undefined;
-    } | undefined;
-}, {
+declare const WorkspaceScriptPickerQuick: $$__sveltets_2_IsomorphicComponent<Props, {
     pickFlow: CustomEvent<any>;
     pickScript: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "owners" | "filteredWithOwner" | "ownerFilter">;
 type WorkspaceScriptPickerQuick = InstanceType<typeof WorkspaceScriptPickerQuick>;
 export default WorkspaceScriptPickerQuick;

package/package/components/flows/previousResults.d.ts

@@ -29,4 +29,9 @@ export declare function buildPrefixRegex(words: string[]): Array<{
     word: string;
 }>;
 export declare function filterNestedObject(obj: any, nestedKeys: string[]): any;
+/**
+ * Get the ID of the previous module within the same container (loop or branch)
+ * based on the same logic used in FlowModuleWrapper.svelte
+ */
+export declare function getPreviousModule(moduleId: string, flow: OpenFlow): FlowModule | undefined;
 export {};

package/package/components/flows/previousResults.js

@@ -48,7 +48,8 @@ function getFlowInput(parentModules, flowState, args, schema) {
         }
         else {
             let parentFlowInput = getFlowInput(parentModules, flowState, args, schema);
-            if (parentModule.value.type === 'forloopflow' || parentModule.value.type === 'whileloopflow') {
+            if (parentModule.value.type === 'forloopflow' ||
+                parentModule.value.type === 'whileloopflow') {
                 let parentFlowInputIter = { ...parentFlowInput };
                 if (parentFlowInputIter.hasOwnProperty('iter')) {
                     parentFlowInputIter['iter_parent'] = parentFlowInputIter['iter'];
@@ -139,8 +140,8 @@ export function getStepPropPicker(flowState, parentModule, previousModule, id, f
         return [
             id,
             module?.mock?.enabled
-                ? module.mock.return_value ?? {}
-                : flowState[id]?.previewResult ?? {}
+                ? (module.mock.return_value ?? {})
+                : (flowState[id]?.previewResult ?? {})
         ];
     })
         .reverse());
@@ -238,3 +239,47 @@ export function filterNestedObject(obj, nestedKeys) {
     }
     return {};
 }
+/**
+ * Get the ID of the previous module within the same container (loop or branch)
+ * based on the same logic used in FlowModuleWrapper.svelte
+ */
+export function getPreviousModule(moduleId, flow) {
+    function searchInModules(modules) {
+        for (let i = 0; i < modules.length; i++) {
+            const module = modules[i];
+            if (module.id === moduleId) {
+                // Found the module, return previous module ID if it exists
+                return i > 0 ? modules[i - 1] : undefined;
+            }
+            // Search in submodules based on module type
+            if (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow') {
+                const result = searchInModules(module.value.modules);
+                if (result !== null)
+                    return result;
+            }
+            else if (module.value.type === 'branchone') {
+                // Search in default branch
+                const defaultResult = searchInModules(module.value.default);
+                if (defaultResult !== null)
+                    return defaultResult;
+                // Search in each branch
+                for (const branch of module.value.branches) {
+                    const branchResult = searchInModules(branch.modules);
+                    if (branchResult !== null)
+                        return branchResult;
+                }
+            }
+            else if (module.value.type === 'branchall') {
+                // Search in each branch
+                for (const branch of module.value.branches) {
+                    const branchResult = searchInModules(branch.modules);
+                    if (branchResult !== null)
+                        return branchResult;
+                }
+            }
+        }
+        return null; // Continue searching (module not found in this branch)
+    }
+    const result = searchInModules(flow.value.modules);
+    return result === null ? undefined : result;
+}

package/package/components/flows/propPicker/InputPickerInner.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import { getContext, onMount } from 'svelte';
+import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
+import { twMerge } from 'tailwind-merge';
+import { DollarSign, Pencil, RefreshCw, SquareFunction } from 'lucide-svelte';
+let { inputTransform, id, onEditInput } = $props();
+const { flowStore, flowStateStore, testSteps, previewArgs } = getContext('FlowEditorContext') || {};
+onMount(() => {
+    testSteps?.updateStepArgs(id, $flowStateStore, flowStore?.val, previewArgs?.val);
+});
+const input = $derived(testSteps?.getStepArgs(id)?.value);
+</script>
+
+<div class="p-4 pr-6 h-full overflow-y-auto">
+	<ObjectViewer json={input} {inputTransform} {metaData} {editKey} />
+</div>
+
+{#snippet metaData(key: string)}
+	{#if inputTransform?.[key]}
+		<span
+			class={twMerge(
+				'inline-flex items-center h-4 border  px-1 rounded-[0.275rem] rounded-l-none border-l-0 gap-0.5',
+				'text-2xs'
+			)}
+			title={inputTransform[key].type === 'javascript' ? inputTransform[key].expr : 'Static'}
+		>
+			{#if inputTransform[key].type === 'javascript'}
+				<SquareFunction size={14} class="text-blue-500 -my-1 dark:text-blue-400" />
+			{:else if inputTransform[key].type === 'static'}
+				<DollarSign size={12} class="text-tertiary font-mono -my-1" />
+			{/if}
+			{#if testSteps?.isArgManuallySet(id, key)}
+				<button
+					onclick={() => {
+						testSteps?.evalArg(id, key, $flowStateStore, flowStore?.val, previewArgs?.val)
+					}}
+					title="Re-evaluate input"
+					class="-my-1 ml-0.5 hover:text-primary dark:hover:text-primary dark:text-gray-500 text-gray-300"
+				>
+					<RefreshCw size={12} />
+				</button>
+			{/if}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet editKey(key: string)}
+	<button
+		onclick={() => onEditInput?.(id, key)}
+		class="h-4 w-fit items-center text-gray-300 dark:text-gray-500 hover:text-primary dark:hover:text-primary px-1 rounded-[0.275rem] align-baseline"
+	>
+		<Pencil size={12} class="-my-1 inline-flex items-center" />
+	</button>
+{/snippet}

package/package/components/flows/propPicker/InputPickerInner.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    inputTransform: Record<string, any> | undefined;
+    id: string;
+    onEditInput?: (moduleId: string, key: string) => void;
+}
+declare const InputPickerInner: import("svelte").Component<Props, {}, "">;
+type InputPickerInner = ReturnType<typeof InputPickerInner>;
+export default InputPickerInner;