feat(frontend): add input library to flow builder

.github/workflows/pypi_on_release.yml

@@ -28,8 +28,8 @@ jobs:
     needs: [publish_pypi]
     runs-on: [self-hosted, new]
     steps:
-      - name: Sleep for 30 seconds waiting for pypi to update index
-        run: sleep 30s
+      - name: Sleep for 120 seconds waiting for pypi to update index
+        run: sleep 120
         shell: bash
       - uses: actions/checkout@v3
         with:

frontend/src/lib/components/FlowBuilder.svelte

@@ -217,7 +217,8 @@
 		flowStateStore,
 		flowStore,
 		testStepStore,
-		saveDraft
+		saveDraft,
+		initialPath
 	})
 
 	async function loadSchedule() {
@@ -419,7 +420,7 @@
 
 		<!-- metadata -->
 		{#if $flowStateStore}
-			<FlowEditor {initialPath} {loading} />
+			<FlowEditor {loading} />
 		{:else}
 			<CenteredPage>Loading...</CenteredPage>
 		{/if}

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -2,7 +2,7 @@
 	import { Job, JobService, type Flow, type FlowModule } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons'
-	import { Button, Kbd } from './common'
+	import { Button, Drawer, Kbd } from './common'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import { dfs } from './flows/flowStore'
@@ -14,6 +14,8 @@
 	import CapturePayload from './flows/content/CapturePayload.svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { getModifierKey } from '$lib/utils'
+	import DrawerContent from './common/drawer/DrawerContent.svelte'
+	import SavedInputs from './SavedInputs.svelte'
 
 	let capturePayload: CapturePayload
 	export let previewMode: 'upTo' | 'whole'
@@ -24,7 +26,7 @@
 	let isRunning: boolean = false
 	let jobProgressReset: () => void
 
-	const { selectedId, previewArgs, flowStateStore, flowStore } =
+	const { selectedId, previewArgs, flowStateStore, flowStore, initialPath } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
 
@@ -88,12 +90,28 @@
 	$: if (job?.type === 'CompletedJob') {
 		isRunning = false
 	}
+
+	let inputLibraryDrawer: Drawer
 </script>
 
 <CapturePayload bind:this={capturePayload} />
 
 <svelte:window on:keydown={onKeyDown} />
 
+<Drawer bind:this={inputLibraryDrawer}>
+	<DrawerContent title="Input library {initialPath}" on:close={inputLibraryDrawer?.toggleDrawer}>
+		<SavedInputs
+			flowPath={initialPath}
+			isValid={true}
+			args={$previewArgs}
+			on:selected_args={(e) => {
+				$previewArgs = JSON.parse(JSON.stringify(e.detail))
+				inputLibraryDrawer?.closeDrawer()
+			}}
+		/>
+	</DrawerContent>
+</Drawer>
+
 <div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<div class="w-8">
@@ -139,25 +157,27 @@
 				<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
 			</Button>
 		{/if}
-		<!-- {#if flow.path != ''}
+		<div class="flex gap-2">
+			{#if initialPath != ''}
+				<Button
+					btnClasses="h-full truncate"
+					size="sm"
+					variant="border"
+					on:click={() => {
+						inputLibraryDrawer?.openDrawer()
+					}}>Input library</Button
+				>
+			{/if}
+
 			<Button
 				btnClasses="h-full truncate"
 				size="sm"
 				variant="border"
 				on:click={() => {
 					capturePayload.openDrawer()
-				}}>Input library</Button
+				}}>Fill args from a request</Button
 			>
-		{/if} -->
-
-		<Button
-			btnClasses="h-full truncate"
-			size="sm"
-			variant="border"
-			on:click={() => {
-				capturePayload.openDrawer()
-			}}>Fill args from a request</Button
-		>
+		</div>
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 

frontend/src/lib/components/ModulePreviewForm.svelte

@@ -2,7 +2,7 @@
 	import type { Schema } from '$lib/common'
 
 	import { allTrue } from '$lib/utils'
-	import { Plug } from 'lucide-svelte'
+	import { RefreshCw } from 'lucide-svelte'
 	import ArgInput from './ArgInput.svelte'
 	import { Button } from './common'
 	import { getContext } from 'svelte'
@@ -10,6 +10,7 @@
 	import { evalValue } from './flows/utils'
 	import type { FlowModule } from '$lib/gen'
 	import type { PickableProperties } from './flows/previousResults'
+	import type SimpleEditor from './SimpleEditor.svelte'
 
 	export let schema: Schema
 	export let args: Record<string, any> = {}
@@ -49,7 +50,14 @@
 
 	function plugIt(argName: string) {
 		args[argName] = evalValue(argName, mod, testStepStore, pickableProperties, true)
+		try {
+			editor?.[argName]?.setCode(JSON.stringify(args[argName], null, 4))
+		} catch {
+			//ignore
+		}
 	}
+
+	let editor: Record<string, SimpleEditor | undefined> = {}
 </script>
 
 <div class="w-full pt-2">
@@ -67,6 +75,7 @@
 							type={schema.properties[argName].type}
 							required={schema.required.includes(argName)}
 							pattern={schema.properties[argName].pattern}
+							bind:editor={editor[argName]}
 							bind:valid={inputCheck[argName]}
 							defaultValue={schema.properties[argName].default}
 							enum_={schema.properties[argName].enum}
@@ -83,7 +92,7 @@
 							size="sm"
 							variant="border"
 							color="light"
-							title="Eval input component"><Plug size={14} /></Button
+							title="Re-evaluate input step"><RefreshCw size={14} /></Button
 						>
 					</div>
 				</div>

frontend/src/lib/components/flows/FlowEditor.svelte

@@ -7,7 +7,6 @@
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from './types'
 
-	export let initialPath: string
 	export let loading: boolean
 
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -38,7 +37,7 @@
 					</div>
 				</div>
 			{:else}
-				<FlowEditorPanel {initialPath} />
+				<FlowEditorPanel />
 			{/if}
 		</Pane>
 	</Splitpanes>

frontend/src/lib/components/flows/content/FlowEditorPanel.svelte

@@ -8,13 +8,11 @@
 	import FlowFailureModule from './FlowFailureModule.svelte'
 	import FlowConstants from './FlowConstants.svelte'
 
-	export let initialPath: string
-
 	const { selectedId, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 </script>
 
 {#if $selectedId?.startsWith('settings')}
-	<FlowSettings {initialPath} />
+	<FlowSettings />
 {:else if $selectedId === 'Input'}
 	<FlowInput />
 {:else if $selectedId === 'Result'}

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -20,9 +20,7 @@
 	import { faClipboard } from '@fortawesome/free-solid-svg-icons'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 
-	const { selectedId, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
-
-	export let initialPath: string
+	const { selectedId, flowStore, initialPath } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	$: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`
 	$: syncedUrl = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$flowStore?.path}`

frontend/src/lib/components/flows/types.ts

@@ -16,4 +16,5 @@ export type FlowEditorContext = {
 	flowStateStore: Writable<FlowState>
 	testStepStore: Writable<Record<string, any>>
 	saveDraft: () => void
+	initialPath: string
 }

frontend/src/lib/components/flows/utils.ts

@@ -62,6 +62,9 @@ export function evalValue(
 			}
 		}
 	}
+	if (v == NEVER_TESTED_THIS_FAR) {
+		return undefined
+	}
 	return v
 }