fix(frontend): nats config conditional fields (#6473)

frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte

@@ -74,11 +74,16 @@
 	let showLoading = $state(false)
 	let defaultValues: Record<string, any> | undefined = $state(undefined)
 	let natsResourcePath = $state('')
-	let subjects = $state([''])
-	let useJetstream = $state(false)
-	let streamName = $state('')
-	let consumerName = $state('')
 	let initialConfig: Record<string, any> | undefined = undefined
+	let natsCfg: {
+		subjects: string[]
+		use_jetstream: boolean
+		stream_name?: string
+		consumer_name?: string
+	} = $state({
+		subjects: [],
+		use_jetstream: false
+	})
 	let deploymentLoading = $state(false)
 	let isValid = $state(false)
 	let optionTabSelected: 'error_handler' | 'retries' = $state('error_handler')
@@ -140,10 +145,13 @@
 			edit = false
 			itemKind = nis_flow ? 'flow' : 'script'
 			natsResourcePath = nDefaultValues?.nats_resource_path ?? ''
-			subjects = nDefaultValues?.subjects ?? ['']
-			useJetstream = nDefaultValues?.use_jetstream ?? false
-			streamName = useJetstream ? (nDefaultValues?.stream_name ?? '') : undefined
-			consumerName = useJetstream ? (nDefaultValues?.consumer_name ?? '') : undefined
+			const useJetstream = nDefaultValues?.use_jetstream ?? false
+			natsCfg = {
+				subjects: nDefaultValues?.subjects ?? [''],
+				use_jetstream: useJetstream,
+				stream_name: useJetstream ? (nDefaultValues?.stream_name ?? '') : undefined,
+				consumer_name: useJetstream ? (nDefaultValues?.consumer_name ?? '') : undefined
+			}
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
@@ -169,10 +177,13 @@
 		is_flow = cfg?.is_flow
 		path = cfg?.path
 		natsResourcePath = cfg?.nats_resource_path
-		streamName = cfg?.stream_name
-		consumerName = cfg?.consumer_name
-		subjects = cfg?.subjects || ['']
-		useJetstream = cfg?.use_jetstream || false
+		const useJetstream = cfg?.use_jetstream || false
+		natsCfg = {
+			subjects: cfg?.subjects || [''],
+			use_jetstream: useJetstream,
+			stream_name: useJetstream ? cfg?.stream_name || '' : undefined,
+			consumer_name: useJetstream ? cfg?.consumer_name || '' : undefined
+		}
 		enabled = cfg?.enabled
 		can_write = canWrite(cfg?.path, cfg?.extra_perms, $userStore)
 		error_handler_path = cfg?.error_handler_path
@@ -201,10 +212,10 @@
 			is_flow,
 			enabled,
 			nats_resource_path: natsResourcePath,
-			stream_name: streamName,
-			consumer_name: consumerName,
-			subjects,
-			use_jetstream: useJetstream,
+			stream_name: natsCfg.stream_name,
+			consumer_name: natsCfg.consumer_name,
+			subjects: natsCfg.subjects,
+			use_jetstream: natsCfg.use_jetstream,
 			error_handler_path,
 			error_handler_args,
 			retry
@@ -390,10 +401,7 @@
 			<NatsTriggersConfigSection
 				{path}
 				bind:natsResourcePath
-				bind:subjects
-				bind:useJetstream
-				bind:streamName
-				bind:consumerName
+				bind:natsCfg
 				on:valid-config={({ detail }) => {
 					isValid = detail
 				}}

frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte

@@ -6,16 +6,18 @@
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
 	import TestingBadge from '../testingBadge.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 
 	interface Props {
 		defaultValues?: Record<string, any> | undefined
 		headless?: boolean
 		natsResourcePath: string
-		subjects: string[]
-		useJetstream: boolean
-		streamName: string
-		consumerName: string
+		natsCfg: {
+			subjects: string[]
+			use_jetstream: boolean
+			stream_name?: string
+			consumer_name?: string
+		}
 		path: string
 		can_write?: boolean
 		showTestingBadge?: boolean
@@ -27,10 +29,7 @@
 		defaultValues = undefined,
 		headless = false,
 		natsResourcePath = $bindable(),
-		subjects = $bindable(),
-		useJetstream = $bindable(),
-		streamName = $bindable(),
-		consumerName = $bindable(),
+		natsCfg = $bindable(),
 		path,
 		can_write = true,
 		showTestingBadge = false
@@ -38,7 +37,7 @@
 
 	let otherArgsValid = $state(false)
 	let globalError = $derived(
-		!useJetstream && subjects && subjects.length > 1
+		!natsCfg.use_jetstream && natsCfg.subjects && natsCfg.subjects.length > 1
 			? 'Only one subject is supported if not using JetStream.'
 			: ''
 	)
@@ -91,40 +90,27 @@
 		const valid =
 			isConnectionValid &&
 			otherArgsValid &&
-			!!subjects &&
-			subjects.length > 0 &&
-			subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
+			!!natsCfg.subjects &&
+			natsCfg.subjects.length > 0 &&
+			natsCfg.subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
 			globalError === ''
 		dispatch('valid-config', valid)
 	})
 
 	function setStreamAndConsumerNames() {
-		if (!streamName) {
-			streamName = `windmill_stream-${$workspaceStore}-${path.replaceAll('/', '__')}`
+		if (!natsCfg.stream_name) {
+			natsCfg.stream_name = `windmill_stream-${$workspaceStore}-${path.replaceAll('/', '__')}`
 		}
-		if (!consumerName) {
-			consumerName = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
+		if (!natsCfg.consumer_name) {
+			natsCfg.consumer_name = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
 		}
 	}
 
-	function setNewArgs(args: Record<string, any>) {
-		subjects = args.subjects
-		useJetstream = args.use_jetstream
-		streamName = args.stream_name
-		consumerName = args.consumer_name
-		if (args.use_jetstream) {
-			setStreamAndConsumerNames()
+	$effect(() => {
+		if (natsCfg.use_jetstream) {
+			untrack(() => setStreamAndConsumerNames())
 		}
-	}
-
-	function getNatsArgsCfg() {
-		return {
-			subjects,
-			use_jetstream: useJetstream,
-			stream_name: streamName,
-			consumer_name: consumerName
-		}
-	}
+	})
 </script>
 
 <div>
@@ -160,7 +146,7 @@
 				<Subsection headless={true}>
 					<SchemaForm
 						schema={argsSchema}
-						bind:args={getNatsArgsCfg, (args) => setNewArgs(args)}
+						bind:args={natsCfg}
 						bind:isValid={otherArgsValid}
 						lightHeader={true}
 						disabled={!can_write}