feat(frontend): add variables and resources to the prop picker

frontend/src/lib/components/FlowBuilder.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
-	import { FlowService, ScheduleService, type Flow } from '$lib/gen'
+	import {
+		FlowService,
+		ResourceService,
+		ScheduleService,
+		VariableService,
+		type Flow
+	} from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import {
 		encodeState,
@@ -12,7 +18,7 @@
 	} from '$lib/utils'
 	import { faGlobe, faPen } from '@fortawesome/free-solid-svg-icons'
 	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
-	import { onMount, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import { writable } from 'svelte/store'
 	import CenteredPage from './CenteredPage.svelte'
@@ -133,7 +139,8 @@
 	const selectedIdStore = writable<string>('settings')
 	const scheduleStore = writable<Schedule>({ args: {}, cron: '', enabled: false })
 	const previewArgsStore = writable<Record<string, any>>({})
-	const reservedVariablesStore = writable<Record<string, string>>({})
+	const variablesStore = writable<Record<string, string>>({})
+	const resourcesStore = writable<Record<string, string>>({})
 
 	function select(selectedId: string) {
 		selectedIdStore.set(selectedId)
@@ -144,7 +151,8 @@
 		schedule: scheduleStore,
 		select,
 		previewArgs: previewArgsStore,
-		reservedVariables: reservedVariablesStore
+		variables: variablesStore,
+		resources: resourcesStore
 	})
 
 	async function loadSchedule() {

frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 	import PropPicker from '$lib/components/propertyPicker/PropPicker.svelte'
-	import { setContext } from 'svelte'
+	import { setContext, getContext } from 'svelte'
 	import { HSplitPane } from 'svelte-split-pane'
 	import { writable, type Writable } from 'svelte/store'
 

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

@@ -6,5 +6,4 @@ export type FlowEditorContext = {
 	select: (id: string) => void
 	schedule: Writable<Schedule>
 	previewArgs: Writable<Record<string, any>>,
-	reservedVariables: Writable<Record<string, string>>
 }

frontend/src/lib/components/propertyPicker/ObjectViewer.svelte

@@ -13,6 +13,7 @@
 	export let currentPath: string = ''
 	export let pureViewer = false
 	export let collapsed = level == 3 || Array.isArray(json)
+	export let rawKey = false
 
 	const collapsedSymbol = '...'
 	let keys: string | any[]
@@ -34,7 +35,7 @@
 	const dispatch = createEventDispatcher()
 
 	function selectProp(key: string) {
-		dispatch('select', computeKey(key, isArray, currentPath))
+		dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath))
 	}
 </script>
 

frontend/src/lib/components/propertyPicker/PropPicker.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
+	import { ResourceService, VariableService } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
 	import { faClose } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import Icon from 'svelte-awesome'
+	import { Button } from '../common'
 	import type { PropPickerWrapperContext } from '../flows/propPicker/PropPickerWrapper.svelte'
+	import { createEventDispatcher } from 'svelte'
 
 	import ObjectViewer from './ObjectViewer.svelte'
 	import { keepByKey } from './utils'
 
 	export let pickableProperties: Object = {}
+	let variables: Record<string, string> = {}
+	let resources: Record<string, any> = {}
+	let displayVariable = false
+	let displayResources = false
+
+	const dispatch = createEventDispatcher()
 
 	const EMPTY_STRING = ''
 	let search = ''
@@ -16,6 +26,26 @@
 
 	$: propsFiltered =
 		search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search)
+
+	async function loadVariables() {
+		variables = Object.fromEntries(
+			(
+				await VariableService.listVariable({
+					workspace: $workspaceStore ?? ''
+				})
+			).map((variable) => [variable.path, variable.is_secret ? '***' : variable.value ?? ''])
+		)
+	}
+
+	async function loadResources() {
+		resources = Object.fromEntries(
+			(
+				await ResourceService.listResource({
+					workspace: $workspaceStore ?? ''
+				})
+			).map((resource) => [resource.path, resource.description ?? ''])
+		)
+	}
 </script>
 
 <div class="px-2 pt-2">
@@ -52,4 +82,56 @@
 	<div class="overflow-y-auto mb-2">
 		<ObjectViewer json={propsFiltered} on:select />
 	</div>
+	<span class="font-bold text-sm">Variables </span>
+	<div class="overflow-y-auto mb-2">
+		{#if displayVariable}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					displayVariable = false
+				}}>(-)</Button
+			>
+			<ObjectViewer
+				rawKey={true}
+				json={variables}
+				on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
+			/>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					await loadVariables()
+					displayVariable = true
+				}}>{'{...}'}</Button
+			>
+		{/if}
+	</div>
+	<span class="font-bold text-sm">Resources</span>
+	<div class="overflow-y-auto mb-2">
+		{#if displayResources}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					displayResources = false
+				}}>(-)</Button
+			>
+			<ObjectViewer
+				rawKey={true}
+				json={resources}
+				on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
+			/>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					await loadResources()
+					displayResources = true
+				}}>{'{...}'}</Button
+			>
+		{/if}
+	</div>
 </div>