From 4245255fda99cd4d205f48fdbc008ea7d211d68a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 3 Dec 2022 00:18:06 +0100
Subject: [PATCH] fix workspace settings script picker

---
 frontend/src/lib/components/ArgInput.svelte   |  2 +-
 frontend/src/lib/components/Password.svelte   |  2 ++
 .../src/lib/components/ScriptPicker.svelte    | 20 ++++++++++++-------
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index c4f6c9a1d9..1307a0ce51 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -353,7 +353,7 @@
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items- justify-between">
 						{#if password}
-							<Password bind:password={value} />
+							<Password {disabled} bind:password={value} />
 						{:else}
 							<textarea
 								{autofocus}
diff --git a/frontend/src/lib/components/Password.svelte b/frontend/src/lib/components/Password.svelte
index de3e4d6952..c79de9e378 100644
--- a/frontend/src/lib/components/Password.svelte
+++ b/frontend/src/lib/components/Password.svelte
@@ -3,6 +3,7 @@
 	import { onMount } from 'svelte'
 	export let password: string
 	export let placeholder = '******'
+	export let disabled = false
 
 	onMount(() => {
 		const passwordToggle = document.querySelector('.js-password-toggle')
@@ -42,5 +43,6 @@
 		bind:value={password}
 		autocomplete="off"
 		{placeholder}
+		{disabled}
 	/>
 </div>
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 9e90183bdf..9641927545 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -31,37 +31,43 @@
 		if (itemKind == 'flow') {
 			items = (await FlowService.listFlows({ workspace: $workspaceStore! })).map((flow) => ({
 				value: flow.path,
-				label: `${flow.path}${flow.summary ? `| ${flow.summary}` : ''}`
+				label: `${flow.path}${flow.summary ? ` | ${flow.summary}` : ''}`
 			}))
 		} else if (itemKind == 'script') {
 			items = (await ScriptService.listScripts({ workspace: $workspaceStore!, kind })).map(
 				(script) => ({
 					value: script.path,
-					label: `${script.path}${script.summary ? `| ${script.summary}` : ''}`
+					label: `${script.path}${script.summary ? ` | ${script.summary}` : ''}`
 				})
 			)
 		} else {
 			items =
 				$hubScripts?.map((x) => ({
 					value: x.path,
-					label: `${x.path}${x.summary ? `| ${x.summary}` : ''}`
+					label: `${x.path}${x.summary ? ` | ${x.summary}` : ''}`
 				})) ?? []
 		}
 	}
 
 	$: $workspaceStore && itemKind && loadItems()
-
-	$: dispatch('select', { path: scriptPath })
 </script>
 
 <div class="flex flex-row  items-center gap-4 w-full">
 	{#if options.length > 1}
-		<div class="w-80">
+		<div class="w-80 mt-1">
 			<RadioButton bind:value={itemKind} {options} />
 		</div>
 	{/if}
 
-	<Select class="grow" bind:justValue={scriptPath} {items} placeholder="Pick a {itemKind}" />
+	<Select
+		class="grow"
+		on:change={() => {
+			dispatch('select', { path: scriptPath })
+		}}
+		bind:justValue={scriptPath}
+		{items}
+		placeholder="Pick a {itemKind}"
+	/>
 	{#if scriptPath !== undefined && scriptPath !== ''}
 		<Button
 			color="light"