From 8cd1df4dca4bf342b5a0454d3bce66ef4de9baf3 Mon Sep 17 00:00:00 2001
From: BretzelLudique <44777361+BretzelLudique@users.noreply.github.com>
Date: Fri, 1 Nov 2024 01:05:54 +0100
Subject: [PATCH] Fix other flow tutorials (#4614)

* fix(cli): improve --instance handling wmill instance push

* fix(cli): improve --instance handling wmill instance push

* fix for-loop

* fix flow tutorials

* chore: harmonize, rename, cleaning etc

* fix last merge commit (raw copy from upstream)

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
---
 .../src/lib/components/FlowTutorials.svelte   | 49 ++++++++++++-------
 .../flows/content/FlowInputsQuick.svelte      |  2 +-
 .../flows/map/FlowErrorHandlerItem.svelte     |  1 +
 .../flows/map/InsertModuleButton.svelte       |  2 +-
 .../flows/pickers/TopLevelNode.svelte         |  1 +
 ...te => FlowBuilderTutorialBranchAll.svelte} | 13 ++---
 ...te => FlowBuilderTutorialBranchOne.svelte} | 22 +++------
 ...=> FlowBuilderTutorialErrorHandler.svelte} | 16 +++---
 ...elte => FlowBuilderTutorialForLoop.svelte} | 18 +++----
 .../FlowBuilderTutorialSimpleFlow.svelte      | 11 ++---
 .../tutorials/TutorialControls.svelte         |  9 ++--
 .../src/lib/components/tutorials/utils.ts     | 18 ++-----
 12 files changed, 75 insertions(+), 87 deletions(-)
 rename frontend/src/lib/components/tutorials/{FlowBranchAll.svelte => FlowBuilderTutorialBranchAll.svelte} (81%)
 rename frontend/src/lib/components/tutorials/{FlowBranchOne.svelte => FlowBuilderTutorialBranchOne.svelte} (87%)
 rename frontend/src/lib/components/tutorials/{FlowErrorHandler.svelte => FlowBuilderTutorialErrorHandler.svelte} (86%)
 rename frontend/src/lib/components/tutorials/{FlowBuilderTutorialsForLoop.svelte => FlowBuilderTutorialForLoop.svelte} (94%)

diff --git a/frontend/src/lib/components/FlowTutorials.svelte b/frontend/src/lib/components/FlowTutorials.svelte
index bf1a9bfc1b..ebcef75a66 100644
--- a/frontend/src/lib/components/FlowTutorials.svelte
+++ b/frontend/src/lib/components/FlowTutorials.svelte
@@ -1,28 +1,28 @@
 <script lang="ts">
 	import { skipAllTodos } from '$lib/tutorialUtils'
-	import FlowBranchAll from './tutorials/FlowBranchAll.svelte'
-	import FlowBranchOne from './tutorials/FlowBranchOne.svelte'
+	import FlowBuilderTutorialBranchAll from './tutorials/FlowBuilderTutorialBranchAll.svelte'
+	import FlowBuilderTutorialBranchOne from './tutorials/FlowBuilderTutorialBranchOne.svelte'
 	import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte'
-	import FlowBuilderTutorialsForLoop from './tutorials/FlowBuilderTutorialsForLoop.svelte'
-	import FlowErrorHandler from './tutorials/FlowErrorHandler.svelte'
+	import FlowBuilderTutorialForLoop from './tutorials/FlowBuilderTutorialForLoop.svelte'
+	import FlowBuilderTutorialErrorHandler from './tutorials/FlowBuilderTutorialErrorHandler.svelte'
 
 	let flowBuilderTutorialSimpleFlow: FlowBuilderTutorialSimpleFlow | undefined = undefined
-	let flowBuilderTutorialsForLoop: FlowBuilderTutorialsForLoop | undefined = undefined
-	let flowBranchOne: FlowBranchOne | undefined = undefined
-	let flowBranchAll: FlowBranchAll | undefined = undefined
-	let flowErrorHandler: FlowErrorHandler | undefined = undefined
+	let flowBuilderTutorialForLoop: FlowBuilderTutorialForLoop | undefined = undefined
+	let flowBuilderTutorialBranchOne: FlowBuilderTutorialBranchOne | undefined = undefined
+	let flowBuilderTutorialBranchAll: FlowBuilderTutorialBranchAll | undefined = undefined
+	let flowBuilderTutorialErrorHandler: FlowBuilderTutorialErrorHandler | undefined = undefined
 
 	export function runTutorialById(id: string, indexToInsertAt?: number | undefined) {
 		if (id === 'forloop') {
-			flowBuilderTutorialsForLoop?.runTutorial(indexToInsertAt)
+			flowBuilderTutorialForLoop?.runTutorial(indexToInsertAt)
 		} else if (id === 'branchone') {
-			flowBranchOne?.runTutorial()
+			flowBuilderTutorialBranchOne?.runTutorial()
 		} else if (id === 'branchall') {
-			flowBranchAll?.runTutorial()
+			flowBuilderTutorialBranchAll?.runTutorial()
 		} else if (id === 'action') {
 			flowBuilderTutorialSimpleFlow?.runTutorial()
 		} else if (id === 'error-handler') {
-			flowErrorHandler?.runTutorial()
+			flowBuilderTutorialErrorHandler?.runTutorial()
 		}
 	}
 
