diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte index d9706ce533..bf83a0c14c 100644 --- a/frontend/src/lib/components/EditorBar.svelte +++ b/frontend/src/lib/components/EditorBar.svelte @@ -282,7 +282,7 @@ editor.insertAtCursor(`v, _ := wmill.GetVariable("${path}")`) } else if (lang == 'bash') { editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\ - "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/variables/get_value/${path} | jq -r"`) + "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/variables/get_value/${path} | jq -r ."`) } sendUserToast(`${name} inserted at cursor`) }} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index ee88170841..47abfb34c5 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -132,11 +132,11 @@ async function inferSuggestions(code: string) { const outputs = await parseOutputs(code, true) - if (outputs) { - for (const [key, id] of outputs) { + if (outputs && inlineScript) { + inlineScript.suggestedRefreshOn = [] + for (const [id, key] of outputs) { if ( - id in ($worldStore?.outputsById[key] ?? {}) && - inlineScript && + key in ($worldStore?.outputsById[id] ?? {}) && !itemsExists(inlineScript.refreshOn, { key, id }) && !itemsExists(inlineScript.suggestedRefreshOn, { key, id }) ) { @@ -146,6 +146,7 @@ ] } } + $stateId++ } } @@ -169,6 +170,10 @@ bind:value={name} placeholder="Inline script name" class="!text-xs !rounded-xs" + on:keydown={() => { + $app = $app + $stateId++ + }} /> {:else} {name} of {id} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte index a7b15a6f40..77055383d4 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte @@ -1,16 +1,19 @@ {#if componentInput.fieldType !== 'any'}
-
+
{ onchange?.() }} + noWFull bind:selected={componentInput.type} > {#if componentInput.fieldType === 'template'} @@ -58,15 +75,41 @@ icon={Pen} /> {/if} - - + {#if componentInput.type == 'connected'} + + {/if} + + +
+ +
{/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index e31da65758..fade5ed593 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -30,6 +30,8 @@ import GridCondition from './GridCondition.svelte' import { isTriggerable } from './script/utils' import { inferDeps } from '../appUtilsInfer' + import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte' + import type { ResultAppInput } from '../../inputType' export let componentSettings: { item: GridItem; parent: string | undefined } | undefined = undefined @@ -127,6 +129,35 @@ const hasInteraction = componentSettings?.item.data.type ? isTriggerable(componentSettings?.item.data.type) : false + + let evalV2editor: EvalV2InputEditor | undefined = undefined + + function transformToFrontend() { + if (componentSettings?.item.data.componentInput) { + const id = componentSettings?.item?.data?.id + let appInput: ResultAppInput = { + ...componentSettings.item.data.componentInput, + type: 'runnable', + runnable: { + type: 'runnableByName', + name: `Eval of ${id}`, + inlineScript: { + path: `${id}_eval`, + content: `return ${componentSettings?.item.data.componentInput?.['expr']}`, + language: 'frontend', + refreshOn: componentSettings?.item.data.componentInput?.['connections']?.map((c) => { + return { + id: c.componentId, + key: c.id + } + }) + } + }, + fields: {} + } + componentSettings.item.data.componentInput = appInput + } + } @@ -171,6 +202,7 @@ {#if componentSettings.item.data.componentInput} @@ -219,6 +251,15 @@ + {:else if componentSettings.item.data.componentInput.type === 'evalv2' && component.componentInput !== undefined} + + transform to a frontend script {:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined} {/if} {#if Object.values(initialConfiguration).length > 0} - + - +
+ +
{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte index 2c0ccc2857..9026a2b26f 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte @@ -28,7 +28,7 @@ let runnable = appInput.runnable - const { runnableComponents } = getContext('AppViewerContext') + const { runnableComponents, stateId } = getContext('AppViewerContext') export let actions: ActionType[] = [] function updateAutoRefresh() { @@ -50,14 +50,16 @@
- + {#key $stateId} + + {/key} {#if !isTriggerable(appComponent.type)}
Hide Refresh Button
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte index 6122b71af8..9369586865 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte @@ -17,7 +17,7 @@ $: changeEvents = isFrontend ? inlineScript?.refreshOn - ? inlineScript.refreshOn.map((x) => `${x.id} - ${x.key}`) + ? inlineScript.refreshOn.map((x) => `${x.id}.${x.key}`) : [] : dependencies @@ -30,7 +30,7 @@ indigo: 'text-indigo-800 border-indigo-600 bg-indigo-100', blue: 'text-blue-800 border-blue-600 bg-blue-100' } - const { connectingInput, app } = getContext('AppViewerContext') + const { connectingInput, app, stateId } = getContext('AppViewerContext') function applyConnection(connection: InputConnection) { const refresh = { @@ -70,7 +70,7 @@
{/if} {#if changeEvents.length > 0 && shoudlDisplayChangeEvents} -
Change on value
+
Values watched
{#each changeEvents as changeEvent} @@ -88,9 +88,9 @@ on:click={() => { if (inlineScript?.refreshOn) { inlineScript.refreshOn = inlineScript.refreshOn.filter( - (x) => `${x.id} - ${x.key}` !== changeEvent + (x) => `${x.id}.${x.key}` !== changeEvent ) - const ch = changeEvent.split(' - ') + const ch = changeEvent.split('.') const suggestion = { id: ch[0], key: ch[1] @@ -135,26 +135,28 @@ {#if (inlineScript?.suggestedRefreshOn ?? []).length > 0}
Quick add: - {#each inlineScript?.suggestedRefreshOn ?? [] as suggestion} - - {/each} + }} + > + +{suggestion.id}.{suggestion.key} + + {/each} + {/key}
{/if} {/if} diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte index 71e8661169..4820ffff07 100644 --- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte +++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte @@ -46,8 +46,7 @@ {label} {/if} - - {tooltip ?? label} + {tooltip}