2375667408
- Add env_variables field to FlowValue struct in backend - Update OpenAPI schema to include env_variables field - Transform FlowConstants.svelte into environment variables manager UI - Replace static inputs viewer with env variable key-value editor - Add ability to create, edit, and delete environment variables - Variables are stored in flow definition and can be referenced as env.FOO - Update PropPickerWrapper and PropPickerResult to support env context - Update all PropPickerWrapper usages across flow modules to pass env variables - Add env declaration to SimpleEditor extraLib for TypeScript autocomplete - Update FlowStickyNode tooltip from 'Static Inputs' to 'Environment Variables' Co-authored-by: windmill-internal-app[bot] <windmill-internal-app[bot]@users.noreply.github.com>
98 lines
2.7 KiB
Svelte
98 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import SimpleEditor from '$lib/components/SimpleEditor.svelte'
|
|
import Toggle from '$lib/components/Toggle.svelte'
|
|
import PropPickerWrapper from '$lib/components/flows/propPicker/PropPickerWrapper.svelte'
|
|
import type { FlowModule } from '$lib/gen'
|
|
import Tooltip from '$lib/components/Tooltip.svelte'
|
|
import type { FlowEditorContext } from '../types'
|
|
import { getContext } from 'svelte'
|
|
import Section from '$lib/components/Section.svelte'
|
|
import { getStepPropPicker } from '../previousResults'
|
|
|
|
const { flowStateStore, flowStore, previewArgs } =
|
|
getContext<FlowEditorContext>('FlowEditorContext')
|
|
|
|
interface Props {
|
|
flowModule: FlowModule
|
|
parentModule: FlowModule | undefined
|
|
previousModule: FlowModule | undefined
|
|
}
|
|
|
|
let { flowModule = $bindable(), parentModule, previousModule }: Props = $props()
|
|
|
|
let editor: SimpleEditor | undefined = $state(undefined)
|
|
let stepPropPicker = $derived(
|
|
getStepPropPicker(
|
|
flowStateStore.val,
|
|
parentModule,
|
|
previousModule,
|
|
flowModule.id,
|
|
flowStore.val,
|
|
previewArgs.val,
|
|
false
|
|
)
|
|
)
|
|
|
|
let isSkipEnabled = $derived(Boolean(flowModule.skip_if))
|
|
</script>
|
|
|
|
<div class="flex flex-col items-start space-y-2">
|
|
<Section label="Skip" class="w-full">
|
|
{#snippet header()}
|
|
<Tooltip>
|
|
If the condition is met, the step will behave as an identity step, passing the previous
|
|
step's result through unchanged.
|
|
</Tooltip>
|
|
{/snippet}
|
|
|
|
<Toggle
|
|
checked={isSkipEnabled}
|
|
on:change={() => {
|
|
if (isSkipEnabled && flowModule.skip_if) {
|
|
flowModule.skip_if = undefined
|
|
} else {
|
|
flowModule.skip_if = {
|
|
expr: 'false'
|
|
}
|
|
}
|
|
}}
|
|
options={{
|
|
right: 'Skip step if condition is met'
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
class="w-full border p-2 mt-2 flex flex-col {flowModule.skip_if
|
|
? ''
|
|
: 'bg-surface-secondary'}"
|
|
>
|
|
{#if flowModule.skip_if}
|
|
<span class="mt-2 text-xs font-bold">Skip condition expression</span>
|
|
<div class="border w-full">
|
|
<PropPickerWrapper
|
|
notSelectable
|
|
env={flowStore.val.value.env_variables}
|
|
pickableProperties={stepPropPicker.pickableProperties}
|
|
on:select={({ detail }) => {
|
|
editor?.insertAtCursor(detail)
|
|
editor?.focus()
|
|
}}
|
|
>
|
|
<SimpleEditor
|
|
bind:this={editor}
|
|
lang="javascript"
|
|
bind:code={flowModule.skip_if.expr}
|
|
class="few-lines-editor"
|
|
extraLib={stepPropPicker.extraLib +
|
|
`\ndeclare const env = ${JSON.stringify(flowStore.val.value.env_variables)};`}
|
|
/>
|
|
</PropPickerWrapper>
|
|
</div>
|
|
{:else}
|
|
<span class="mt-2 text-xs font-bold">Skip condition expression</span>
|
|
<textarea disabled rows="3" class="min-h-[80px]"></textarea>
|
|
{/if}
|
|
</div>
|
|
</Section>
|
|
</div>
|