@@ -37,12 +37,27 @@
 	on:skipAll={skipAll}
 	on:reload
 />
-<FlowBuilderTutorialsForLoop
-	bind:this={flowBuilderTutorialsForLoop}
+<FlowBuilderTutorialForLoop
+	bind:this={flowBuilderTutorialForLoop}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialBranchOne
+	bind:this={flowBuilderTutorialBranchOne}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialBranchAll
+	bind:this={flowBuilderTutorialBranchAll}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialErrorHandler
+	bind:this={flowBuilderTutorialErrorHandler}
 	on:error
 	on:skipAll={skipAll}
 	on:reload
 />
-<FlowBranchOne bind:this={flowBranchOne} on:error on:skipAll={skipAll} on:reload />
-<FlowBranchAll bind:this={flowBranchAll} on:error on:skipAll={skipAll} on:reload />
-<FlowErrorHandler bind:this={flowErrorHandler} on:error on:skipAll={skipAll} on:reload />
diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index d124dc5696..9cbee5ca21 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 id="flow-editor-flow-atom" bind:this={scrollable} scrollableClass="grow min-w-0">
+	<Scrollable id="flow-editor-flow-atoms" 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/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index fbae0cf433..7cc97750c1 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -59,6 +59,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 
 <div
+	id="flow-editor-error-handler"
 	class={classNames(
 		'z-10',
 		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index a7bba251dc..1544972c4b 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -73,7 +73,7 @@ shouldUsePortal={true} -->
 				'w-5 h-5 flex items-center justify-center',
 				'outline-[1px] outline dark:outline-gray-500 outline-gray-300',
 				'text-secondary',
-				'bg-surface focus:outline-none hover:bg-surface-hover rounded '
+				'bg-surface focus:outline-none hover:bg-surface-hover rounded'
 			)}
 			on:pointerdown|preventDefault|stopPropagation={pointerdown}
 			on:pointerup={pointerup}
diff --git a/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte b/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte
index af70d38508..837281851d 100644
--- a/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte
+++ b/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte
@@ -11,6 +11,7 @@
 </script>
 
 <button
