From 56c4cc65e574c24a4f745bb74c0967dbdc5d7d0e Mon Sep 17 00:00:00 2001
From: BretzelLudique <44777361+BretzelLudique@users.noreply.github.com>
Date: Thu, 31 Oct 2024 14:54:56 +0100
Subject: [PATCH] fix simple flow tutorial (#4612)

---
 frontend/src/lib/components/Scrollable.svelte |  3 +-
 .../components/ToggleHubWorkspaceQuick.svelte |  2 +-
 .../toggleButton-v2/ToggleButtonGroup.svelte  |  2 +
 .../flows/content/FlowInputsQuick.svelte      |  2 +-
 .../pickers/FlowScriptPickerQuick.svelte      |  1 +
 .../FlowBuilderTutorialSimpleFlow.svelte      | 69 +++++++------------
 .../lib/components/tutorials/Tutorial.svelte  | 14 +++-
 .../src/lib/components/tutorials/utils.ts     | 28 +++++++-
 8 files changed, 69 insertions(+), 52 deletions(-)

diff --git a/frontend/src/lib/components/Scrollable.svelte b/frontend/src/lib/components/Scrollable.svelte
index ff8e370e86..194bb05b6a 100644
--- a/frontend/src/lib/components/Scrollable.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte b/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
index c48a33a6b1..9d6ec306a6 100644
--- a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
+++ b/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 />
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 6751db0c99..b688c94bfa 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/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
diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index b87326ff65..d124dc5696 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
+++ b/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
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
index 2f4319e561..3f854bec46 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
+++ b/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' : ''
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
index 5c3856d4bc..6e048a0bde 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
+++ b/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()
 					})
diff --git a/frontend/src/lib/components/tutorials/Tutorial.svelte b/frontend/src/lib/components/tutorials/Tutorial.svelte
index cd2fe1a317..0eb415e9f2 100644
--- a/frontend/src/lib/components/tutorials/Tutorial.svelte
+++ b/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) {
diff --git a/frontend/src/lib/components/tutorials/utils.ts b/frontend/src/lib/components/tutorials/utils.ts
index 73d9ccb6a0..3337f98f5e 100644
--- a/frontend/src/lib/components/tutorials/utils.ts
+++ b/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)
+}