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>
2024-11-01 01:05:54 +01:00
parent 984c6dd10c
commit 8cd1df4dca
12 changed files with 75 additions and 87 deletions
--- 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 />
--- 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
--- 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',
--- 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}
--- 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' : '',
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.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',
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.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()
 						})
 					}
 				}
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.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()
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.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'
 			},

 			{
--- 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()
 					})
--- 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"
--- 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 }))
 	}
 }