windmill-components 1.677.1 → 1.695.0

package/package/components/sidebar/SidebarContent.svelte

@@ -8,6 +8,7 @@ import DiscordIcon from '../icons/brands/Discord.svelte';
 import { WorkspaceService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import { clearStores } from '../../storeUtils';
+import Toggle from '../Toggle.svelte';
 import { goto } from '../../navigation';
 import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
 import { twMerge } from 'tailwind-merge';
@@ -24,14 +25,46 @@ import { getAvailableNativeTriggerServices, getServiceConfig, getServiceIcon } f
 import { Menubar, Menu, MenuSingleItem, MenuItem, MeltButton } from '../meltComponents';
 import MenuButton from './MenuButton.svelte';
 import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte';
+import AzureIcon from '../icons/AzureIcon.svelte';
 async function leaveWorkspace() {
     await WorkspaceService.leaveWorkspace({ workspace: $workspaceStore ?? '' });
     sendUserToast('You left the workspace');
     clearStores();
     goto('/user/workspaces');
 }
+let forkedDatatables = $state([]);
+async function loadForkedDatatables() {
+    if (!$workspaceStore)
+        return;
+    try {
+        const settings = await WorkspaceService.getPublicSettings({ workspace: $workspaceStore });
+        const datatables = settings.datatable?.datatables ?? {};
+        forkedDatatables = Object.entries(datatables)
+            .filter(([_, dt]) => dt.forked_from != null)
+            .map(([name, dt]) => ({
+            name,
+            resourceType: dt.database.resource_type ?? 'instance',
+            resourcePath: dt.database.resource_path ?? '',
+            dropOnDelete: true
+        }));
+    }
+    catch {
+        forkedDatatables = [];
+    }
+}
 async function deleteFork() {
-    await WorkspaceService.deleteWorkspace({ workspace: $workspaceStore ?? '' });
+    const workspace = $workspaceStore ?? '';
+    const dbsToDrop = forkedDatatables.filter((dt) => dt.dropOnDelete).map((dt) => dt.name);
+    if (dbsToDrop.length > 0) {
+        const errors = await WorkspaceService.dropForkedDatatableDatabases({
+            workspace,
+            requestBody: { datatable_names: dbsToDrop }
+        });
+        for (const err of errors) {
+            sendUserToast(err, true);
+        }
+    }
+    await WorkspaceService.deleteWorkspace({ workspace });
     sendUserToast('You deleted the workspace');
     clearStores();
     goto('/user/workspaces');
@@ -254,6 +287,15 @@ let defaultExtraTriggerLinks = $derived([
         aiId: 'sidebar-menu-link-gcp',
         aiDescription: 'Button to navigate to GCP Pub/Sub triggers'
     },
+    {
+        label: 'Azure Event Grid' + ($enterpriseLicense ? '' : ' (EE)'),
+        href: '/azure_triggers',
+        icon: AzureIcon,
+        disabled: $userStore?.operator || !$enterpriseLicense,
+        kind: 'azure',
+        aiId: 'sidebar-menu-link-azure',
+        aiDescription: 'Button to navigate to Azure Event Grid triggers'
+    },
     {
         label: 'MQTT',
         href: '/mqtt_triggers',
@@ -359,7 +401,8 @@ let secondaryMenuLinks = $derived([
                 ? [
                     {
                         label: 'Delete Forked Workspace',
-                        action: () => {
+                        action: async () => {
+                            await loadForkedDatatables();
                             deleteWorkspaceForkModal = true;
                         },
                         icon: Trash2,
@@ -675,6 +718,29 @@ let secondaryMenuLinks = $derived([
 	>
 		<div class="flex flex-col w-full space-y-4">
 			<span>Are you sure you want to delete this workspace fork? (deleting {$workspaceStore})</span>
+			{#if forkedDatatables.length > 0}
+				<div class="border rounded-md divide-y">
+					<div class="px-4 py-2 text-xs font-semibold text-secondary"> Forked databases </div>
+					{#each forkedDatatables as dt}
+						<div class="flex items-center justify-between px-4 py-2">
+							<div class="flex flex-col">
+								<span class="text-xs font-medium text-secondary">{dt.name}</span>
+								<span class="text-3xs text-hint">
+									{dt.resourceType === 'instance'
+										? dt.resourcePath
+										: `${$workspaceStore?.replace(/-/g, '_')}__${dt.name}`}
+								</span>
+							</div>
+							<Toggle
+								class="shrink-0"
+								size="xs"
+								bind:checked={dt.dropOnDelete}
+								options={{ right: 'Drop database' }}
+							/>
+						</div>
+					{/each}
+				</div>
+			{/if}
 		</div>
 	</ConfirmationModal>
 {/if}

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore, workspaceColor, clearWorkspaceFromStorage } from '../../stores';
+<script lang="ts">import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore, workspaceColor, clearWorkspaceFromStorage, globalForkModal } from '../../stores';
 import { isRuleActive } from '../../workspaceProtectionRules.svelte';
 import { Building, Plus, Settings, GitFork } from 'lucide-svelte';
 import MenuButton from './MenuButton.svelte';
@@ -63,7 +63,7 @@ const groupedWorkspaces = $derived.by(() => {
         return [];
     return buildWorkspaceHierarchy($userWorkspaces);
 });
-const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary';
+const itemClass = 'text-primary w-full flex flex-row gap-2 px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary';
 </script>
 
 <Menu {createMenu} usePointerDownOutside>
@@ -155,9 +155,13 @@ const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-s
 					</MenuItem>
 				</div>
 			{/if}
-			{#if !strictWorkspaceSelect && !isCloudHosted() && !isRuleActive('DisableWorkspaceForking')}
+			{#if !strictWorkspaceSelect && !isCloudHosted() && !isRuleActive('DisableWorkspaceForking') && $workspaceStore !== 'admins'}
 				<div class="py-1" role="none">
-					<MenuItem href="{base}/user/fork_workspace" class={itemClass} {item}>
+					<MenuItem
+						class={itemClass}
+						{item}
+						onClick={() => (globalForkModal.val = { opened: true })}
+					>
 						<GitFork size={16} />
 						Fork current workspace
 					</MenuItem>

package/package/components/triggers/AddTriggersButton.svelte

@@ -10,14 +10,19 @@ let dropdown;
 const cloudHosted = isCloudHosted();
 let nextcloudAvailable = $state(false);
 let googleAvailable = $state(false);
+let githubAvailable = $state(false);
 async function setNextcloudState() {
     nextcloudAvailable = await isServiceAvailable('nextcloud', $workspaceStore);
 }
 async function setGoogleState() {
     googleAvailable = await isServiceAvailable('google', $workspaceStore);
 }
+async function setGithubState() {
+    githubAvailable = await isServiceAvailable('github', $workspaceStore);
+}
 setNextcloudState();
 setGoogleState();
+setGithubState();
 const addTriggerItems = $derived([
     {
         displayName: 'Schedule',
@@ -67,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'),
@@ -93,6 +104,12 @@ const addTriggerItems = $derived([
         action: () => onAddDraftTrigger?.('google'),
         icon: triggerIconMap.google,
         hidden: !googleAvailable
+    },
+    {
+        displayName: 'GitHub',
+        action: () => onAddDraftTrigger?.('github'),
+        icon: triggerIconMap.github,
+        hidden: !githubAvailable
     }
 ].filter((item) => !item.hidden));
 let triggersButtonWidth = $state(0);

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/PermissionedAsLine.svelte

@@ -1,11 +1,34 @@
 <script lang="ts">import OnBehalfOfSelector, {} from '../OnBehalfOfSelector.svelte';
+import { useFolderDefaultPermissionedAs } from '../useFolderDefaultPermissionedAs.svelte';
 import { userStore, workspaceStore } from '../../stores';
 import { AlertTriangle } from 'lucide-svelte';
-let { permissionedAs, onPermissionedAsChange } = $props();
+let { permissionedAs, onPermissionedAsChange, path = undefined } = $props();
 const canPreserve = $derived($userStore?.is_admin || ($userStore?.groups ?? []).includes('wm_deployers'));
 const myPermissionedAs = $derived($userStore?.username ? `u/${$userStore.username}` : undefined);
+const folderDefault = useFolderDefaultPermissionedAs(() => path);
 let onBehalfOfChoice = $state(undefined);
 let customPermissionedAs = $state(undefined);
+let userHasSelected = $state(false);
+// Full reset when permissionedAs changes (e.g. switching between edit/create).
+$effect(() => {
+    permissionedAs;
+    userHasSelected = false;
+    customPermissionedAs = undefined;
+    onBehalfOfChoice = undefined;
+});
+// On creation with no folder default, default to "me". When the folder default
+// loads async, transition to undefined so OnBehalfOfSelector's auto-select applies
+// the folder default. Skip if the user has already made an explicit selection.
+$effect(() => {
+    if (userHasSelected)
+        return;
+    if (permissionedAs === undefined && !folderDefault.value) {
+        onBehalfOfChoice = 'me';
+    }
+    else {
+        onBehalfOfChoice = undefined;
+    }
+});
 const effectivePermissionedAs = $derived.by(() => {
     if (onBehalfOfChoice === 'target')
         return permissionedAs;
@@ -16,7 +39,17 @@ const effectivePermissionedAs = $derived.by(() => {
 const willChange = $derived(permissionedAs !== undefined &&
     effectivePermissionedAs !== undefined &&
     permissionedAs !== effectivePermissionedAs);
+const shouldRender = $derived(!!$workspaceStore && (permissionedAs !== undefined || canPreserve));
+// For non-admin users editing a trigger owned by someone else: signal that
+// permissioned_as will change to the current user (backend ignores preserve for non-admins).
+// Only fires when there's an actual change (DB value differs from current user).
+$effect(() => {
+    if (!canPreserve && permissionedAs !== undefined && permissionedAs !== myPermissionedAs) {
+        onPermissionedAsChange(undefined, false);
+    }
+});
 function handleSelect(choice, details) {
+    userHasSelected = true;
     onBehalfOfChoice = choice;
     if (choice === 'target') {
         customPermissionedAs = undefined;
@@ -33,7 +66,7 @@ function handleSelect(choice, details) {
 }
 </script>
 
-{#if permissionedAs && $workspaceStore}
+{#if shouldRender && $workspaceStore}
 	<div class="flex items-center gap-1.5 text-2xs text-tertiary mb-4">
 		<span>Permissioned as</span>
 		{#if canPreserve}
@@ -46,6 +79,7 @@ function handleSelect(choice, details) {
 				{canPreserve}
 				customValue={customPermissionedAs}
 				isDeployment={false}
+				folderDefault={folderDefault.value}
 			/>
 			{#if willChange}
 				<AlertTriangle class="w-3.5 h-3.5 text-yellow-500" />
@@ -53,7 +87,7 @@ function handleSelect(choice, details) {
 					>will change from <strong>{permissionedAs}</strong> on save</span
 				>
 			{/if}
-		{:else}
+		{:else if permissionedAs}
 			<strong class="text-secondary">{permissionedAs}</strong>
 			{#if willChange}
 				<AlertTriangle class="w-3.5 h-3.5 text-yellow-500" />

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

@@ -3,6 +3,12 @@ interface Props {
     permissionedAs: string | undefined;
     /** Callback when user changes the permissioned_as selection */
     onPermissionedAsChange: (permissionedAs: string | undefined, preserve: boolean) => void;
+    /**
+     * Item path (e.g. `f/prod/my_trigger`). When provided and the user is an
+     * admin/wm_deployers member, the component fetches the parent folder's
+     * `default_permissioned_as` rules and preselects the matching default.
+     */
+    path?: string | undefined;
 }
 declare const PermissionedAsLine: import("svelte").Component<Props, {}, "">;
 type PermissionedAsLine = ReturnType<typeof PermissionedAsLine>;

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,
@@ -54,7 +55,8 @@ async function deleteDeployedTrigger(triggerIndex) {
     };
     const nativeTriggerServices = {
         nextcloud: 'nextcloud',
-        google: 'google'
+        google: 'google',
+        github: 'github'
     };
     const deleteHandler = deleteHandlers[triggerType];
     const nativeServiceName = nativeTriggerServices[triggerType];
@@ -125,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);
     }
@@ -143,6 +148,9 @@ async function handleUpdate(trigger, path) {
     else if (triggerType === 'google') {
         await triggersState.fetchNativeTriggers(triggersCount, 'google', $workspaceStore, currentPath, isFlow, $userStore);
     }
+    else if (triggerType === 'github') {
+        await triggersState.fetchNativeTriggers(triggersCount, 'github', $workspaceStore, currentPath, isFlow, $userStore);
+    }
     triggersState.selectedTriggerIndex = triggersState.triggers.findIndex((t) => t.path === path && t.type === triggerType);
     loading = false;
     onDeployTrigger?.({ type: triggerType, id: triggerId, path: triggerPath });

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}
@@ -155,6 +165,16 @@ $effect(() => {
 		{customLabel}
 		{...props}
 	/>
+{:else if selectedTrigger.type === 'github'}
+	<NativeTriggersPanel
+		service="github"
+		{isFlow}
+		path={initialPath || fakeInitialPath}
+		{selectedTrigger}
+		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
+		{customLabel}
+		{...props}
+	/>
 {:else if selectedTrigger.type === 'cli'}
 	<div class="py-1 flex flex-col gap-6">
 		<ClipboardPanel content={selectedTrigger.extra?.cliCommand ?? ''} />

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;