Merge remote-tracking branch 'origin/glm/capture_ui_polishing' into h…

…ugo/win-423-http-triggerspreprocessor-capture

frontend/package.json

@@ -19,6 +19,8 @@
 	"devDependencies": {
 		"@floating-ui/core": "^1.3.1",
 		"@hey-api/openapi-ts": "^0.43.0",
+		"@melt-ui/pp": "^0.3.2",
+		"@melt-ui/svelte": "^0.86.2",
 		"@playwright/test": "^1.34.3",
 		"@rgossiaux/svelte-headlessui": "^2.0.0",
 		"@sveltejs/adapter-static": "^3.0.6",

frontend/src/lib/components/ArgInput.svelte

@@ -95,6 +95,7 @@
 		| { type: 'hash'; hash: string }
 		| undefined = undefined
 	export let otherArgs: Record<string, any> = {}
+	export let lightHeader = false
 
 	let oneOfSelected: string | undefined = undefined
 	async function updateOneOfSelected(oneOf: SchemaProperty[] | undefined) {
@@ -344,6 +345,7 @@
 				{contentEncoding}
 				{format}
 				{simpleTooltip}
+				{lightHeader}
 			/>
 		{/if}
 

frontend/src/lib/components/Dev.svelte

@@ -489,7 +489,8 @@
 		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		defaultValues: writable(undefined)
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined)
 	})
 	setContext<FlowEditorContext>('FlowEditorContext', {
 		selectedId: selectedIdStore,

frontend/src/lib/components/FieldHeader.svelte

@@ -14,10 +14,18 @@
 	export let labelClass: string = ''
 	export let prettify = false
 	export let simpleTooltip: string | undefined = undefined
+	export let lightHeader = false
 </script>
 
 <div class="inline-flex flex-row items-baseline truncated">
-	<span class={twMerge(disabled ? 'text-tertiary' : '', 'font-semibold', labelClass)}>
+	<span
+		class={twMerge(
+			disabled ? 'text-tertiary' : '',
+			'font-semibold',
+			lightHeader ? 'text-secondary text-sm font-normal' : '',
+			labelClass
+		)}
+	>
 		{#if prettify}
 			{label.replace(/_/g, ' ').split(' ').map(capitalize).join(' ')}
 		{:else}

frontend/src/lib/components/FlowBuilder.svelte

@@ -107,7 +107,7 @@
 	export let disabledFlowInputs = false
 	export let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
 	export let version: number | undefined = undefined
-	export let setSavedraftCb:  ((cb: () => void) => void) | undefined = undefined
+	export let setSavedraftCb: ((cb: () => void) => void) | undefined = undefined
 
 	// Used by multiplayer deploy collision warning
 	let deployedValue: Value | undefined = undefined // Value to diff against
@@ -536,7 +536,8 @@
 		primarySchedule: primaryScheduleStore,
 		triggersCount,
 		simplifiedPoll,
-		defaultValues: writable(undefined)
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined)
 	})
 
 	async function loadTriggers() {

frontend/src/lib/components/Label.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
+	import { twMerge } from 'tailwind-merge'
+	import Required from './Required.svelte'
+
 	export let label: string | undefined = undefined
 	export let primary = false
+	export let disabled = false
+	export let headless = false
+	export let required = false
 </script>
 
-<div class={$$props.class}>
+<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
 	<div class="flex flex-row justify-between items-center w-full">
-		<div class="flex flex-row items-center gap-1">
-			<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
-			<slot name="header" />
-		</div>
+		{#if !headless}
+			<div class="flex flex-row items-center gap-2">
+				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
+				{#if required}
+					<Required required={true} />
+				{/if}
+				<slot name="header" />
+			</div>
+		{/if}
 		<slot name="error" />
 		<slot name="action" />
 	</div>

frontend/src/lib/components/ResourceEditorDrawer.svelte

@@ -10,7 +10,8 @@
 	let resource_type: string | undefined = undefined
 	let defaultValues: Record<string, any> | undefined = undefined
 
-	let resourceEditor: { editResource: () => void } | undefined = undefined
+	let resourceEditor: { editResource: () => void; createResource: () => void } | undefined =
+		undefined
 
 	let path: string | undefined = undefined
 
@@ -32,10 +33,17 @@
 		defaultValues = nDefaultValues
 		drawer.openDrawer?.()
 	}
+
+	let mode: 'edit' | 'new' = newResource ? 'new' : 'edit'
+
+	$: path ? (mode = 'edit') : (mode = 'new')
 </script>
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
+	<DrawerContent
+		title={mode == 'edit' ? 'Edit ' + path : 'Add a resourcee'}
+		on:close={drawer.closeDrawer}
+	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
@@ -53,7 +61,11 @@
 			<Button
 				startIcon={{ icon: Save }}
 				on:click={() => {
-					resourceEditor?.editResource()
+					if (mode == 'edit') {
+						resourceEditor?.editResource()
+					} else {
+						resourceEditor?.createResource()
+					}
 					drawer.closeDrawer()
 				}}
 				disabled={!canSave}

frontend/src/lib/components/ResourcePicker.svelte

@@ -187,7 +187,7 @@
 					{disabled}
 					color="light"
 					variant="border"
-					size="sm"
+					size="xs"
 					on:click={() => appConnect?.open?.(resourceType)}
 					startIcon={{ icon: Plus }}
 					iconOnly={collection?.length > 0}

frontend/src/lib/components/SchemaForm.svelte

@@ -45,6 +45,7 @@
 		| { type: 'inline'; path?: string; lang: Script['language']; code: string }
 		| { type: 'hash'; hash: string }
 		| undefined = undefined
+	export let lightHeader = false
 
 	const dispatch = createEventDispatcher()
 
@@ -54,9 +55,6 @@
 		args = {}
 	}
 
-	$: console.log('args', args)
-	$: console.log('schema', schema)
-
 	export function setDefaults() {
 		const nargs = {}
 
@@ -265,6 +263,7 @@
 										orderEditable={dndConfig != undefined}
 										otherArgs={args}
 										{helperScript}
+										{lightHeader}
 									>
 										<svelte:fragment slot="actions">
 											<slot name="actions" />