From 28b6eaf33f3c3ca520925a1c3cd36651291bdd8a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 21 Sep 2022 02:48:30 +0200
Subject: [PATCH] improve preview results v1

---
 .../src/lib/components/FlowStatusViewer.svelte  |  9 ++-------
 .../components/flows/content/FlowModule.svelte  |  1 +
 .../src/lib/components/flows/flowStateUtils.ts  |  6 +++++-
 .../propertyPicker/ObjectViewer.svelte          |  5 ++++-
 .../propertyPicker/WarningMessage.svelte        | 17 ++---------------
 5 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index adfacaa981..323e5106d1 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -40,11 +40,6 @@
 		}
 	}
 
-	$: hasModules =
-		jobResult.job &&
-		Array.isArray(jobResult.job?.raw_flow?.modules) &&
-		jobResult.job?.raw_flow?.modules.length! > 1
-
 	function updateJobId() {
 		if (jobId !== jobResult.job?.id) {
 			loadJobInProgress()
@@ -60,7 +55,7 @@
 
 {#if jobResult.job}
 	<div class="flow-root w-full space-y-4">
-		<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Preview results</h3>
+		<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
 		<FlowPreviewStatus job={jobResult.job} />
 		{#if `result` in jobResult.job}
 			<FlowJobResult job={jobResult.job} />
@@ -98,7 +93,7 @@
 					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
 				</div>
 			{/each}
-		{:else if hasModules && Array.isArray(jobResult.innerJobs)}
+		{:else if Array.isArray(jobResult.innerJobs)}
 			<ul class="w-full">
 				<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
 					Detailed results
diff --git a/frontend/src/lib/components/flows/content/FlowModule.svelte b/frontend/src/lib/components/flows/content/FlowModule.svelte
index fd1cc87949..844c3515d8 100644
--- a/frontend/src/lib/components/flows/content/FlowModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModule.svelte
@@ -148,6 +148,7 @@
 								<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
 									<TabContent value="inputs" class="flex flex-col flex-1 h-full">
 										<PropPickerWrapper bind:pickableProperties={stepPropPicker.pickableProperties}>
+											<!-- <pre class="text-xs">{JSON.stringify($flowStateStore, null, 4)}</pre> -->
 											<SchemaForm
 												{schema}
 												inputTransform={true}
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index d24095de06..aa78944f32 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -12,6 +12,7 @@ import {
 	schemaToTsType
 } from '$lib/utils'
 import { get } from 'svelte/store'
+import type ObjectViewer from '../propertyPicker/ObjectViewer.svelte'
 import { flowStateStore, type FlowModuleSchema, type FlowState } from './flowState'
 import { flowStore } from './flowStore'
 import { loadSchemaFromModule } from './utils'
@@ -193,6 +194,8 @@ type StepPropPicker = {
 	extraLib: string
 }
 
+export const NEVER_TESTED_THIS_FAR = "never tested this far"
+
 export function getStepPropPicker(
 	indexes: number[],
 	flowInputSchema: Schema,
@@ -205,7 +208,8 @@ export function getStepPropPicker(
 	const flowInput = schemaToObject(flowInputSchema, args)
 	const results = getPreviousResults(flowState.modules, parentIndex)
 
-	const lastResult = results.length > 0 ? results[results.length - 1] : undefined
+	const lastResult = parentIndex == 0 ? flowInput : (
+		results.length > 0 ? results[results.length - 1] : NEVER_TESTED_THIS_FAR)
 
 	if (isInsideLoop) {
 		const forLoopFlowInput = {
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index cdba6819cc..f196128505 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -2,6 +2,7 @@
 	import { truncate } from '$lib/utils'
 
 	import { createEventDispatcher } from 'svelte'
+	import { NEVER_TESTED_THIS_FAR } from '../flows/flowStateUtils'
 	import { getTypeAsString } from '../flows/utils'
 	import { computeKey } from './utils'
 	import WarningMessage from './WarningMessage.svelte'
@@ -67,8 +68,10 @@
 							class="val rounded px-1 hover:bg-sky-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
-							{#if json[key] === undefined}
+							{#if json[key] === NEVER_TESTED_THIS_FAR}
 								<WarningMessage />
+							{:else if json[key] == undefined}
+								<span>undefined</span>
 							{:else}
 								<span>{truncate(JSON.stringify(json[key]), 40)}</span>
 							{/if}
diff --git a/frontend/src/lib/components/propertyPicker/WarningMessage.svelte b/frontend/src/lib/components/propertyPicker/WarningMessage.svelte
index 03d6ed2c05..dd5f44cc27 100644
--- a/frontend/src/lib/components/propertyPicker/WarningMessage.svelte
+++ b/frontend/src/lib/components/propertyPicker/WarningMessage.svelte
@@ -1,16 +1,3 @@
-<div class="flex px-4 pt-1 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
-	<svg
-		class="flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-		><path
-			fill-rule="evenodd"
-			d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-			clip-rule="evenodd"
-		/></svg
-	>
-	<div class="ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800">
-		Previous results are not available unless a preview is run on the previous step.
-	</div>
+<div class="flex px-2 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
+	<div class="text-sm font-medium text-yellow-700 dark:text-yellow-800">Require testing flow</div>
 </div>