+	id={`flow-editor-flow-kind-${label.replaceAll(' ', '-').toLowerCase()}`}
 	class={twMerge(
 		'w-full text-left py-2 px-1.5 hover:bg-surface-hover text-xs font-medium transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
 		selected ? 'bg-surface-hover' : '',
diff --git a/frontend/src/lib/components/tutorials/FlowBranchAll.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
similarity index 81%
rename from frontend/src/lib/components/tutorials/FlowBranchAll.svelte
rename to frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
index 88eaff5496..68937f187d 100644
--- a/frontend/src/lib/components/tutorials/FlowBranchAll.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
-	import { triggerAddFlowStep, selectFlowStepKind } from './utils'
+	import { triggerPointerDown } from './utils'
 	import Tutorial from './Tutorial.svelte'
 	import { updateProgress } from '$lib/tutorialUtils'
-	import { nextId } from '../flows/flowModuleNextId'
 
-	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	let tutorial: Tutorial | undefined = undefined
 
@@ -22,9 +21,7 @@
 	on:error
 	on:skipAll
 	getSteps={(driver, options) => {
-		const id = nextId($flowStateStore, $flowStore)
 		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
-		const isFirst = id === 'a'
 
 		const steps = [
 			{
@@ -40,7 +37,7 @@
 					title: 'Add a step',
 					description: 'Click here to add a step to your flow',
 					onNextClick: () => {
-						triggerAddFlowStep(index)
+						triggerPointerDown(`#flow-editor-add-step-${index}`)
 
 						setTimeout(() => {
 							driver.moveNext()
@@ -62,14 +59,14 @@
 					title: 'Insert Branch all',
 					description: "Let's pick branch all",
 					onNextClick: () => {
-						selectFlowStepKind(isFirst ? 6 : 5)
+						triggerPointerDown('#flow-editor-flow-kind-branch-to-all')
 
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				},
-				element: `#flow-editor-insert-module > div > button:nth-child(${isFirst ? 6 : 5})`
+				element: '#flow-editor-flow-kind-branch-to-all'
 			},
 			{
 				element: '#flow-editor-branch-all-wrapper',
diff --git a/frontend/src/lib/components/tutorials/FlowBranchOne.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
similarity index 87%
rename from frontend/src/lib/components/tutorials/FlowBranchOne.svelte
rename to frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
index d7fbea5880..adc08ddd5a 100644
--- a/frontend/src/lib/components/tutorials/FlowBranchOne.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
-	import {
-		clickButtonBySelector,
-		triggerAddFlowStep,
-		selectFlowStepKind,
-		updateFlowModuleById
-	} from './utils'
+	import { clickButtonBySelector, updateFlowModuleById, triggerPointerDown } from './utils'
 	import Tutorial from './Tutorial.svelte'
 	import { updateProgress } from '$lib/tutorialUtils'
 	import { nextId } from '../flows/flowModuleNextId'
@@ -30,7 +25,6 @@
 	getSteps={(driver, options) => {
 		const id = nextId($flowStateStore, $flowStore)
 		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
-		const isFirst = id === 'a'
 
 		const steps = [
 			{
@@ -46,7 +40,7 @@
 					title: 'Branch one',
 					description: 'Windmill supports branches, let us add one',
 					onNextClick: () => {
-						triggerAddFlowStep(index)
+						triggerPointerDown(`#flow-editor-add-step-${index}`)
 
 						setTimeout(() => {
 							driver.moveNext()
@@ -66,16 +60,15 @@
 					title: 'Insert Branch one',
 					description: "Let's pick branch one",
 					onNextClick: () => {
-						selectFlowStepKind(isFirst ? 5 : 4)
+						triggerPointerDown('#flow-editor-flow-kind-branch-to-one')
 
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				},
-				element: `#flow-editor-insert-module > div > button:nth-child(${isFirst ? 5 : 4})`
+				element: '#flow-editor-flow-kind-branch-to-one'
 			},
-
 			{
 				element: '#flow-editor-edit-predicate',
 				popover: {
@@ -96,7 +89,6 @@
 					}
 				}
 			},
-
 			{
 				element: '#flow-editor-branch-one-wrapper',
 				popover: {
@@ -111,16 +103,14 @@
 					}
 				}
 			},
-
 			{
 				popover: {
 					title: 'Add steps',
-					description: 'You can now add step to one of the branches',
+					description: 'You can now add a step to one of the branches',
 					onNextClick: () => {
 						setTimeout(() => {
-							driver.moveNext()
-
 							updateProgress(2)
+							driver.moveNext()
 						})
 					}
 				}
diff --git a/frontend/src/lib/components/tutorials/FlowErrorHandler.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
similarity index 86%
rename from frontend/src/lib/components/tutorials/FlowErrorHandler.svelte
rename to frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
index 787e936ffb..973ced76ac 100644
--- a/frontend/src/lib/components/tutorials/FlowErrorHandler.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
 	import Tutorial from './Tutorial.svelte'
-	import { clickButtonBySelector } from './utils'
+	import { clickButtonBySelector, triggerPointerDown } from './utils'
 	import { updateProgress } from '$lib/tutorialUtils'
 
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -51,14 +51,14 @@
 			}
 		},
 		{
-			element: '#error-handler-toggle',
+			element: '#flow-editor-error-handler',
 			popover: {
 				title: 'Error handler',
 				description:
 					'You can add an error handler to your flow. It will be executed if any of the steps in the flow fails.',
 
 				onNextClick: () => {
-					clickButtonBySelector('#error-handler-toggle')
+					triggerPointerDown('#flow-editor-error-handler button')
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -73,26 +73,26 @@
 			element: '#flow-editor-insert-module'
 		},
 		{
-			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-atoms',
 			popover: {
 				title: 'Supported languages',
 				description: 'Windmill support the following languages/runtimes.'
 			}
 		},
 		{
-			element: '#flow-editor-action-script > button:nth-child(1)',
+			element: '#flow-editor-new-bun',
 			popover: {
 				title: 'Typescript',
-				description: "Let's pick an action to add to your flow",
+				description: "Let's create a Typescript error handler for your flow",
 				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-action-script > button > div > button:nth-child(1)')
+					clickButtonBySelector('#flow-editor-new-bun')
 
 					setTimeout(() => {
 						driver.moveNext()
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
similarity index 94%
rename from frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte
rename to frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
index e431608662..8e99b5d3d1 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
@@ -2,12 +2,7 @@
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
 	import { emptyFlowModuleState } from '../flows/utils'
-	import {
-		clickButtonBySelector,
-		triggerAddFlowStep,
-		selectFlowStepKind,
-		updateFlowModuleById
-	} from './utils'
+	import { clickButtonBySelector, updateFlowModuleById, triggerPointerDown } from './utils'
 	import Tutorial from './Tutorial.svelte'
 	import { updateProgress } from '$lib/tutorialUtils'
 	import { nextId } from '../flows/flowModuleNextId'
@@ -33,7 +28,6 @@
 	getSteps={(driver, options) => {
 		const id = nextId($flowStateStore, $flowStore)
 		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
-		const isFirst = id === 'a'
 
 		let tempId = ''
 
@@ -52,7 +46,7 @@
 					title: 'Add a step',
 					description: 'Click here to add a step to your flow',
 					onNextClick: () => {
-						triggerAddFlowStep(index)
+						triggerPointerDown(`#flow-editor-add-step-${index}`)
 
 						setTimeout(() => {
 							driver.moveNext()
@@ -71,16 +65,16 @@
 
 			{
 				popover: {
-					title: 'Insert loop',
-					description: "Let's pick forloop",
+					title: 'Insert a loop',
+					description: "Let's pick a for loop",
 					onNextClick: () => {
-						selectFlowStepKind(isFirst ? 4 : 3)
+						triggerPointerDown('#flow-editor-flow-kind-for-loop')
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				},
-				element: `#flow-editor-insert-module > div > button:nth-child(${isFirst ? 4 : 3})`
+				element: '#flow-editor-flow-kind-for-loop'
 			},
 
 			{
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
index 6e048a0bde..5dbae7f199 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
@@ -5,9 +5,8 @@
 	import {
 		clickButtonBySelector,
 		isFlowTainted,
-		selectFlowStepKind,
 		setInputBySelector,
-		triggerAddFlowStep,
+		triggerPointerDown,
 		waitForElementLoading
 	} from './utils'
 	import Tutorial from './Tutorial.svelte'
@@ -82,7 +81,7 @@
 				title: 'Add a step',
 				description: 'Click here to add a step to your flow',
 				onNextClick: () => {
-					triggerAddFlowStep(0)
+					triggerPointerDown(`#flow-editor-add-step-0`)
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -101,7 +100,7 @@
 				title: 'Pick an action',
 				description: 'Let’s pick an action to add to your flow',
 				onNextClick: () => {
-					selectFlowStepKind(1)
+					triggerPointerDown('#flow-editor-insert-module > div > div > button:nth-child(1)')
 
 					setTimeout(() => {
 						driver.moveNext()
@@ -118,7 +117,7 @@
 			}
 		},
 		{
-			element: '#flow-editor-flow-atom',
+			element: '#flow-editor-flow-atoms',
 			popover: {
 				title: 'Supported languages',
 				description: 'Windmill support the following languages/runtimes.'
@@ -143,7 +142,7 @@
 				title: 'Action editor',
 				description: 'Windmill provides a full code editor to write your actions',
 				onPrevClick: () => {
-					triggerAddFlowStep(0)
+					triggerPointerDown(`#flow-editor-add-step-0`)
 					setTimeout(() => {
 						driver.movePrevious()
 					})
diff --git a/frontend/src/lib/components/tutorials/TutorialControls.svelte b/frontend/src/lib/components/tutorials/TutorialControls.svelte
index 0ff7198e29..712f7ac39f 100644
--- a/frontend/src/lib/components/tutorials/TutorialControls.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialControls.svelte
@@ -18,10 +18,11 @@
 		</Alert>
 	{/if}
 	<div class="flex flex-row gap-2 justify-between w-full items-center">
-		<div class="text-xs">
-			Step {activeIndex} of {totalSteps}
-		</div>
-
+		{#if activeIndex !== undefined && totalSteps !== undefined}
+			<div class="text-xs">
+				Step {activeIndex + 1} of {totalSteps}
+			</div>
+		{/if}
 		<div class="flex flex-row gap-2">
 			<Button
 				size="xs2"
diff --git a/frontend/src/lib/components/tutorials/utils.ts b/frontend/src/lib/components/tutorials/utils.ts
index 3337f98f5e..f1cd29691b 100644
--- a/frontend/src/lib/components/tutorials/utils.ts
+++ b/frontend/src/lib/components/tutorials/utils.ts
@@ -29,21 +29,11 @@ export function clickFirstButtonBySelector(selector: string) {
 	}
 }
 
-export function triggerAddFlowStep(index: number) {
-	const button = document.querySelector(`#flow-editor-add-step-${index}`) as HTMLButtonElement
+export function triggerPointerDown(selector: string) {
+	const elem = document.querySelector(selector) as HTMLElement
 
-	if (button) {
-		button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-	}
-}
-
-export function selectFlowStepKind(index: number) {
-	const button = document.querySelector(
-		`#flow-editor-insert-module > div > div > button:nth-child(${index})`
-	) as HTMLButtonElement
-
-	if (button) {
-		button?.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+	if (elem) {
+		elem.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
 	}
 }