Tutorials improvement (#2384)

* fix(frontend): fix tutorials

* fix(frontend): simplify

* fix(frontend): simplify

* fix(frontend): fix skip all

* fix(frontend): fix toggle

* fix(frontend): simplify

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

@@ -3,18 +3,20 @@
 	import 'driver.js/dist/driver.css'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
-	import TutorialItem from './TutorialItem.svelte'
-	import { clickButtonBySelector, triggerAddFlowStep, selectFlowStepKind } from './utils'
+	import { clickButtonBySelector, triggerAddFlowStep, selectFlowStepKind, tainted } from './utils'
 	import { updateProgress } from '$lib/tutorialUtils'
 	import { RawScript } from '$lib/gen'
 
-	export let shouldRenderButton: boolean = true
-
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	const dispatch = createEventDispatcher()
 
 	export function runTutorial() {
+		if (tainted($flowStore)) {
+			dispatch('error', { detail: 'branchall' })
+			return
+		}
+
 		const branchAllTutorial = driver({
 			showProgress: true,
 			allowClose: true,
@@ -96,6 +98,7 @@
 						description: "Let's pick branch all",
 						onNextClick: () => {
 							selectFlowStepKind(6)
+
 							setTimeout(() => {
 								branchAllTutorial.moveNext()
 							})
@@ -216,12 +219,3 @@
 		branchAllTutorial.drive()
 	}
 </script>
-
-{#if shouldRenderButton}
-	<TutorialItem
-		on:click={() => runTutorial()}
-		label="Branch all tutorial"
-		index={3}
-		id="flow-builder-tutorial-branchall"
-	/>
-{/if}

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

@@ -3,22 +3,25 @@
 	import 'driver.js/dist/driver.css'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
-	import TutorialItem from './TutorialItem.svelte'
 	import {
 		clickButtonBySelector,
 		setInputBySelector,
 		triggerAddFlowStep,
-		selectFlowStepKind
+		selectFlowStepKind,
+		tainted
 	} from './utils'
 	import { updateProgress } from '$lib/tutorialUtils'
 	import { RawScript } from '$lib/gen'
 
-	export let shouldRenderButton: boolean = true
-
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
 
 	export function runTutorial() {
+		if (tainted($flowStore)) {
+			dispatch('error', { detail: 'branchone' })
+			return
+		}
+
 		const branchOneTutorial = driver({
 			showProgress: true,
 			allowClose: true,
@@ -308,12 +311,3 @@
 		branchOneTutorial.drive()
 	}
 </script>
-
-{#if shouldRenderButton}
-	<TutorialItem
-		on:click={() => runTutorial()}
-		label="Branch one tutorial"
-		index={2}
-		id="flow-builder-tutorial-branchone"
-	/>
-{/if}

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

@@ -1,25 +1,28 @@
 <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 { updateProgress } from '$lib/tutorialUtils'
-	import TutorialItem from './TutorialItem.svelte'
 	import {
 		clickButtonBySelector,
 		selectFlowStepKind,
 		setInputBySelector,
+		tainted,
 		triggerAddFlowStep
 	} from './utils'
 
-	export let shouldRenderButton: boolean = true
-
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
 
 	const queue: string[] = []
 
 	export function runTutorial() {
+		if (tainted($flowStore)) {
+			dispatch('error', { detail: 'action' })
+			return
+		}
+
 		const simpleFlowTutorial = driver({
 			showProgress: true,
 			allowClose: true,
@@ -247,7 +250,7 @@
 							$flowStore = $flowStore
 							dispatch('reload')
 
-							tick().then(() => {
+							setTimeout(() => {
 								simpleFlowTutorial.moveNext()
 							})
 						}
@@ -312,12 +315,3 @@
 		simpleFlowTutorial.drive()
 	}
 </script>
-
-{#if shouldRenderButton}
-	<TutorialItem
-		on:click={() => runTutorial()}
-		label="Simple flow tutorial"
-		index={0}
-		id="flow-builder-tutorial-action"
-	/>
-{/if}

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

@@ -3,25 +3,28 @@
 	import 'driver.js/dist/driver.css'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
-	import TutorialItem from './TutorialItem.svelte'
 	import { emptyFlowModuleState } from '../flows/utils'
 	import {
 		clickButtonBySelector,
 		setInputBySelector,
 		triggerAddFlowStep,
 		selectFlowStepKind,
-		selectOptionsBySelector
+		selectOptionsBySelector,
+		tainted
 	} from './utils'
 	import { updateProgress } from '$lib/tutorialUtils'
 
-	export let shouldRenderButton: boolean = true
-
 	const { flowStore, selectedId, flowStateStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
 	const dispatch = createEventDispatcher()
 
 	export function runTutorial() {
+		if (tainted($flowStore)) {
+			dispatch('error', { detail: 'forloop' })
+			return
+		}
+
 		const forloopTutorial = driver({
 			showProgress: true,
 			allowClose: true,
@@ -405,12 +408,3 @@
 		forloopTutorial.drive()
 	}
 </script>
-
-{#if shouldRenderButton}
-	<TutorialItem
-		on:click={() => runTutorial()}
-		label="For loops tutorial"
-		index={1}
-		id="flow-builder-tutorial-forloops"
-	/>
-{/if}

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

@@ -7,21 +7,24 @@
 
 	export let label: string
 	export let index: number
+	export let shouldRenderButton: boolean = true
 	export let id: string
 </script>
 
-<MenuItem on:click>
-	<div
-		{id}
-		class={classNames(
-			'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-		)}
-	>
-		{#if $tutorialsToDo.includes(index)}
-			<Circle size={16} />
-		{:else}
-			<CheckCircle size={16} color="green" />
-		{/if}
-		{label}
-	</div>
-</MenuItem>
+{#if shouldRenderButton}
+	<MenuItem on:click>
+		<div
+			{id}
+			class={classNames(
+				'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
+			)}
+		>
+			{#if $tutorialsToDo.includes(index)}
+				<Circle size={16} />
+			{:else}
+				<CheckCircle size={16} color="green" />
+			{/if}
+			{label}
+		</div>
+	</MenuItem>
+{/if}

frontend/src/lib/components/tutorials/utils.ts

@@ -1,3 +1,5 @@
+import type { Flow } from '$lib/gen'
+
 export function setInputBySelector(selector: string, value: string) {
 	const input = document.querySelector(selector) as HTMLInputElement
 
@@ -41,3 +43,7 @@ export function selectOptionsBySelector(selector: string, value: string) {
 		select.dispatchEvent(new Event('change', { bubbles: true }))
 	}
 }
+
+export function tainted(flow: Flow) {
+	return flow.value.modules.length > 0 || Object.keys(flow?.schema?.properties).length > 0
+}