fix simple flow tutorial (#4612)

frontend/src/lib/components/Scrollable.svelte

@@ -5,6 +5,7 @@
 	let isAtBottom: boolean = false
 	let isScrollable = false
 
+	export let id: string | null | undefined = undefined
 	export let scrollableClass: string = ''
 	export let shiftedShadow: boolean = false
 	let mutationObserver: MutationObserver
@@ -43,7 +44,7 @@
 	})
 </script>
 
-<div class={twMerge('relative pb-1', scrollableClass)}>
+<div {id} class={twMerge('relative pb-1', scrollableClass)}>
 	<div bind:this={el} on:scroll={handleScroll} class="w-full h-full overflow-y-auto">
 		<slot />
 	</div>

frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="max-w-min">
-	<ToggleButtonGroup bind:selected>
+	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
 		<ToggleButton value="all" label="All" light small />
 		<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small />
 		<ToggleButton value="workspace" icon={Building} label="Workspace" light small />

frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -11,6 +11,7 @@
 	import { TabGroup, TabList } from '@rgossiaux/svelte-headlessui'
 	import { twMerge } from 'tailwind-merge'
 
+	export let id: string | null | undefined = undefined
 	export let selected: any
 	export let noWFull: boolean = false
 	export let disabled: boolean = false
@@ -38,6 +39,7 @@
 </script>
 
 <TabGroup
