fix(frontend): fix flow tutorials (#2383)

* fix(frontend): fix flow tutorials

* fix(frontend): restore tainted

* fix(frontend): add guide about key arrows

* fix(frontend): add how first tutorial is started

* fix(frontend): add how first tutorial is started

* fix(frontend): remove debugger

* fix(frontend): fix deployement issues

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { driver } from 'driver.js'
 	import 'driver.js/dist/driver.css'
-	import { createEventDispatcher, getContext, tick } from 'svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
 	import TutorialItem from './TutorialItem.svelte'
 	import { emptyFlowModuleState } from '../flows/utils'
@@ -28,7 +28,7 @@
 			onPopoverRender: (popover, { config, state }) => {
 				if (state.activeIndex == 0) {
 					const skipThisButton = document.createElement('button')
-					skipThisButton.innerText = 'Skip this'
+					skipThisButton.innerText = 'Skip this tutorials'
 					skipThisButton.addEventListener('click', () => {
 						updateProgress(1)
 						forloopTutorial.destroy()
@@ -39,7 +39,7 @@
 					)
 
 					const skipAllButton = document.createElement('button')
-					skipAllButton.innerText = 'Skip all'
+					skipAllButton.innerText = 'Skip all tutorials'
 					skipAllButton.addEventListener('click', () => {
 						dispatch('skipAll')
 						forloopTutorial.destroy()
@@ -54,11 +54,11 @@
 
 					const div = document.createElement('div')
 
-					div.setAttribute('class', 'flex flex-row gap-2')
+					div.setAttribute('class', 'flex flex-row gap-2 justify-between w-full pt-2')
 
 					if (popoverDescription) {
-						div.appendChild(skipThisButton)
 						div.appendChild(skipAllButton)
+						div.appendChild(skipThisButton)
 
 						popoverDescription.appendChild(div)
 					}
@@ -67,8 +67,9 @@
 			steps: [
 				{
 					popover: {
-						title: 'Welcome in the Windmil Flow editor',
-						description: 'Learn how to build our first for loop to iterate on'
+						title: 'Welcome to the Windmil Flow editor',
+						description:
+							'Learn how to build our first for loop to iterate on. You can use arrow keys to navigate.'
 					}
 				},
 
@@ -201,7 +202,7 @@
 
 							dispatch('reload')
 
-							tick().then(() => {
+							setTimeout(() => {
 								forloopTutorial.moveNext()
 							})
 						}
@@ -251,7 +252,7 @@
 
 							dispatch('reload')
 
-							tick().then(() => {
+							setTimeout(() => {
 								forloopTutorial.moveNext()
 							})
 						}
@@ -267,7 +268,7 @@
 							$flowStore = $flowStore
 
 							dispatch('reload')
-							tick().then(() => {
+							setTimeout(() => {
 								forloopTutorial.moveNext()
 							})
 						}
@@ -326,7 +327,7 @@
 							$flowStore = $flowStore
 							dispatch('reload')
 
-							tick().then(() => {
+							setTimeout(() => {
 								forloopTutorial.moveNext()
 							})
 						}