feat(frontend): Add flow editor tour

2023-03-10 18:36:53 +01:00
parent bfe5b56c99
commit c219eb0ee9
8 changed files with 29 additions and 21 deletions
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -4,8 +4,7 @@
 	import { initHistory, redo, undo } from '$lib/history'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { encodeState, formatCron, loadHubScripts, sendUserToast } from '$lib/utils'
-	import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons'
-	import { Redo, Undo } from 'lucide-svelte'
+	import { faCalendarAlt, faPen, faSave } from '@fortawesome/free-solid-svg-icons'
 	import { setContext } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import CenteredPage from './CenteredPage.svelte'
@@ -22,6 +21,7 @@
 	import { loadFlowSchedule, type Schedule } from './flows/scheduleUtils'
 	import type { FlowEditorContext } from './flows/types'
 	import { cleanInputs } from './flows/utils'
+	import { Tour } from './tutorial'

 	export let initialPath: string = ''
 	export let selectedId: string | undefined
@@ -29,6 +29,7 @@
 	export let loading = false
 	export let flowStore: Writable<Flow>
 	export let flowStateStore: Writable<FlowState>
+	export let tour = false

 	async function createSchedule(path: string) {
 		const { cron, args, enabled } = $scheduleStore
@@ -248,6 +249,10 @@

 <svelte:window on:keydown={onKeyDown} />

+{#if tour}
+	<Tour tutorial="flow" />
+{/if}
+
 {#if !$userStore?.operator}
 	<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 	<UnsavedConfirmationModal />
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -18,6 +18,7 @@
 	export { c as class }
 	export let wrapperClass = ''
 	export let style = ''
+	export let id = ''

 	$: selected && updateSelected()

@@ -42,6 +43,7 @@
 	<div
 		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
 		{style}
+		{id}
 	>
 		<slot {selected} />
 	</div>
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -29,7 +29,7 @@
 <div class="h-full overflow-hidden">
 	<FlowCard title="Settings">
 		<div class="h-full flex-1">
-			<Tabs bind:selected={$selectedId}>
+			<Tabs bind:selected={$selectedId} id="flow-tutorial-3">
 				<Tab value="settings-metadata">Metadata</Tab>
 				<Tab value="settings-schedule">Schedule</Tab>
 				<Tab value="settings-same-worker">Shared Directory</Tab>
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -35,7 +35,7 @@
 	let is_owner = false
 </script>

-<div class="flex flex-row-reverse justify-between items-center gap-x-2">
+<div id="flow-tutorial-4" class="flex flex-row-reverse justify-between items-center gap-x-2">
 	<Button
 		on:click={() => {
 			previewMode = 'whole'
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -133,7 +133,7 @@
 		<FlowConstantsItem />
 	</div>

-	<div class="flex-auto grow" bind:clientHeight={minHeight}>
+	<div id="flow-tutorial-1" class="flex-auto grow" bind:clientHeight={minHeight}>
 		<FlowGraph
 			insertable
 			scroll
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -84,6 +84,7 @@

 {#if insertable && modules && (label != 'Input' || modules.length == 0)}
 	<div
+		id="flow-tutorial-2"
 		class="{openMenu ? 'z-10' : ''} w-7 absolute {whereInsert == 'after'
 			? 'top-12'
 			: '-top-10'} left-[50%] right-[50%] -translate-x-1/2"
--- a/frontend/src/lib/components/tutorial/flow-steps.ts
+++ b/frontend/src/lib/components/tutorial/flow-steps.ts
@@ -4,8 +4,8 @@ export default (tour: Shepherd.Tour) => {
 	const steps: object[] | Shepherd.Step[] = [
 		{
 			id: 'welcome',
-			text: `<div class="text-xl font-bold mb-6">Windmill Script Builder</div>
-			<p class="mb-6">Build scripts with out own web editor, then use them anywhere in your flows, apps or as standalone computations with their auto-generated UI.</p>`,
+			text: `<div class="text-xl font-bold mb-6">Windmill Flow Editor</div>
+			<p class="mb-6">Build complex workflows from your scripts, configure them and get a clear visualization.</p>`,
 			buttons: [
 				{
 					text: 'See by myself',
@@ -21,13 +21,13 @@ export default (tour: Shepherd.Tour) => {
 			]
 		},
 		{
-			id: 'editor',
-			text: `<div class="text-xl font-bold mb-2">Web editor</div>
-			<p class="mb-2">Code directly from the web editor.</p>`,
+			id: 'graph',
+			text: `<div class="text-xl font-bold mb-2">Flow graph</div>
+			<p class="mb-2">Know how your flow is structured at a glimpse.</p>`,
 			cancelIcon: {
 				enabled: true
 			},
-			attachTo: { element: '#flow-tutorial-1', on: 'bottom-start' },
+			attachTo: { element: '#flow-tutorial-1', on: 'right-start' },
 			highlightClass: 'shepherd-highlighted-element',
 			scrollTo: false,
 			buttons: [
@@ -43,13 +43,13 @@ export default (tour: Shepherd.Tour) => {
 			]
 		},
 		{
-			id: 'preview',
-			text: `<div class="text-xl font-bold mb-2">UI preview</div>
-			<p class="mb-2">Preview the user interface generated from the signature of the script.</p>`,
+			id: 'modules',
+			text: `<div class="text-xl font-bold mb-2">Insert modules</div>
+			<p class="mb-2">Start building by adding modules. A module can be a simple script, a loop or a branching for example.</p>`,
 			cancelIcon: {
 				enabled: true
 			},
-			attachTo: { element: '#flow-tutorial-2', on: 'left-start' },
+			attachTo: { element: '#flow-tutorial-2 button', on: 'right-start' },
 			highlightClass: 'shepherd-highlighted-element',
 			scrollTo: false,
 			buttons: [
@@ -65,9 +65,9 @@ export default (tour: Shepherd.Tour) => {
 			]
 		},
 		{
-			id: 'parameters',
-			text: `<div class="text-xl font-bold mb-2">Parameters</div>
-			<p class="mb-2">Add variables, resources and configure your script.</p>`,
+			id: 'settings',
+			text: `<div class="text-xl font-bold mb-2">Settings</div>
+			<p class="mb-2">Configure schedules, authorizations, sharing parameters and many more.</p>`,
 			cancelIcon: {
 				enabled: true
 			},
@@ -88,8 +88,8 @@ export default (tour: Shepherd.Tour) => {
 		},
 		{
 			id: 'test',
-			text: `<div class="text-xl font-bold mb-2">Test script</div>
-			<p class="mb-2">Time to try your work! Test the script and iterate as much as you want.</p>`,
+			text: `<div class="text-xl font-bold mb-2">Test flow</div>
+			<p class="mb-2">Time to try your work! Test the flow and iterate as much as you want.</p>`,
 			cancelIcon: {
 				enabled: true
 			},
--- a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
@@ -89,4 +89,4 @@
 	$dirtyStore = true
 </script>

-<FlowBuilder {flowStore} {flowStateStore} {selectedId} {loading} />
+<FlowBuilder {flowStore} {flowStateStore} {selectedId} {loading} tour />