From f0b82a942c08b9c3d036cc019c348e281119c5cd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 3 Nov 2022 23:26:07 +0100
Subject: [PATCH] UX improvements

---
 frontend/src/lib/components/ArgInput.svelte   | 12 +++-
 .../src/lib/components/ScriptBuilder.svelte   |  2 +-
 frontend/src/lib/components/Toggle.svelte     |  2 +
 .../src/lib/components/VariableEditor.svelte  | 19 +++---
 .../flows/content/FlowModuleEarlyStop.svelte  | 59 +++++++++++--------
 .../src/lib/components/flows/flowState.ts     |  1 -
 .../lib/components/flows/flowStateUtils.ts    |  1 +
 frontend/src/lib/components/flows/utils.ts    |  2 +
 8 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index e575cd5283..d5157bc026 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -14,6 +14,7 @@
 	import type { SchemaProperty } from '$lib/common'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import autosize from 'svelte-autosize'
+	import Toggle from './Toggle.svelte'
 
 	export let label: string = ''
 	export let value: any
@@ -151,7 +152,13 @@
 					<div class="mt-2">
 						<label class="text-gray-700">
 							Description
-							<textarea rows="1" bind:value={description} placeholder="Edit description" />
+							<textarea
+								class="mb-1"
+								use:autosize
+								rows="1"
+								bind:value={description}
+								placeholder="Field description"
+							/>
 							{#if type == 'string' && !contentEncoding && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'object'}
@@ -193,9 +200,8 @@
 					on:input={() => dispatch('input', { value, isRaw: true })}
 				/>
 			{:else if inputCat == 'boolean'}
-				<input
+				<Toggle
 					{disabled}
-					type="checkbox"
 					class={valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index b4e029ce58..2e91ac86fc 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -134,7 +134,7 @@
 					size="sm"
 					variant={step == 1 ? 'border' : 'contained'}
 					disabled={step === 1 && pathError !== ''}
-					btnClasses={step == 3 ? 'invisible' : ''}
+					btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
 					on:click={editScript}>Save (commit)</Button
 				>
 				<Button
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index bc5aba3307..b88d7487b0 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -6,6 +6,7 @@
 		right?: string
 	} = {}
 	export let checked: boolean = false
+	export let disabled = false
 
 	const id = (Math.random() + 1).toString(36).substring(10)
 	const dispatch = createEventDispatcher()
@@ -18,6 +19,7 @@
 		{/if}
 		<div class="relative" on:click|stopPropagation={() => {}}>
 			<input
+				{disabled}
 				type="checkbox"
 				value={false}
 				{id}
diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
index f05fd847c1..c9bc8a77ea 100644
--- a/frontend/src/lib/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -11,6 +11,7 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Alert from './common/alert/Alert.svelte'
 	import autosize from 'svelte-autosize'
+	import Toggle from './Toggle.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -124,10 +125,7 @@
 					/>
 				</div>
 				<div class="mt-4">
-					<label class="block">
-						<span class="text-sm mr-1">Secret</span>
-						<input type="checkbox" bind:checked={variable.is_secret} />
-					</label>
+					<Toggle bind:checked={variable.is_secret} options={{ right: 'Secret' }} />
 					{#if variable.is_secret}
 						<Alert type="warning" title="Not visible after this">
 							If the variable is a secret, you will not be able to read the value of it from the
@@ -156,7 +154,13 @@
 					<span class="font-semibold text-gray-700">Variable value</span>
 					<span class="text-sm text-gray-500">({variable.value.length}/3000 characters)</span>
 				</div>
-				<textarea type="text" use:autosize bind:value={variable.value} />
+				<textarea
+					rows="4"
+					type="text"
+					use:autosize
+					bind:value={variable.value}
+					placeholder="My variable value"
+				/>
 			</div>
 			<!-- {/if} -->
 
@@ -165,11 +169,12 @@
 					Description
 					<Required required={false} />
 				</div>
-				<input
+				<textarea
+					rows="4"
 					type="text"
 					use:autosize
 					bind:value={variable.description}
-					placeholder="Description (can use Markdown)"
+					placeholder="Used for X"
 				/>
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
index 09976cd487..3f691ca211 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
@@ -61,30 +61,39 @@
 		}}
 	/>
 
-	{#if flowModule.stop_after_if}
-		<span class="text-xs font-bold">Should skip if stopped</span>
-		<input type="checkbox" bind:checked={flowModule.stop_after_if.skip_if_stopped} />
-		<span class="text-xs font-bold">Stop condition expression</span>
-		<div class="border w-full">
-			<PropPickerWrapper
-				priorId={previousModuleId}
-				{pickableProperties}
-				on:select={({ detail }) => {
-					editor?.insertAtCursor(detail)
+	<div class="border p-2  flex flex-col {flowModule.stop_after_if ? '' : 'bg-gray-50'}">
+		{#if flowModule.stop_after_if}
+			<Toggle
+				bind:checked={flowModule.stop_after_if.skip_if_stopped}
+				options={{
+					right: 'Skip if stopped'
 				}}
-			>
-				<SimpleEditor
-					bind:this={editor}
-					lang="javascript"
-					bind:code={flowModule.stop_after_if.expr}
-					class="small-editor"
-				/>
-			</PropPickerWrapper>
-		</div>
-	{:else}
-		<span class="text-xs font-bold">Should skip if stopped</span>
-		<input type="checkbox" disabled />
-		<span class="text-xs font-bold">Stop condition expression</span>
-		<textarea disabled rows="3" class="min-h-[80px]" />
-	{/if}
+			/>
+			<span class="text-xs font-bold">Stop condition expression</span>
+			<div class="border w-full">
+				<PropPickerWrapper
+					priorId={previousModuleId}
+					{pickableProperties}
+					on:select={({ detail }) => {
+						editor?.insertAtCursor(detail)
+					}}
+				>
+					<SimpleEditor
+						bind:this={editor}
+						lang="javascript"
+						bind:code={flowModule.stop_after_if.expr}
+						class="small-editor"
+					/>
+				</PropPickerWrapper>
+			</div>
+		{:else}
+			<Toggle
+				disabled
+				options={{
+					right: 'Skip if stopped'
+				}}
+			/> <span class="text-xs font-bold">Stop condition expression</span>
+			<textarea disabled rows="3" class="min-h-[80px]" />
+		{/if}
+	</div>
 </div>
diff --git a/frontend/src/lib/components/flows/flowState.ts b/frontend/src/lib/components/flows/flowState.ts
index e8f26ba3e8..5c31912940 100644
--- a/frontend/src/lib/components/flows/flowState.ts
+++ b/frontend/src/lib/components/flows/flowState.ts
@@ -28,7 +28,6 @@ export async function initFlowState(flow: Flow) {
 		? await loadFlowModuleState(flow.value.failure_module)
 		: emptyFlowModuleState()
 
-	console.log(modulesState)
 	flowStateStore.set({
 		...modulesState,
 		failure: failureModule
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index 2108f44172..c8b87befe5 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -25,6 +25,7 @@ export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowM
 		}
 		return { schema, previewResult: NEVER_TESTED_THIS_FAR }
 	} catch (e) {
+		console.error(e)
 		return emptyFlowModuleState()
 	}
 }
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index 671d157148..b5a0a4c7b6 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -71,6 +71,8 @@ export async function loadSchemaFromModule(module: FlowModule): Promise<{
 			await inferArgs(mod.language!, mod.content ?? '', schema)
 		} else if (mod.path && mod.path != '') {
 			schema = await loadSchema(mod.path!)
+			console.log(mod.path)
+			console.log(schema)
 		} else {
 			return {
 				input_transforms: {},