From 1e3bc847872264a7f245fc09b27f12105defa87f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 12 Jun 2023 17:57:46 +0200
Subject: [PATCH] fix: fix use input from input library + make selected subgrid
 clearer

---
 frontend/src/lib/components/RunForm.svelte    |  4 +++
 .../apps/components/layout/AppModal.svelte    |  4 +--
 .../apps/editor/SubGridEditor.svelte          |  4 ++-
 .../editor/component/ComponentWrapper.svelte  |  5 +--
 .../(logged)/flows/run/[...path]/+page.svelte | 31 ++++++++-----------
 .../scripts/run/[...hash]/+page.svelte        | 31 ++++++++-----------
 6 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index a6371935fc..a657791e31 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -56,6 +56,10 @@
 		$runFormStore = undefined
 	}
 
+	export function setArgs(nargs: Record<string, any>) {
+		args = nargs
+	}
+
 	export function run() {
 		runAction(scheduledForStr, args, invisible_to_owner)
 	}
diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index 8f1ef00e6e..5aad7f038a 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -98,14 +98,14 @@
 		class={twMerge(
 			`${
 				$mode == 'dnd' ? 'absolute' : 'fixed'
-			} top-0 bottom-0 left-0 right-0 transition-all duration-50 overflow-hidden`,
+			} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
 			open ? 'z-[1100] bg-black bg-opacity-60' : 'hidden'
 		)}
 	>
 		<div
 			style={css?.popup?.style}
 			class={twMerge(
-				'm-24 h-[80%] bg-white overflow-y-auto rounded-lg relative',
+				'm-24 max-h-[80%] bg-white overflow-y-auto rounded-lg relative',
 				css?.popup?.class
 			)}
 			use:clickOutside
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 7887b4bc6f..dfca892fcc 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -78,7 +78,9 @@
 		style="{containerHeight ? `height: ${containerHeight}px;` : ''} {style ?? ''}"
 	>
 		{#if $mode !== 'preview'}
-			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
+			<div
+				class={highlight ? 'border-gray-600 animate-border border-dashed border-2 min-h-full' : ''}
+			>
 				<Grid
 					allIdsInPath={$allIdsInPath}
 					items={$app.subgrids?.[subGridId] ?? []}
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte b/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte
index e07ac5af3e..354cef3e88 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte
@@ -6,7 +6,7 @@
 	export let id: string
 	export let type: string
 
-	const { app, connectingInput, selectedComponent, focusedGrid } =
+	const { app, connectingInput, selectedComponent } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	const { manuallyOpened } = getContext<ContextPanelContext>('ContextPanel')
@@ -14,9 +14,6 @@
 	function selectComponent(e: PointerEvent, id: string) {
 		if (!$connectingInput.opened) {
 			selectId(e, id, selectedComponent, $app)
-			if ($focusedGrid?.parentComponentId != id) {
-				$focusedGrid = undefined
-			}
 		}
 	}
 
diff --git a/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
index 00779125b8..2b2d64eccf 100644
--- a/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
@@ -88,8 +88,6 @@
 		duration: 200,
 		easing: cubicOut
 	})
-
-	let reloadArgs = 0
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -186,20 +184,18 @@
 							</div>
 						</Button>
 					</div>
-					{#key reloadArgs}
-						<RunForm
-							{loading}
-							autofocus
-							bind:this={runForm}
-							bind:isValid
-							detailed={false}
-							runnable={flow}
-							runAction={runFlow}
-							viewCliRun
-							isFlow
-							bind:args
-						/>
-					{/key}
+					<RunForm
+						{loading}
+						autofocus
+						bind:this={runForm}
+						bind:isValid
+						detailed={false}
+						runnable={flow}
+						runAction={runFlow}
+						viewCliRun
+						isFlow
+						bind:args
+					/>
 				{:else}
 					<Skeleton layout={[2, [3], 1, [2], 4, [4], 3, [8]]} />
 				{/if}
@@ -212,8 +208,7 @@
 					{isValid}
 					{args}
 					on:selected_args={(e) => {
-						args = JSON.parse(JSON.stringify(e.detail))
-						reloadArgs += 1
+						runForm?.setArgs(JSON.parse(JSON.stringify(e.detail)))
 					}}
 				/>
 			{/if}
diff --git a/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
index de04e41dbe..8a5591ffd0 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
@@ -112,8 +112,6 @@
 		duration: 200,
 		easing: cubicOut
 	})
-
-	let reloadArgs = 0
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -247,20 +245,18 @@
 								</div>
 							</Button>
 						</div>
-						{#key reloadArgs}
-							<RunForm
-								{loading}
-								autofocus
-								detailed={false}
-								bind:isValid
-								bind:this={runForm}
-								runnable={script}
-								runAction={runScript}
-								viewCliRun
-								isFlow={false}
-								bind:args
-							/>
-						{/key}
+						<RunForm
+							{loading}
+							autofocus
+							detailed={false}
+							bind:isValid
+							bind:this={runForm}
+							runnable={script}
+							runAction={runScript}
+							viewCliRun
+							isFlow={false}
+							bind:args
+						/>
 					{/if}
 				{:else}
 					<Skeleton layout={[2, [3], 1, [2], 4, [4], 3, [8]]} />
@@ -276,8 +272,7 @@
 					{isValid}
 					{args}
 					on:selected_args={(e) => {
-						args = JSON.parse(JSON.stringify(e.detail))
-						reloadArgs += 1
+						runForm?.setArgs(JSON.parse(JSON.stringify(e.detail)))
 					}}
 				/>
 			{/if}