windmill-components 1.623.2 → 1.655.0

package/package/components/propertyPicker/PropPicker.svelte

@@ -1,39 +1,31 @@
 <script lang="ts">import { ResourceService, VariableService } from '../../gen';
 import { workspaceStore } from '../../stores';
-import { getContext, onDestroy } from 'svelte';
+import { getContext, onDestroy, untrack } from 'svelte';
 import { Badge, Button } from '../common';
 import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
 import ClearableInput from '../common/clearableInput/ClearableInput.svelte';
 import { filterNestedObject } from '../flows/previousResults';
 import Scrollable from '../Scrollable.svelte';
-export let pickableProperties;
-export let displayContext = true;
-export let error = false;
-export let allowCopy = false;
-export let previousId = undefined;
-export let flow_env = undefined;
-export let result = undefined;
-export let extraResults = undefined;
-let variables = {};
-let resources = {};
-let displayVariable = false;
-let displayResources = false;
-let displayFlowEnv = false;
-let allResultsCollapsed = true;
+let { pickableProperties, displayContext = true, error = false, allowCopy = false, previousId = undefined, result = undefined, extraResults = undefined } = $props();
+let variables = $state({});
+let resources = $state({});
+let displayVariable = $state(false);
+let displayResources = $state(false);
+let allResultsCollapsed = $state(true);
 let collapsableInitialState;
-let filterActive = false;
 const EMPTY_STRING = '';
-let search = '';
-const { propPickerConfig, inputMatches } = getContext('PropPickerWrapper');
+let search = $state('');
+const { propPickerConfig, inputMatches, exprBeingEdited: propsBeingEdited } = getContext('PropPickerWrapper');
 const { pickablePropertiesFiltered } = getContext('PropPickerContext');
-$: $pickablePropertiesFiltered = pickableProperties;
-let flowInputsFiltered = pickableProperties.flow_input;
-let resultByIdFiltered = pickableProperties.priorIds;
-let flowEnvFiltered = pickableProperties.flow_env;
+$effect(() => {
+    $pickablePropertiesFiltered = pickableProperties;
+});
+let flowInputsFiltered = $state(untrack(() => pickableProperties).flow_input);
+let resultByIdFiltered = $state(untrack(() => pickableProperties).priorIds);
+let flowEnvFiltered = $state(untrack(() => pickableProperties).flow_env);
 let timeout;
 function onSearch(search) {
-    filterActive = false;
     if (timeout) {
         clearTimeout(timeout);
     }
@@ -52,11 +44,12 @@ function onSearch(search) {
                 : keepByKey(pickableProperties.flow_env, search);
     }, 50);
 }
