From 90857685ac35d3376f6bfa8dd2f47153b2ca6563 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 25 Oct 2023 00:34:29 +0200
Subject: [PATCH] fix setinput for json objects

---
 .../src/lib/components/SimpleEditor.svelte    | 12 ++-
 .../details/DetailPageLayout.svelte           | 91 ++++++++++---------
 2 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 065176a400..48753c07dc 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -126,8 +126,16 @@
 
 	let width = 0
 	async function loadMonaco() {
-		model = meditor.createModel(code, lang, mUri.parse(uri))
-
+		try {
+			model = meditor.createModel(code, lang, mUri.parse(uri))
+		} catch (err) {
+			console.log('model already existed', err)
+			const nmodel = meditor.getModel(mUri.parse(uri))
+			if (!nmodel) {
+				throw err
+			}
+			model = nmodel
+		}
 		model.updateOptions(updateOptions)
 		let widgets: HTMLElement | undefined =
 			document.getElementById('monaco-widgets-root') ?? undefined
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index 2bccb210a1..99fba55860 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -9,49 +9,54 @@
 	export let hasStepDetails: boolean = false
 
 	let mobileTab: 'form' | 'detail' = 'form'
+
+	let clientWidth = 1000
 </script>
 
-<main class="h-screen w-full">
-	<div class="h-full hidden md:block">
-		<slot name="header" />
-		<SplitPanesWrapper>
-			<Splitpanes>
-				<Pane size={65} minSize={50}>
-					<slot name="form" />
-				</Pane>
-				<Pane size={35} minSize={15}>
-					<DetailPageDetailPanel {isOperator} {flow_json} {hasStepDetails}>
-						<slot slot="webhooks" name="webhooks" />
-						<slot slot="schedule" name="schedule" />
-						<slot slot="cli" name="cli" />
-						<slot slot="details" name="details" />
-						<slot slot="save_inputs" name="save_inputs" />
-						<slot slot="flow_step" name="flow_step" />
-					</DetailPageDetailPanel>
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
-	</div>
-	<div class="h-full visible md:hidden">
-		<slot name="header" />
-		<Tabs bind:selected={mobileTab}>
-			<Tab value="form">Run form</Tab>
-			<Tab value="detail">Details</Tab>
-			<svelte:fragment slot="content">
-				<TabContent value="form" class="flex flex-col flex-1 h-full">
-					<slot name="form" />
-				</TabContent>
-				<TabContent value="detail" class="flex flex-col flex-1 h-full">
-					<DetailPageDetailPanel {isOperator} {hasStepDetails}>
-						<slot slot="webhooks" name="webhooks" />
-						<slot slot="schedule" name="schedule" />
-						<slot slot="cli" name="cli" />
-						<slot slot="details" name="details" />
-						<slot slot="save_inputs" name="save_inputs" />
-						<slot slot="flow_step" name="flow_step" />
-					</DetailPageDetailPanel>
-				</TabContent>
-			</svelte:fragment>
-		</Tabs>
-	</div>
+<main class="h-screen w-full" bind:clientWidth>
+	{#if clientWidth >= 768}
+		<div class="h-full">
+			<slot name="header" />
+			<SplitPanesWrapper>
+				<Splitpanes>
+					<Pane size={65} minSize={50}>
+						<slot name="form" />
+					</Pane>
+					<Pane size={35} minSize={15}>
+						<DetailPageDetailPanel {isOperator} {flow_json} {hasStepDetails}>
+							<slot slot="webhooks" name="webhooks" />
+							<slot slot="schedule" name="schedule" />
+							<slot slot="cli" name="cli" />
+							<slot slot="details" name="details" />
+							<slot slot="save_inputs" name="save_inputs" />
+							<slot slot="flow_step" name="flow_step" />
+						</DetailPageDetailPanel>
+					</Pane>
+				</Splitpanes>
+			</SplitPanesWrapper>
+		</div>
+	{:else}
+		<div class="h-full">
+			<slot name="header" />
+			<Tabs bind:selected={mobileTab}>
+				<Tab value="form">Run form</Tab>
+				<Tab value="detail">Details</Tab>
+				<svelte:fragment slot="content">
+					<TabContent value="form" class="flex flex-col flex-1 h-full">
+						<slot name="form" />
+					</TabContent>
+					<TabContent value="detail" class="flex flex-col flex-1 h-full">
+						<DetailPageDetailPanel {isOperator} {hasStepDetails}>
+							<slot slot="webhooks" name="webhooks" />
+							<slot slot="schedule" name="schedule" />
+							<slot slot="cli" name="cli" />
+							<slot slot="details" name="details" />
+							<slot slot="save_inputs" name="save_inputs" />
+							<slot slot="flow_step" name="flow_step" />
+						</DetailPageDetailPanel>
+					</TabContent>
+				</svelte:fragment>
+			</Tabs>
+		</div>
+	{/if}
 </main>