windmill-components 1.687.0 → 1.695.0

package/package/components/triggers/AddTriggersButton.svelte

@@ -72,6 +72,12 @@ const addTriggerItems = $derived([
         icon: triggerIconMap.gcp,
         extra: cloudHosted ? extra : undefined
     },
+    {
+        displayName: 'Azure Event Grid',
+        action: () => onAddDraftTrigger?.('azure'),
+        icon: triggerIconMap.azure,
+        extra: cloudHosted ? extra : undefined
+    },
     {
         displayName: 'Email',
         action: () => onAddDraftTrigger?.('email'),

package/package/components/triggers/CaptureWrapper.svelte

@@ -12,6 +12,7 @@ import NatsCapture from './nats/NatsCapture.svelte';
 import MqttCapture from './mqtt/MqttCapture.svelte';
 import SqsCapture from './sqs/SqsCapture.svelte';
 import GcpCapture from './gcp/GcpCapture.svelte';
+import AzureCapture from './azure/AzureCapture.svelte';
 import EmailCapture from './email/EmailCapture.svelte';
 let { isFlow, path, hasPreprocessor, canHavePreprocessor, captureType = 'webhook', data = {}, connectionInfo = $bindable(undefined), args = {}, isValid = false, triggerDeployed = false } = $props();
 let captureLoading = $state(false);
@@ -41,7 +42,10 @@ function isStreamingCapture() {
     if (captureType === 'gcp' && args.delivery_type === 'push') {
         return false;
     }
-    return ['mqtt', 'sqs', 'websocket', 'postgres', 'kafka', 'nats', 'gcp'].includes(captureType);
+    if (captureType === 'azure' && args.azure_mode !== 'namespace_pull') {
+        return false;
+    }
+    return ['mqtt', 'sqs', 'websocket', 'postgres', 'kafka', 'nats', 'gcp', 'azure'].includes(captureType);
 }
 async function getCaptureConfigs() {
     const captureConfigsList = await CaptureService.getCaptureConfigs({
@@ -281,6 +285,20 @@ $effect(() => {
 				on:captureToggle={handleCapture}
 				on:testWithArgs
 			/>
+		{:else if captureType === 'azure'}
+			<AzureCapture
+				{isValid}
+				{captureInfo}
+				{hasPreprocessor}
+				{isFlow}
+				{captureLoading}
+				subscriptionName={args.subscription_name}
+				on:applyArgs
+				on:updateSchema
+				on:addPreprocessor
+				on:captureToggle={handleCapture}
+				on:testWithArgs
+			/>
 		{:else if captureType === 'email'}
 			<EmailCapture
 				local_part={args.local_part}

package/package/components/triggers/TriggerEditorToolbar.svelte.d.ts

@@ -13,7 +13,7 @@ interface Props {
     extra?: Snippet;
     onDelete?: () => void;
     onReset?: () => void;
-    onToggleMode: (mode: TriggerMode) => void;
+    onToggleMode: (mode: TriggerMode) => void | boolean | Promise<void | boolean>;
     onUpdate?: () => void;
     cloudDisabled?: boolean;
     trigger?: Trigger;

package/package/components/triggers/TriggerModeToggle.svelte

@@ -5,7 +5,18 @@ import DropdownV2 from '../DropdownV2.svelte';
 import Toggle from '../Toggle.svelte';
 import TriggerSuspendedJobsModal, {} from './TriggerSuspendedJobsModal.svelte';
 let { triggerMode, onToggleMode, canWrite, hideToggleLabels = false, hideDropdown = false, suspendedJobsModal: passedSuspendedJobsModal, includeModalConfig } = $props();
-let innerTriggerMode = $derived(triggerMode);
+// Local writable state mirroring `triggerMode`. Both inner controls bind
+// to it: the suspended ToggleButtonGroup directly (it already needed a
+// writable to revert to 'suspended' when there are queued jobs), and the
+// regular Toggle via a function binding that maps 'enabled'/'disabled'
+// to a boolean. Either control can write back here, and the $effect
+// re-syncs us from the prop whenever the parent updates `triggerMode`.
+// This lets the parent reset us in cases where the user click can't go
+// through (e.g. cancelled fork-conflict modal).
+let innerTriggerMode = $state(triggerMode);
+$effect(() => {
+    innerTriggerMode = triggerMode;
+});
 let suspendedJobsModal = $derived(passedSuspendedJobsModal ?? null);
 </script>
 
@@ -47,9 +58,18 @@ let suspendedJobsModal = $derived(passedSuspendedJobsModal ?? null);
 		<Toggle
 			disabled={!canWrite}
 			options={hideToggleLabels ? undefined : { right: 'enable', left: 'disable' }}
-			checked={triggerMode === 'enabled'}
-			on:change={(e) => {
-				onToggleMode(e.detail ? 'enabled' : 'disabled')
+			bind:checked={
+				() => innerTriggerMode === 'enabled', (v) => (innerTriggerMode = v ? 'enabled' : 'disabled')
+			}
+			on:change={async (e) => {
+				const result = await onToggleMode(e.detail ? 'enabled' : 'disabled')
+				if (result === false) {
+					// Cancelled: snap the toggle back to the prop. Needed for
+					// list-page rows where the parent doesn't optimistically
+					// flip `triggerMode` (so $effect won't re-run from a no-op
+					// prop change).
+					innerTriggerMode = triggerMode
+				}
 			}}
 		/>
 		{#if !hideDropdown}
@@ -59,9 +79,18 @@ let suspendedJobsModal = $derived(passedSuspendedJobsModal ?? null);
 					{
 						displayName: 'Suspend job execution',
 						icon: Pause,
-						action: () => {
-							triggerMode = 'suspended'
-							onToggleMode?.('suspended')
+						action: async () => {
+							// Optimistically flip the local mirror, not the
+							// non-bindable `triggerMode` prop. The parent will
+							// echo the new mode back via $effect on success;
+							// on cancel (e.g. user dismisses the fork-conflict
+							// modal), reset to whatever the prop says — same
+							// shape as the Toggle's on:change handler.
+							innerTriggerMode = 'suspended'
+							const result = await onToggleMode?.('suspended')
+							if (result === false) {
+								innerTriggerMode = triggerMode
+							}
 						},
 						tooltip:
 							'When a trigger is in suspended mode, it will continue to accept payloads and queue jobs, but those jobs will not run automatically. You can review the list of suspended jobs, and resume or cancel them individually.'

package/package/components/triggers/TriggerModeToggle.svelte.d.ts

@@ -2,7 +2,7 @@ import type { JobTriggerKind, TriggerMode } from '../../gen';
 import TriggerSuspendedJobsModal, { type TriggerRunnableConfig } from './TriggerSuspendedJobsModal.svelte';
 interface Props {
     triggerMode: TriggerMode;
-    onToggleMode: (mode: TriggerMode) => void;
+    onToggleMode: (mode: TriggerMode) => void | boolean | Promise<void | boolean>;
     canWrite: boolean;
     hideToggleLabels?: boolean;
     hideDropdown?: boolean;

package/package/components/triggers/TriggerSuspendedJobsModal.svelte.d.ts

@@ -10,7 +10,7 @@ type Props = {
     triggerPath: string;
     triggerKind: JobTriggerKind;
     hasChanged: boolean;
-    onToggleMode: (mode: TriggerMode) => void;
+    onToggleMode: (mode: TriggerMode) => void | boolean | Promise<void | boolean>;
     runnableConfig: TriggerRunnableConfig;
 };
 declare const TriggerSuspendedJobsModal: import("svelte").Component<Props, {

package/package/components/triggers/TriggersEditor.svelte

@@ -12,7 +12,7 @@ import Button from '../common/button/Button.svelte';
 import TriggersWrapperV2 from './TriggersWrapper.svelte';
 import { triggerTypeToCaptureKind, CLOUD_DISABLED_TRIGGER_TYPES } from './utils';
 import { isCloudHosted } from '../../cloud';
-import { ScheduleService, WebsocketTriggerService, PostgresTriggerService, KafkaTriggerService, NatsTriggerService, MqttTriggerService, HttpTriggerService, GcpTriggerService, SqsTriggerService, EmailTriggerService, NativeTriggerService } from '../../gen';
+import { ScheduleService, WebsocketTriggerService, PostgresTriggerService, KafkaTriggerService, NatsTriggerService, MqttTriggerService, HttpTriggerService, GcpTriggerService, AzureTriggerService, SqsTriggerService, EmailTriggerService, NativeTriggerService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import Alert from '../common/alert/Alert.svelte';
 let { noEditor, newItem = false, currentPath, fakeInitialPath = '', runnableVersion = undefined, args = {}, initialPath, isFlow, canHavePreprocessor = false, hasPreprocessor = false, isDeployed = false, schema = undefined, noCapture = false, isEditor = true, onDeployTrigger } = $props();
@@ -47,6 +47,7 @@ async function deleteDeployedTrigger(triggerIndex) {
         kafka: () => KafkaTriggerService.deleteKafkaTrigger,
         nats: () => NatsTriggerService.deleteNatsTrigger,
         gcp: () => GcpTriggerService.deleteGcpTrigger,
+        azure: () => AzureTriggerService.deleteAzureTrigger,
         sqs: () => SqsTriggerService.deleteSqsTrigger,
         mqtt: () => MqttTriggerService.deleteMqttTrigger,
         http: () => HttpTriggerService.deleteHttpTrigger,
@@ -126,6 +127,9 @@ async function handleUpdate(trigger, path) {
     else if (triggerType === 'gcp') {
         await triggersState.fetchGcpTriggers(triggersCount, $workspaceStore, currentPath, isFlow, $userStore);
     }
+    else if (triggerType === 'azure') {
+        await triggersState.fetchAzureTriggers(triggersCount, $workspaceStore, currentPath, isFlow, $userStore);
+    }
     else if (triggerType === 'sqs') {
         await triggersState.fetchSqsTriggers(triggersCount, $workspaceStore, currentPath, isFlow, $userStore);
     }

package/package/components/triggers/TriggersWrapper.svelte

@@ -9,6 +9,7 @@ import NatsTriggersPanel from './nats/NatsTriggersPanel.svelte';
 import MqttTriggerPanel from './mqtt/MqttTriggersPanel.svelte';
 import SqsTriggerPanel from './sqs/SqsTriggerPanel.svelte';
 import GcpTriggerPanel from './gcp/GcpTriggerPanel.svelte';
+import AzureTriggerPanel from './azure/AzureTriggerPanel.svelte';
 import ScheduledPollPanel from './scheduled/ScheduledPollPanel.svelte';
 import WebsocketTriggersPanel from './websocket/WebsocketTriggersPanel.svelte';
 import { triggerIconMap } from './utils';
@@ -123,6 +124,15 @@ $effect(() => {
 		{customLabel}
 		{...props}
 	/>
+{:else if selectedTrigger.type === 'azure'}
+	<AzureTriggerPanel
+		{isFlow}
+		path={initialPath || fakeInitialPath}
+		{selectedTrigger}
+		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
+		{customLabel}
+		{...props}
+	/>
 {:else if selectedTrigger.type === 'email'}
 	<EmailTriggerPanel
 		{isFlow}

package/package/components/triggers/azure/AzureCapture.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">import CaptureSection from '../CaptureSection.svelte';
+import { Url } from '../../common';
+import { fade } from 'svelte/transition';
+let { captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isFlow = false, captureLoading = false, subscriptionName = undefined } = $props();
+// Mirror the backend suffix in set_azure_trigger_config: truncate to 39 then
+// append "-wm-capture". Azure rule: [A-Za-z0-9-]{3,50}.
+const captureSubscriptionName = $derived(subscriptionName
+    ? `${subscriptionName.length > 39 ? subscriptionName.slice(0, 39) : subscriptionName}-wm-capture`
+    : undefined);
+</script>
+
+{#if captureInfo}
+	<CaptureSection
+		captureType="azure"
+		disabled={isValid === false}
+		{captureInfo}
+		on:captureToggle
+		on:applyArgs
+		on:updateSchema
+		on:addPreprocessor
+		on:testWithArgs
+		{hasPreprocessor}
+		{isFlow}
+		{captureLoading}
+	>
+		{#snippet description()}
+			{#if captureInfo.active}
+				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+					Listening to Azure Event Grid events...
+				</p>
+			{:else}
+				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+					Start capturing to listen to Azure Event Grid events.
+				</p>
+			{/if}
+		{/snippet}
+		{#if captureSubscriptionName}
+			<Url label="Test subscription name" url={captureSubscriptionName} />
+		{/if}
+	</CaptureSection>
+{/if}

package/package/components/triggers/azure/AzureCapture.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { CaptureInfo } from '../CaptureSection.svelte';
+interface Props {
+    captureInfo?: CaptureInfo | undefined;
+    isValid?: boolean | undefined;
+    hasPreprocessor?: boolean;
+    isFlow?: boolean;
+    captureLoading?: boolean;
+    subscriptionName?: string | undefined;
+}
+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 AzureCapture: $$__sveltets_2_IsomorphicComponent<Props, {
+    captureToggle: CustomEvent<{
+        disableOnly?: boolean;
+    }>;
+    applyArgs: CustomEvent<{
+        kind: "main" | "preprocessor";
+        args: Record<string, any>;
+    }>;
+    updateSchema: CustomEvent<{
+        payloadData: Record<string, any>;
+        redirect: boolean;
+        args?: boolean;
+    }>;
+    addPreprocessor: CustomEvent<{
+        args: Record<string, any>;
+    } | null>;
+    testWithArgs: CustomEvent<Record<string, any>>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type AzureCapture = InstanceType<typeof AzureCapture>;
+export default AzureCapture;

package/package/components/triggers/azure/AzureTriggerEditor.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import { tick } from 'svelte';
+import AzureTriggerEditorInner from './AzureTriggerEditorInner.svelte';
+let { onUpdate } = $props();
+let open = $state(false);
+export async function openEdit(ePath, isFlow) {
+    open = true;
+    await tick();
+    drawer?.openEdit(ePath, isFlow);
+}
+export async function openNew(is_flow, initial_script_path, defaultValues) {
+    open = true;
+    await tick();
+    drawer?.openNew(is_flow, initial_script_path, defaultValues);
+}
+let drawer = $state();
+</script>
+
+{#if open}
+	<AzureTriggerEditorInner {onUpdate} bind:this={drawer} />
+{/if}

package/package/components/triggers/azure/AzureTriggerEditor.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    onUpdate?: (path?: string) => void;
+};
+declare const AzureTriggerEditor: import("svelte").Component<$$ComponentProps, {
+    openEdit: (ePath: string, isFlow: boolean) => Promise<void>;
+    openNew: (is_flow: boolean, initial_script_path?: string, defaultValues?: Record<string, any>) => Promise<void>;
+}, "">;
+type AzureTriggerEditor = ReturnType<typeof AzureTriggerEditor>;
+export default AzureTriggerEditor;

package/package/components/triggers/azure/AzureTriggerEditorConfigSection.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">import Section from '../../Section.svelte';
+import ResourcePicker from '../../ResourcePicker.svelte';
+import Subsection from '../../Subsection.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import Select from '../../select/Select.svelte';
+import { Alert, Button } from '../../common';
+import TextInput from '../../text_input/TextInput.svelte';
+import { AzureTriggerService } from '../../../gen';
+import { emptyStringTrimmed } from '../../../utils';
+import { workspaceStore } from '../../../stores';
+import { RefreshCw } from 'lucide-svelte';
+let { can_write = false, headless = false, isValid = $bindable(false), azure_resource_path = $bindable(), azure_mode = $bindable(), scope_resource_id = $bindable(), topic_name = $bindable(), subscription_name = $bindable(), event_type_filters = $bindable(), path = '' } = $props();
+const edition = $derived(azure_mode === 'basic_push' ? 'basic' : 'namespace');
+const delivery = $derived(azure_mode === 'namespace_pull' ? 'pull' : 'push');
+function setEdition(next) {
+    if (next === 'basic') {
+        azure_mode = 'basic_push';
+    }
+    else {
+        azure_mode = delivery === 'pull' ? 'namespace_pull' : 'namespace_push';
+    }
+}
+function setDelivery(next) {
+    azure_mode = next === 'pull' ? 'namespace_pull' : 'namespace_push';
+}
+$effect(() => {
+    if (azure_mode === 'basic_push' && topic_name !== undefined && topic_name !== '') {
+        topic_name = undefined;
+    }
+});
+$effect(() => {
+    if (emptyStringTrimmed(subscription_name) && !emptyStringTrimmed(path) && $workspaceStore) {
+        const generated = `windmill-${$workspaceStore}-${path.replaceAll(/[^A-Za-z0-9-]/g, '-')}`;
+        subscription_name = generated.slice(0, 50);
+    }
+});
+const is_namespace = $derived(edition === 'namespace');
+const has_sp = $derived(!emptyStringTrimmed(azure_resource_path));
+const has_scope = $derived(!emptyStringTrimmed(scope_resource_id));
+const has_topic = $derived(!is_namespace || !emptyStringTrimmed(topic_name));
+const config_ready = $derived(has_sp && has_scope && has_topic);
+const scopeLabel = $derived(is_namespace ? 'Namespace' : 'Topic');
+const scopeTooltip = $derived(is_namespace
+    ? 'Event Grid Namespace — loaded via the service principal. Refresh after creating one.'
+    : 'Basic Event Grid topic or system topic — loaded via the service principal.');
+// ARM resource loading -----------------------------------------------
+let scopeResources = $state([]);
+let scopeLoading = $state(false);
+let scopeError = $state(undefined);
+async function loadScopeResources() {
+    if (!$workspaceStore || emptyStringTrimmed(azure_resource_path)) {
+        scopeResources = [];
+        return;
+    }
+    scopeLoading = true;
+    scopeError = undefined;
+    try {
+        const result = is_namespace
+            ? await AzureTriggerService.listAzureNamespaces({
+                workspace: $workspaceStore,
+                path: azure_resource_path
+            })
+            : await AzureTriggerService.listAzureBasicTopics({
+                workspace: $workspaceStore,
+                path: azure_resource_path
+            });
+        scopeResources = result;
+        // Clear selection if it no longer matches any entry in the new list
+        // (e.g. flipped edition, swapped SP).
+        if (scope_resource_id && !result.some((r) => r.id === scope_resource_id)) {
+            scope_resource_id = '';
+            topic_name = undefined;
+        }
+    }
+    catch (e) {
+        scopeError = e?.body?.error?.message ?? e?.message ?? String(e);
+        scopeResources = [];
+    }
+    finally {
+        scopeLoading = false;
+    }
+}
+$effect(() => {
+    // Re-fetch when SP changes or edition flips.
+    void azure_resource_path;
+    void edition;
+    loadScopeResources();
+});
+const scopeItems = $derived(scopeResources.map((r) => ({
+    label: r.name + (r.type?.toLowerCase().includes('systemtopic') ? ' (system)' : ''),
+    value: r.id,
+    subtext: r.id
+})));
+let topics = $state([]);
+let topicsLoading = $state(false);
+let topicsError = $state(undefined);
+async function loadTopics() {
+    if (!is_namespace ||
+        !$workspaceStore ||
+        emptyStringTrimmed(azure_resource_path) ||
+        emptyStringTrimmed(scope_resource_id)) {
+        topics = [];
+        return;
+    }
+    topicsLoading = true;
+    topicsError = undefined;
+    try {
+        const result = await AzureTriggerService.listAzureNamespaceTopics({
+            workspace: $workspaceStore,
+            path: azure_resource_path,
+            requestBody: { scope_resource_id }
+        });
+        topics = result.map((t) => ({ name: t.name, id: t.id }));
+        if (topic_name && !topics.some((t) => t.name === topic_name)) {
+            topic_name = undefined;
+        }
+    }
+    catch (e) {
+        topicsError = e?.body?.error?.message ?? e?.message ?? String(e);
+        topics = [];
+    }
+    finally {
+        topicsLoading = false;
+    }
+}
+$effect(() => {
+    void scope_resource_id;
+    void azure_resource_path;
+    void is_namespace;
+    loadTopics();
+});
+const topicItems = $derived(topics.map((t) => ({ label: t.name, value: t.name })));
+const AZURE_SUB_NAME_RE = /^[A-Za-z0-9-]{3,50}$/;
+const subscriptionNameError = $derived.by(() => {
+    if (emptyStringTrimmed(subscription_name))
+        return '';
+    return AZURE_SUB_NAME_RE.test(subscription_name)
+        ? ''
+        : 'Must be 3–50 chars, letters/digits/hyphens only.';
+});
+$effect(() => {
+    const resource_ok = !emptyStringTrimmed(azure_resource_path);
+    const scope_ok = !emptyStringTrimmed(scope_resource_id);
+    const sub_ok = !emptyStringTrimmed(subscription_name) && subscriptionNameError === '';
+    const topic_ok = !is_namespace || !emptyStringTrimmed(topic_name);
+    isValid = resource_ok && scope_ok && sub_ok && topic_ok;
+});
+const filterText = $derived(event_type_filters?.join('\n') ?? '');
+function setFilterText(value) {
+    const list = value
+        .split(/\n|,/)
+        .map((v) => v.trim())
+        .filter((v) => v.length > 0);
+    event_type_filters = list.length > 0 ? list : undefined;
+}
+</script>
+
+<Section label="Azure Event Grid" {headless}>
+	<div class="flex flex-col gap-6">
+		<Subsection
+			label="Service Principal"
+			tooltip="Windmill resource of type `azure` (azureTenantId, azureClientId, azureClientSecret)."
+		>
+			<ResourcePicker bind:value={azure_resource_path} resourceType="azure" disabled={!can_write} />
+		</Subsection>
+
+		{#if has_sp}
+			<Subsection
+				label="Event Grid edition"
+				tooltip="Namespace is the newer product (2024 GA) with push + pull delivery and CloudEvents 1.0. Basic is the legacy service — use it for Azure system topics (Storage / Key Vault events etc.)."
+			>
+				<ToggleButtonGroup
+					selected={edition}
+					onSelected={(v) => setEdition(v as Edition)}
+					disabled={!can_write}
+				>
+					{#snippet children({ item })}
+						<ToggleButton value="namespace" label="Namespace" {item} />
+						<ToggleButton value="basic" label="Basic" {item} />
+					{/snippet}
+				</ToggleButtonGroup>
+			</Subsection>
+
+			{#if is_namespace}
+				<Subsection
+					label="Delivery mode"
+					tooltip="Push: Azure POSTs events to this Windmill instance (requires a public URL). Pull: Windmill polls Azure, better for retries and not requiring inbound exposure."
+				>
+					<ToggleButtonGroup
+						selected={delivery}
+						onSelected={(v) => setDelivery(v as Delivery)}
+						disabled={!can_write}
+					>
+						{#snippet children({ item })}
+							<ToggleButton value="pull" label="Pull" {item} />
+							<ToggleButton value="push" label="Push" {item} />
+						{/snippet}
+					</ToggleButtonGroup>
+				</Subsection>
+			{/if}
+
+			<Subsection label={scopeLabel} tooltip={scopeTooltip}>
+				<div class="flex items-center gap-2">
+					<div class="flex-1">
+						<Select
+							bind:value={scope_resource_id}
+							items={scopeItems}
+							placeholder={scopeLoading ? 'Loading…' : `Select ${scopeLabel.toLowerCase()}`}
+							disabled={!can_write || scopeLoading}
+							clearable
+						/>
+					</div>
+					<Button
+						variant="subtle"
+						startIcon={{ icon: RefreshCw }}
+						iconOnly
+						disabled={!can_write || scopeLoading}
+						onclick={loadScopeResources}
+					/>
+				</div>
+				{#if scopeError}
+					<p class="text-xs text-red-600 mt-1">{scopeError}</p>
+				{:else if !scopeLoading && scopeResources.length === 0}
+					<p class="text-xs text-tertiary mt-1">
+						No {scopeLabel.toLowerCase()} found. Create one in Azure and click refresh.
+					</p>
+				{/if}
+			</Subsection>
+		{/if}
+
+		{#if has_sp && is_namespace && has_scope}
+			<Subsection label="Topic" tooltip="Topic inside the selected Namespace.">
+				<div class="flex items-center gap-2">
+					<div class="flex-1">
+						<Select
+							bind:value={topic_name}
+							items={topicItems}
+							placeholder={topicsLoading ? 'Loading…' : 'Select topic'}
+							disabled={!can_write || topicsLoading}
+							clearable
+						/>
+					</div>
+					<Button
+						variant="subtle"
+						startIcon={{ icon: RefreshCw }}
+						iconOnly
+						disabled={!can_write || topicsLoading}
+						onclick={loadTopics}
+					/>
+				</div>
+				{#if topicsError}
+					<p class="text-xs text-red-600 mt-1">{topicsError}</p>
+				{/if}
+			</Subsection>
+		{/if}
+
+		{#if config_ready}
+			<Subsection
+				label="Subscription name"
+				tooltip="Auto-generated from the trigger path. Windmill creates this subscription on Azure (or overwrites it) on save."
+			>
+				<TextInput
+					bind:value={subscription_name}
+					inputProps={{
+						placeholder: 'leave empty to auto-generate',
+						disabled: !can_write
+					}}
+					error={subscriptionNameError}
+				/>
+				{#if subscriptionNameError}
+					<p class="text-xs text-red-600 mt-1">{subscriptionNameError}</p>
+				{/if}
+				<div class="mt-2">
+					<Alert title="Saving overwrites this subscription on Azure" type="warning" size="xs">
+						If a subscription with this name already exists with an incompatible delivery mode
+						(Push↔Pull) or endpoint type, Windmill will delete and recreate it — any in-flight
+						events in its queue will be dropped.
+					</Alert>
+				</div>
+			</Subsection>
+
+			<Subsection
+				label="Event type filters"
+				tooltip="Optional. One per line (or comma-separated). Forwarded as includedEventTypes."
+			>
+				<TextInput
+					value={filterText}
+					underlyingInputEl="textarea"
+					class="font-mono"
+					inputProps={{
+						placeholder: 'Microsoft.Storage.BlobCreated',
+						disabled: !can_write,
+						rows: 3,
+						oninput: (e) => setFilterText(e.currentTarget.value)
+					}}
+				/>
+			</Subsection>
+		{/if}
+	</div>
+</Section>

package/package/components/triggers/azure/AzureTriggerEditorConfigSection.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { AzureMode } from '../../../gen';
+interface Props {
+    can_write?: boolean;
+    headless?: boolean;
+    isValid?: boolean;
+    azure_resource_path: string;
+    azure_mode: AzureMode;
+    scope_resource_id: string;
+    topic_name?: string;
+    subscription_name: string;
+    event_type_filters?: string[];
+    path?: string;
+}
+declare const AzureTriggerEditorConfigSection: import("svelte").Component<Props, {}, "azure_mode" | "scope_resource_id" | "subscription_name" | "azure_resource_path" | "topic_name" | "event_type_filters" | "isValid">;
+type AzureTriggerEditorConfigSection = ReturnType<typeof AzureTriggerEditorConfigSection>;
+export default AzureTriggerEditorConfigSection;