feat: add a All Static Inputs module to the flow editor

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { flowStore } from '$lib/components/flows/flowStore'
+
+	import FlowCard from '../common/FlowCard.svelte'
+
+	import { Alert, Badge } from '$lib/components/common'
+	import type { FlowModule, FlowModuleValue, InputTransform, PathScript, RawScript } from '$lib/gen'
+	import SchemaForm from '$lib/components/SchemaForm.svelte'
+	import { flowStateStore } from '../flowState'
+	import { setContext } from 'svelte'
+	import type { PropPickerWrapperContext } from '../propPicker/PropPickerWrapper.svelte'
+	import { writable } from 'svelte/store'
+
+	$: steps = (
+		$flowStore.value.modules
+			.map((x) => [x.value, x] as [FlowModuleValue, FlowModule])
+			.filter((x) => x[0].type == 'script' || x[0].type == 'rawscript') as [
+			PathScript | RawScript,
+			FlowModule
+		][]
+	).map(
+		([v, m]) =>
+			[
+				v.input_transforms,
+				Object.entries(v.input_transforms)
+					.filter((x) => x[1].type == 'static')
+					.map((x) => x[0]),
+				m
+			] as [Record<string, InputTransform>, string[], FlowModule]
+	)
+
+	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
+		focusProp: () => {},
+		propPickerConfig: writable(undefined),
+		clearFocus: () => {}
+	})
+</script>
+
+<div class="h-full overflow-hidden">
+	<FlowCard title="All Static Inputs">
+		<div class="h-full flex-1">
+			<Alert type="info" title="Static Inputs"
+				>This page centralizes the static inputs of every steps. It is akin to a file containing all
+				constants. Modifying a value here modify it in the step input directly. It is especially
+				useful when forking a flow to get an overview of all the variables to parametrize that are
+				not exposed directly as flow inputs.</Alert
+			>
+			{#each steps as [args, filter, m] (m.id)}
+				{#if filter.length > 0}
+					<div class="box">
+						<h2 class="pb-4 inline-flex items-center"
+							><span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
+							<Badge large color="indigo">{m.id}</Badge>
+						</h2>
+
+						<SchemaForm
+							noDynamicToggle
+							inputTransform
+							{filter}
+							schema={$flowStateStore[m.id]?.schema ?? {}}
+							bind:args
+						/>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</FlowCard>
+</div>

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

@@ -7,6 +7,7 @@
 	import FlowInput from './FlowInput.svelte'
 	import FlowFailureModule from './FlowFailureModule.svelte'
 	import { flowStore } from '../flowStore'
+	import FlowConstants from './FlowConstants.svelte'
 
 	export let initialPath: string
 
@@ -17,6 +18,8 @@
 	<FlowSettings {initialPath} />
 {:else if $selectedId === 'inputs'}
 	<FlowInput />
+{:else if $selectedId === 'constants'}
+	<FlowConstants />
 {:else if $selectedId === 'failure'}
 	<FlowFailureModule />
 {:else}

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

@@ -20,7 +20,7 @@
 <div class="flex flex-row space-x-2" bind:clientWidth={width}>
 	{#if module.value.type === 'script' || module.value.type === 'rawscript'}
 		<Popover
-			class="center-center rounded border p-2 duration-200
+			class="center-center rounded border p-2 
 			{moduleRetry
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
 				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
@@ -30,7 +30,7 @@
 			<svelte:fragment slot="text">Retries</svelte:fragment>
 		</Popover>
 		<Popover
-			class="center-center rounded border p-2 duration-200
+			class="center-center rounded border p-2
 			{module.stop_after_if
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
 				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
@@ -40,7 +40,7 @@
 			<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 		</Popover>
 		<Popover
-			class="center-center rounded border p-2 duration-200
+			class="center-center rounded border p-2 
 			{module.suspend
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
 				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
@@ -50,7 +50,7 @@
 			<svelte:fragment slot="text">Suspend</svelte:fragment>
 		</Popover>
 		<Popover
-			class="center-center rounded border p-2 duration-200
+			class="center-center rounded border p-2
 			{module.sleep
 				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
 				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"

frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte

@@ -27,7 +27,8 @@
 			'settings-graph',
 			'inputs',
 			'schedules',
-			'failure'
+			'failure',
+			'constants'
 		].includes($selectedId) ||
 		$selectedId?.includes('branch')
 

frontend/src/lib/components/flows/map/FlowConstantsItem.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { FlowEditorContext } from '../types'
+	import { getContext } from 'svelte'
+	import Icon from 'svelte-awesome'
+	import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
+	import { classNames } from '$lib/utils'
+
+	const { select, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
+
+	$: settingsClass = classNames(
+		'border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center',
+		$selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : ''
+	)
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div on:click={() => select('constants')} class={settingsClass}>
+	<Icon data={faDollarSign} class="mr-2" />
+	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate">
+		All Static Inputs
+	</span>
+</div>

frontend/src/lib/components/flows/map/FlowInputsItem.svelte

@@ -3,14 +3,13 @@
 	import { getContext } from 'svelte'
 	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
 	import Icon from 'svelte-awesome'
-	import { faFlagCheckered, faPen } from '@fortawesome/free-solid-svg-icons'
+	import { faFlagCheckered } from '@fortawesome/free-solid-svg-icons'
 
 	const { select, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 </script>
 
 <FlowModuleSchemaItem
 	on:click={() => select('inputs')}
-	isFirst
 	hasLine
 	selected={$selectedId === 'inputs'}
 	bold

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -19,6 +19,10 @@
 	import FlowInputsItem from './FlowInputsItem.svelte'
 	import InsertModuleButton from './InsertModuleButton.svelte'
 	import { slide } from 'svelte/transition'
+	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
+	import { Icon } from 'svelte-awesome'
+	import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
+	import FlowConstantsItem from './FlowConstantsItem.svelte'
 
 	export let root: boolean = false
 	export let modules: FlowModule[] | undefined
@@ -102,12 +106,17 @@
 <div class="flex flex-col h-full relative">
 	{#if root}
 		<div
-			class="z-10 sticky top-0 bg-gray-50 flex-initial inline-flex px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
 		>
 			<FlowSettingsItem />
 		</div>
+		<div
+			class="z-10 sticky inline-flex top-0 bg-gray-50 flex-initial  px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+		>
+			<FlowConstantsItem />
+		</div>
 	{/if}
-	<ul class="w-full flex-auto   {root ? 'px-2 pb-2 pt-3' : ''} py-1">
+	<ul class="w-full flex-auto {root ? 'px-2 pb-2 pt-3' : ''} py-1">
 		{#if root}
 			<li>
 				<FlowInputsItem />

frontend/src/lib/components/flows/map/FlowSettingsItem.svelte

@@ -2,12 +2,12 @@
 	import type { FlowEditorContext } from '../types'
 	import { getContext } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import { faCalendarAlt, faSliders } from '@fortawesome/free-solid-svg-icons'
+	import { faSliders } from '@fortawesome/free-solid-svg-icons'
 	import { classNames } from '$lib/utils'
 	import { Badge } from '$lib/components/common'
 	import { flowStore } from '../flowStore'
 
-	const { select, selectedId, schedule } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { select, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	$: settingsClass = classNames(
 		'border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center',