-$: suggestedPropsFiltered =
-    $propPickerConfig && $propPickerConfig.propName
-        ? keepByKey(pickableProperties.priorIds, $propPickerConfig.propName ?? '')
-        : undefined;
-$: search != undefined && onSearch(search);
+let suggestedPropsFiltered = $derived($propPickerConfig && $propPickerConfig.propName
+    ? keepByKey(pickableProperties.priorIds, $propPickerConfig.propName ?? '')
+    : undefined);
+$effect(() => {
+    search != undefined && untrack(() => onSearch(search));
+});
 async function loadVariables() {
     variables = Object.fromEntries((await VariableService.listVariable({
         workspace: $workspaceStore ?? ''
@@ -67,9 +60,9 @@ async function loadResources() {
         workspace: $workspaceStore ?? ''
     })).map((resource) => [resource.path, resource.description ?? '']));
 }
-let filteringFlowInputsOrResult = '';
+let filteringFlowInputsOrResult = $state('');
 async function filterPickableProperties() {
-    if (!$propPickerConfig || !filterActive) {
+    if ($propsBeingEdited?.length == 0 || $propPickerConfig || !$inputMatches?.length) {
         if (search === EMPTY_STRING) {
             flowInputsFiltered = pickableProperties.flow_input;
             resultByIdFiltered = pickableProperties.priorIds;
@@ -85,7 +78,9 @@ async function filterPickableProperties() {
         resultByIdFiltered = {};
     }
     if (!$inputMatches?.some((match) => match.word === 'flow_env')) {
-        flowEnvFiltered = {};
+        if (search === EMPTY_STRING) {
+            flowEnvFiltered = pickableProperties.flow_env;
+        }
     }
     if ($inputMatches?.length == 1) {
         filteringFlowInputsOrResult = $inputMatches[0].value;
@@ -131,8 +126,7 @@ async function updateCollapsable() {
         collapsableInitialState = {
             allResultsCollapsed,
             displayVariable,
-            displayResources,
-            displayFlowEnv
+            displayResources
         };
     }
     if ($inputMatches[0].word === 'variable') {
@@ -145,10 +139,6 @@ async function updateCollapsable() {
         displayResources = true;
         return;
     }
-    if ($inputMatches[0].word === 'flow_env') {
-        displayFlowEnv = true;
-        return;
-    }
     if ($inputMatches[0].word === 'results') {
         allResultsCollapsed = false;
         return;
@@ -159,28 +149,18 @@ function resetCollapsable() {
         return;
     }
     ;
-    ({ allResultsCollapsed, displayVariable, displayResources, displayFlowEnv } =
-        collapsableInitialState);
+    ({ allResultsCollapsed, displayVariable, displayResources } = collapsableInitialState);
     collapsableInitialState = undefined;
 }
-async function updateFilterActive() {
-    const prev = filterActive;
-    filterActive = Boolean($inputMatches &&
-        $inputMatches?.length > 0 &&
-        $propPickerConfig?.insertionMode === 'insert' &&
-        search === EMPTY_STRING);
-    if (prev && !filterActive) {
-        flowInputsFiltered = pickableProperties.flow_input;
-        resultByIdFiltered = pickableProperties.priorIds;
-        flowEnvFiltered = pickableProperties.flow_env;
-    }
-}
 async function updateState() {
-    await updateFilterActive();
     await filterPickableProperties();
     await updateCollapsable();
 }
-$: (search, $inputMatches, $propPickerConfig, pickableProperties, updateState());
+$effect(() => {
+    ;
+    [search, $inputMatches, $propPickerConfig, pickableProperties, $propsBeingEdited];
+    untrack(() => updateState());
+});
 onDestroy(() => {
     clearTimeout(timeout);
 });
@@ -218,7 +198,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				/>
 			</div>
 		{/if}
-		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
+		{#if flowInputsFiltered && Object.keys(flowInputsFiltered ?? {}).length > 0}
 			<span class={categoryTitleClasses}>Flow Input</span>
 			<div class={categoryContentClasses}>
 				<ObjectViewer
@@ -230,6 +210,18 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				/>
 			</div>
 		{/if}
+		{#if flowEnvFiltered && Object.keys(flowEnvFiltered ?? {}).length > 0}
+			<span class={categoryTitleClasses}>Flow Env Variables</span>
+			<div class={categoryContentClasses}>
+				<ObjectViewer
+					{allowCopy}
+					pureViewer={!$propPickerConfig}
+					json={flowEnvFiltered}
+					prefix="flow_env"
+					on:select
+				/>
+			</div>
+		{/if}
 		{#if error}
 			<span class={categoryTitleClasses}>Error</span>
 			<div class={categoryContentClasses}>
@@ -291,7 +283,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 				</div>
 			{/if}
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
-				{#if !filterActive && suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
+				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
 					<span class={categoryTitleClasses}>Suggested Results</span>
 					<div class={categoryContentClasses}>
 						<ObjectViewer
@@ -322,7 +314,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 		{/if}
 
 		{#if displayContext}
-			{#if !filterActive || $inputMatches?.some((match) => match.word === 'variable')}
+			{#if $inputMatches?.some((match) => match.word === 'variable')}
 				<span class={categoryTitleClasses}>Variables</span>
 				<div class={categoryContentClasses}>
 					{#if displayVariable}
@@ -359,7 +351,7 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 					{/if}
 				</div>
 			{/if}
-			{#if !filterActive || $inputMatches?.some((match) => match.word === 'resource')}
+			{#if $inputMatches?.some((match) => match.word === 'resource')}
 				<span class={categoryTitleClasses}>Resources</span>
 				<div class={categoryContentClasses}>
 					{#if displayResources}
@@ -396,45 +388,6 @@ const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 					{/if}
 				</div>
 			{/if}
-			{#if flow_env && Object.keys(flow_env).length > 0 && (!filterActive || $inputMatches?.some((match) => match.word === 'flow_env'))}
-				<div class="overflow-y-auto pb-2">
-					<span class="font-normal text-xs text-secondary">Flow Env Variables:</span>
-
-					{#if displayFlowEnv}
-						<Button
-							color="light"
-							size="xs2"
-							variant="border"
-							on:click={() => {
-								displayFlowEnv = false
-							}}
-							wrapperClasses="inline-flex whitespace-nowrap w-fit"
-							btnClasses="font-mono h-4 text-2xs font-thin px-1 rounded-[0.275rem]">-</Button
-						>
-						<ObjectViewer
-							{allowCopy}
-							pureViewer={!$propPickerConfig}
-							rawKey={false}
-							json={flowEnvFiltered}
-							prefix="flow_env"
-							on:select
-						/>
-					{:else}
-						<Button
-							color="light"
-							size="xs2"
-							variant="border"
-							on:click={() => {
-								displayFlowEnv = true
-							}}
-							wrapperClasses="inline-flex whitespace-nowrap w-fit"
-							btnClasses="font-normal text-2xs rounded-[0.275rem] h-4 px-1"
-						>
-							{'{...}'}
-						</Button>
-					{/if}
-				</div>
-			{/if}
 		{/if}
 		<!-- </div> -->
 	</Scrollable>

package/package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { PickableProperties } from '../flows/previousResults';
+interface Props {
+    pickableProperties: PickableProperties;
+    displayContext?: boolean;
+    error?: boolean;
+    allowCopy?: boolean;
+    previousId?: string | undefined;
+    result?: any | undefined;
+    extraResults?: any;
+}
 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,19 +21,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PropPicker: $$__sveltets_2_IsomorphicComponent<{
-    pickableProperties: PickableProperties;
-    displayContext?: boolean;
-    error?: boolean;
-    allowCopy?: boolean;
-    previousId?: string | undefined;
-    flow_env?: Record<string, any> | undefined;
-    result?: any | undefined;
-    extraResults?: any;
-}, {
+declare const PropPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     select: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PropPicker = InstanceType<typeof PropPicker>;
 export default PropPicker;

package/package/components/propertyPicker/PropPickerResult.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">import ObjectViewer from './ObjectViewer.svelte';
-export let allowCopy = false;
-export let result;
-export let extraResults = undefined;
-export let flow_input = undefined;
-export let flow_env = undefined;
+let { allowCopy = false, result, extraResults = undefined, flow_input = undefined, flow_env = undefined } = $props();
 </script>
 
 <div class="w-full px-2">

package/package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -1,3 +1,10 @@
+interface Props {
+    allowCopy?: boolean;
+    result: any;
+    extraResults?: any;
+    flow_input?: any;
+    flow_env?: any;
+}
 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,16 +18,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PropPickerResult: $$__sveltets_2_IsomorphicComponent<{
-    allowCopy?: boolean;
-    result: any;
-    extraResults?: any;
-    flow_input?: any;
-    flow_env?: any;
-}, {
+declare const PropPickerResult: $$__sveltets_2_IsomorphicComponent<Props, {
     select: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PropPickerResult = InstanceType<typeof PropPickerResult>;
 export default PropPickerResult;

package/package/components/raw_apps/DefaultDatabaseSelector.svelte

@@ -22,44 +22,48 @@ $effect(() => {
 </script>
 
 <Popover>
-	<svelte:fragment slot="trigger">
-		<Button
-			title="Configure default datatable & schema"
-			unifiedSize="xs"
-			variant="subtle"
-			nonCaptureEvent
-			btnClasses="px-1"
-		>
-			<Settings size={12} />
-		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
-			<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
+	{#snippet trigger()}
+	
+			<Button
+				title="Configure default datatable & schema"
+				unifiedSize="xs"
+				variant="subtle"
+				nonCaptureEvent
+				btnClasses="px-1"
+			>
+				<Settings size={12} />
+			</Button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
+				<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
 
-			<p class="text-2xs text-tertiary leading-relaxed">
-				{description}
-			</p>
+				<p class="text-2xs text-tertiary leading-relaxed">
+					{description}
+				</p>
 
-			<div class="flex flex-col gap-1">
-				<span class="text-2xs text-tertiary">Database</span>
-				<Select
-					items={datatableItems}
-					bind:value={() => datatable, (v) => onChange?.(v, schema)}
-					placeholder="Select database"
-					size="sm"
-				/>
-			</div>
+				<div class="flex flex-col gap-1">
+					<span class="text-2xs text-tertiary">Database</span>
+					<Select
+						items={datatableItems}
+						bind:value={() => datatable, (v) => onChange?.(v, schema)}
+						placeholder="Select database"
+						size="sm"
+					/>
+				</div>
 
-			<div class="flex flex-col gap-1">
-				<span class="text-2xs text-tertiary">Schema</span>
-				<Select
-					items={schemaItems}
-					bind:value={() => schema ?? '', (v) => onChange?.(datatable, v || undefined)}
-					placeholder="public"
-					size="sm"
-				/>
+				<div class="flex flex-col gap-1">
+					<span class="text-2xs text-tertiary">Schema</span>
+					<Select
+						items={schemaItems}
+						bind:value={() => schema ?? '', (v) => onChange?.(datatable, v || undefined)}
+						placeholder="public"
+						size="sm"
+					/>
+				</div>
 			</div>
-		</div>
-	</svelte:fragment>
+		
+	{/snippet}
 </Popover>

package/package/components/raw_apps/FileTreeNode.svelte

@@ -16,11 +16,11 @@ import LessIcon from '../icons/LessIcon.svelte';
 import HtmlIcon from '../icons/HtmlIcon.svelte';
 import MarkdownIcon from '../icons/MarkdownIcon.svelte';
 import YamlIcon from '../icons/YamlIcon.svelte';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 let { node, onFileClick, onAddFile, onAddFolder, onRename, onDelete, onRequestEdit, onCancelEdit, selectedPath, pathToEdit, noEdit = false, level = 0 } = $props();
 let userExpanded = $state(null); // null = not set by user
 let isHovered = $state(false);
-let editValue = $state(node.name);
+let editValue = $state(untrack(() => node).name);
 let textInputElement = $state();
 let dropdownOpen = $state(false);
 const isSelected = $derived(selectedPath === node.path);
@@ -68,6 +68,7 @@ function handleInputKeydown(e) {
         finishEdit();
     }
     else if (e.key === 'Escape') {
+        e.stopPropagation();
         editValue = node.name; // Reset to original
         onCancelEdit?.();
     }

package/package/components/raw_apps/RawAppBackgroundRunner.svelte

@@ -13,14 +13,14 @@ let listener = async (event) => {
         let error = false;
         let result;
         try {
-            result = await waitJob(uuid);
+            result = await waitJob(uuid, workspace);
         }
         catch (e) {
             error = true;
             console.log('e', e);
             result = e;
         }
-        if (event.data.type == 'backend') {
+        if (event.data.type == 'backend' || event.data.type == 'waitJob') {
             respond({ result, error });
         }
         if (editor) {
@@ -97,6 +97,7 @@ let listener = async (event) => {
         const reqId = data.reqId;
         const params = new URLSearchParams();
         params.set('fast', 'true');
+        params.set('only_result', 'true');
         const sseUrl = `/api/w/${workspace}/jobs_u/getupdate_sse/${jobId}?${params.toString()}`;
         const eventSource = new EventSource(sseUrl);
         eventSource.onmessage = (sseEvent) => {

package/package/components/raw_apps/RawAppEditor.svelte

@@ -13,27 +13,17 @@ import DarkModeObserver from '../DarkModeObserver.svelte';
 import RawAppSidebar from './RawAppSidebar.svelte';
 import { isRunnableByName, isRunnableByPath } from '../apps/inputType';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
-import { onMount } from 'svelte';
+import { onMount, untrack } from 'svelte';
 import { rawAppLintStore } from './lintStore';
 import { dbSchemas } from '../../stores';
 import { runScriptAndPollResult } from '../jobs/utils';
 import { RawAppHistoryManager } from './RawAppHistoryManager.svelte';
 import { sendUserToast } from '../../utils';
 import { parseDataTableRef, formatDataTableRef, DEFAULT_DATA } from './dataTableRefUtils';
-let { initFiles, initRunnables, initData, newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
+let { files = $bindable({}), runnables = $bindable({}), data = $bindable(DEFAULT_DATA), newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
 export const version = undefined;
-let runnables = $state(initRunnables);
-// Data configuration with tables and creation policy
-let data = $state(initData ?? DEFAULT_DATA);
 // Convert to object format for child components
 let dataTableRefsObjects = $derived(data.tables.map(parseDataTableRef));
-let initRunnablesContent = Object.fromEntries(Object.entries(initRunnables).map(([key, runnable]) => {
-    if (isRunnableByName(runnable)) {
-        return [key, runnable?.inlineScript?.content ?? ''];
-    }
-    return [key, ''];
-}));
-let files = $state(initFiles);
 // Initialize history manager
 const historyManager = new RawAppHistoryManager({
     maxEntries: 50,
@@ -111,8 +101,21 @@ function convertToBackendRunnable(key, runnable) {
     return backendRunnable;
 }
 let iframeLoaded = $state(false); // @hmr:keep
+let suppressSetActiveDocument = false;
 function populateFiles() {
-    setFilesInIframe(initFiles);
+    if (files) {
+        // Suppress iframe's automatic setActiveDocument for a short window
+        // after sending files, to prevent it from resetting to App.tsx.
+        suppressSetActiveDocument = true;
+        setTimeout(() => { suppressSetActiveDocument = false; }, 500);
+        const doc = untrack(() => selectedDocument);
+        if (doc) {
+            setFilesAndSelectInIframe(files, doc);
+        }
+        else {
+            setFilesInIframe(files);
+        }
+    }
 }
 function setFilesInIframe(newFiles) {
     const files = Object.fromEntries(Object.entries(newFiles).filter(([path, _]) => !path.endsWith('/')));
@@ -487,7 +490,7 @@ let modules = $state({});
 // Normalize Windows-style path separators to Linux-style
 function normalizeFilePaths(filesObj) {
     if (!filesObj)
-        return filesObj;
+        return {};
     return Object.fromEntries(Object.entries(filesObj).map(([path, content]) => [path.replace(/\\/g, '/'), content]));
 }
 function listener(e) {
@@ -507,6 +510,8 @@ function listener(e) {
         modules = e.data.modules;
     }
     else if (e.data.type === 'setActiveDocument') {
+        if (suppressSetActiveDocument)
+            return;
         // Normalize Windows-style path separators to Linux-style
         selectedDocument = e.data.path?.replace(/\\/g, '/');
     }
@@ -561,7 +566,7 @@ $effect(() => {
     });
 });
 $effect(() => {
-    iframe && iframeLoaded && initFiles && populateFiles();
+    iframe && iframeLoaded && files && populateFiles();
 });
 $effect(() => {
     iframe && iframeLoaded && runnables && populateRunnables();
@@ -756,7 +761,6 @@ function handleKeydown(e) {
 						<RawAppInlineScriptsPanel
 							appPath={path}
 							{selectedRunnable}
-							{initRunnablesContent}
 							bind:runnables
 							onSelectionChange={(selection) => {
 								console.log('handle selection', selection)

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

@@ -3,10 +3,10 @@ import DiffDrawer from '../DiffDrawer.svelte';
 import { type Runnable } from './utils';
 import { type RawAppData } from './dataTableRefUtils';
 interface Props {
-    initFiles: Record<string, string>;
-    initRunnables: Record<string, Runnable>;
+    files?: Record<string, string>;
+    runnables?: Record<string, Runnable>;
     /** Data configuration including tables and creation policy */
-    initData: RawAppData | undefined;
+    data?: RawAppData;
     newApp: boolean;
     policy: Policy;
     summary?: string;
@@ -43,6 +43,6 @@ declare const RawAppEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     version: number | undefined;
-}, "summary" | "savedApp">;
+}, "summary" | "files" | "data" | "runnables" | "savedApp">;
 type RawAppEditor = InstanceType<typeof RawAppEditor>;
 export default RawAppEditor;