windmill-components 1.542.4 → 1.550.0

package/package/components/InputTransformForm.svelte

@@ -8,6 +8,7 @@
 </script>
 
 <script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
+import { computeShow } from '../utils';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
@@ -27,11 +28,13 @@ import StepInputGen from './copilot/StepInputGen.svelte';
 import { twMerge } from 'tailwind-merge';
 import FlowPlugConnect from './FlowPlugConnect.svelte';
 import { deepEqual } from 'fast-equals';
-let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined) } = $props();
+import S3ArrayHelperButton from './S3ArrayHelperButton.svelte';
+let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined), otherArgs = {}, helperScript = undefined } = $props();
 let monaco = $state(undefined);
 let monacoTemplate = $state(undefined);
 let argInput = $state(undefined);
 let focusedPrev = false;
+let hidden = $state(false);
 const variableMatch = (value) => value.match(/^variable\('([^']+)'\)$/);
 const resourceMatch = (value) => value.match(/^resource\('([^']+)'\)$/);
 const dispatch = createEventDispatcher();
@@ -144,6 +147,46 @@ function handleKeyUp(e) {
 function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
+function appendPathToArrayExpr(currentExpr, path) {
+    const trimmedExpr = currentExpr?.trim() || '';
+    let newExpr = trimmedExpr;
+    if (trimmedExpr.startsWith('[') && trimmedExpr.endsWith(']')) {
+        // Parse existing array and append new item
+        const innerContent = trimmedExpr.slice(1, -1).trim();
+        if (innerContent) {
+            newExpr = `[${innerContent}, ${path}]`;
+        }
+        else {
+            newExpr = `[${path}]`;
+        }
+    }
+    else {
+        // Create new array with single item
+        newExpr = `[${path}]`;
+    }
+    arg.expr = newExpr;
+    arg.type = 'javascript';
+    // Update Monaco editor after setting the expression
+    tick().then(() => {
+        monaco?.setCode(newExpr);
+    });
+    // Dispatch change
+    dispatch('change', { argName, arg });
+}
+async function switchToJsAndConnect(onPath) {
+    // Switch to JavaScript mode
+    propertyType = 'javascript';
+    arg.type = 'javascript';
+    arg.expr = arg.expr || '[]';
+    arg.value = undefined;
+    // Wait for the component to re-render and Monaco to be available
+    await tick();
+    // Activate connect mode
+    focusProp?.(argName, 'connect', (path) => {
+        onPath(path);
+        return true;
+    });
+}
 function connectProperty(rawValue) {
     // Extract path from variable('x') or resource('x') format
     const varMatch = variableMatch(rawValue);
@@ -167,6 +210,41 @@ function connectProperty(rawValue) {
         monaco?.setCode(arg.expr);
     }
 }
+function handleFieldVisibility(schema, arg, otherArgs) {
+    const schemaProperty = schema?.properties?.[argName];
+    if (schemaProperty?.showExpr) {
+        // Build args object with current field value and other context
+        const currentValue = propertyType === 'static' ? arg?.value : arg?.expr;
+        // Convert otherArgs from InputTransform objects to their actual values
+        const contextArgs = {
+            [argName]: currentValue
+        };
+        // Extract values from InputTransform objects in otherArgs
+        Object.keys(otherArgs ?? {}).forEach((key) => {
+            const otherArg = otherArgs[key];
+            const otherArgValue = otherArg.type === 'static' ? otherArg.value : otherArg.expr;
+            contextArgs[key] = otherArgValue;
+        });
+        const shouldShow = computeShow(argName, schemaProperty.showExpr, contextArgs);
+        if (shouldShow) {
+            hidden = false;
+        }
+        else if (!hidden) {
+            hidden = true;
+            // Clear the arg value when hidden (following SchemaForm pattern)
+            if (arg) {
+                arg.value = undefined;
+                arg.expr = undefined;
+            }
+            // Make sure validation passes when hidden
+            inputCheck = true;
+        }
+    }
+    else {
+        // No showExpr, always show
+        hidden = false;
+    }
+}
 function onFocus() {
     focused = true;
     if (isStaticTemplate(inputCat)) {
@@ -257,10 +335,19 @@ $effect(() => {
 $effect(() => {
     schema?.properties?.[argName]?.default && untrack(() => setDefaultCode());
 });
+$effect.pre(() => {
+    // Monitor changes that affect field visibility
+    JSON.stringify(schema);
+    JSON.stringify(arg);
+    JSON.stringify(otherArgs);
+    untrack(() => handleFieldVisibility(schema, arg, otherArgs));
+});
 let connecting = $derived($propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect');
+let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
+    ['s3object', 's3_object'].includes(schema?.properties?.[argName]?.items?.resourceType));
 </script>
 
-{#if arg != undefined}
+{#if arg != undefined && !hidden}
 	<div
 		class={twMerge(
 			'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
@@ -334,6 +421,7 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 							on:selected={(e) => {
 								if (e.detail == propertyType) return
 								const staticTemplate = isStaticTemplate(inputCat)
+
 								if (e.detail === 'javascript') {
 									if (arg.expr == undefined) {
 										arg.expr = getDefaultExpr(
@@ -411,6 +499,7 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 									</Button>
 								{:else}
 									<ToggleButton
+										disabled={inputCat === 'dynamic'}
 										small
 										light
 										tooltip="JavaScript expression ('flow_input' or 'results')."
@@ -423,7 +512,7 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 						</ToggleButtonGroup>
 					</div>
 
-					{#if propPickerWrapperContext}
+					{#if propPickerWrapperContext && inputCat !== 'dynamic'}
 						<FlowPlugConnect
 							id="flow-editor-plug"
 							{connecting}
@@ -524,7 +613,22 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 							nullable={schema.properties[argName].nullable}
 							bind:title={schema.properties[argName].title}
 							bind:placeholder={schema.properties[argName].placeholder}
+							{helperScript}
+							otherArgs={Object.fromEntries(
+								Object.entries(otherArgs).map(([key, transform]) => [
+									key,
+									transform?.type === 'static' ? transform.value : transform?.expr
+								])
+							)}
 						/>
+
+						{#if shouldShowS3ArrayHelper}
+							<S3ArrayHelperButton
+								{connecting}
+								onClick={() =>
+									switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
+							/>
+						{/if}
 					{:else if arg.expr != undefined}
 						<div class="border mt-2">
 							<SimpleEditor
@@ -554,6 +658,18 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 						{#if !hideHelpButton}
 							<DynamicInputHelpBox />
 						{/if}
+
+						{#if shouldShowS3ArrayHelper}
+							<S3ArrayHelperButton
+								{connecting}
+								onClick={() =>
+									focusProp?.(argName, 'connect', (path) => {
+										appendPathToArrayExpr(arg.expr, path)
+										return true
+									})}
+							/>
+						{/if}
+
 						<div class="mb-2"></div>
 					{:else}
 						Not recognized input type {argName} ({arg.expr}, {propertyType})

package/package/components/InputTransformForm.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Schema } from '../common';
+import type { DynamicInput as DynamicInputTypes } from '../utils';
 import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type ItemPicker from './ItemPicker.svelte';
@@ -27,6 +28,8 @@ interface Props {
     hideHelpButton?: boolean;
     class?: string;
     editor?: SimpleEditor | undefined;
+    otherArgs?: Record<string, InputTransform>;
+    helperScript?: DynamicInputTypes.HelperScript | 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> & {

package/package/components/InputTransformSchemaForm.svelte

@@ -8,7 +8,7 @@ import InputTransformForm from './InputTransformForm.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import { Plus } from 'lucide-svelte';
-let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '' } = $props();
+let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '', helperScript = undefined } = $props();
 let inputCheck = $state({});
 $effect(() => {
     isValid = allTrue(inputCheck) ?? false;
@@ -80,6 +80,10 @@ $effect(() => {
 						{noDynamicToggle}
 						{pickableProperties}
 						{enableAi}
+						{helperScript}
+						otherArgs={Object.fromEntries(
+							Object.entries(args ?? {}).filter(([key]) => key !== argName)
+						)}
 					/>
 				</div>
 			{/if}

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Schema } from '../common';
 import { type InputTransform } from '../gen';
+import { type DynamicInput as DynamicInputTypes } from '../utils';
 import type { PickableProperties } from './flows/previousResults';
 interface Props {
     schema: Schema | {
@@ -14,6 +15,7 @@ interface Props {
     pickableProperties?: PickableProperties | undefined;
     enableAi?: boolean;
     class?: string;
+    helperScript?: DynamicInputTypes.HelperScript;
 }
 declare const InputTransformSchemaForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, InputTransform | any>) => void;

package/package/components/InstanceSetting.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { isCloudHosted } from '../cloud';
 import { enterpriseLicense, isCriticalAlertsUIOpen } from '../stores';
-import { AlertCircle, AlertTriangle, BadgeCheck, BadgeX, Info, Plus, RefreshCcw, Slack, X } from 'lucide-svelte';
+import { AlertCircle, AlertTriangle, BadgeCheck, BadgeX, Info, Plus, Slack, X } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
 import { sendUserToast } from '../toast';
 import ConfirmButton from './ConfirmButton.svelte';
-import { ConfigService, IndexSearchService, SettingService, TeamsService } from '../gen';
+import { ConfigService, IndexSearchService, SettingService } from '../gen';
 import { Button, SecondsInput, Skeleton } from './common';
 import Password from './Password.svelte';
 import { classNames } from '../utils';
@@ -28,7 +28,6 @@ if ((setting.fieldType == 'select' || setting.fieldType == 'select_python') &&
     $values[setting.key] = 'default';
 }
 let latestKeyRenewalAttempt = $state(null);
-let isFetching = $state(false);
 function showSetting(setting, values) {
     if (setting == 'dev_instance') {
         if (values['license_key'] == undefined) {
@@ -120,29 +119,16 @@ async function fetch_available_python_versions() {
 if (setting.fieldType == 'select_python') {
     fetch_available_python_versions();
 }
-async function fetchTeams() {
-    if (isFetching)
-        return;
-    isFetching = true;
-    try {
-        $values['teams'] = await TeamsService.syncTeams();
-    }
-    catch (error) {
-        console.error('Error fetching teams:', error);
-    }
-    finally {
-        isFetching = false;
-    }
-}
 function handleTeamChange(teamItem, i) {
-    const team = (teamItem && $values['teams'].find((team) => team.team_id === teamItem.team_id)) || null;
     $values['critical_error_channels'][i] = {
-        teams_channel: {
-            team_id: team?.team_id,
-            team_name: team?.team_name,
-            channel_id: team?.channels[0]?.channel_id,
-            channel_name: team?.channels[0]?.channel_name
-        }
+        teams_channel: teamItem
+            ? {
+                team_id: teamItem.team_id,
+                team_name: teamItem.team_name,
+                channel_id: undefined, // Will be set when channel is selected
+                channel_name: undefined
+            }
+            : undefined
     };
 }
 function handleChannelChange(channel, i) {
@@ -333,7 +319,7 @@ function handleChannelChange(channel, i) {
 						<Password
 							small
 							placeholder={setting.placeholder}
-							on:keydown={() => {
+							onKeyDown={() => {
 								licenseKeyChanged = true
 							}}
 							bind:password={$values[setting.key]}
@@ -501,9 +487,6 @@ function handleChannelChange(channel, i) {
 														[e.target['value']]: ''
 													}
 												}
-												if (e.target?.['value'] === 'teams_channel') {
-													fetchTeams()
-												}
 											}}
 											value={(() => {
 												if (!v) return 'email'
@@ -535,8 +518,6 @@ function handleChannelChange(channel, i) {
 													containerClass="w-44"
 													minWidth="140px"
 													showRefreshButton={false}
-													placeholder="Select team"
-													teams={$values['teams']}
 													bind:selectedTeam={
 														() =>
 															$values['critical_error_channels'][i]?.teams_channel
@@ -555,12 +536,8 @@ function handleChannelChange(channel, i) {
 												{#if $values['critical_error_channels'][i]?.teams_channel?.team_id}
 													<ChannelSelector
 														containerClass=""
-														placeholder="Select channel"
-														channels={$values['teams'].find(
-															(team) =>
-																team.team_id ===
-																$values['critical_error_channels'][i]?.teams_channel?.team_id
-														)?.channels ?? []}
+														placeholder="Search channels"
+														teamId={$values['critical_error_channels'][i]?.teams_channel?.team_id}
 														bind:selectedChannel={
 															() =>
 																$values['critical_error_channels'][i]?.teams_channel?.channel_id
@@ -575,13 +552,10 @@ function handleChannelChange(channel, i) {
 																	: undefined,
 															(channel) => handleChannelChange(channel, i)
 														}
+														onError={(e) =>
+															sendUserToast('Failed to load channels: ' + e.message, true)}
 													/>
 												{/if}
-												<div>
-													<button onclick={fetchTeams} class="flex items-center gap-1 mt-2">
-														<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
-													</button>
-												</div>
 											</div>
 										{:else}
 											<input
@@ -624,7 +598,8 @@ function handleChannelChange(channel, i) {
 								if ($values[setting.key] == undefined || !Array.isArray($values[setting.key])) {
 									$values[setting.key] = []
 								}
-								$values[setting.key] = $values[setting.key].concat('')
+								// Start with a typed default to avoid invalid primitives in the array
+								$values[setting.key] = $values[setting.key].concat({ email: '' })
 							}}
 							id="arg-input-add-item"
 							startIcon={{ icon: Plus }}

package/package/components/InstanceSettings.svelte

@@ -62,24 +62,6 @@ async function loadSettings() {
     if (nvalues['critical_error_channels'] == undefined) {
         nvalues['critical_error_channels'] = [];
     }
-    else {
-        let teams = (await SettingService.getGlobal({ key: 'teams' })) ?? [];
-        nvalues['teams'] = teams;
-        nvalues['critical_error_channels'] = nvalues['critical_error_channels'].map((el) => {
-            if (el.teams_channel) {
-                const team = teams.find((team) => team.team_name === el.teams_channel.team_name) || null;
-                return {
-                    teams_channel: {
-                        team_id: team?.team_id,
-                        team_name: team?.team_name,
-                        channel_id: team?.channels.find((channel) => channel.channel_id === el.teams_channel.channel_id)?.channel_id,
-                        channel_name: team?.channels.find((channel) => channel.channel_id === el.teams_channel.channel_id)?.channel_name
-                    }
-                };
-            }
-            return el;
-        });
-    }
     $values = nvalues;
     loading = false;
     // populate snowflake account identifier from db
@@ -94,12 +76,21 @@ export async function saveSettings() {
             snowflakeAccountIdentifier) {
         setupSnowflakeUrls();
     }
-    // Remove empty or invalid teams_channel entries
+    // Remove empty or invalid entries for critical error channels
     $values.critical_error_channels = $values.critical_error_channels.filter((entry) => {
-        if (entry && typeof entry == 'object' && 'teams_channel' in entry) {
+        if (!entry || typeof entry !== 'object')
+            return false;
+        if ('teams_channel' in entry) {
             return isValidTeamsChannel(entry.teams_channel);
         }
-        return true;
+        if ('slack_channel' in entry) {
+            return (typeof entry.slack_channel === 'string' && entry.slack_channel.trim() !== '');
+        }
+        if ('email' in entry) {
+            return typeof entry.email === 'string' && entry.email.trim() !== '';
+        }
+        // Unknown shape
+        return false;
     });
     let shouldReloadPage = false;
     if ($values) {

package/package/components/JobArgs.svelte

@@ -11,13 +11,10 @@ import Row from './table/Row.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import { deepEqual } from 'fast-equals';
 import { isWindmillTooBigObject } from './job_args';
-export let id = undefined;
-export let args;
-export let argLabel = undefined;
-export let workspace = undefined;
-let jsonViewer;
-let runLocally;
-let jsonStr = '';
+let { id = undefined, args, argLabel = undefined, workspace = undefined } = $props();
+let jsonViewer = $state();
+let runLocally = $state();
+let jsonStr = $state('');
 function pythonCode() {
     return `
 if __name__ == "__main__":
@@ -47,9 +44,9 @@ ${Object.entries(args)
 }
 </script>
 
-{#if args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
+{#if args && typeof args === 'object' && deepEqual( Object.keys(args ?? {}), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
 	Preprocessor args are discarded
-{:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
+{:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args ?? {}), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
 	The args are too big in size to be able to fetch alongside job. Please <a
 		href="/api/w/{workspace}/jobs_u/get_args/{id}"
 		target="_blank">download the JSON file to view them</a
@@ -62,26 +59,28 @@ ${Object.entries(args)
 					<Cell head first>{argLabel ?? 'Arg'}</Cell>
 					<Cell head last>Value</Cell>
 				</tr>
-				<svelte:fragment slot="headerAction">
+				{#snippet headerAction()}
 					<button
-						on:click={() => {
+						onclick={() => {
 							jsonStr = JSON.stringify(args, null, 4)
-							jsonViewer.openDrawer()
+							jsonViewer?.openDrawer()
 						}}
 					>
 						<Expand size={18} />
 					</button>
-				</svelte:fragment>
+				{/snippet}
 			</Head>
 
 			<tbody class="divide-y w-full">
-				{#if args && Object.keys(args).length > 0}
-					{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
+				{#if args && typeof args === 'object' && Object.keys(args ?? {}).length > 0}
+					{#each Object.entries(args ?? {}).sort( (a, b) => a?.[0]?.localeCompare(b?.[0]) ) as [arg, value]}
 						<Row>
 							<Cell first>{arg}</Cell>
 							<Cell><ArgInfo {value} /></Cell>
 						</Row>
 					{/each}
+				{:else if args && typeof args !== 'object'}
+					<Row><Cell>Argument is not an object (type: {typeof args})</Cell></Row>
 				{:else if args}
 					<Row><Cell>No arguments</Cell></Row>
 				{:else}
@@ -116,7 +115,7 @@ ${Object.entries(args)
 				Download
 			</Button>
 			<Button
-				on:click={runLocally.openDrawer}
+				on:click={() => runLocally?.openDrawer()}
 				color="light"
 				size="xs"
 				startIcon={{ icon: ChevronRightSquare }}

package/package/components/JobArgs.svelte.d.ts

@@ -1,23 +1,9 @@
-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 JobArgs: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id?: string | undefined;
     args: any;
     argLabel?: string | undefined;
     workspace?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type JobArgs = InstanceType<typeof JobArgs>;
+}
+declare const JobArgs: import("svelte").Component<Props, {}, "">;
+type JobArgs = ReturnType<typeof JobArgs>;
 export default JobArgs;