feat(frontend): copy schema from json and past runs in flow inputs (#2352)

* feat(frontend): copy schema from json and past runs in flow inputs

* feat(frontend): copy schema from json and past runs in flow inputs

frontend/package-lock.json

@@ -95,7 +95,7 @@
 				"svelte-overlay": "^1.4.1",
 				"svelte-popperjs": "^1.3.2",
 				"svelte-preprocess": "^5.0.1",
-				"svelte-range-slider-pips": "^2.1.1",
+				"svelte-range-slider-pips": "^2.2.3",
 				"svelte-splitpanes": "^0.8.0",
 				"svelte2tsx": "^0.6.16",
 				"tailwindcss": "^3.3.2",
@@ -9073,9 +9073,9 @@
 			}
 		},
 		"node_modules/svelte-range-slider-pips": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/svelte-range-slider-pips/-/svelte-range-slider-pips-2.1.1.tgz",
-			"integrity": "sha512-fLkhfnyEc4uMOCZCl8IPyC0e9lujrjqdSyrKw28Y8j99YUPZR+pHnSxde7PqhM0ST6eyO4ugh2nFnLZTIoG9aQ==",
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/svelte-range-slider-pips/-/svelte-range-slider-pips-2.2.3.tgz",
+			"integrity": "sha512-ZAwX9+NDOE6cdqUTMfwBw27YI7NFgSXyPS1ARx3Zuaish2q6FuAtgx5d9+uqNzxQ7WVFhxgM7iQp8MvCpvy4Jw==",
 			"dev": true
 		},
 		"node_modules/svelte-splitpanes": {
@@ -16433,9 +16433,9 @@
 			}
 		},
 		"svelte-range-slider-pips": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/svelte-range-slider-pips/-/svelte-range-slider-pips-2.1.1.tgz",
