From e772f0377e1c85baf3657a3cbe4e5bc423bb210c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 3 Oct 2022 02:24:32 +0200
Subject: [PATCH] feat(frontend): prop picker for stop condition

---
 frontend/src/lib/components/Editor.svelte     |  2 +
 .../src/lib/components/SimpleEditor.svelte    |  2 +-
 .../components/flows/content/FlowLoop.svelte  | 30 +++++-----
 .../content/FlowModuleAdvancedSettings.svelte | 60 ++++++++++++++++---
 .../lib/components/flows/flowStateUtils.ts    |  3 +-
 5 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index b0bae5a0fb..cbba40edc0 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -366,11 +366,13 @@
 
 		if (shouldBindKey) {
 			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+				code = getCode()
 				format()
 			})
 
 			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
 				if (cmdEnterAction) {
+					code = getCode()
 					cmdEnterAction()
 				}
 			})
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index fbea79f20b..bb32362a34 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -38,7 +38,7 @@
 	export let automaticLayout = true
 	export let extraLib: string = ''
 	export let extraLibPath: string = ''
-	export let shouldBindKey: boolean = true
+	export let shouldBindKey: boolean = false
 
 	const dispatch = createEventDispatcher()
 
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index 5c288c9ff6..2246bc5e01 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -36,21 +36,21 @@
 					</Tooltip>
 				</span>
 
-				<PropPickerWrapper
-					{pickableProperties}
-					on:select={({ detail }) => {
-						console.log(detail)
-						console.log('test')
-						editor?.insertAtCursor(detail)
-					}}
-				>
-					<SimpleEditor
-						bind:this={editor}
-						lang="javascript"
-						bind:code={$flowStore.value.modules[index].value.iterator.expr}
-						class="small-editor"
-					/>
-				</PropPickerWrapper>
+				<div class="border w-full">
+					<PropPickerWrapper
+						{pickableProperties}
+						on:select={({ detail }) => {
+							editor?.insertAtCursor(detail)
+						}}
+					>
+						<SimpleEditor
+							bind:this={editor}
+							lang="javascript"
+							bind:code={$flowStore.value.modules[index].value.iterator.expr}
+							class="small-editor"
+						/>
+					</PropPickerWrapper>
+				</div>
 				<span class="mb-2 text-sm font-bold">Skip failures</span>
 
 				<Toggle
diff --git a/frontend/src/lib/components/flows/content/FlowModuleAdvancedSettings.svelte b/frontend/src/lib/components/flows/content/FlowModuleAdvancedSettings.svelte
index c16ee51b30..a1aeec9063 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleAdvancedSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleAdvancedSettings.svelte
@@ -2,13 +2,44 @@
 	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 { getStepPropPicker } from '../flowStateUtils'
+	import { flowStore } from '../flowStore'
+	import { flowStateStore } from '../flowState'
+	import type { FlowEditorContext } from '../types'
+	import { getContext } from 'svelte'
+
+	const { selectedId, previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	export let flowModule: FlowModule
 
+	let editor: SimpleEditor | undefined = undefined
+
 	$: isSuspendEnabled = Boolean(flowModule.suspend)
 	$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if)
+	let pickableProperties: Object = {}
+
+	$: {
+		let indices = $selectedId.split('-').map(Number)
+		if (indices[1]) {
+			indices[1] += 1
+		} else {
+			indices[0] += 1
+		}
+		const props = getStepPropPicker(
+			indices,
+			$flowStore.schema,
+			$flowStateStore,
+			$previewArgs
+		).pickableProperties
+
+		props['result'] = props['previous_result']
+		delete props['previous_result']
+		props.step = props.step?.slice(0, props.step.length - 1)
+		pickableProperties = props
+	}
 </script>
 
 <div class="flex flex-col items-start space-y-2">
@@ -51,20 +82,31 @@
 	/>
 
 	{#if flowModule.stop_after_if}
-		<span class="text-xs font-bold">Stop condition expression</span>
-
-		<SimpleEditor
-			lang="javascript"
-			bind:code={flowModule.stop_after_if.expr}
-			class="few-lines-editor border w-full"
-		/>
 		<span class="text-xs font-bold">Should skip if stopped</span>
 
 		<input type="checkbox" bind:checked={flowModule.stop_after_if.skip_if_stopped} />
-	{:else}
+
 		<span class="text-xs font-bold">Stop condition expression</span>
-		<textarea disabled rows="3" />
+
+		<div class="border w-full">
+			<PropPickerWrapper
+				{pickableProperties}
+				on:select={({ detail }) => {
+					editor?.insertAtCursor(detail)
+				}}
+			>
+				<SimpleEditor
+					bind:this={editor}
+					lang="javascript"
+					bind:code={flowModule.stop_after_if.expr}
+					class="small-editor"
+				/>
+			</PropPickerWrapper>
+		</div>
+	{:else}
 		<span class="text-xs font-bold">Should skip if stopped</span>
 		<input type="checkbox" disabled />
+		<span class="text-xs font-bold">Stop condition expression</span>
+		<textarea disabled rows="3" />
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index de07781c37..150b12904d 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -206,7 +206,6 @@ export function getStepPropPicker(
 	const flowInput = schemaToObject(flowInputSchema, args)
 	const results = getPreviousResults(flowState.modules, parentIndex)
 
-	console.log(parentIndex)
 	const lastResult =
 		parentIndex == 0
 			? flowInput
@@ -228,7 +227,7 @@ export function getStepPropPicker(
 		}
 
 		const innerResults = getPreviousResults(
-			flowState.modules[parentIndex].childFlowModules,
+			flowState.modules[parentIndex]?.childFlowModules,
 			childIndex
 		)