fix: capture panel never stopping + http saved config (#5179)

frontend/src/lib/components/triggers/CaptureSection.svelte

@@ -30,7 +30,7 @@
 	export let captureTable: CaptureTable | undefined
 
 	const dispatch = createEventDispatcher<{
-		captureToggle: undefined
+		captureToggle: { disableOnly?: boolean }
 		updateSchema: { payloadData: Record<string, any>; redirect: boolean }
 	}>()
 
@@ -38,7 +38,10 @@
 
 	onDestroy(() => {
 		if (captureInfo.active) {
-			dispatch('captureToggle')
+			dispatch('captureToggle', {
+				// this on destroy can be called after capturing has already been stopped (aka after on destroy of the wrapper), make sure we do not start it again
+				disableOnly: true
+			})
 		}
 	})
 
@@ -70,7 +73,7 @@
 					<AnimatedButton animate={captureInfo.active} baseRadius="6px" wrapperClasses="ml-[-2px]">
 						<Button
 							size="xs2"
-							on:click={() => dispatch('captureToggle')}
+							on:click={() => dispatch('captureToggle', {})}
 							variant="border"
 							{disabled}
 							color="light"

frontend/src/lib/components/triggers/CaptureWrapper.svelte

@@ -110,12 +110,12 @@
 		)
 	}
 
-	export async function handleCapture() {
-		if (!captureActive) {
+	export async function handleCapture(e: CustomEvent<{ disableOnly?: boolean }>) {
+		if (captureActive || e.detail.disableOnly) {
+			captureActive = false
+		} else {
 			await setConfig()
 			capture()
-		} else {
-			captureActive = false
 		}
 	}
 
@@ -178,9 +178,7 @@
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
-				on:captureToggle={() => {
-					handleCapture()
-				}}
+				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
 		{:else if captureType === 'webhook'}
@@ -197,9 +195,7 @@
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
-				on:captureToggle={() => {
-					handleCapture()
-				}}
+				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
 		{:else if captureType === 'http'}
@@ -209,16 +205,15 @@
 				{showCapture}
 				can_write={true}
 				runnableArgs={data?.args}
-				bind:args
+				bind:route_path={args.route_path}
+				bind:http_method={args.http_method}
 				headless
 				{captureInfo}
 				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
-				on:captureToggle={() => {
-					handleCapture()
-				}}
+				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
 		{:else if captureType === 'email'}
@@ -235,9 +230,7 @@
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
-				on:captureToggle={() => {
-					handleCapture()
-				}}
+				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
 		{:else if captureType === 'kafka'}
@@ -252,9 +245,7 @@
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
-				on:captureToggle={() => {
-					handleCapture()
-				}}
+				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
 		{:else if captureType === 'nats'}
@@ -269,9 +260,7 @@
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
-				on:captureToggle={() => {
-					handleCapture()
-				}}
+				on:captureToggle={handleCapture}
 			/>
 		{/if}
 	</div>

frontend/src/lib/components/triggers/TriggersWrapper.svelte

@@ -44,7 +44,8 @@
 		<RouteEditorConfigSection
 			showCapture={false}
 			can_write={true}
-			bind:args
+			bind:route_path={args.route_path}
+			bind:http_method={args.http_method}
 			headless
 			{isFlow}
 			{path}

frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte

@@ -19,10 +19,9 @@
 
 	export let isFlow: boolean
 	export let path: string
-	export let args: Record<string, any> = { route_path: '', http_method: 'get' }
 	export let dirtyRoutePath: boolean = false
-	export let route_path = ''
-	export let http_method: 'get' | 'post' | 'put' | 'patch' | 'delete' = 'post'
+	export let route_path: string | undefined
+	export let http_method: 'get' | 'post' | 'put' | 'patch' | 'delete' | undefined
 	export let can_write: boolean = false
 	export let static_asset_config: { s3: string; storage?: string; filename?: string } | undefined =
 		undefined
@@ -36,12 +35,15 @@
 	let validateTimeout: NodeJS.Timeout | undefined = undefined
 
 	let routeError: string = ''
-	async function validateRoute(path: string, method: typeof http_method): Promise<void> {
+	async function validateRoute(
+		path: string | undefined,
+		method: typeof http_method
+	): Promise<void> {
 		if (validateTimeout) {
 			clearTimeout(validateTimeout)
 		}
 		validateTimeout = setTimeout(async () => {
-			if (!/^[\w-:]+(\/[\w-:]+)*$/.test(path)) {
+			if (!path || !method || !/^[\w-:]+(\/[\w-:]+)*$/.test(path)) {
 				routeError = 'Endpoint not valid'
 			} else if (initialRoutePath !== path && (await routeExists(path, method))) {
 				routeError = 'Endpoint already taken'
@@ -52,7 +54,7 @@
 		}, 500)
 	}
 
-	async function routeExists(route_path: string, method: typeof http_method) {
+	async function routeExists(route_path: string, method: Exclude<typeof http_method, undefined>) {
 		return await HttpTriggerService.existsRoute({
 			workspace: $workspaceStore!,
 			requestBody: {
@@ -67,9 +69,9 @@
 	}/${path.replaceAll('/', '.')}/${route_path}`
 
 	function getHttpRoute(route_path: string | undefined) {
-		return `${location.origin}${base}/api/r/${
-			isCloudHosted() ? $workspaceStore + '/' : ''
-		}${route_path}`
+		return `${location.origin}${base}/api/r/${isCloudHosted() ? $workspaceStore + '/' : ''}${
+			route_path ?? ''
+		}`
 	}
 
 	$: validateRoute(route_path, http_method)
@@ -78,13 +80,8 @@
 
 	$: fullRoute = getHttpRoute(route_path)
 
-	$: showCapture && (http_method = 'post')
-
-	function updateArgs(route_path: string, http_method: string) {
-		args && ((args.route_path = route_path), (args.http_method = http_method))
-	}
-
-	$: updateArgs(route_path, http_method)
+	$: !http_method && (http_method = 'post')
+	$: route_path === undefined && (route_path = '')
 </script>
 
 <div>
@@ -108,7 +105,7 @@
 				<CopyableCodeBlock
 					disabled={!captureInfo.active}
 					code={`curl \\
--X ${http_method.toUpperCase()} ${captureURL} \\
+-X ${(http_method ?? 'post').toUpperCase()} ${captureURL} \\
 -H 'Content-Type: application/json' \\
 -d '${JSON.stringify(runnableArgs ?? {}, null, 2)}'`}
 					language={bash}

frontend/src/lib/components/triggers/http/RouteEditorInner.svelte

@@ -166,10 +166,6 @@
 	let drawer: Drawer
 
 	let dirtyPath = false
-
-	let args: Record<string, any> = { route_path: '' }
-
-	$: args && (route_path = args.route_path)
 </script>
 
 {#if static_asset_config}
@@ -227,7 +223,6 @@
 					isFlow={is_flow}
 					{path}
 					bind:route_path
-					bind:args
 					bind:isValid
 					bind:dirtyRoutePath
 					bind:http_method