fix tutorial (#5562)

* fix tutorial first part

* fix tutorial

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/FlowPlugConnect.svelte

@@ -4,6 +4,7 @@
 	import AnimatedButton from './common/button/AnimatedButton.svelte'
 
 	export let connecting: boolean
+	export let id: undefined | string = undefined
 </script>
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
@@ -13,6 +14,7 @@
 		size="xs2"
 		btnClasses={connecting ? 'text-blue-500' : 'text-primary'}
 		on:click
+		{...id ? { id } : {}}
 	>
 		<Plug size={16} /> &rightarrow;
 	</Button>

frontend/src/lib/components/InputTransformForm.svelte

@@ -370,8 +370,8 @@
 											staticTemplate
 												? `\`${arg?.value?.toString().replaceAll('`', '\\`') ?? ''}\``
 												: arg.value
-												? '(' + JSON.stringify(arg?.value, null, 4) + ')'
-												: ''
+													? '(' + JSON.stringify(arg?.value, null, 4) + ')'
+													: ''
 										)
 									}
 									if (arg) {
@@ -450,11 +450,12 @@
 					</div>
 
 					<FlowPlugConnect
+						id="flow-editor-plug"
 						{connecting}
 						on:click={() => {
-							focusProp(argName, 'connect', (path) => {
+							focusProp?.(argName, 'connect', (path) => {
 								connectProperty(path)
-								dispatch('change', { argName })
+								dispatch('change', { argName, arg })
 								return true
 							})
 						}}

frontend/src/lib/components/InputTransformSchemaForm.svelte

@@ -77,7 +77,7 @@
 								Object.keys(args ?? {}).includes(argName) &&
 								((args[argName].type === 'static' && !args[argName].value) ||
 									(args[argName].type === 'javascript' && !args[argName].expr))
-					  )
+						)
 					: []}
 				{schema}
 			/>

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

@@ -472,6 +472,7 @@
 							<svelte:fragment slot="trigger">
 								<div
 									class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+									id="add-flow-input-btn"
 								>
 									<Plus size={14} />
 								</div>

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

@@ -116,7 +116,7 @@
 			<AnimatedButton
 				animate={$propPickerConfig?.insertionMode == 'connect'}
 				baseRadius="4px"
-				wrapperClasses="h-full w-full pt-2 !bg-surface "
+				wrapperClasses="prop-picker-inputs h-full w-full pt-2 !bg-surface "
 				marginWidth="3px"
 				ringColor={$propPickerConfig?.insertionMode == 'insert' ||
 				$propPickerConfig?.insertionMode == 'append'

frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, tick } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
 	import { updateProgress } from '$lib/tutorialUtils'
 	import {
@@ -42,12 +42,17 @@
 				description: 'Flows have inputs that can be used in the flow',
 				onNextClick: () => {
 					clickButtonBySelector('#flow-editor-virtual-Input')
+					tick()
+						.then(() => clickButtonBySelector('#add-flow-input-btn'))
+						.then(tick)
+						.then(() => setInputBySelector('input[placeholder="Field name"]', 'firstname'))
+
 					setTimeout(() => {
 						driver.moveNext()
 					})
 				}
 			},
-			element: '#svelvet-Input'
+			element: '#flow-editor-virtual-Input'
 		},
 		{
 			element: 'input[placeholder="Field name"]',
@@ -55,7 +60,6 @@
 				title: 'Name your property',
 				description: 'Give a name to your property. Here we will call it firstname',
 				onNextClick: () => {
-					setInputBySelector('input[placeholder="Field name"]', 'firstname')
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -130,9 +134,11 @@
 				description: "Let's write a script for your flow",
 				onNextClick: () => {
 					clickButtonBySelector('#flow-editor-new-bun')
-					waitForElementLoading('#flow-editor-editor', () => {
-						driver.moveNext()
-					})
+					tick().then(() =>
+						waitForElementLoading('#flow-editor-editor', () => {
+							driver.moveNext()
+						})
+					)
 				}
 			}
 		},
@@ -171,7 +177,7 @@
 			}
 		},
 		{
-			element: '.key',
+			element: '#flow-editor-step-input .prop-picker-inputs',
 			popover: {
 				title: 'Connection mode',
 				description: 'Once you pressed the connect button, you can choose what to connect to.',