windmill-components 1.532.0 → 1.542.4

package/package/components/EditableSchemaForm.svelte

@@ -11,13 +11,13 @@ import { twMerge } from 'tailwind-merge';
 import FlowPropertyEditor from './schema/FlowPropertyEditor.svelte';
 import PropertyEditor from './schema/PropertyEditor.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
-import { createEventDispatcher, tick, untrack } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import Toggle from './Toggle.svelte';
-import { DynamicSelect, emptyString } from '../utils';
+import { DynamicInput, emptyString, generateRandomString, readFieldsRecursively } from '../utils';
 import Popover from './meltComponents/Popover.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import { deepEqual } from 'fast-equals';
@@ -27,23 +27,29 @@ import Editor from './Editor.svelte';
 import AddPropertyV2 from './schema/AddPropertyV2.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynCode = $bindable(), dynLang = $bindable(), showDynOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab, schemaFormClassName = undefined, onChange = undefined } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
     }
-    if (dynSelectLang === undefined) {
-        dynSelectLang = schema?.['x-windmill-dyn-select-lang'] || 'bun';
+    if (dynLang === undefined) {
+        dynLang = schema?.['x-windmill-dyn-select-lang'] || 'bun';
     }
-    if (dynSelectCode === undefined) {
-        dynSelectCode = schema?.['x-windmill-dyn-select-code'] || '';
+    if (dynCode === undefined) {
+        dynCode = schema?.['x-windmill-dyn-select-code'] || '';
     }
 });
 $effect(() => {
-    if (schema && dynSelectCode !== undefined && dynSelectLang !== undefined) {
-        if (dynSelectCode && dynSelectCode.trim()) {
-            schema['x-windmill-dyn-select-code'] = dynSelectCode.trim();
-            schema['x-windmill-dyn-select-lang'] = dynSelectLang;
+    if (onChange) {
+        readFieldsRecursively(args);
+        onChange(args ?? {});
+    }
+});
+$effect(() => {
+    if (schema && dynCode !== undefined && dynLang !== undefined) {
+        if (dynCode && dynCode.trim()) {
+            schema['x-windmill-dyn-select-code'] = dynCode.trim();
+            schema['x-windmill-dyn-select-lang'] = dynLang;
         }
         else {
             delete schema['x-windmill-dyn-select-code'];
@@ -64,9 +70,9 @@ export function setDefaults() {
 let pickForField;
 let itemPicker = $state(undefined);
 let variableEditor = $state(undefined);
-let keys = $state(Array.isArray(schema?.order)
+let keys = $state((Array.isArray(schema?.order)
     ? [...schema.order]
-    : (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {})));
+    : (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {}))).filter((x) => !hiddenArgs?.includes(x)));
 function alignOrderWithProperties(schema) {
     if (schema.order == undefined && !Array.isArray(schema.order)) {
         schema.order = [];
@@ -92,36 +98,34 @@ function alignOrderWithProperties(schema) {
     return hasChanged;
 }
 function onSchemaChange() {
-    let editSchema = false;
     if (alignOrderWithProperties(schema)) {
-        console.log('alignOrderWithProperties', JSON.stringify(schema, null, 2));
-        editSchema = true;
+        // console.log('alignOrderWithProperties', JSON.stringify(schema, null, 2))
     }
-    let lkeys = schema?.order ?? Object.keys(schema?.properties ?? {});
+    let lkeys = (schema?.order ?? Object.keys(schema?.properties ?? {})).filter((x) => !hiddenArgs?.includes(x));
     if (schema?.properties && !deepEqual(lkeys, keys)) {
         keys = [...lkeys];
-        editSchema = true;
         if (opened == undefined) {
             opened = keys[0];
         }
     }
-    if (editSchema) {
-        schema = schema;
-    }
 }
 let opened = $state(untrack(() => keys[0]));
 function computeSelected(property) {
     if (!opened)
         return '';
-    return property.type !== 'object'
-        ? property.type
-        : property.format === 'resource-s3_object'
-            ? 'S3'
-            : property.format?.startsWith('dynselect-')
-                ? 'dynselect'
-                : property.oneOf && property.oneOf.length >= 2
-                    ? 'oneOf'
-                    : 'object';
+    if (property.type !== 'object')
+        return property.type;
+    if (property.format === 'resource-s3_object')
+        return 'S3';
+    if (property.format?.startsWith('dynselect-'))
+        return 'dynselect';
+    if (property.format?.startsWith('dynmultiselect-'))
+        return 'dynmultiselect';
+    if (property.oneOf && property.oneOf.length >= 2)
+        return 'oneOf';
+    if (property.format?.startsWith('resource-'))
+        return 'resource';
+    return 'object';
 }
 export function openField(key) {
     opened = key;
@@ -148,25 +152,25 @@ function renameProperty(oldName, key) {
         el.value = oldName;
     }
     else {
+        let newSchema = $state.snapshot(schema);
         if (args) {
             args[newName] = args[oldName];
             delete args[oldName];
         }
-        schema.properties[newName] = schema.properties[oldName];
-        delete schema.properties[oldName];
-        if (schema.required?.includes(oldName)) {
-            schema.required = schema.required?.map((x) => (x === oldName ? newName : x));
+        newSchema.properties[newName] = newSchema.properties[oldName];
+        delete newSchema.properties[oldName];
+        if (newSchema.required?.includes(oldName)) {
+            newSchema.required = newSchema.required?.map((x) => (x === oldName ? newName : x));
         }
         // Replace the old name with the new name in the order array
-        if (schema.order) {
-            const index = schema.order.indexOf(oldName);
+        if (newSchema.order) {
+            const index = newSchema.order.indexOf(oldName);
             if (index !== -1) {
-                schema.order[index] = newName;
+                newSchema.order[index] = newName;
             }
         }
         opened = newName;
-        schema = $state.snapshot(schema);
-        dispatch('change', schema);
+        schema = newSchema;
         sendUserToast('Argument renamed');
     }
 }
@@ -216,37 +220,37 @@ $effect(() => {
 $effect(() => {
     !!editTab ? openEditTabFn() : closeEditTab();
 });
-let dynSelectFunctions = $derived(Object.entries(schema?.properties ?? {})
+let dynamicFunctions = $derived(Object.entries(schema?.properties ?? {})
     .filter(([_, property]) => {
     const props = property;
-    return (props.type === 'object' &&
-        (props.format?.startsWith('dynselect-') || props.format?.startsWith('dynselect_')));
+    return props.type === 'object' && DynamicInput.isDynInputFormat(props.format);
 })
     .map(([fieldName, _]) => fieldName.replace(/\s+/g, '_')));
-let typeOptions = [
+const DYNAMIC_OPTIONS = [
+    ['DynSelect', 'dynselect'],
+    ['DynMultiselect', 'dynmultiselect']
+];
+let typeOptions = $state([
     ['String', 'string'],
     ['Number', 'number'],
     ['Integer', 'integer'],
     ['Object', 'object'],
+    ['Resource', 'resource'],
     ['OneOf', 'oneOf'],
     ['Array', 'array'],
     ['Boolean', 'boolean'],
-    ['S3 Object', 'S3']
-];
-if (showDynSelectOpt) {
-    typeOptions.push(['DynSelect', 'dynselect']);
-}
-function initDynSelectFn(lang) {
-    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
-    return Object.entries(schema?.properties ?? {})
-        .map(([functionName]) => generateFn(functionName))
-        .join('');
+    ['S3', 'S3']
+]);
+function initDynFn(lang) {
+    const generateFn = DynamicInput.getGenerateTemplateFn(lang);
+    return dynamicFunctions.map((functionName) => generateFn(functionName)).join('');
 }
-function updateDynSelectCode(functionName, lang = 'bun') {
-    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
+function updateDynCode(functionName, lang = 'bun') {
+    const generateFn = DynamicInput.getGenerateTemplateFn(lang);
     const code = generateFn(functionName);
-    dynSelectCode = dynSelectCode ? dynSelectCode.concat(code) : code;
+    dynCode = dynCode ? dynCode.concat(code) : code;
 }
+let dndType = $state(generateRandomString());
 </script>
 
 <div class="w-full h-full">
@@ -283,15 +287,15 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 						class="min-h-0 overflow-y-auto grow rounded-md {runButton ? 'flex flex-col gap-2' : ''}"
 					>
 						<SchemaFormDnd
-							nestedClasses={'flex flex-col gap-1'}
+							{dndType}
+							nestedClasses={'flex flex-col gap-1 ' + (schemaFormClassName ?? '')}
 							bind:schema={
 								() => (previewSchema ? previewSchema : schema),
 								(newSchema) => {
 									schema = newSchema
-									tick().then(() => dispatch('change', schema))
 								}
 							}
-							{dndType}
+							{hiddenArgs}
 							{disableDnd}
 							{onlyMaskPassword}
 							bind:args
@@ -299,25 +303,27 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 								opened = e.detail
 							}}
 							on:reorder={(e) => {
+								let order = e.detail
+								let newProperties = {}
+								for (let key of order) {
+									newProperties[key] = schema.properties[key]
+								}
 								schema = {
 									...schema,
+									properties: newProperties,
 									order: e.detail
 								}
-								tick().then(() => dispatch('change', schema))
 							}}
 							helperScript={{
 								type: 'inline',
-								code: dynSelectCode!,
-								lang: dynSelectLang!
+								code: dynCode!,
+								lang: dynLang!
 							}}
 							prettifyHeader={isAppInput}
 							disabled={!!previewSchema}
 							{diff}
 							on:acceptChange
 							on:rejectChange
-							on:nestedChange={() => {
-								dispatch('change', schema)
-							}}
 							{shouldDispatchChanges}
 							bind:isValid
 							noVariablePicker={noVariablePicker || customUi?.disableVariablePicker === true}
@@ -325,56 +331,54 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 
 						{@render runButton?.()}
 
-						<div class="h-full">
-							{#if dynSelectFunctions.length > 0}
-								<Section
-									label="Dynamic select functions"
-									collapsable={true}
-									collapsed={false}
-									class="text-sm"
-								>
-									<div class="flex flex-col gap-2 h-full">
-										{#if dynSelectFunctions.length > 0}
-											<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
-												<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
-													Expected Functions for Dynamic Select Fields:
-												</div>
-												<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
-													{#each dynSelectFunctions as functionName}
-														<li class="font-mono bg-blue-100 dark:bg-blue-800/30 px-2 py-1 rounded">
-															{functionName}()
-														</li>
-													{/each}
-												</ul>
-											</div>
-										{/if}
-										<ToggleButtonGroup
-											bind:selected={dynSelectLang}
-											on:selected={({ detail }) => {
-												dynSelectCode = initDynSelectFn(detail)
-											}}
-										>
-											{#snippet children({ item })}
-												<ToggleButton value="bun" label="Typescript (Bun)" {item} />
-												<ToggleButton value="python3" label="Python" {item} />
-											{/snippet}
-										</ToggleButtonGroup>
-										{#key dynSelectLang}
-											<div class="border w-full h-full">
-												<Editor
-													bind:this={dynamicSelectEditor}
-													class="flex flex-1 grow h-80 w-full"
-													scriptLang={dynSelectLang}
-													useWebsockets={false}
-													automaticLayout
-													bind:code={dynSelectCode}
-												/>
+						{#if dynamicFunctions.length > 0}
+							<Section
+								label="Dynamic input functions"
+								collapsable={true}
+								collapsed={false}
+								class="text-sm"
+							>
+								<div class="flex flex-col gap-2 h-full">
+									{#if dynamicFunctions.length > 0}
+										<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
+											<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
+												Expected Functions for Dynamic Input Fields:
 											</div>
-										{/key}
-									</div>
-								</Section>
-							{/if}
-						</div>
+											<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
+												{#each dynamicFunctions as functionName}
+													<li class="font-mono bg-blue-100 dark:bg-blue-800/30 px-2 py-1 rounded">
+														{functionName}()
+													</li>
+												{/each}
+											</ul>
+										</div>
+									{/if}
+									<ToggleButtonGroup
+										bind:selected={dynLang}
+										on:selected={({ detail }) => {
+											dynCode = initDynFn(detail)
+										}}
+									>
+										{#snippet children({ item })}
+											<ToggleButton value="bun" label="Typescript (Bun)" {item} />
+											<ToggleButton value="python3" label="Python" {item} />
+										{/snippet}
+									</ToggleButtonGroup>
+									{#key dynLang}
+										<div class="border w-full h-full">
+											<Editor
+												bind:this={dynamicSelectEditor}
+												class="flex flex-1 grow h-80 w-full"
+												scriptLang={dynLang}
+												useWebsockets={false}
+												automaticLayout
+												bind:code={dynCode}
+											/>
+										</div>
+									{/key}
+								</div>
+							</Section>
+						{/if}
 					</div>
 				</div>
 			</Pane>
@@ -393,7 +397,12 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 					{#if jsonEnabled && customUi?.jsonOnly != true}
 						<div class="w-full p-3 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
-								<AddPropertyV2 bind:schema on:change>
+								<AddPropertyV2
+									bind:schema
+									onAddNew={(propertyName) => {
+										openField(propertyName)
+									}}
+								>
 									{#snippet trigger()}
 										<Button color="light" size="xs" iconOnly startIcon={{ icon: Plus }} />
 									{/snippet}
@@ -410,9 +419,13 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 									}}
 									lightMode
-									on:change={() => {
-										schemaString = JSON.stringify(schema, null, '\t')
-										editor?.setCode(schemaString)
+									on:change={(e) => {
+										if (e.detail) {
+											schemaString = JSON.stringify(schema, null, '\t')
+											editor?.setCode(schemaString)
+										} else {
+											schema = JSON.parse(schemaString)
+										}
 									}}
 								/>
 							</div>
@@ -508,7 +521,7 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 										</div>
 										{#if opened === argName}
 											<div class="p-4 border-t">
-												{#if !hiddenArgs.includes(argName) && Object.keys(schema?.properties ?? {}).includes(argName)}
+												{#if Object.keys(schema?.properties ?? {}).includes(argName)}
 													{#if typeof args == 'object' && schema?.properties[argName]}
 														<PropertyEditor
 															bind:description={schema.properties[argName].description}
@@ -529,10 +542,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 															bind:order={schema.properties[argName].order}
 															{isFlowInput}
 															{isAppInput}
-															on:change={() => {
-																schema = $state.snapshot(schema)
-																dispatch('change', schema)
-															}}
 														>
 															{#snippet typeeditor()}
 																{#if isFlowInput || isAppInput}
@@ -543,9 +552,11 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																			bind:selected={
 																				() => computeSelected(schema.properties[opened ?? '']),
 																				(v) => {
+																					const isResource = v == 'resource'
 																					const isS3 = v == 'S3'
 																					const isOneOf = v == 'oneOf'
 																					const isDynSelect = v == 'dynselect'
+																					const isDynMultiselect = v == 'dynmultiselect'
 																					const emptyProperty = {
 																						contentEncoding: undefined,
 																						enum_: undefined,
@@ -563,22 +574,29 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																						nullable: undefined,
 																						required: undefined
 																					}
-
 																					if (isS3) {
 																						schema.properties[argName] = {
 																							...emptyProperty,
 																							type: 'object',
 																							format: 'resource-s3_object'
 																						}
-																					} else if (isDynSelect) {
+																					} else if (isResource) {
+																						schema.properties[argName] = {
+																							...emptyProperty,
+																							type: 'object',
+																							format: 'resource-'
+																						}
+																					} else if (isDynSelect || isDynMultiselect) {
 																						const functionName = argName.replace(/\s+/g, '_')
 																						schema.properties[argName] = {
 																							...emptyProperty,
 																							type: 'object',
-																							format: 'dynselect-' + functionName
+																							format:
+																								(isDynSelect ? 'dynselect-' : 'dynmultiselect-') +
+																								functionName
 																						}
-																						updateDynSelectCode(argName, dynSelectLang)
-																						dynamicSelectEditor?.setCode(dynSelectCode || '')
+																						updateDynCode(argName, dynLang)
+																						dynamicSelectEditor?.setCode(dynCode || '')
 																					} else if (isOneOf) {
 																						schema.properties[argName] = {
 																							...emptyProperty,
@@ -621,18 +639,19 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																							type: v
 																						}
 																					}
+																					schema.properties = schema.properties
 																				}
 																			}
-																			on:selected={(e) => {
-																				schema = schema
-																				dispatch('change', schema)
-																				dispatch('schemaChange')
-																			}}
 																		>
 																			{#snippet children({ item })}
 																				{#each typeOptions as x}
 																					<ToggleButton value={x[1]} label={x[0]} {item} />
 																				{/each}
+																				{#if showDynOpt}
+																					{#each DYNAMIC_OPTIONS as x}
+																						<ToggleButton value={x[1]} label={x[0]} {item} />
+																					{/each}
+																				{/if}
 																			{/snippet}
 																		</ToggleButtonGroup>
 																	</Label>
@@ -641,6 +660,9 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 
 															{#if isFlowInput || isAppInput}
 																<FlowPropertyEditor
+																	onDrawerClose={() => {
+																		dndType = generateRandomString()
+																	}}
 																	bind:defaultValue={schema.properties[argName].default}
 																	{variableEditor}
 																	{itemPicker}
@@ -671,12 +693,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																				(x) => x !== argName
 																			)
 																		}
-																		dispatch('change', schema)
-																	}}
-																	on:schemaChange={(e) => {
-																		schema = $state.snapshot(schema)
-																		dispatch('change', schema)
-																		dispatch('schemaChange')
 																	}}
 																/>
 															{/if}
@@ -701,7 +717,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 									on:change={() => {
 										try {
 											schema = JSON.parse(schemaString)
-											dispatch('change', schema)
 											error = ''
 										} catch (err) {
 											error = err.message

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -16,7 +16,6 @@ interface Props {
     isAppInput?: boolean;
     displayWebhookWarning?: boolean;
     onlyMaskPassword?: boolean;
-    dndType?: string | undefined;
     editTab: 'inputEditor' | 'history' | 'savedInputs' | 'json' | 'captures' | 'firstStepInputs' | undefined;
     previewSchema?: Record<string, any> | undefined;
     editPanelInitialSize?: number | undefined;
@@ -28,14 +27,16 @@ interface Props {
     customUi?: EditableSchemaFormUi | undefined;
     pannelExtraButtonWidth?: number;
     class?: string;
-    dynSelectCode?: string | undefined;
-    dynSelectLang?: ScriptLang | undefined;
-    showDynSelectOpt?: boolean;
+    dynCode?: string | undefined;
+    dynLang?: ScriptLang | undefined;
+    showDynOpt?: boolean;
     addPropertyInEditorTab?: boolean;
     openEditTab?: import('svelte').Snippet;
     addProperty?: import('svelte').Snippet;
     runButton?: import('svelte').Snippet;
     extraTab?: import('svelte').Snippet;
+    schemaFormClassName?: string;
+    onChange?: (args: Record<string, any>) => void;
 }
 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> & {
@@ -53,9 +54,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const EditableSchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     acceptChange: CustomEvent<any>;
     rejectChange: CustomEvent<any>;
-    change: CustomEvent<any>;
     delete: CustomEvent<any>;
-    schemaChange: CustomEvent<any>;
     editPanelSizeChanged: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -64,6 +63,6 @@ declare const EditableSchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     openField: (key: string) => void;
     deleteField: (key: string) => void;
     updateJson: () => void;
-}, "args" | "schema" | "isValid" | "editPanelSize" | "dynSelectCode" | "dynSelectLang">;
+}, "args" | "schema" | "isValid" | "editPanelSize" | "dynCode" | "dynLang">;
 type EditableSchemaForm = InstanceType<typeof EditableSchemaForm>;
 export default EditableSchemaForm;