windmill/frontend/src/lib/components/InputTransformForm.svelte

<script lang="ts">
	import type { Schema } from '$lib/common'
	import type { InputCat } from '$lib/utils'
	import { getContext } from 'svelte'

	import ArgInput from './ArgInput.svelte'
	import FieldHeader from './FieldHeader.svelte'
	import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte'
	import type { PropPickerWrapperContext } from './flows/propPicker/PropPickerWrapper.svelte'
	import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils'
	import SimpleEditor from './SimpleEditor.svelte'
	import { Button, ToggleButton, ToggleButtonGroup } from './common'
	import { faCode } from '@fortawesome/free-solid-svg-icons'
	import type VariableEditor from './VariableEditor.svelte'
	import type ItemPicker from './ItemPicker.svelte'
	import type { InputTransform } from '$lib/gen'

	export let schema: Schema
	export let arg: InputTransform | any
	export let argName: string
	export let extraLib: string = 'missing extraLib'
	export let inputCheck: boolean = true
	export let previousModuleId: string | undefined
	export let pickForField: string | undefined = undefined
	export let variableEditor: VariableEditor | undefined = undefined
	export let itemPicker: ItemPicker | undefined = undefined

	export let monaco: SimpleEditor | undefined = undefined
	let argInput: ArgInput | undefined = undefined

	let inputCat: InputCat = 'object'
	let propertyType = getPropertyType(arg)

	function getPropertyType(arg: InputTransform | any): 'static' | 'javascript' {
		let type: 'static' | 'javascript' = arg?.type ?? 'static'
		if (type == 'javascript') {
			const newValue = codeToStaticTemplate(arg.expr)
			if (newValue) {
				type = 'static'
				arg.value = newValue
			}
		}
		return type
	}

	function setPropertyType(rawValue: string) {
		if (!arg) {
			return
		}

		if (isCodeInjection(rawValue)) {
			arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue}\``)
			arg.type = 'javascript'
			propertyType = 'static'
		} else {
			if (arg.type === 'javascript' && propertyType === 'static') {
				arg.type = 'static'
			}
			if (arg.type) {
				propertyType = arg.type
			}
		}
	}

	function isStaticTemplate(inputCat: InputCat) {
		return inputCat === 'string' || inputCat === 'sql'
	}

	function connectProperty(rawValue: string) {
		if (isStaticTemplate(inputCat)) {
			arg.value = `\$\{${rawValue}}`
			setPropertyType(arg.value)
		} else {
			arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue)
			arg.type = 'javascript'
			propertyType = 'javascript'
			monaco?.setCode(arg.expr)
		}
	}

	function onFocus() {
		if (isStaticTemplate(inputCat)) {
			focusProp(argName, 'append', (path) => {
				const toAppend = `\$\{${path}}`
				arg.value = `${arg.value ?? ''}${toAppend}`
				setPropertyType(arg.value)
				argInput?.focus()
				return false
			})
		} else {
			focusProp(argName, 'insert', (path) => {
				arg.expr = path
				arg.type = 'javascript'
				propertyType = 'javascript'
				monaco?.setCode(arg.expr)
				return true
			})
		}
	}

	const { focusProp, propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
</script>

{#if arg != undefined}
	<div class="flex flex-row justify-between gap-1 mb-1">
		<div class="flex items-center flex-wrap grow">
			<FieldHeader
				label={argName}
				format={schema.properties[argName].format}
				contentEncoding={schema.properties[argName].contentEncoding}
				required={schema.required.includes(argName)}
				type={schema.properties[argName].type}
				itemsType={schema.properties[argName].items}
			/>

			{#if isStaticTemplate(inputCat)}
				<span
					class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2 {propertyType ==
						'static' && arg.type === 'javascript'
						? 'visible'
						: 'invisible'}"
				>
					{'${...}'}
				</span>
			{/if}
		</div>
		<div class="flex flex-row-reverse gap-x-4 gap-y-1 flex-wrap">
			<div>
				<Button
					variant="contained"
					color="blue"
					size="xs"
					on:click={() => {
						focusProp(argName, 'connect', (path) => {
							connectProperty(path)
							return true
						})
					}}>Connect &rightarrow;</Button
				>
			</div>
			<div>
				<ToggleButtonGroup
					bind:selected={propertyType}
					on:selected={(e) => {
						const staticTemplate = isStaticTemplate(inputCat)
						if (e.detail === 'javascript') {
							if (arg.expr == undefined) {
								arg.expr = getDefaultExpr(
									argName,
									previousModuleId,
									staticTemplate
										? `\`${arg.value ?? ''}\``
										: arg.value
										? JSON.stringify(arg.value, null, 4)
										: ''
								)
							}

							arg.value = undefined
							propertyType = 'javascript'
							arg.type = 'javascript'
						} else {
							if (staticTemplate) {
								arg.value = codeToStaticTemplate(arg.expr)
								setPropertyType(arg.value)
							} else {
								arg.type = 'static'
								arg.value = undefined
								arg.expr = undefined
							}
							propertyType = 'static'
						}
					}}
				>
					{#if isStaticTemplate(inputCat)}
						<ToggleButton light position="left" value="static" size="xs">
							{'${} '}Templatable</ToggleButton
						>
					{:else}
						<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
					{/if}

					<ToggleButton
						light
						position="right"
						value="javascript"
						startIcon={{ icon: faCode }}
						size="xs"
					>
						Dynamic (JS)
					</ToggleButton>
				</ToggleButtonGroup>
			</div>
		</div>
	</div>
	<div class="max-w-xs" />

	<div
		class="relative {$propPickerConfig?.propName == argName
			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
			: ''}"
	>
		{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
			<span
				class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
			>
				Connect input &rightarrow;
			</span>
		{/if}
		{#if propertyType === undefined || propertyType == 'static'}
			<ArgInput
				noMargin
				compact
				bind:this={argInput}
				on:focus={onFocus}
				label={argName}
				bind:editor={monaco}
				bind:description={schema.properties[argName].description}
				bind:value={arg.value}
				type={schema.properties[argName].type}
				required={schema.required.includes(argName)}
				bind:pattern={schema.properties[argName].pattern}
				bind:valid={inputCheck}
				defaultValue={schema.properties[argName].default}
				bind:enum_={schema.properties[argName].enum}
				bind:format={schema.properties[argName].format}
				contentEncoding={schema.properties[argName].contentEncoding}
				bind:itemsType={schema.properties[argName].items}
				properties={schema.properties[argName].properties}
				displayHeader={false}
				bind:inputCat
				on:input={(e) => {
					if (isStaticTemplate(inputCat)) {
						setPropertyType(e.detail.rawValue)
					}
				}}
				{variableEditor}
				{itemPicker}
				bind:pickForField
			/>
		{:else if arg.expr != undefined}
			<div class="border rounded mt-2 border-gray-300">
				<SimpleEditor
					bind:this={monaco}
					bind:code={arg.expr}
					{extraLib}
					lang="javascript"
					shouldBindKey={false}
					on:focus={() => {
						focusProp(argName, 'insert', (path) => {
							monaco?.insertAtCursor(path)
							return false
						})
					}}
					autoHeight
				/>
			</div>
			<DynamicInputHelpBox />
			<div class="mb-2" />
		{:else}
			Not recognized input type {argName}
		{/if}
	</div>
	<div class="mb-6" />
{:else}
	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>
{/if}