From 48ff7be074d97f4c9fe640a9dd799cbe41e338c8 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 20 Jul 2022 19:28:11 +0200
Subject: [PATCH] minor UI fixes

---
 frontend/src/lib/components/FlowEditor.svelte |  2 +-
 frontend/src/lib/components/ModuleStep.svelte | 27 +++++----
 .../src/lib/components/ScriptEditor.svelte    |  2 +-
 .../components/flows/FlowModuleHeader.svelte  | 57 ++++++++++++-------
 frontend/src/routes/flows/add.svelte          |  3 +-
 5 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/frontend/src/lib/components/FlowEditor.svelte b/frontend/src/lib/components/FlowEditor.svelte
index bfa4847de7..b68e9a7392 100644
--- a/frontend/src/lib/components/FlowEditor.svelte
+++ b/frontend/src/lib/components/FlowEditor.svelte
@@ -15,7 +15,7 @@
 	export let pathError = ''
 	export let initialPath: string = ''
 
-	let open = -1
+	let open = 0
 	let args: Record<string, any> = {}
 	export let mode: FlowMode =
 		$flowStore?.value.modules[1]?.value.type == FlowModuleValue.type.FORLOOPFLOW ? 'pull' : 'push'
diff --git a/frontend/src/lib/components/ModuleStep.svelte b/frontend/src/lib/components/ModuleStep.svelte
index f8c356c70f..f3047f5653 100644
--- a/frontend/src/lib/components/ModuleStep.svelte
+++ b/frontend/src/lib/components/ModuleStep.svelte
@@ -31,19 +31,24 @@
 	)
 </script>
 
-<li class="flex flex-row flex-shrink max-w-full mx-auto mt-16">
+<li class="flex flex-row flex-shrink max-w-full mx-auto mt-16" id="module-{i}">
 	<div class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto">
-		<div class="flex items-center justify-between flex-wra p-4 sm:px-6">
+		<div class="flex items-center justify-between flex-wra p-4 sm:px-6 z-10">
 			<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
-				<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
-				<p>
-					{#if mod.value.path}
-						{mod.value.path}
-					{/if}
-					{#if mod.value.language}
-						Inline {mod.value.language}
-					{/if}
-				</p>
+				<div>
+					<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
+					<p>
+						{#if mod.value.path}
+							{mod.value.path}
+						{/if}
+						{#if mod.value.language}
+							Inline {mod.value.language}
+						{/if}
+						{#if !mod.value.path && !mod.value.language}
+							Select a script
+						{/if}
+					</p>
+				</div>
 			</FlowModuleHeader>
 		</div>
 		<div class="border-b border-gray-200" />
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 0a2df265e8..d7819a34fb 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -561,7 +561,7 @@
 			{:else if previewTab === 'input'}
 				<div class="break-all relative h-full font-sans">
 					<div class="p-2 w-full">
-						<button class="default-button w-full" on:click|stopPropagation={inferSchema}
+						<button class="default-button w-full mb-4" on:click|stopPropagation={inferSchema}
 							><Icon data={faMagic} scale={0.7} /><span class="pl-1"
 								>Infer schema from main parameters</span
 							>
diff --git a/frontend/src/lib/components/flows/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/FlowModuleHeader.svelte
index 59edbede7e..103fd18e84 100644
--- a/frontend/src/lib/components/flows/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/FlowModuleHeader.svelte
@@ -24,35 +24,52 @@
 		modalViewerLanguage = language
 		modalViewer.openModal()
 	}
+
+	function scrollIntoView({ target }) {
+		const el = document.querySelector(target.getAttribute('href'))
+		console.log(el)
+
+		if (!el) return
+		el.scrollIntoView({
+			behavior: 'smooth',
+			block: 'start',
+			inline: 'nearest'
+		})
+	}
 </script>
 
 <svelte:head>
 	{@html github}
 </svelte:head>
 
-<div>
+<div class="flex flex-row w-full space-x-2">
 	<slot />
-</div>
-<div>
-	{#if mod.value.type === FlowModuleValue.type.SCRIPT && !shouldPick}
-		<button
-			type="button"
-			on:click={() => {
-				open = i
-				fork(i)
-			}}
-			class="default-secondary-button-v2 text-xs"
-		>
-			<Icon data={faCodeBranch} class={`w-4 mr-2 h-4`} />
-			Fork
-		</button>
-		<button type="button" on:click={viewCode} class="default-secondary-button-v2 text-xs">
-			<Icon data={faCode} class="w-4 mr-2 h-4" />
-			View code
-		</button>
-	{/if}
+	<a
+		href="#module-{i}"
+		class="grow"
+		on:click={() => (open = i)}
+		on:click|preventDefault={scrollIntoView}><div class="w-full" /></a
+	>
 
 	<div class="flex flex-row space-x-2">
+		{#if mod.value.type === FlowModuleValue.type.SCRIPT && !shouldPick}
+			<button
+				type="button"
+				on:click={() => {
+					open = i
+					fork(i)
+				}}
+				class="default-secondary-button-v2 text-xs"
+			>
+				<Icon data={faCodeBranch} class={`w-4 mr-2 h-4`} />
+				Fork
+			</button>
+			<button type="button" on:click={viewCode} class="default-secondary-button-v2 text-xs">
+				<Icon data={faCode} class="w-4 mr-2 h-4" />
+				View code
+			</button>
+		{/if}
+
 		{#if mod.value.type === FlowModuleValue.type.RAWSCRIPT && !shouldPick}
 			<button
 				type="button"
diff --git a/frontend/src/routes/flows/add.svelte b/frontend/src/routes/flows/add.svelte
index f5804c49b1..a5a2837ed4 100644
--- a/frontend/src/routes/flows/add.svelte
+++ b/frontend/src/routes/flows/add.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores'
 
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
-	import { initFlow } from '$lib/components/flows/flowStore'
+	import { addModule, initFlow } from '$lib/components/flows/flowStore'
 	import type { Flow } from '$lib/gen'
 	import { emptySchema } from '$lib/utils'
 
@@ -23,6 +23,7 @@
 			  }
 
 	initFlow(flow)
+	addModule()
 </script>
 
 <FlowBuilder />