windmill-components 1.493.9 → 1.501.4

package/package/components/triggers/http/RoutesGenerator.svelte

@@ -0,0 +1,313 @@
+<script lang="ts">import { HttpTriggerService } from '../../../gen';
+import { Pen, Save } from 'lucide-svelte';
+import Button from '../../common/button/Button.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import Section from '../../Section.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import Subsection from '../../Subsection.svelte';
+import RouteEditor from './RouteEditor.svelte';
+import { generateHttpTriggerFromOpenApi } from './utils';
+import { isCloudHosted } from '../../../cloud';
+import { usedTriggerKinds, workspaceStore } from '../../../stores';
+import FileInput from '../../common/fileInput/FileInput.svelte';
+import { emptyStringTrimmed, sendUserToast } from '../../../utils';
+import FolderPicker from '../../FolderPicker.svelte';
+import Required from '../../Required.svelte';
+import { Drawer, DrawerContent } from '../../common';
+import { get } from 'svelte/store';
+let { closeFn } = $props();
+let routeEditor;
+let routesGenerator;
+let selected = $state('OpenAPI');
+let openApiUrl = $state('');
+let openApiFile = $state('');
+let openApiRawEditorValue = $state('');
+let openApiFileEditorValue = $state('');
+let openApiUrlEditorValue = $state('');
+let isGeneratingHttpRoutes = $state(false);
+let httpTriggers = $state([]);
+let isFetchingOpenApiSpec = $state(false);
+let folderName = $state('');
+let forceRerender = $state(false);
+let code = $state('');
+let isCreating = $state(false);
+let acceptedFileTypes = ['.json', '.yaml'];
+let callback = $state(undefined);
+let lang = $derived.by(() => {
+    if (code.trimStart().startsWith('{')) {
+        return 'json';
+    }
+    return 'yaml';
+});
+function openRouteEditor(_path, newHttpTrigger) {
+    routeEditor.openNew(false, '', newHttpTrigger);
+}
+let isValidUrl = $derived.by(() => {
+    try {
+        const parsed = new URL(openApiUrl);
+        return /^https?:/.test(parsed.protocol);
+    }
+    catch (err) {
+        return false;
+    }
+});
+export function openDrawer() {
+    routesGenerator.openDrawer();
+}
+async function fetchOpenApiConfig() {
+    try {
+        isFetchingOpenApiSpec = true;
+        const response = await fetch(openApiUrl);
+        const data = await response.text();
+        openApiUrlEditorValue = data;
+        code = data;
+        forceRerender = !forceRerender;
+    }
+    catch (error) {
+        sendUserToast(error.message || error, true);
+    }
+    finally {
+        isFetchingOpenApiSpec = false;
+    }
+}
+async function saveHttpTrigger() {
+    try {
+        isCreating = true;
+        const message = await HttpTriggerService.createHttpTriggers({
+            workspace: $workspaceStore,
+            requestBody: httpTriggers
+        });
+        sendUserToast(message);
+        await closeFn();
+        routesGenerator.closeDrawer();
+        if (!get(usedTriggerKinds).includes('http')) {
+            usedTriggerKinds.update((t) => [...t, 'http']);
+        }
+        //reset
+        selected = 'OpenAPI';
+        openApiUrl = '';
+        openApiFile = '';
+        openApiRawEditorValue = '';
+        openApiFileEditorValue = '';
+        openApiUrlEditorValue = '';
+        httpTriggers = [];
+        folderName = '';
+        code = '';
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+    finally {
+        isCreating = false;
+    }
+}
+async function generateHttpTrigger() {
+    try {
+        isGeneratingHttpRoutes = true;
+        httpTriggers = await generateHttpTriggerFromOpenApi(code, folderName);
+        if (httpTriggers.length === 0) {
+            sendUserToast('No paths defined in the OpenAPI spec. Cannot generate HTTP routes.', true);
+        }
+    }
+    catch (error) {
+        sendUserToast(error.message || 'An unexpected error occurred', true);
+    }
+    finally {
+        isGeneratingHttpRoutes = false;
+    }
+}
+</script>
+
+<RouteEditor customSaveBehavior={callback} bind:this={routeEditor} />
+
+<Drawer size="700px" bind:this={routesGenerator}>
+	<DrawerContent
+		title={'Generate HTTP routes from OpenAPI spec'}
+		on:close={() => routesGenerator.closeDrawer()}
+	>
+		{#snippet actions()}
+			<Button
+				size="sm"
+				loading={isCreating}
+				disabled={httpTriggers.length === 0}
+				startIcon={{ icon: Save }}
+				on:click={saveHttpTrigger}
+			>
+				Save routes
+			</Button>
+		{/snippet}
+		{@render config()}
+	</DrawerContent>
+</Drawer>
+
+{#snippet config()}
+	<div class="h-full">
+		<Section label="HTTP routes generator" headless wrapperClass="h-full">
+			<div class="flex flex-col gap-1 h-full">
+				<Subsection>
+					<div class="flex flex-col gap-1">
+						<p class="text-xs text-tertiary">
+							Pick a folder to bind the generated HTTP routes to.<Required required={true} />
+						</p>
+						<FolderPicker bind:folderName />
+					</div>
+				</Subsection>
+
+				{#if !emptyStringTrimmed(folderName)}
+					<Subsection>
+						<ToggleButtonGroup
+							on:selected={({ detail }) => {
+								if (selected === 'OpenAPI') {
+									openApiRawEditorValue = code
+								} else if (selected === 'OpenAPI_File') {
+									openApiFileEditorValue = code
+								} else {
+									openApiUrlEditorValue = code
+								}
+
+								const type = detail as Source
+
+								if (type === 'OpenAPI') {
+									code = openApiRawEditorValue
+								} else if (type === 'OpenAPI_File') {
+									code = openApiFileEditorValue
+								} else {
+									code = openApiUrlEditorValue
+								}
+								forceRerender = !forceRerender
+							}}
+							bind:selected
+						>
+							{#snippet children({ item })}
+								<ToggleButton
+									tooltip="Paste an OpenAPI JSON/YAML specification directly to generate HTTP routes."
+									showTooltipIcon
+									label="Paste OpenAPI spec"
+									value="OpenAPI"
+									{item}
+								/>
+								<ToggleButton
+									tooltip="Upload an OpenAPI file in JSON/YAML format to generate HTTP routes."
+									showTooltipIcon
+									label="From OpenAPI file"
+									value="OpenAPI_File"
+									{item}
+								/>
+								<ToggleButton
+									tooltip="Provide a publicly accessible URL to an OpenAPI specification in JSON/YAML format to generate HTTP routes."
+									showTooltipIcon
+									label="From OpenAPI URL"
+									value="OpenAPI_URL"
+									{item}
+								/>
+							{/snippet}
+						</ToggleButtonGroup>
+
+						<div class="flex flex-col gap-2 mt-2">
+							{#if selected === 'OpenAPI'}
+								<ToggleButtonGroup bind:selected={lang}>
+									{#snippet children({ item })}
+										<ToggleButton value="yaml" label="YAML" {item} />
+										<ToggleButton value="json" label="JSON" {item} />
+									{/snippet}
+								</ToggleButtonGroup>
+							{:else if selected === 'OpenAPI_File'}
+								<FileInput
+									accept={acceptedFileTypes.join(',')}
+									multiple={false}
+									convertTo={'text'}
+									iconSize={24}
+									returnFileNames={true}
+									class="text-sm py-4"
+									on:change={async ({ detail }) => {
+										if (detail && detail.length > 0) {
+											if (openApiFile.endsWith('.json')) {
+												lang = 'json'
+											} else {
+												lang = 'yaml'
+											}
+											code = detail[0].data
+											openApiFileEditorValue = code
+											openApiFile = detail[0].name as string
+											forceRerender = !forceRerender
+											return
+										}
+										openApiFile = ''
+									}}
+								/>
+							{:else if selected === 'OpenAPI_URL'}
+								<div class="flex flex-row gap-1">
+									<input type="text" placeholder="OpenAPI URL" bind:value={openApiUrl} />
+									<Button
+										color="light"
+										spacingSize="sm"
+										size="xs"
+										loading={isFetchingOpenApiSpec}
+										disabled={!isValidUrl}
+										on:click={fetchOpenApiConfig}
+									>
+										Fetch
+									</Button>
+								</div>
+							{/if}
+							{#if selected === 'OpenAPI' || (selected === 'OpenAPI_File' && !emptyStringTrimmed(openApiFile)) || (selected === 'OpenAPI_URL' && !emptyStringTrimmed(openApiUrl))}
+								{#key forceRerender}
+									<SimpleEditor class="h-96" {lang} bind:code />
+								{/key}
+							{/if}
+							<Button
+								spacingSize="sm"
+								size="xs"
+								btnClasses="h-8"
+								loading={isGeneratingHttpRoutes}
+								on:click={generateHttpTrigger}
+								disabled={code.length === 0}
+								color="light"
+								variant="border">Generate HTTP routes</Button
+							>
+						</div>
+					</Subsection>
+
+					<div class="flex flex-col gap-1 mb-2">
+						{#each httpTriggers as httpTrigger, index}
+							<div
+								class="hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
+								first-of-type:rounded-t-md last-of-type:rounded-b-md flex justify-between mt-2"
+							>
+								<div>
+									<div class="text-primary">
+										{httpTrigger.http_method.toUpperCase()}
+										{isCloudHosted() || httpTrigger.workspaced_route
+											? $workspaceStore! + '/' + httpTrigger.route_path
+											: httpTrigger.route_path}
+									</div>
+									<div class="text-secondary text-xs truncate text-left font-light">
+										{httpTrigger.path}
+									</div>
+								</div>
+
+								<div class="flex gap-2 items-center justify-end">
+									<Button
+										on:click={() => {
+											callback = (newHttpTrigger) => {
+												httpTriggers[index] = newHttpTrigger as NewHttpTrigger
+												httpTriggers = httpTriggers
+											}
+											openRouteEditor(httpTriggers[index].path, httpTriggers[index])
+										}}
+										size="xs"
+										startIcon={{ icon: Pen }}
+										color="gray"
+									>
+										Edit
+									</Button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</Section>
+	</div>
+{/snippet}

package/package/components/triggers/http/RoutesGenerator.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    closeFn: () => Promise<void>;
+};
+declare const RoutesGenerator: import("svelte").Component<Props, {
+    openDrawer: () => void;
+}, "">;
+type RoutesGenerator = ReturnType<typeof RoutesGenerator>;
+export default RoutesGenerator;

package/package/components/triggers/http/utils.d.ts

@@ -1,3 +1,4 @@
+import type { NewHttpTrigger } from '../../../gen';
 import type { Writable } from 'svelte/store';
 export declare const SECRET_KEY_PATH = "secret_key_path";
 export declare const HUB_SCRIPT_ID = 19670;
@@ -6,3 +7,5 @@ export declare const SIGNATURE_TEMPLATE_FLOW_HUB_ID = "67";
 export declare function getHttpRoute(route_prefix: string, route_path: string | undefined, workspaced_route: boolean, workspace_id: string): string;
 export declare function replacePlaceholderForSignatureScriptTemplate(content: string): string;
 export declare function saveHttpRouteFromCfg(initialPath: string, routeCfg: Record<string, any>, edit: boolean, workspace: string, isAdmin: boolean, usedTriggerKinds: Writable<string[]>): Promise<boolean>;
+export type Source = 'OpenAPI' | 'OpenAPI_File' | 'OpenAPI_URL';
+export declare function generateHttpTriggerFromOpenApi(api: string, folderName: string): Promise<NewHttpTrigger[]>;

package/package/components/triggers/http/utils.js

@@ -1,7 +1,10 @@
 import { base } from '../../../base';
 import { isCloudHosted } from '../../../cloud';
+import { random_adj } from '../../random_positive_adjetive';
 import { HttpTriggerService } from '../../../gen/services.gen';
 import { sendUserToast } from '../../../toast';
+import { generateRandomString, OpenApi as WindmillOpenApi } from '../../../utils';
+import {} from 'openapi-types';
 import { get } from 'svelte/store';
 export const SECRET_KEY_PATH = 'secret_key_path';
 export const HUB_SCRIPT_ID = 19670;
@@ -25,10 +28,13 @@ export async function saveHttpRouteFromCfg(initialPath, routeCfg, edit, workspac
         route_path: isAdmin || !edit ? routeCfg.route_path : undefined,
         http_method: routeCfg.http_method,
         is_static_website: routeCfg.is_static_website,
+        static_asset_config: routeCfg.static_asset_config,
         workspaced_route: routeCfg.workspaced_route,
         authentication_resource_path: routeCfg.authentication_resource_path,
         wrap_body: routeCfg.wrap_body,
-        raw_string: routeCfg.raw_string
+        raw_string: routeCfg.raw_string,
+        description: routeCfg.description,
+        summary: routeCfg.summary
     };
     try {
         if (edit) {
@@ -56,3 +62,57 @@ export async function saveHttpRouteFromCfg(initialPath, routeCfg, edit, workspac
         return false;
     }
 }
+function convertOpenApiPathToRoutePath(openApiPath) {
+    return openApiPath.replace(/{([^}]+)}/g, ':$1').slice(1);
+}
+const MAX_PATH_LEN = 255;
+function generateFolderPath(folderName, summary) {
+    let suffix;
+    const prefix = `f/${folderName}/`;
+    if (!summary) {
+        suffix = `${random_adj()}_${generateRandomString(6)}`;
+    }
+    else {
+        const remainingLen = MAX_PATH_LEN - prefix.length;
+        if (summary.length > remainingLen) {
+            suffix = summary.substring(0, remainingLen).replaceAll(' ', '_');
+        }
+        else {
+            suffix = summary.replaceAll(' ', '_');
+        }
+    }
+    return prefix.concat(suffix).toLocaleLowerCase();
+}
+function processOpenApiDocument(document, folderName, _version) {
+    const paths = document.paths;
+    const httpTrigger = [];
+    for (const path in paths) {
+        const pathItem = paths[path];
+        if (!pathItem)
+            continue;
+        const methods = ['get', 'post', 'put', 'patch', 'delete'];
+        for (const method of methods) {
+            const routeDetail = pathItem[method];
+            if (!routeDetail)
+                continue;
+            httpTrigger.push({
+                route_path: convertOpenApiPathToRoutePath(path),
+                http_method: method,
+                authentication_method: 'none',
+                workspaced_route: false,
+                is_async: true,
+                script_path: '',
+                raw_string: false,
+                is_flow: false,
+                is_static_website: false,
+                wrap_body: false,
+                path: generateFolderPath(folderName, routeDetail.summary)
+            });
+        }
+    }
+    return httpTrigger;
+}
+export async function generateHttpTriggerFromOpenApi(api, folderName) {
+    const [document] = await WindmillOpenApi.parse(api);
+    return processOpenApiDocument(document, folderName);
+}

package/package/components/triggers/kafka/KafkaTriggerEditorInner.svelte

@@ -11,6 +11,7 @@ import Section from '../../Section.svelte';
 import { Loader2 } from 'lucide-svelte';
 import Label from '../../Label.svelte';
 import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte';
+import { untrack } from 'svelte';
 import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
 import { saveKafkaTriggerFromCfg } from './utils';
 import { handleConfigChange } from '../utils';
@@ -173,7 +174,8 @@ async function handleToggleEnabled(nEnabled) {
     sendUserToast(`${nEnabled ? 'enabled' : 'disabled'} Kafka trigger ${initialPath}`);
 }
 $effect(() => {
-    onCaptureConfigChange?.(captureConfig, isValid);
+    const args = [captureConfig, isValid];
+    untrack(() => onCaptureConfigChange?.(...args));
 });
 $effect(() => {
     if (!drawerLoading) {
@@ -192,9 +194,9 @@ $effect(() => {
 				: 'New Kafka trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				{@render actionsButtons('sm')}
-			</svelte:fragment>
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -284,6 +286,7 @@ $effect(() => {
 							bind:scriptPath={script_path}
 							allowRefresh={can_write}
 							allowEdit={!$userStore?.operator}
+							clearable
 						/>
 						{#if emptyString(script_path)}
 							<Button

package/package/components/triggers/kafka/KafkaTriggerEditorInner.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import { type Trigger } from '../utils';
 interface Props {
     useDrawer?: boolean;

package/package/components/triggers/kafka/KafkaTriggersConfigSection.svelte

@@ -5,6 +5,7 @@ import SchemaForm from '../../SchemaForm.svelte';
 import { workspaceStore } from '../../../stores';
 import TestTriggerConnection from '../TestTriggerConnection.svelte';
 import TestingBadge from '../testingBadge.svelte';
+import { untrack } from 'svelte';
 let { path, kafkaCfgValid = $bindable(false), kafkaResourcePath = $bindable(''), kafkaCfg = $bindable({}), can_write = true, showTestingBadge = false } = $props();
 const kafkaConfigSchema = {
     $schema: 'http://json-schema.org/draft-07/schema#',
@@ -34,7 +35,7 @@ function setGroupId() {
     }
 }
 $effect(() => {
-    path && setGroupId();
+    path && untrack(() => setGroupId());
 });
 </script>
 

package/package/components/triggers/mqtt/MqttEditorConfigSection.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import Section from '../../Section.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import Section from '../../Section.svelte';
 import Required from '../../Required.svelte';
 import { Plus, X } from 'lucide-svelte';
 import Subsection from '../../Subsection.svelte';
@@ -13,20 +14,11 @@ import TestTriggerConnection from '../TestTriggerConnection.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import TestingBadge from '../testingBadge.svelte';
-export let can_write = false;
-export let headless = false;
-export let mqtt_resource_path = '';
-export let subscribe_topics = [];
-export let v3_config = DEFAULT_V3_CONFIG;
-export let v5_config = DEFAULT_V5_CONFIG;
-export let client_version = 'v5';
-export let isValid = false;
-export let client_id = '';
-export let showTestingBadge = false;
-const activateV5Options = {
+let { can_write = false, headless = false, mqtt_resource_path = $bindable(''), subscribe_topics = $bindable([]), v3_config = $bindable(DEFAULT_V3_CONFIG), v5_config = $bindable(DEFAULT_V5_CONFIG), client_version = $bindable('v5'), isValid = $bindable(false), client_id = $bindable(''), showTestingBadge = false } = $props();
+const activateV5Options = $state({
     topic_alias: Boolean(v5_config.topic_alias),
     session_expiry_interval: Boolean(v5_config.session_expiry_interval)
-};
+});
 const isValidSubscribeTopics = (subscribe_topics) => {
     if (subscribe_topics.length === 0 ||
         subscribe_topics.find((subscribe_topic) => emptyStringTrimmed(subscribe_topic.topic))) {
@@ -34,16 +26,18 @@ const isValidSubscribeTopics = (subscribe_topics) => {
     }
     return true;
 };
-$: isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqtt_resource_path);
+run(() => {
+    isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqtt_resource_path);
+});
 </script>
 
 <div>
 	<Section label="MQTT" {headless}>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if showTestingBadge}
 				<TestingBadge />
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 		<div class="flex flex-col w-full gap-4">
 			<Subsection label="Connection setup">
 				<ResourcePicker resourceType="mqtt" disabled={!can_write} bind:value={mqtt_resource_path} />
@@ -61,7 +55,7 @@ $: isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqt
 						<div class="flex w-full gap-2 items-center">
 							<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
 								<div class="flex flex-row gap-2 w-full">
-									<!-- svelte-ignore a11y-label-has-associated-control -->
+									<!-- svelte-ignore a11y_label_has_associated_control -->
 									<label class="flex flex-col w-full gap-1">
 										<div class="flex gap-2 mb-1">
 											<span class="text-secondary text-sm">
@@ -104,10 +98,12 @@ $: isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqt
 												>
 											</span>
 										</div>
-										<ToggleButtonGroup bind:selected={v.qos} let:item>
-											<ToggleButton value={'qos0'} label="At most once (QoS 0)" {item} />
-											<ToggleButton value={'qos1'} label="At least once (QoS 1)" {item} />
-											<ToggleButton value={'qos2'} label="Exactly once (QoS 2)" {item} />
+										<ToggleButtonGroup bind:selected={v.qos}>
+											{#snippet children({ item })}
+												<ToggleButton value={'qos0'} label="At most once (QoS 0)" {item} />
+												<ToggleButton value={'qos1'} label="At least once (QoS 1)" {item} />
+												<ToggleButton value={'qos2'} label="Exactly once (QoS 2)" {item} />
+											{/snippet}
 										</ToggleButtonGroup>
 									</label>
 								</div>
@@ -135,7 +131,7 @@ $: isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqt
 								transition:fade|local={{ duration: 100 }}
 								class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
 								aria-label="Clear"
-								on:click={() => {
+								onclick={() => {
 									subscribe_topics = subscribe_topics.filter((_, index) => index !== i)
 								}}
 							>
@@ -169,9 +165,11 @@ $: isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqt
 
 			<Subsection label="Advanced" collapsable={true}>
 				<div class="flex p-2 flex-col gap-2 mt-3">
-					<ToggleButtonGroup bind:selected={client_version} let:item>
-						<ToggleButton value="v5" label="Version 5" {item} />
-						<ToggleButton value="v3" label="Version 3" {item} />
+					<ToggleButtonGroup bind:selected={client_version}>
+						{#snippet children({ item })}
+							<ToggleButton value="v5" label="Version 5" {item} />
+							<ToggleButton value="v3" label="Version 3" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 
 					<input

package/package/components/triggers/mqtt/MqttEditorConfigSection.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { MqttClientVersion, MqttV3Config, MqttV5Config, MqttSubscribeTopic } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MqttEditorConfigSection: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     can_write?: boolean;
     headless?: boolean;
     mqtt_resource_path?: string;
@@ -23,8 +10,7 @@ declare const MqttEditorConfigSection: $$__sveltets_2_IsomorphicComponent<{
     isValid?: boolean;
     client_id?: string;
     showTestingBadge?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MqttEditorConfigSection = InstanceType<typeof MqttEditorConfigSection>;
+}
+declare const MqttEditorConfigSection: import("svelte").Component<Props, {}, "subscribe_topics" | "mqtt_resource_path" | "client_id" | "client_version" | "v3_config" | "v5_config" | "isValid">;
+type MqttEditorConfigSection = ReturnType<typeof MqttEditorConfigSection>;
 export default MqttEditorConfigSection;

package/package/components/triggers/mqtt/MqttTriggerEditorInner.svelte

@@ -32,12 +32,12 @@ let can_write = $state(true);
 let drawerLoading = $state(true);
 let showLoading = $state(false);
 let subscribe_topics = $state([]);
-let v3_config = $state();
-let v5_config = $state();
+let v3_config = $state({});
+let v5_config = $state({});
 let client_version = $state();
-let client_id = $state(undefined);
-let isValid = $state(undefined);
-let initialConfig = undefined;
+let client_id = $state('');
+let isValid = $state(false);
+let initialConfig = {};
 let deploymentLoading = $state(false);
 const mqttConfig = $derived.by(getSaveCfg);
 const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
@@ -182,7 +182,8 @@ async function handleToggleEnabled(newEnabled) {
     }
 }
 $effect(() => {
-    onCaptureConfigChange?.(captureConfig, isValid ?? false);
+    let args = [captureConfig, isValid];
+    onCaptureConfigChange?.(...args);
 });
 $effect(() => {
     if (!drawerLoading) {
@@ -201,9 +202,9 @@ $effect(() => {
 				: 'New MQTT trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
-				{@render actions()}
-			</svelte:fragment>
+			{#snippet actions()}
+				{@render actionsSnippet()}
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -215,13 +216,13 @@ $effect(() => {
 			{/if}
 		</svelte:fragment>
 		<svelte:fragment slot="action">
-			{@render actions()}
+			{@render actionsSnippet()}
 		</svelte:fragment>
 		{@render config()}
 	</Section>
 {/if}
 
-{#snippet actions()}
+{#snippet actionsSnippet()}
 	{#if !drawerLoading}
 		<TriggerEditorToolbar
 			{trigger}
@@ -293,6 +294,7 @@ $effect(() => {
 							bind:scriptPath={script_path}
 							allowRefresh={can_write}
 							allowEdit={!$userStore?.operator}
+							clearable
 						/>
 						{#if emptyString(script_path)}
 							<Button