From a7fcf18f20d5d0fcd00880641c4d48d0f68ef368 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 23 Sep 2022 12:11:05 +0200
Subject: [PATCH] feat(frontend): Add a split panel in the test tab (#619)

---
 .../src/lib/components/FlowPreview.svelte     | 44 ++++++++++++-------
 .../flows/content/FlowModule.svelte           |  4 +-
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/FlowPreview.svelte b/frontend/src/lib/components/FlowPreview.svelte
index 4c26b81fa1..3d701bc96d 100644
--- a/frontend/src/lib/components/FlowPreview.svelte
+++ b/frontend/src/lib/components/FlowPreview.svelte
@@ -2,6 +2,7 @@
 	import type { Schema } from '$lib/common'
 	import type { Flow } from '$lib/gen'
 	import { sendUserToast, truncateRev } from '$lib/utils'
+	import { HSplitPane } from 'svelte-split-pane'
 
 	import { mapJobResultsToFlowState } from './flows/flowStateUtils'
 	import { flowStore } from './flows/flowStore'
@@ -49,20 +50,29 @@
 	}
 </script>
 
-<RunForm
-	runnable={extractStep($flowStore)}
-	runAction={(_, args) => runPreview(args)}
-	schedulable={false}
-	buttonText="Test just this step"
-	detailed={false}
-	args={stepArgs}
-/>
-
-{#if jobId}
-	<div class="w-full flex justify-center">
-		<FlowStatusViewer
-			{jobId}
-			on:jobsLoaded={(e) => mapJobResultsToFlowState(e.detail, 'justthis', i, j)}
-		/>
-	</div>
-{/if}
+<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
+	<left slot="left" class="relative">
+		<div class="overflow-auto h-full p-4">
+			<RunForm
+				runnable={extractStep($flowStore)}
+				runAction={(_, args) => runPreview(args)}
+				schedulable={false}
+				buttonText="Test just this step"
+				detailed={false}
+				args={stepArgs}
+			/>
+		</div>
+	</left>
+	<right slot="right">
+		<div class="overflow-auto h-full p-4">
+			{#if jobId}
+				<FlowStatusViewer
+					{jobId}
+					on:jobsLoaded={(e) => mapJobResultsToFlowState(e.detail, 'justthis', i, j)}
+				/>
+			{:else}
+				<span class="text-sm">No results yet</span>
+			{/if}
+		</div>
+	</right>
+</HSplitPane>
diff --git a/frontend/src/lib/components/flows/content/FlowModule.svelte b/frontend/src/lib/components/flows/content/FlowModule.svelte
index 1156a0fafd..760165c120 100644
--- a/frontend/src/lib/components/flows/content/FlowModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModule.svelte
@@ -156,9 +156,7 @@
 										</PropPickerWrapper>
 									</TabContent>
 									<TabContent value="test" class="flex flex-col flex-1 h-full">
-										<div class="p-4 overflow-y-auto">
-											<FlowPreview indexes={$selectedId} schema={flowModuleState.schema} />
-										</div>
+										<FlowPreview indexes={$selectedId} schema={flowModuleState.schema} />
 									</TabContent>
 
 									<TabContent value="advanced" class="flex flex-col flex-1 h-full">