Fix flow tutorials (#6722)

* Fix tutorial basic

* fix other tutorials

* nit fix bug with button shrinking

* tutorial works backwards

* nit delete field on prev

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

@@ -11,6 +11,7 @@
 	} from './utils'
 	import Tutorial from './Tutorial.svelte'
 	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
+	import { wait } from '$lib/utils'
 
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
@@ -41,16 +42,13 @@
 			popover: {
 				title: 'Flows inputs',
 				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()
-					})
+				onNextClick: async () => {
+					triggerPointerDown('#flow-editor-virtual-Input')
+					await wait(20)
+					clickButtonBySelector('#add-flow-input-btn')
+					await wait(0)
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
+					setTimeout(() => driver.moveNext())
 				}
 			},
 			element: '#flow-editor-virtual-Input'
@@ -64,11 +62,15 @@
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#add-flow-input-btn') // Close the input drawer
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
 		{
-			element: '#flow-editor-add-property',
+			element: '*:has(> #flow-editor-add-property)',
 			popover: {
 				title: 'Add your property',
 				description: 'Click here to save your property',
@@ -87,16 +89,26 @@
 				description: 'Click here to add a step to your flow',
 				onNextClick: () => {
 					triggerPointerDown(`#flow-editor-add-step-0`)
-					setTimeout(() => {
-						driver.moveNext()
-					})
+					setTimeout(() => driver.moveNext())
+				},
+				onPrevClick: async () => {
+					clickButtonBySelector('.delete-schema-field-button')
+					await wait(0)
+					clickButtonBySelector('#add-flow-input-btn')
+					await wait(0)
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
 		{
 			popover: {
 				title: 'Steps kind',
-				description: "Choose the kind of step you want to add. Let's start with a simple action"
+				description: "Choose the kind of step you want to add. Let's start with a simple action",
+				onPrevClick: () => {
+					triggerPointerDown(`#flow-editor-add-step-0`)
+					setTimeout(() => driver.movePrevious())
+				}
 			},
 			element: '#flow-editor-insert-module'
 		},
@@ -149,6 +161,7 @@
 				title: 'Action editor',
 				description: 'Windmill provides a full code editor to write your actions',
 				onPrevClick: () => {
+					triggerPointerDown(`#flow-editor-virtual-Input`)
 					triggerPointerDown(`#flow-editor-add-step-0`)
 					setTimeout(() => {
 						driver.movePrevious()
@@ -158,6 +171,9 @@
 		},
 		{
 			element: '#flow-editor-step-input',
+			onHighlighted: () => {
+				document.querySelector('#flow-editor-plug')?.parentElement?.classList.remove('opacity-0')
+			},
 			popover: {
 				title: 'Autogenerated schema',
 				description: 'The schema and the UI is autogenerated from your code'
@@ -165,10 +181,14 @@
 		},
 		{
 			element: '#flow-editor-plug',
+			onHighlighted: () => {
+				document.querySelector('#flow-editor-plug')?.parentElement?.classList.remove('opacity-0')
+			},
 			popover: {
 				title: 'Connect',
 				description:
 					'You can provide static values or connect to other nodes result. Here we will connect to the firstname input',
+
 				onNextClick: () => {
 					clickButtonBySelector('#flow-editor-plug')
 					setTimeout(() => {
@@ -198,6 +218,10 @@
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-plug')
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
@@ -206,7 +230,11 @@
 			element: '#flow-editor-step-input',
 			popover: {
 				title: 'Input connected!',
-				description: 'The input is now connected to the firstname input'
+				description: 'The input is now connected to the firstname input',
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-plug')
+					setTimeout(() => driver.movePrevious())
+				}
 			}
 		},
 
@@ -226,7 +254,7 @@
 		},
 
 		{
-			element: '#flow-preview-content',
+			element: 'textarea.w-full',
 			popover: {
 				title: 'Flow input',
 				description: 'Let’s provide an input to our flow',
@@ -236,6 +264,10 @@
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-test-flow') // Close the test drawer
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},