diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte index fdf354da96..c14a89da7b 100644 --- a/frontend/src/lib/components/InputTransformForm.svelte +++ b/frontend/src/lib/components/InputTransformForm.svelte @@ -38,6 +38,7 @@ import { twMerge } from 'tailwind-merge' import FlowPlugConnect from './FlowPlugConnect.svelte' import { deepEqual } from 'fast-equals' + import S3ArrayHelperButton from './S3ArrayHelperButton.svelte' interface Props { schema: Schema | { properties?: Record; required?: string[] } @@ -241,6 +242,51 @@ return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml' } + function appendPathToArrayExpr(currentExpr: string | undefined, path: string) { + 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: (path: string) => void) { + // 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: string) { // Extract path from variable('x') or resource('x') format const varMatch = variableMatch(rawValue) @@ -416,6 +462,10 @@ let connecting = $derived( $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect' ) + let shouldShowS3ArrayHelper = $derived( + inputCat === 'list' && + ['s3object', 's3_object'].includes(schema?.properties?.[argName]?.items?.resourceType) + ) {#if arg != undefined && !hidden} @@ -492,6 +542,7 @@ on:selected={(e) => { if (e.detail == propertyType) return const staticTemplate = isStaticTemplate(inputCat) + if (e.detail === 'javascript') { if (arg.expr == undefined) { arg.expr = getDefaultExpr( @@ -683,6 +734,14 @@ bind:title={schema.properties[argName].title} bind:placeholder={schema.properties[argName].placeholder} /> + + {#if shouldShowS3ArrayHelper} + + switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))} + /> + {/if} {:else if arg.expr != undefined}
{/if} + + {#if shouldShowS3ArrayHelper} + + focusProp?.(argName, 'connect', (path) => { + appendPathToArrayExpr(arg.expr, path) + return true + })} + /> + {/if} +
{:else} Not recognized input type {argName} ({arg.expr}, {propertyType}) diff --git a/frontend/src/lib/components/S3ArrayHelperButton.svelte b/frontend/src/lib/components/S3ArrayHelperButton.svelte new file mode 100644 index 0000000000..2ea6450602 --- /dev/null +++ b/frontend/src/lib/components/S3ArrayHelperButton.svelte @@ -0,0 +1,20 @@ + + +{#if !connecting} +
+ +
+{/if}