diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte index ad1b3c9c66..05689e7ad0 100644 --- a/frontend/src/lib/components/ArgInput.svelte +++ b/frontend/src/lib/components/ArgInput.svelte @@ -65,6 +65,7 @@ } $: { + error = '' if (inputCat === 'object') { evalValueToRaw() validateInput(pattern, value) diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte index fcdd2b742c..c7caed856b 100644 --- a/frontend/src/lib/components/EditorBar.svelte +++ b/frontend/src/lib/components/EditorBar.svelte @@ -10,6 +10,7 @@ faCode, faCube, faDollarSign, + faEye, faRotate, faRotateLeft, faWallet @@ -232,7 +233,7 @@ startIcon={{ icon: faDollarSign }} {iconOnly} > - +Contextual Variable + +Context Var
@@ -245,7 +246,7 @@ startIcon={{ icon: faWallet }} {iconOnly} > - +Variable + +Var
@@ -270,9 +271,9 @@ color="light" on:click={scriptPicker.openDrawer} {iconOnly} - startIcon={{ icon: faCode }} + startIcon={{ icon: faEye }} > - View Script + Script
@@ -286,7 +287,7 @@ {iconOnly} startIcon={{ icon: faRotateLeft }} > - Reset content + Reset @@ -300,7 +301,7 @@ startIcon={{ icon: faRotate }} > {#if !iconOnly} - Reload assistants + Assistant {/if} {#if lang == 'deno'} diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte index 842f668902..f63d46047d 100644 --- a/frontend/src/lib/components/FieldHeader.svelte +++ b/frontend/src/lib/components/FieldHeader.svelte @@ -11,10 +11,12 @@ | undefined = undefined -
+
{label} + + ({type ?? 'any'}{contentEncoding && contentEncoding != '' ? `, encoding: ${contentEncoding}` @@ -22,5 +24,4 @@ ? ` of ${itemsType?.type}s` : ''}) -
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte index 2cd955aa80..06149e2c12 100644 --- a/frontend/src/lib/components/InputTransformForm.svelte +++ b/frontend/src/lib/components/InputTransformForm.svelte @@ -10,17 +10,15 @@ import type { PropPickerWrapperContext } from './flows/propPicker/PropPickerWrapper.svelte' import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils' import SimpleEditor from './SimpleEditor.svelte' - import Toggle from './Toggle.svelte' - import { Button } from './common' - import Icon from 'svelte-awesome' - import { faChain } from '@fortawesome/free-solid-svg-icons' + import { Button, ToggleButton, ToggleButtonGroup } from './common' + import { faCode } from '@fortawesome/free-solid-svg-icons' 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 importPath: string | undefined = undefined + export let previousModuleId: string | undefined export let monaco: SimpleEditor | undefined = undefined let argInput: ArgInput | undefined = undefined @@ -44,7 +42,7 @@ } if (isCodeInjection(rawValue)) { - arg.expr = getDefaultExpr(importPath, argName, `\`${rawValue}\``) + arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue}\``) arg.type = 'javascript' propertyType = 'static' } else { @@ -66,14 +64,12 @@ arg.value = `\$\{${rawValue}}` setPropertyType(arg.value) } else { - arg.expr = getDefaultExpr(importPath, undefined, rawValue) + arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue) arg.type = 'javascript' propertyType = 'javascript' } } - $: checked = propertyType == 'javascript' - function onFocus() { if (isStaticTemplate(inputCat)) { focusProp(argName, 'append', (path) => { @@ -96,68 +92,85 @@ {#if arg != undefined} -
-
- +
+
+
+ - {#if !checked && arg.type === 'javascript'} - - {'${...}'} - - {/if} + {#if propertyType == 'static' && arg.type === 'javascript'} + + {'${...}'} + + {/if} +
+
+ { + const staticTemplate = isStaticTemplate(inputCat) + if (e.detail === 'javascript') { + arg.expr = getDefaultExpr( + argName, + previousModuleId, + staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value + ) + + arg.value = undefined + propertyType = 'javascript' + arg.type = 'javascript' + } else { + arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined + arg.expr = undefined + propertyType = 'static' + if (!isStaticTemplate) { + arg.type = 'static' + } else { + setPropertyType(arg.value) + } + } + }} + > + {#if isStaticTemplate(inputCat)} + Template + {:else} + Static + {/if} + + + Dynamic (JS) + + + +
- { - const type = e.detail ? 'javascript' : 'static' - const staticTemplate = isStaticTemplate(inputCat) - if (type === 'javascript') { - arg.expr = getDefaultExpr( - importPath, - argName, - staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value - ) - - arg.value = undefined - propertyType = 'javascript' - } else { - arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined - - arg.expr = undefined - propertyType = 'static' - } - - arg.type = type - }} - /> - - +
+ +
- {#if propertyType === undefined || !checked} + {#if propertyType === undefined || propertyType == 'static'} - {:else if checked} - {#if arg.expr != undefined} -
- { - focusProp(argName, 'insert', (path) => { - monaco?.insertAtCursor(path) - return false - }) - }} - /> -
- -
- {/if} + {:else if arg.expr != undefined} +
+ { + focusProp(argName, 'insert', (path) => { + monaco?.insertAtCursor(path) + return false + }) + }} + autoHeight + /> +
+ +
{:else} -

Not recognized arg type {arg.type}

+ Not recognized input type {argName} {/if} {:else}

Arg at {argName} is undefined

diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte index e158da22fa..5b67ee7360 100644 --- a/frontend/src/lib/components/SchemaForm.svelte +++ b/frontend/src/lib/components/SchemaForm.svelte @@ -14,10 +14,8 @@ export let editableSchema = false export let isValid: boolean = true export let extraLib: string = 'missing extraLib' - export let importPath: string | undefined = undefined export let autofocus = false - export let animateNew = false - + export let previousModuleId: string | undefined = undefined let clazz: string = '' export { clazz as class } @@ -46,12 +44,12 @@
{#if inputTransform} {:else} -
Preview - To recompute the input schema press Ctrl/Cmd + S or move the focus - outside of the text editor -
+
Preview
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte index d5ebb4e86d..ebcce55f87 100644 --- a/frontend/src/lib/components/SimpleEditor.svelte +++ b/frontend/src/lib/components/SimpleEditor.svelte @@ -38,8 +38,8 @@ export let formatAction: (() => void) | undefined = undefined export let automaticLayout = true export let extraLib: string = '' - export let extraLibPath: string = '' export let shouldBindKey: boolean = true + export let autoHeight = false const dispatch = createEventDispatcher() @@ -96,6 +96,7 @@ } } + let width = 0 async function loadMonaco() { model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri)) @@ -115,6 +116,24 @@ dispatch('change') }) + if (autoHeight) { + let ignoreEvent = false + const updateHeight = () => { + const contentHeight = Math.min(1000, editor.getContentHeight()) + if (divEl) { + divEl.style.height = `${contentHeight}px` + } + try { + ignoreEvent = true + editor.layout({ width, height: contentHeight }) + } finally { + ignoreEvent = false + } + } + editor.onDidContentSizeChange(updateHeight) + updateHeight() + } + editor.onDidFocusEditorText(() => { editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () { code = getCode() @@ -133,13 +152,15 @@ dispatch('blur') }) - if (lang == 'javascript' && extraLib != '' && extraLibPath != '') { + if (lang == 'javascript' && extraLib != '') { monaco.languages.typescript.javascriptDefaults.setExtraLibs([ { content: extraLib, - filePath: extraLibPath + filePath: 'windmill.d.ts' } ]) + } else { + monaco.languages.typescript.javascriptDefaults.setExtraLibs([]) } } @@ -157,7 +178,7 @@ }) -
+
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte index c514ab463d..529f9e0bd9 100644 --- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte +++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte @@ -11,9 +11,9 @@ import FlowSettingsItem from './FlowSettingsItem.svelte' import FlowInputsItem from './FlowInputsItem.svelte' import InsertModuleButton from './InsertModuleButton.svelte' + import { slide } from 'svelte/transition' export let root: boolean = false - export let color: 'blue' | 'orange' | 'indigo' = 'blue' export let modules: FlowModule[] let indexToRemove: number | undefined = undefined @@ -79,7 +79,7 @@
{/if} -
    +
      {#if root}
    • @@ -87,21 +87,21 @@ {/if} {#each modules as mod, index (mod.id ?? index)} - { - if (event.detail.detail.shiftKey || isEmptyFlowModule(mod)) { - removeAtIndex(index) - } else { - indexToRemove = index - } - }} - on:insert={() => { - insertNewModuleAtIndex(index) - }} - /> +
      + { + if (event.detail.detail.shiftKey || isEmptyFlowModule(mod)) { + removeAtIndex(index) + } else { + indexToRemove = index + } + }} + on:insert={() => { + insertNewModuleAtIndex(index) + }} + /> +
      {/each} insertNewModuleAtIndex(modules.length)} /> @@ -125,17 +125,3 @@ } }} /> - - diff --git a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte index b6f60ce117..a527bf85de 100644 --- a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte +++ b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte @@ -9,7 +9,7 @@ const { select, selectedId, schedule } = getContext('FlowEditorContext') $: settingsClass = classNames( - 'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center', + 'border w-full rounded-md p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId === 'settings' ? 'outline outline-offset-1 outline-2 outline-slate-900' : '' ) diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte index bdb3b909f0..29aa5d20e6 100644 --- a/frontend/src/lib/components/flows/map/MapItem.svelte +++ b/frontend/src/lib/components/flows/map/MapItem.svelte @@ -7,10 +7,17 @@ import InsertModuleButton from './InsertModuleButton.svelte' import FlowBranchOneMap from './FlowBranchOneMap.svelte' import FlowBranchAllMap from './FlowBranchAllMap.svelte' + import { + faBuilding, + faCode, + faCodeBranch, + faLongArrowDown, + faQuestion, + faRepeat + } from '@fortawesome/free-solid-svg-icons' + import Icon from 'svelte-awesome' export let mod: FlowModule - export let index: number - export let color: 'blue' | 'orange' | 'indigo' = 'blue' const { select, selectedId } = getContext('FlowEditorContext') const dispatch = createEventDispatcher<{ delete: CustomEvent; insert: void }>() @@ -40,14 +47,14 @@ {...itemProps} >
      - {index + 1} +
      - +
      @@ -63,7 +70,7 @@ label={mod.summary || 'Run one branch'} >
      - {index + 1} +
      @@ -79,7 +86,7 @@ label={mod.summary || 'Run all branches'} >
      - {index + 1} +
      @@ -89,7 +96,6 @@ select(mod.id)} on:delete={onDelete} - {color} deletable id={mod.id} {...itemProps} @@ -98,7 +104,13 @@ (mod.value.type === 'rawscript' ? `Inline ${mod.value.language}` : 'To be defined')} >
      - {index + 1} + {#if mod.value.type === 'rawscript'} + + {:else if mod.value.type === 'identity'} + + {:else if mod.value.type === 'script'} + + {/if}
      • @@ -107,7 +119,7 @@ diff --git a/frontend/src/lib/components/flows/previousResults.ts b/frontend/src/lib/components/flows/previousResults.ts index 160bb69e7c..2b24a68fb6 100644 --- a/frontend/src/lib/components/flows/previousResults.ts +++ b/frontend/src/lib/components/flows/previousResults.ts @@ -137,28 +137,28 @@ export function buildExtraLib(flowInput: Record, results: Record x != '') if (lines.length == 1) { const line = lines[0].trim() diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte index dfe69a1a74..215d44628b 100644 --- a/frontend/src/lib/components/graph/FlowGraph.svelte +++ b/frontend/src/lib/components/graph/FlowGraph.svelte @@ -1,7 +1,7 @@