feat(frontend): error handler tutorial (#2404)

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/FlowBuilderTutorials.svelte

@@ -49,6 +49,12 @@
 				index={3}
 			/>
 
+			<TutorialItem
+				on:click={() => flowTutorials?.runTutorialById('error-handler')}
+				label="Error handler"
+				index={4}
+			/>
+
 			<div class="border-t border-surface-hover" />
 			<MenuItem
 				on:click={() => {

frontend/src/lib/components/FlowTutorials.svelte

@@ -4,11 +4,13 @@
 	import FlowBranchOne from './tutorials/FlowBranchOne.svelte'
 	import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte'
 	import FlowBuilderTutorialsForLoop from './tutorials/FlowBuilderTutorialsForLoop.svelte'
+	import FlowErrorHandler from './tutorials/FlowErrorHandler.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
 
 	export function runTutorialById(id: string) {
 		if (id === 'forloop') {
@@ -19,6 +21,8 @@
 			flowBranchAll?.runTutorial()
 		} else if (id === 'action') {
 			flowBuilderTutorialSimpleFlow?.runTutorial()
+		} else if (id === 'error-handler') {
+			flowErrorHandler?.runTutorial()
 		}
 	}
 
@@ -41,3 +45,4 @@
 />
 <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 />

frontend/src/lib/components/Toggle.svelte

@@ -14,9 +14,10 @@
 	export let textClass = ''
 	export let textStyle = ''
 	export let color: 'blue' | 'red' = 'blue'
+	export let id = (Math.random() + 1).toString(36).substring(10)
 
 	export let size: 'sm' | 'xs' = 'sm'
-	const id = (Math.random() + 1).toString(36).substring(10)
+
 	const dispatch = createEventDispatcher()
 	const bothOptions = Boolean(options.left) && Boolean(options.right)
 </script>

frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte

@@ -77,6 +77,10 @@
 		{/if}
 	</div>
 	<div class="-my-1">
-		<Toggle checked={Boolean($flowStore?.value?.failure_module)} on:change={onToggle} />
+		<Toggle
+			checked={Boolean($flowStore?.value?.failure_module)}
+			on:change={onToggle}
+			id="error-handler-toggle"
+		/>
 	</div>
 </div>

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

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import type { FlowEditorContext } from '../flows/types'
+	import Tutorial from './Tutorial.svelte'
+	import { RawScript } from '$lib/gen/models/RawScript'
+	import { clickButtonBySelector } from './utils'
+	import { updateProgress } from '$lib/tutorialUtils'
+
+	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+
+	let tutorial: Tutorial | undefined = undefined
+
+	export function runTutorial() {
+		tutorial?.runTutorial()
+	}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	index={0}
+	name="error-handler"
+	on:error
+	on:skipAll
+	getSteps={(driver) => [
+		{
+			popover: {
+				title: 'Welcome to the Windmil Flow editor',
+				description: 'Learn how to recover from an error. You can use arrow keys to navigate.',
+				onNextClick: () => {
+					$flowStore.value.modules = [
+						{
+							id: 'a',
+							value: {
+								type: 'rawscript',
+								content:
+									'// import * as wmill from "npm:windmill-client@1"\n\nexport async function main(x: string) {\n  throw new Error("Fake error")\n}\n',
+								language: RawScript.language.DENO,
+								input_transforms: {
+									x: {
+										type: 'static',
+										value: ''
+									}
+								}
+							}
+						}
+					]
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			element: '#error-handler-toggle',
+			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')
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			popover: {
+				title: 'Steps kind',
+				description: "Choose the kind of step you want to add. Let's start with a simple action"
+			},
+			element: '#flow-editor-insert-module'
+		},
+		{
+			element: '#flow-editor-flow-inputs',
+			popover: {
+				title: 'Action configuration',
+				description: 'An action can be inlined, imported from your workspace or the Hub.'
+			}
+		},
+		{
+			element: '#flow-editor-action-script',
+			popover: {
+				title: 'Supported languages',
+				description: 'Windmill support the following languages/runtimes.'
+			}
+		},
+		{
+			element: '#flow-editor-action-script > button:nth-child(1)',
+			popover: {
+				title: 'Typescript',
+				description: "Let's pick an action to add to your flow",
+				onNextClick: () => {
+					clickButtonBySelector('#flow-editor-action-script > button > div > button:nth-child(1)')
+
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			element: '#flow-editor-test-flow',
+			popover: {
+				title: 'Test your flow',
+				description: 'We can now test our flow',
+				onNextClick: () => {
+					clickButtonBySelector('#flow-editor-test-flow')
+
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+
+		{
+			element: '#flow-editor-test-flow-drawer',
+			popover: {
+				title: 'Test your flow',
+				description:
+					'Finally we can test our flow, and view how the error handler is executed when a step fails',
+				onNextClick: () => {
+					clickButtonBySelector('#flow-editor-test-flow-drawer')
+
+					setTimeout(() => {
+						driver.moveNext()
+
+						updateProgress(4)
+					})
+				}
+			}
+		}
+	]}
+/>