+	{id}
 	class={twMerge(
 		`h-8 flex ${noWFull ? '' : 'w-full'} ${disabled ? 'disabled' : ''}`,
 		$$props.class

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

@@ -292,7 +292,7 @@
 			{/if}
 		</Scrollable>
 	{/if}
-	<Scrollable bind:this={scrollable} scrollableClass="grow min-w-0">
+	<Scrollable id="flow-editor-flow-atom" bind:this={scrollable} scrollableClass="grow min-w-0">
 		{#if kind == 'script'}
 			{#each topLevelNodes as [label, kind], i (label)}
 				<FlowToplevelNode

frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte

@@ -33,6 +33,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <button
+	id={`flow-editor-new-${lang}`}
 	class={twMerge(
 		'px-3 py-2 gap-2 w-full text-left hover:bg-surface-hover flex flex-row items-center transition-all rounded-md',
 		selected ? 'bg-surface-hover' : ''

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

@@ -7,13 +7,13 @@
 		isFlowTainted,
 		selectFlowStepKind,
 		setInputBySelector,
-		triggerAddFlowStep
+		triggerAddFlowStep,
+		waitForElementLoading
 	} from './utils'
 	import Tutorial from './Tutorial.svelte'
 
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
-	const queue: string[] = []
 
 	let tutorial: Tutorial | undefined = undefined
 
@@ -51,13 +51,12 @@
 			element: '#svelvet-Input'
 		},
 		{
-			element: '#flow-editor-add-property',
+			element: 'input[placeholder="Field name"]',
 			popover: {
-				title: 'Add a property',
-				description: 'Click here to add a property to your schema',
+				title: 'Name your property',
+				description: 'Give a name to your property. Here we will call it firstname',
 				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-add-property')
-
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -65,27 +64,12 @@
 			}
 		},
 		{
-			element: '#schema-modal-name',
+			element: '#flow-editor-add-property',
 			popover: {
-				title: 'Name your property',
-				description: 'Give a name to your property. Here we will call it firstname',
-				onNextClick: () => {
-					setInputBySelector('#schema-modal-name', 'firstname')
-
-					driver.moveNext()
-				}
-			}
-		},
-		{
-			element: '#schema-modal-save',
-			popover: {
-				title: 'Save your property',
+				title: 'Add your property',
 				description: 'Click here to save your property',
 				onNextClick: () => {
-					queue.push(JSON.stringify($flowStore))
-
-					clickButtonBySelector('#schema-modal-save')
-
+					clickButtonBySelector('#flow-editor-add-property')
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -99,20 +83,12 @@
 				description: 'Click here to add a step to your flow',
 				onNextClick: () => {
 					triggerAddFlowStep(0)
-
 					setTimeout(() => {
 						driver.moveNext()
 					})
-				},
-
-				onPrevClick: () => {
-					driver.moveTo(1)
-					$flowStore = JSON.parse(queue.pop() || '{}')
-					dispatch('reload')
 				}
 			}
 		},
-
 		{
 			popover: {
 				title: 'Steps kind',
@@ -132,45 +108,48 @@
 					})
 				}
 			},
-			element: '#flow-editor-insert-module > div > button:nth-child(1)'
+			element: '#flow-editor-insert-module > div > div > button:nth-child(1)'
 		},
 		{
-			element: '#flow-editor-flow-inputs',
+			element: '#flow-editor-flow-providers',
 			popover: {
 				title: 'Action configuration',
 				description: 'An action can be inlined, imported from your workspace or the Hub.'
 			}
 		},
 		{
-			element: '#flow-editor-action-script',
+			element: '#flow-editor-flow-atom',
 			popover: {
 				title: 'Supported languages',
 				description: 'Windmill support the following languages/runtimes.'
 			}
 		},
 		{
-			element: '#flow-editor-action-script-bun',
+			element: '#flow-editor-new-bun',
 			popover: {
 				title: 'Typescript',
-				description: "Let's pick an action to add to your flow",
+				description: "Let's write a script for your flow",
 				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-action-script-bun')
-
-					setTimeout(() => {
+					clickButtonBySelector('#flow-editor-new-bun')
+					waitForElementLoading('#flow-editor-editor', () => {
 						driver.moveNext()
 					})
 				}
 			}
 		},
-
 		{
 			element: '#flow-editor-editor',
 			popover: {
 				title: 'Action editor',
-				description: 'Windmill provides a full code editor to write your actions'
+				description: 'Windmill provides a full code editor to write your actions',
+				onPrevClick: () => {
+					triggerAddFlowStep(0)
+					setTimeout(() => {
+						driver.movePrevious()
+					})
+				}
 			}
 		},
-
 		{
 			element: '#flow-editor-step-input',
 			popover: {
@@ -178,7 +157,6 @@
 				description: 'The schema and the UI is autogenerated from your code'
 			}
 		},
-
 		{
 			element: '#flow-editor-plug',
 			popover: {
@@ -187,7 +165,6 @@
 					'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(() => {
 						driver.moveNext()
 					})

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

@@ -79,7 +79,19 @@
 		})
 
 		tutorialControls.$on('previous', () => {
-			tutorial?.movePrevious()
+			const step = tutorial?.getActiveStep()
+
+			if (step) {
+				if (tutorial?.getActiveStep()?.popover?.onPrevClick) {
+					const activeElement = tutorial?.getActiveElement()
+					tutorial?.getActiveStep()?.popover?.onPrevClick?.(activeElement, step, {
+						config,
+						state
+					})
+				} else {
+					tutorial?.movePrevious()
+				}
+			}
 		})
 
 		if (popoverDescription) {

frontend/src/lib/components/tutorials/utils.ts

@@ -33,13 +33,13 @@ export function triggerAddFlowStep(index: number) {
 	const button = document.querySelector(`#flow-editor-add-step-${index}`) as HTMLButtonElement
 
 	if (button) {
-		button.parentElement?.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+		button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
 	}
 }
 
 export function selectFlowStepKind(index: number) {
 	const button = document.querySelector(
-		`#flow-editor-insert-module > div > button:nth-child(${index})`
+		`#flow-editor-insert-module > div > div > button:nth-child(${index})`
 	) as HTMLButtonElement
 
 	if (button) {
@@ -334,3 +334,27 @@ export function connectInlineRunnableInputToComponentOutput(
 		}
 	}
 }
+
+function elementExists(selector: string): boolean {
+	return !!document.querySelector(selector)
+}
+
+export function waitForElementLoading(
+	selector: string,
+	callback: () => void,
+	interval: number = 50,
+	maxAttempts: number = 30
+): void {
+	let attempts = 0
+
+	const checkExistence = setInterval(() => {
+		if (elementExists(selector)) {
+			clearInterval(checkExistence)
+			callback()
+		} else if (attempts >= maxAttempts) {
+			clearInterval(checkExistence)
+			console.error('Element not found after multiple attempts.')
+		}
+		attempts++
+	}, interval)
+}