diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index b332d1d8c7..85fd94ccac 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -8,7 +8,8 @@ type PathScript, ScriptService, Script, - type HubScriptKind + type HubScriptKind, + type OpenFlow } from '$lib/gen' import { initHistory, push, redo, undo } from '$lib/history' import { @@ -61,10 +62,11 @@ import { ignoredTutorials } from './tutorials/ignoredTutorials' export let initialPath: string = '' + export let newFlow: boolean export let selectedId: string | undefined export let initialArgs: Record = {} export let loading = false - export let flowStore: Writable + export let flowStore: Writable export let flowStateStore: Writable const dispatch = createEventDispatcher() @@ -100,13 +102,13 @@ $dirtyStore = false localStorage.removeItem('flow') - localStorage.removeItem(`flow-${flow.path}`) + localStorage.removeItem(`flow-${$pathStore}`) - if (initialPath == '') { + if (newFlow) { await FlowService.createFlow({ workspace: $workspaceStore!, requestBody: { - path: flow.path, + path: $pathStore, summary: flow.summary, description: flow.description ?? '', value: flow.value, @@ -119,11 +121,15 @@ } await DraftService.createDraft({ workspace: $workspaceStore!, - requestBody: { path: initialPath == '' ? flow.path : initialPath, typ: 'flow', value: flow } + requestBody: { + path: newFlow ? $pathStore : initialPath, + typ: 'flow', + value: flow + } }) - if (initialPath == '') { + if (newFlow) { $dirtyStore = false - dispatch('saveInitial') + dispatch('saveInitial', $pathStore) } sendUserToast('Saved as draft') } catch (error) { @@ -149,13 +155,13 @@ // return const { cron, timezone, args, enabled } = $scheduleStore $dirtyStore = false - if (initialPath === '') { + if (newFlow) { localStorage.removeItem('flow') - localStorage.removeItem(`flow-${flow.path}`) + localStorage.removeItem(`flow-${$pathStore}`) await FlowService.createFlow({ workspace: $workspaceStore!, requestBody: { - path: flow.path, + path: $pathStore, summary: flow.summary, description: flow.description ?? '', value: flow.value, @@ -164,7 +170,7 @@ } }) if (enabled) { - await createSchedule(flow.path) + await createSchedule($pathStore) } } else { localStorage.removeItem(`flow-${initialPath}`) @@ -172,7 +178,7 @@ workspace: $workspaceStore!, path: initialPath, requestBody: { - path: flow.path, + path: $pathStore, summary: flow.summary, description: flow.description ?? '', value: flow.value, @@ -183,17 +189,17 @@ }) const scheduleExists = await ScheduleService.existsSchedule({ workspace: $workspaceStore ?? '', - path: flow.path + path: $pathStore }) if (scheduleExists) { const schedule = await ScheduleService.getSchedule({ workspace: $workspaceStore ?? '', - path: flow.path + path: $pathStore }) if (JSON.stringify(schedule.args) != JSON.stringify(args) || schedule.schedule != cron) { await ScheduleService.updateSchedule({ workspace: $workspaceStore ?? '', - path: flow.path, + path: $pathStore, requestBody: { schedule: formatCron(cron), timezone, @@ -204,17 +210,17 @@ if (enabled != schedule.enabled) { await ScheduleService.setScheduleEnabled({ workspace: $workspaceStore ?? '', - path: flow.path, + path: $pathStore, requestBody: { enabled } }) } } else if (enabled) { - await createSchedule(flow.path) + await createSchedule($pathStore) } } loadingSave = false $dirtyStore = false - dispatch('deploy') + dispatch('deploy', $pathStore) } catch (err) { sendUserToast(`The flow could not be saved: ${err.body}`, true) loadingSave = false @@ -234,7 +240,7 @@ timeout = setTimeout(() => { try { localStorage.setItem( - initialPath ? `flow-${initialPath}` : 'flow', + initialPath && initialPath != '' ? `flow-${initialPath}` : 'flow', encodeState({ flow: $flowStore, selectedId: $selectedIdStore @@ -262,6 +268,9 @@ const scriptEditorDrawer = writable(undefined) const moving = writable<{ module: FlowModule; modules: FlowModule[] } | undefined>(undefined) const history = initHistory($flowStore) + const pathStore = writable(initialPath) + + $: $pathStore = initialPath const testStepStore = writable>({}) @@ -278,6 +287,7 @@ history, flowStateStore, flowStore, + pathStore, testStepStore, saveDraft, initialPath @@ -300,7 +310,7 @@ $: selectedId && select(selectedId) - $: initialPath && $workspaceStore && loadSchedule() + $: initialPath && initialPath != '' && $workspaceStore && loadSchedule() function onKeyDown(event: KeyboardEvent) { let classes = event.target?.['className'] @@ -366,11 +376,11 @@ }> = [ { label: 'Exit & see details', - onClick: () => dispatch('details') + onClick: () => dispatch('details', $pathStore) } ] - if (initialPath != '') { + if (!newFlow) { dropdownItems.push({ label: 'Fork', onClick: () => window.open(`/flows/add?template=${initialPath}`) @@ -950,7 +960,7 @@ { currentTarget.select() @@ -959,7 +969,7 @@
- {#if $enterpriseLicense && initialPath != ''} + {#if $enterpriseLicense && !newFlow} {/if} saveFlow()} - dropdownItems={initialPath != '' ? dropdownItems : undefined} + dropdownItems={!newFlow ? dropdownItems : undefined} > Deploy diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte index b9c8cb4768..86c5c788fe 100644 --- a/frontend/src/lib/components/FlowPreviewContent.svelte +++ b/frontend/src/lib/components/FlowPreviewContent.svelte @@ -1,5 +1,12 @@ - - - +{#if !noEditor} + + + +{/if} + diff --git a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte index 7d8624f2c5..4c4048d966 100644 --- a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte +++ b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte @@ -27,7 +27,7 @@
{#if flowModule} diff --git a/frontend/src/lib/components/flows/content/CapturePayload.svelte b/frontend/src/lib/components/flows/content/CapturePayload.svelte index 5c6a89e72b..2eb016bd3c 100644 --- a/frontend/src/lib/components/flows/content/CapturePayload.svelte +++ b/frontend/src/lib/components/flows/content/CapturePayload.svelte @@ -18,7 +18,7 @@ import { faClipboard } from '@fortawesome/free-solid-svg-icons' import SchemaForm from '$lib/components/SchemaForm.svelte' - const { previewArgs, flowStore } = getContext('FlowEditorContext') + const { previewArgs, flowStore, pathStore } = getContext('FlowEditorContext') let drawer: Drawer let interval: NodeJS.Timeout | undefined = undefined @@ -32,14 +32,14 @@ async function startCapturePoint() { await CaptureService.createCapture({ workspace: $workspaceStore!, - path: $flowStore.path + path: $pathStore }) } async function getCaptureInput() { const capture = await CaptureService.getCapture({ workspace: $workspaceStore!, - path: $flowStore.path + path: $pathStore }) captureInput = capture jsonSchema = { required: [], properties: {}, ...convert(capture) } @@ -65,10 +65,10 @@ class="text-2xl" on:click={(e) => { e.preventDefault() - copyToClipboard(`${hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path}`) + copyToClipboard(`${hostname}/api/w/${$workspaceStore}/capture_u/${$pathStore}`) }} - href="{hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path}" - >{hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path} + href="{hostname}/api/w/{$workspaceStore}/capture_u/{$pathStore}" + >{hostname}/api/w/{$workspaceStore}/capture_u/{$pathStore}
@@ -76,7 +76,7 @@ 
{`curl -X POST ${hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path} \\
+				>{`curl -X POST ${hostname}/api/w/${$workspaceStore}/capture_u/${$pathStore} \\
    -H 'Content-Type: application/json' \\
    -d '{"foo": 42}'`}
diff --git a/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte index ea27216983..254a14f36c 100644 --- a/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte +++ b/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte @@ -3,6 +3,7 @@ import type { FlowModule } from '$lib/gen' import FlowCard from '../common/FlowCard.svelte' + export let noEditor: boolean export let branch: { summary?: string skip_failure?: boolean @@ -11,7 +12,7 @@
- +
diff --git a/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte index 9f3984666b..d4b6d4bcf4 100644 --- a/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte +++ b/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte @@ -11,10 +11,11 @@ } export let parentModule: FlowModule export let previousModule: FlowModule | undefined + export let noEditor: boolean
- +
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte index f9fbff1b94..afe4b660ed 100644 --- a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte +++ b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte @@ -13,6 +13,7 @@ import FlowModuleSuspend from './FlowModuleSuspend.svelte' import FlowModuleMock from './FlowModuleMock.svelte' + export let noEditor: boolean export let flowModule: FlowModule export let previousModule: FlowModule | undefined @@ -23,7 +24,7 @@
- + diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte index 87b3a8eeee..f2a1fb2c67 100644 --- a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte +++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte @@ -16,6 +16,7 @@ export let flowModule: FlowModule export let previousModule: FlowModule | undefined + export let noEditor: boolean let value = flowModule.value as BranchOne $: value = flowModule.value as BranchOne @@ -24,7 +25,7 @@
- + diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte index 00c9dfa670..89a4355d97 100644 --- a/frontend/src/lib/components/flows/content/FlowConstants.svelte +++ b/frontend/src/lib/components/flows/content/FlowConstants.svelte @@ -10,6 +10,8 @@ import InputTransformSchemaForm from '$lib/components/InputTransformSchemaForm.svelte' import type { FlowEditorContext } from '../types' + export let noEditor: boolean + let hideOptional = false const { flowStateStore, flowStore } = getContext('FlowEditorContext') @@ -82,7 +84,7 @@
- +
('FlowEditorContext') function checkDup(modules: FlowModule[]): string | undefined { @@ -24,15 +26,15 @@ {#if $selectedId?.startsWith('settings')} - + {:else if $selectedId === 'Input'} - + {:else if $selectedId === 'Result'}

Nothing to show about the result node. Happy flow building!

{:else if $selectedId === 'constants'} - + {:else if $selectedId === 'failure'} - + {:else} {@const dup = checkDup($flowStore.value.modules)} {#if dup} @@ -40,7 +42,11 @@ {:else} {#key $selectedId} {#each $flowStore.value.modules as flowModule, index (flowModule.id ?? index)} - + {/each} {/key} {/if} diff --git a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte index d24444fe41..187f60c31a 100644 --- a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte +++ b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte @@ -3,11 +3,14 @@ import type { FlowEditorContext } from '../types' import FlowModuleWrapper from './FlowModuleWrapper.svelte' + export let noEditor = false + const { flowStore } = getContext('FlowEditorContext') {#if $flowStore.value.failure_module} { $flowStore.value.failure_module = undefined diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte index f41375dc2b..1cf00bb5cf 100644 --- a/frontend/src/lib/components/flows/content/FlowInput.svelte +++ b/frontend/src/lib/components/flows/content/FlowInput.svelte @@ -14,6 +14,8 @@ import { sendUserToast } from '$lib/toast' import SavedInputs from '$lib/components/SavedInputs.svelte' + export let noEditor: boolean + const { flowStore, flowStateStore, previewArgs, initialPath } = getContext('FlowEditorContext') @@ -37,7 +39,7 @@ - +
Copy input's schema from
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte index ec4f19d551..b8154dfcad 100644 --- a/frontend/src/lib/components/flows/content/FlowLoop.svelte +++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte @@ -23,6 +23,7 @@ export let mod: FlowModule export let parentModule: FlowModule | undefined export let previousModule: FlowModule | undefined + export let noEditor: boolean let editor: SimpleEditor | undefined = undefined let selected: string = 'early-stop' @@ -39,7 +40,7 @@
- +
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte index 6fc0386c84..852ce66dc3 100644 --- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte +++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte @@ -45,16 +45,16 @@ import { isCloudHosted } from '$lib/cloud' import { loadSchemaFromModule } from '../flowInfers' - const { selectedId, previewArgs, flowStateStore, flowStore, saveDraft } = + const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft } = getContext('FlowEditorContext') export let flowModule: FlowModule export let failureModule: boolean = false - export let parentModule: FlowModule | undefined = undefined export let previousModule: FlowModule | undefined export let scriptKind: 'script' | 'trigger' | 'approval' = 'script' export let scriptTemplate: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = 'script' + export let noEditor: boolean let editor: Editor let diffEditor: DiffEditor @@ -159,7 +159,7 @@ let forceReload = 0 - let editorPanelSize = flowModule.value.type == 'script' ? 30 : 50 + let editorPanelSize = noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50 let editorSettingsPanelSize = 100 - editorPanelSize @@ -167,7 +167,7 @@ {#if flowModule.value}
- + - {#if flowModule.value.type === 'rawscript'} + {#if flowModule.value.type === 'rawscript' && !noEditor}
{#if flowModule.value.type === 'rawscript'} - {#key flowModule.id} - { - selected = 'test' - if ($selectedId == flowModule.id) { + {#if !noEditor} + {#key flowModule.id} + { + selected = 'test' + if ($selectedId == flowModule.id) { + if (flowModule.value.type === 'rawscript') { + flowModule.value.content = editor.getCode() + } + await reload(flowModule) + modulePreview?.runTestWithStepArgs() + } + }} + on:change={async (event) => { if (flowModule.value.type === 'rawscript') { - flowModule.value.content = editor.getCode() + flowModule.value.content = event.detail } await reload(flowModule) - modulePreview?.runTestWithStepArgs() - } - }} - on:change={async (event) => { - if (flowModule.value.type === 'rawscript') { - flowModule.value.content = event.detail - } - await reload(flowModule) - }} - formatAction={() => { - reload(flowModule) - saveDraft() - }} - fixedOverflowWidgets={true} - args={Object.entries(flowModule.value.input_transforms).reduce( - (acc, [key, obj]) => { - acc[key] = obj.type === 'static' ? obj.value : undefined - return acc - }, - {} - )} - /> -