feat(frontend): add prop picker to iterator

frontend/src/lib/components/FlowBuilder.svelte

@@ -139,8 +139,6 @@
 	const selectedIdStore = writable<string>('settings')
 	const scheduleStore = writable<Schedule>({ args: {}, cron: '', enabled: false })
 	const previewArgsStore = writable<Record<string, any>>({})
-	const variablesStore = writable<Record<string, string>>({})
-	const resourcesStore = writable<Record<string, string>>({})
 
 	function select(selectedId: string) {
 		selectedIdStore.set(selectedId)
@@ -150,9 +148,7 @@
 		selectedId: selectedIdStore,
 		schedule: scheduleStore,
 		select,
-		previewArgs: previewArgsStore,
-		variables: variablesStore,
-		resources: resourcesStore
+		previewArgs: previewArgsStore
 	})
 
 	async function loadSchedule() {

frontend/src/lib/components/InputTransformForm.svelte

@@ -11,7 +11,7 @@
 	import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import Toggle from './Toggle.svelte'
-	import { Button, Tooltip } from 'flowbite-svelte'
+	import { Button } from 'flowbite-svelte'
 	import Icon from 'svelte-awesome'
 	import { faChain } from '@fortawesome/free-solid-svg-icons'
 

frontend/src/lib/components/flows/content/FlowEditorPanel.svelte

@@ -8,6 +8,8 @@
 	import FlowLoop from './FlowLoop.svelte'
 	import FlowFailureModule from './FlowFailureModule.svelte'
 
+	export let previewArgs: Record<string, any> = {}
+
 	export let initialPath: string
 
 	const { selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -21,7 +23,7 @@
 	{:else if $selectedId === 'settings-retries'}
 		<FlowSettings {initialPath} defaultTab="retries" />
 	{:else if $selectedId.includes('loop')}
-		<FlowLoop />
+		<FlowLoop {previewArgs} />
 	{:else if $selectedId === 'inputs'}
 		<FlowInput />
 	{:else if $selectedId === 'failure'}

frontend/src/lib/components/flows/content/FlowLoop.svelte

@@ -6,10 +6,22 @@
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { flowStore } from '../flowStore'
+	import { getStepPropPicker } from '../flowStateUtils'
+	import { flowStateStore } from '../flowState'
+	import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
 
-	const { selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { selectedId, previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
 
-	const [prefix, index] = $selectedId.split('-')
+	let editor: SimpleEditor | undefined = undefined
+
+	$: index = $selectedId.split('-')[1]
+
+	$: pickableProperties = getStepPropPicker(
+		[Number(index)],
+		$flowStore.schema,
+		$flowStateStore,
+		$previewArgs
+	).pickableProperties
 </script>
 
 <FlowCard title="For loop">
@@ -23,11 +35,22 @@
 						<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
 					</Tooltip>
 				</span>
-				<SimpleEditor
-					lang="javascript"
-					bind:code={$flowStore.value.modules[index].value.iterator.expr}
-					class="few-lines-editor"
-				/>
+
+				<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>
 				<span class="mb-2 text-sm font-bold">Skip failures</span>
 
 				<Toggle

frontend/src/lib/components/flows/content/FlowModule.svelte

@@ -40,10 +40,9 @@
 	import { writable, type Writable } from 'svelte/store'
 	import FlowModuleScript from './FlowModuleScript.svelte'
 
-	const { selectedId, select } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { selectedId, select, previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	export let flowModule: FlowModule
-	export let previewArgs: Record<string, any> = {}
 	export let flowModuleState: FlowModuleState
 	export let failureModule: boolean
 
@@ -61,7 +60,7 @@
 				$selectedId.split('-').map(Number),
 				$flowStore.schema,
 				$flowStateStore,
-				previewArgs
+				$previewArgs
 		  )
 
 	function onKeyDown(event: KeyboardEvent) {
@@ -194,7 +193,7 @@
 							<svelte:fragment slot="content">
 								<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
 									<TabContent value="inputs" class="flex flex-col flex-1 h-full">
-										<PropPickerWrapper bind:pickableProperties={stepPropPicker.pickableProperties}>
+										<PropPickerWrapper pickableProperties={stepPropPicker.pickableProperties}>
 											<!-- <pre class="text-xs">{JSON.stringify($flowStateStore, null, 4)}</pre> -->
 											<SchemaForm
 												schema={flowModuleState.schema}

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -206,6 +206,7 @@ export function getStepPropPicker(
 	const flowInput = schemaToObject(flowInputSchema, args)
 	const results = getPreviousResults(flowState.modules, parentIndex)
 
+	console.log(parentIndex)
 	const lastResult =
 		parentIndex == 0
 			? flowInput

frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte

@@ -18,13 +18,14 @@
 
 <script lang="ts">
 	import PropPicker from '$lib/components/propertyPicker/PropPicker.svelte'
-	import { setContext, getContext } from 'svelte'
+	import { createEventDispatcher, setContext } from 'svelte'
 	import { HSplitPane } from 'svelte-split-pane'
 	import { writable, type Writable } from 'svelte/store'
 
 	export let pickableProperties: Object = {}
 
 	const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
+	const dispatch = createEventDispatcher()
 
 	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
 		propPickerConfig,
@@ -52,6 +53,7 @@
 			<PropPicker
 				{pickableProperties}
 				on:select={({ detail }) => {
+					dispatch('select', detail)
 					$propPickerConfig?.onSelect(detail)
 					propPickerConfig.set(undefined)
 				}}

frontend/src/lib/components/flows/types.ts

@@ -4,6 +4,6 @@ import type { Schedule } from './scheduleUtils'
 export type FlowEditorContext = {
 	selectedId: Writable<string>
 	select: (id: string) => void
-	schedule: Writable<Schedule>
+	schedule: Writable<Schedule>,
 	previewArgs: Writable<Record<string, any>>,
 }