-			"integrity": "sha512-fLkhfnyEc4uMOCZCl8IPyC0e9lujrjqdSyrKw28Y8j99YUPZR+pHnSxde7PqhM0ST6eyO4ugh2nFnLZTIoG9aQ==",
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/svelte-range-slider-pips/-/svelte-range-slider-pips-2.2.3.tgz",
+			"integrity": "sha512-ZAwX9+NDOE6cdqUTMfwBw27YI7NFgSXyPS1ARx3Zuaish2q6FuAtgx5d9+uqNzxQ7WVFhxgM7iQp8MvCpvy4Jw==",
 			"dev": true
 		},
 		"svelte-splitpanes": {

frontend/package.json

@@ -60,7 +60,7 @@
 		"svelte-overlay": "^1.4.1",
 		"svelte-popperjs": "^1.3.2",
 		"svelte-preprocess": "^5.0.1",
-		"svelte-range-slider-pips": "^2.1.1",
+		"svelte-range-slider-pips": "^2.2.3",
 		"svelte-splitpanes": "^0.8.0",
 		"svelte2tsx": "^0.6.16",
 		"tailwindcss": "^3.3.2",

frontend/src/lib/components/SavedInputs.svelte

@@ -15,6 +15,7 @@
 	export let scriptHash: string | null = null
 	export let scriptPath: string | null = null
 	export let flowPath: string | null = null
+	export let canSaveInputs: boolean = true
 
 	let runnableId: string | undefined = scriptPath || flowPath || undefined
 	let runnableType: RunnableType | undefined = scriptHash
@@ -150,16 +151,18 @@
 							>Shared inputs are available to anyone with access to the script</Tooltip
 						></span
 					>
-					<Button
-						on:click={() => saveInput(args)}
-						disabled={!isValid}
-						loading={savingInputs}
-						startIcon={{ icon: faSave }}
-						color="light"
-						size="xs"
-					>
-						<span>Save Current Input</span>
-					</Button>
+					{#if canSaveInputs}
+						<Button
+							on:click={() => saveInput(args)}
+							disabled={!isValid}
+							loading={savingInputs}
+							startIcon={{ icon: faSave }}
+							color="light"
+							size="xs"
+						>
+							<span>Save Current Input</span>
+						</Button>
+					{/if}
 				</div>
 
 				<div class="w-full flex flex-col gap-2 h-full overflow-y-auto p">

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -41,8 +41,6 @@
 		values = [resolvedConfig?.defaultLow ?? 0, resolvedConfig?.defaultHigh ?? 1]
 	}
 
-	let disabled = false
-
 	let slider: HTMLElement
 
 	let outputs = initOutput($worldStore, id, {
@@ -117,7 +115,7 @@
 					min={resolvedConfig.min == undefined ? 0 : +resolvedConfig.min}
 					max={resolvedConfig.max == undefined ? 1 : +resolvedConfig.max}
 					range
-					{disabled}
+					disabled={resolvedConfig.disabled}
 				/>
 				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
 			</div>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from '$lib/components/common'
+	import { Button, DrawerContent } from '$lib/components/common'
 
 	import SchemaEditor from '$lib/components/SchemaEditor.svelte'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
@@ -8,20 +8,42 @@
 	import { copyFirstStepSchema } from '../flowStore'
 	import type { FlowEditorContext } from '../types'
 	import CapturePayload from './CapturePayload.svelte'
+	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
+	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+	import { convert } from '@redocly/json-to-json-schema'
+	import { sendUserToast } from '$lib/toast'
+	import SavedInputs from '$lib/components/SavedInputs.svelte'
 
-	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { flowStore, flowStateStore, previewArgs, initialPath } =
+		getContext<FlowEditorContext>('FlowEditorContext')
 
 	let capturePayload: CapturePayload
+	let inputLibraryDrawer: Drawer
+	let jsonPayload: Drawer
+	let pendingJson: string
+
+	function importJson() {
+		const parsed = JSON.parse(pendingJson)
+
+		if (!parsed) {
+			sendUserToast('Invalid JSON', true)
+			return
+		}
+
+		$flowStore.schema = { required: [], properties: {}, ...convert(parsed) }
+
+		jsonPayload.closeDrawer()
+	}
 </script>
 
 <CapturePayload bind:this={capturePayload} />
 <FlowCard title="Flow Input">
 	<div class="p-6">
-		<div class="flex flex-row items-center space-x-4 pb-2 border-b border-gray-400">
+		<div class="flex flex-row items-center gap-2 pb-2 border-b border-gray-400">
 			<div>Copy input's schema from</div>
 			<Button
 				color="dark"
-				size="sm"
+				size="xs"
 				on:click={() => {
 					capturePayload.openDrawer()
 				}}
@@ -30,7 +52,25 @@
 			</Button>
 			<Button
 				color="dark"
-				size="sm"
+				size="xs"
+				on:click={() => {
+					jsonPayload.openDrawer()
+				}}
+			>
+				A JSON
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					inputLibraryDrawer.openDrawer()
+				}}
+			>
+				Past Runs/Input library
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
 				disabled={$flowStore.value.modules.length === 0 ||
 					$flowStore.value.modules[0].value.type == 'identity'}
 				on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
@@ -53,3 +93,39 @@
 		<SchemaForm bind:schema={$flowStore.schema} editableSchema={true} />
 	</div>
 </FlowCard>
+
+<Drawer bind:this={jsonPayload} size="800px">
+	<DrawerContent
+		title="Input schema from JSON"
+		on:close={() => {
+			jsonPayload.closeDrawer()
+		}}
+	>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
+		<svelte:fragment slot="actions">
+			<Button size="sm" on:click={importJson}>Import</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={inputLibraryDrawer}>
+	<DrawerContent title="Input library {initialPath}" on:close={inputLibraryDrawer?.toggleDrawer}>
+		<SavedInputs
+			flowPath={initialPath}
+			isValid={true}
+			args={$previewArgs}
+			canSaveInputs={false}
+			on:selected_args={(e) => {
+				const parsed = JSON.parse(JSON.stringify(e.detail))
+
+				if (!parsed) {
+					sendUserToast('Invalid JSON', true)
+					return
+				}
+
+				$flowStore.schema = { required: [], properties: {}, ...convert(parsed) }
+				inputLibraryDrawer?.closeDrawer()
+			}}
+		/>
+	</DrawerContent>
+</Drawer>