windmill-components 1.623.2 → 1.655.0

package/package/components/triggers/native/services/google/GoogleCalendarPicker.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">import { NativeTriggerService } from '../../../../../gen/services.gen';
+import { workspaceStore } from '../../../../../stores';
+import { sendUserToast } from '../../../../../utils';
+import { Badge } from '../../../../common';
+import { Loader2, X, RefreshCw } from 'lucide-svelte';
+import GoogleCalendarIcon from '../../../../icons/GoogleCalendarIcon.svelte';
+let { calendarId = $bindable(), calendarName = $bindable(), disabled = false } = $props();
+let calendars = $state([]);
+let loading = $state(false);
+async function loadCalendars() {
+    if (!$workspaceStore)
+        return;
+    loading = true;
+    try {
+        calendars = await NativeTriggerService.listGoogleCalendars({
+            workspace: $workspaceStore
+        });
+        if (calendarId && !calendarName) {
+            const found = calendars.find((c) => c.id === calendarId);
+            if (found) {
+                calendarName = found.summary;
+            }
+        }
+    }
+    catch (err) {
+        sendUserToast(`Failed to load calendars: ${err.body || err.message}`, true);
+        calendars = [];
+    }
+    finally {
+        loading = false;
+    }
+}
+function selectCalendar(cal) {
+    calendarId = cal.id;
+    calendarName = cal.summary;
+}
+function clearSelection() {
+    calendarId = '';
+    calendarName = '';
+}
+$effect(() => {
+    if ($workspaceStore) {
+        loadCalendars();
+    }
+});
+</script>
+
+<div class="flex flex-col gap-2 border rounded-md p-2 bg-surface">
+	<div class="flex items-center gap-1 text-2xs">
+		<span class="font-medium text-secondary">Calendars</span>
+		<div class="flex-1"></div>
+		<button
+			class="p-0.5 text-tertiary hover:text-secondary"
+			title="Refresh"
+			onclick={() => loadCalendars()}
+			{disabled}
+		>
+			<RefreshCw size={12} />
+		</button>
+	</div>
+
+	{#if calendarId}
+		<div
+			class="flex items-center gap-2 px-2 py-1 rounded bg-surface-selected text-secondary text-xs border"
+		>
+			<GoogleCalendarIcon width="14px" height="14px" />
+			<span>
+				Selected: <strong>{calendarName || calendarId}</strong>
+			</span>
+			<button
+				class="ml-auto text-tertiary hover:text-secondary"
+				onclick={clearSelection}
+				{disabled}
+			>
+				<X size={14} />
+			</button>
+		</div>
+	{/if}
+
+	<div class="max-h-48 overflow-y-auto -mx-2 -mb-2 px-2 pb-1">
+		{#if loading}
+			<div class="flex items-center justify-center gap-2 py-4 text-xs text-tertiary">
+				<Loader2 class="animate-spin" size={14} />
+				Loading calendars...
+			</div>
+		{:else if calendars.length === 0}
+			<div class="text-center py-4 text-xs text-tertiary">
+				No calendars found. Check that the Google Calendar API is enabled.
+			</div>
+		{:else}
+			{#each calendars as cal (cal.id)}
+				<div
+					class="flex items-center gap-2 px-2 py-1.5 text-xs hover:bg-surface-hover border-b border-light last:border-b-0
+						{cal.id === calendarId ? 'bg-surface-selected' : ''}"
+				>
+					<GoogleCalendarIcon width="14px" height="14px" />
+					<button
+						class="flex-1 text-left truncate hover:underline"
+						title="Select {cal.summary}"
+						onclick={() => selectCalendar(cal)}
+						{disabled}
+					>
+						{cal.summary}
+					</button>
+					{#if cal.primary}
+						<Badge color="blue" small>Primary</Badge>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>

package/package/components/triggers/native/services/google/GoogleCalendarPicker.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    calendarId: string;
+    calendarName: string;
+    disabled?: boolean;
+}
+declare const GoogleCalendarPicker: import("svelte").Component<Props, {}, "calendarId" | "calendarName">;
+type GoogleCalendarPicker = ReturnType<typeof GoogleCalendarPicker>;
+export default GoogleCalendarPicker;

package/package/components/triggers/native/services/google/GoogleDrivePicker.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">import { NativeTriggerService } from '../../../../../gen/services.gen';
+import { workspaceStore } from '../../../../../stores';
+import { sendUserToast } from '../../../../../utils';
+import { Button } from '../../../../common';
+import { Loader2, Folder, File, ChevronRight, Search, X, RefreshCw, Check } from 'lucide-svelte';
+import GoogleDriveIcon from '../../../../icons/GoogleDriveIcon.svelte';
+import TextInput from '../../../../text_input/TextInput.svelte';
+import { Debounced, watch } from 'runed';
+import { untrack } from 'svelte';
+let { resourceId = $bindable(), resourceName = $bindable(), disabled = false } = $props();
+let files = $state([]);
+let sharedDrives = $state([]);
+let nextPageToken = $state(undefined);
+let loadingFiles = $state(false);
+let loadingMore = $state(false);
+let searchQuery = $state('');
+let breadcrumbs = $state([{ id: 'root', name: 'My Drive' }]);
+let activeTab = $state('my_drive');
+const currentParentId = $derived(breadcrumbs[breadcrumbs.length - 1]?.id ?? 'root');
+const debouncedSearch = new Debounced(() => searchQuery, 400);
+let loadVersion = 0;
+async function loadFiles(pageToken) {
+    if (!$workspaceStore)
+        return;
+    const version = ++loadVersion;
+    if (pageToken) {
+        loadingMore = true;
+    }
+    else {
+        loadingFiles = true;
+        files = [];
+        nextPageToken = undefined;
+    }
+    try {
+        const params = {
+            workspace: $workspaceStore,
+            pageToken
+        };
+        const query = searchQuery.trim();
+        const parentId = currentParentId;
+        const tab = activeTab;
+        if (query) {
+            params.q = query;
+        }
+        else if (parentId !== 'root') {
+            params.parentId = parentId;
+        }
+        else if (tab === 'shared_with_me') {
+            params.sharedWithMe = true;
+        }
+        const response = await NativeTriggerService.listGoogleDriveFiles(params);
+        if (version !== loadVersion)
+            return; // stale request, skip
+        if (pageToken) {
+            files = [...files, ...response.files];
+        }
+        else {
+            files = response.files;
+        }
+        nextPageToken = response.next_page_token;
+    }
+    catch (err) {
+        if (version !== loadVersion)
+            return;
+        sendUserToast(`Failed to load Drive files: ${err.body || err.message}`, true);
+    }
+    finally {
+        if (version === loadVersion) {
+            loadingFiles = false;
+            loadingMore = false;
+        }
+    }
+}
+async function loadSharedDrives() {
+    if (!$workspaceStore)
+        return;
+    loadingFiles = true;
+    files = [];
+    sharedDrives = [];
+    try {
+        sharedDrives = await NativeTriggerService.listGoogleSharedDrives({
+            workspace: $workspaceStore
+        });
+    }
+    catch (err) {
+        sendUserToast(`Failed to load shared drives: ${err.body || err.message}`, true);
+    }
+    finally {
+        loadingFiles = false;
+    }
+}
+function navigateToFolder(folder) {
+    searchQuery = '';
+    breadcrumbs = [...breadcrumbs, { id: folder.id, name: folder.name }];
+    loadFiles();
+}
+function navigateToBreadcrumb(index) {
+    searchQuery = '';
+    breadcrumbs = breadcrumbs.slice(0, index + 1);
+    if (activeTab === 'shared_drives' && index === 0) {
+        loadSharedDrives();
+    }
+    else {
+        loadFiles();
+    }
+}
+function selectItem(item) {
+    resourceId = item.id;
+    resourceName = item.name;
+}
+function clearSearch() {
+    searchQuery = '';
+    loadFiles();
+}
+function switchTab(tab) {
+    activeTab = tab;
+    searchQuery = '';
+    if (tab === 'my_drive') {
+        breadcrumbs = [{ id: 'root', name: 'My Drive' }];
+        loadFiles();
+    }
+    else if (tab === 'shared_with_me') {
+        breadcrumbs = [{ id: 'root', name: 'Shared with me' }];
+        loadFiles();
+    }
+    else {
+        breadcrumbs = [{ id: 'root', name: 'Shared drives' }];
+        loadSharedDrives();
+    }
+}
+// Initial load when workspace is available
+$effect(() => {
+    if ($workspaceStore) {
+        untrack(() => loadFiles());
+    }
+});
+// React to debounced search changes (skip initial)
+watch(() => debouncedSearch.current, () => { loadFiles(); }, { lazy: true });
+</script>
+
+<div class="flex flex-col gap-2 border rounded-md p-2 bg-surface">
+	{#if resourceId}
+		<div class="flex items-center gap-2 px-2 py-1 rounded bg-surface-selected text-secondary text-xs border">
+			<GoogleDriveIcon width="14px" height="14px" />
+			<span>
+				Selected: <strong>{resourceName || resourceId}</strong>
+			</span>
+			<button
+				class="ml-auto text-tertiary hover:text-secondary"
+				onclick={() => { resourceId = ''; resourceName = '' }}
+				{disabled}
+			>
+				<X size={14} />
+			</button>
+		</div>
+	{:else}
+		<div class="flex items-center gap-2 px-2 py-1 rounded text-tertiary text-xs border border-dashed">
+			<GoogleDriveIcon width="14px" height="14px" />
+			<span>No file selected</span>
+		</div>
+	{/if}
+
+	<div class="flex items-center gap-1 text-2xs">
+		<button
+			class="px-2 py-0.5 rounded {activeTab === 'my_drive' ? 'bg-surface-selected font-semibold' : 'hover:bg-surface-hover'}"
+			onclick={() => switchTab('my_drive')}
+			{disabled}
+		>
+			My Drive
+		</button>
+		<button
+			class="px-2 py-0.5 rounded {activeTab === 'shared_with_me' ? 'bg-surface-selected font-semibold' : 'hover:bg-surface-hover'}"
+			onclick={() => switchTab('shared_with_me')}
+			{disabled}
+		>
+			Shared with me
+		</button>
+		<button
+			class="px-2 py-0.5 rounded {activeTab === 'shared_drives' ? 'bg-surface-selected font-semibold' : 'hover:bg-surface-hover'}"
+			onclick={() => switchTab('shared_drives')}
+			{disabled}
+		>
+			Shared drives
+		</button>
+		<div class="flex-1"></div>
+		<button
+			class="p-1 text-tertiary hover:text-secondary"
+			title="Refresh"
+			onclick={() => activeTab === 'shared_drives' && currentParentId === 'root' ? loadSharedDrives() : loadFiles()}
+			{disabled}
+		>
+			<RefreshCw size={12} />
+		</button>
+	</div>
+
+	{#if activeTab !== 'shared_drives' || currentParentId !== 'root'}
+		<div class="relative">
+			<TextInput
+				bind:value={searchQuery}
+				inputProps={{ placeholder: 'Search files...', disabled }}
+				size="xs"
+				class="!pl-7"
+			/>
+			<Search size={14} class="absolute left-2 top-1/2 -translate-y-1/2 text-tertiary pointer-events-none" />
+			{#if searchQuery}
+				<button
+					class="absolute right-2 top-1/2 -translate-y-1/2 text-tertiary hover:text-secondary"
+					onclick={clearSearch}
+				>
+					<X size={14} />
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	{#if !searchQuery}
+		<div class="flex items-center gap-0.5 text-2xs text-tertiary overflow-x-auto">
+			{#each breadcrumbs as crumb, i (crumb.id + '-' + i)}
+				{#if i > 0}
+					<ChevronRight size={10} class="shrink-0" />
+				{/if}
+				{#if i < breadcrumbs.length - 1}
+					<button
+						class="hover:text-secondary hover:underline shrink-0"
+						onclick={() => navigateToBreadcrumb(i)}
+					>
+						{crumb.name}
+					</button>
+				{:else}
+					<span class="text-secondary font-medium shrink-0">{crumb.name}</span>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+
+	<div class="max-h-64 overflow-y-auto -mx-2 -mb-2 px-2 pb-1">
+		{#if loadingFiles}
+			<div class="flex items-center justify-center gap-2 py-4 text-xs text-tertiary">
+				<Loader2 class="animate-spin" size={14} />
+				Loading...
+			</div>
+		{:else if activeTab === 'shared_drives' && currentParentId === 'root'}
+			{#if sharedDrives.length === 0}
+				<div class="text-center py-4 text-xs text-tertiary">
+					No shared drives found
+				</div>
+			{:else}
+				{#each sharedDrives as drive (drive.id)}
+					<div
+						class="flex items-center gap-2 px-2 py-1.5 text-xs hover:bg-surface-hover group border-b border-light last:border-b-0"
+					>
+						<Folder size={14} class="text-blue-500 shrink-0" />
+						<button
+							class="flex-1 text-left truncate hover:underline"
+							title="Open {drive.name}"
+							onclick={() => navigateToFolder(drive)}
+							{disabled}
+						>
+							{drive.name}
+						</button>
+						<ChevronRight size={14} class="text-tertiary shrink-0" />
+					</div>
+				{/each}
+			{/if}
+		{:else if files.length === 0}
+			<div class="text-center py-4 text-xs text-tertiary">
+				{searchQuery ? 'No files match your search' : 'This folder is empty'}
+			</div>
+		{:else}
+			{#each files as file (file.id)}
+				{#if file.is_folder}
+					<div
+						class="flex items-center gap-2 px-2 py-1.5 text-xs hover:bg-surface-hover group border-b border-light last:border-b-0"
+					>
+						<Folder size={14} class="text-blue-500 shrink-0" />
+						<button
+							class="flex-1 text-left truncate hover:underline"
+							onclick={() => navigateToFolder(file)}
+							title="Open {file.name}"
+							{disabled}
+						>
+							{file.name}
+						</button>
+						<ChevronRight size={14} class="text-tertiary shrink-0" />
+					</div>
+				{:else}
+					<div
+						class="flex items-center gap-2 px-2 py-1.5 text-xs hover:bg-surface-hover group border-b border-light last:border-b-0
+							{file.id === resourceId ? 'bg-surface-selected' : ''}"
+					>
+						{#if file.id === resourceId}
+							<Check size={14} class="text-green-600 shrink-0" />
+						{:else}
+							<File size={14} class="text-tertiary shrink-0" />
+						{/if}
+						<button
+							class="flex-1 text-left truncate hover:underline"
+							title="Select {file.name}"
+							onclick={() => selectItem(file)}
+							{disabled}
+						>
+							{file.name}
+						</button>
+					</div>
+				{/if}
+			{/each}
+
+			{#if nextPageToken}
+				<div class="flex justify-center pt-1">
+					<Button
+						size="xs"
+						variant="subtle"
+						loading={loadingMore}
+						onClick={() => loadFiles(nextPageToken)}
+						{disabled}
+					>
+						Load more
+					</Button>
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>

package/package/components/triggers/native/services/google/GoogleDrivePicker.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    resourceId: string;
+    resourceName: string;
+    disabled?: boolean;
+}
+declare const GoogleDrivePicker: import("svelte").Component<Props, {}, "resourceName" | "resourceId">;
+type GoogleDrivePicker = ReturnType<typeof GoogleDrivePicker>;
+export default GoogleDrivePicker;

package/package/components/triggers/native/services/google/GoogleTriggerForm.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">import Section from '../../../../Section.svelte';
+import ToggleButtonGroup from '../../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../../../common/toggleButton-v2/ToggleButton.svelte';
+import GoogleDrivePicker from './GoogleDrivePicker.svelte';
+import GoogleCalendarPicker from './GoogleCalendarPicker.svelte';
+import { Eye, FileText } from 'lucide-svelte';
+import GoogleDriveIcon from '../../../../icons/GoogleDriveIcon.svelte';
+import GoogleCalendarIcon from '../../../../icons/GoogleCalendarIcon.svelte';
+let { serviceConfig = $bindable(), errors = $bindable(), loading = $bindable(false), disabled = false } = $props();
+let triggerType = $state(serviceConfig.triggerType ?? 'drive');
+// Drive state
+let driveResourceId = $state(serviceConfig.resourceId ?? '');
+let driveResourceName = $state(serviceConfig.resourceName ?? '');
+let driveWatchMode = $state(serviceConfig.resourceId ? 'file' : serviceConfig.googleResourceId ? 'all' : 'file');
+// Calendar state
+let calendarId = $state(serviceConfig.calendarId ?? 'primary');
+let calendarName = $state(serviceConfig.calendarName ?? '');
+// No async loading — signal ready immediately
+$effect(() => {
+    loading = false;
+});
+// Sync form state back to serviceConfig
+$effect(() => {
+    if (triggerType === 'drive') {
+        serviceConfig = {
+            triggerType,
+            watchMode: driveWatchMode,
+            ...(driveWatchMode === 'file'
+                ? { resourceId: driveResourceId, resourceName: driveResourceName }
+                : {})
+        };
+    }
+    else {
+        serviceConfig = {
+            triggerType,
+            calendarId,
+            calendarName
+        };
+    }
+});
+export function validate() {
+    let serviceErrors = {};
+    if (triggerType === 'drive') {
+        if (driveWatchMode === 'file' && !driveResourceId?.trim()) {
+            serviceErrors.resourceId = 'File ID is required';
+        }
+    }
+    else if (triggerType === 'calendar') {
+        if (!calendarId?.trim()) {
+            serviceErrors.calendarId = 'Calendar ID is required';
+        }
+    }
+    return serviceErrors;
+}
+</script>
+
+<Section label="Google Trigger Configuration">
+	<div class="flex flex-col gap-4">
+		<div>
+			<p class="block text-xs font-semibold text-primary mb-1">Trigger Type</p>
+			<ToggleButtonGroup bind:selected={triggerType} {disabled}>
+				{#snippet children({ item })}
+					<ToggleButton value="drive" label="Drive" icon={GoogleDriveIcon} {item} />
+					<ToggleButton value="calendar" label="Calendar" icon={GoogleCalendarIcon} {item} />
+				{/snippet}
+			</ToggleButtonGroup>
+		</div>
+
+		{#if triggerType === 'drive'}
+			<div class="flex flex-col gap-2">
+				<p class="block text-xs font-semibold text-primary">Watch Mode</p>
+				<ToggleButtonGroup bind:selected={driveWatchMode} {disabled}>
+					{#snippet children({ item })}
+						<ToggleButton value="file" label="Specific file" icon={FileText} {item} />
+						<ToggleButton value="all" label="All changes" icon={Eye} {item} />
+					{/snippet}
+				</ToggleButtonGroup>
+
+				{#if driveWatchMode === 'file'}
+					<p class="block text-xs font-semibold text-primary">File</p>
+					<GoogleDrivePicker
+						bind:resourceId={driveResourceId}
+						bind:resourceName={driveResourceName}
+						{disabled}
+					/>
+					{#if errors.resourceId}
+						<p class="text-red-500 text-xs">{errors.resourceId}</p>
+					{/if}
+				{:else}
+					<p class="text-tertiary text-xs">
+						Watches all changes across your Google Drive. The trigger will fire whenever any file is
+						created, modified, or deleted.
+					</p>
+				{/if}
+			</div>
+		{:else if triggerType === 'calendar'}
+			<div class="flex flex-col gap-2">
+				<p class="block text-xs font-semibold text-primary">Calendar</p>
+				<GoogleCalendarPicker bind:calendarId bind:calendarName {disabled} />
+				{#if errors.calendarId}
+					<p class="text-red-500 text-xs">{errors.calendarId}</p>
+				{/if}
+				<div class="text-tertiary text-xs">
+					<p>
+						Requires the <a
+							href="https://console.cloud.google.com/apis/library/calendar-json.googleapis.com"
+							target="_blank"
+							rel="noopener"
+							class="underline">Google Calendar API</a
+						> to be enabled in your Google Cloud project.
+					</p>
+				</div>
+			</div>
+		{/if}
+	</div>
+</Section>

package/package/components/triggers/native/services/google/GoogleTriggerForm.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    serviceConfig: Record<string, any>;
+    errors: Record<string, string>;
+    disabled?: boolean;
+    externalData?: any;
+    loading?: boolean;
+}
+declare const GoogleTriggerForm: import("svelte").Component<Props, {
+    validate: () => Record<string, string>;
+}, "loading" | "errors" | "serviceConfig">;
+type GoogleTriggerForm = ReturnType<typeof GoogleTriggerForm>;
+export default GoogleTriggerForm;

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

@@ -4,7 +4,6 @@ export interface NativeTriggerConfig {
     readonly serviceDisplayName: string;
     readonly serviceKey: NativeServiceName;
     readonly supportsSync: boolean;
-    readonly supportsFetchConfig: boolean;
     readonly isCloudCompatible: boolean;
     readonly templates?: {
         script?: string;

package/package/components/triggers/native/utils.js

@@ -7,12 +7,22 @@ export const NATIVE_TRIGGER_SERVICES = {
         serviceDisplayName: 'Nextcloud',
         serviceKey: 'nextcloud',
         supportsSync: true,
-        supportsFetchConfig: true,
         isCloudCompatible: true,
         templates: {
             script: '/scripts/add?hub=hub%2F28115',
             flow: '/flows/add?hub=73'
         }
+    },
+    // Google handles both Drive and Calendar triggers via trigger_type in service_config
+    google: {
+        serviceDisplayName: 'Google',
+        serviceKey: 'google',
+        supportsSync: true,
+        isCloudCompatible: true,
+        templates: {
+            script: '/scripts/add?hub=hub%2F28135',
+            flow: '/flows/add?hub=75'
+        }
     }
 };
 export async function isServiceAvailable(service, workspace) {
@@ -65,6 +75,8 @@ export function getTriggerIconName(service) {
     switch (service) {
         case 'nextcloud':
             return 'NextcloudIcon';
+        case 'google':
+            return 'GoogleIcon';
         default:
             return 'NextcloudIcon';
     }
@@ -73,6 +85,8 @@ export async function getServiceIcon(service) {
     switch (service) {
         case 'nextcloud':
             return (await import('../../icons/NextcloudIcon.svelte')).default;
+        case 'google':
+            return (await import('../../icons/GoogleIcon.svelte')).default;
     }
 }
 export function getServiceTemplates(service) {

package/package/components/triggers/nats/NatsTriggerEditorInner.svelte

@@ -18,6 +18,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
@@ -56,7 +57,7 @@ let suspendedJobsModal = $state(null);
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
 const saveDisabled = $derived(pathError != '' || emptyString(script_path) || !can_write || !isValid || !hasChanged);
 const natsConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 $effect(() => {
     is_flow = itemKind === 'flow';
 });
@@ -379,7 +380,10 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -399,6 +403,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/postgres/CheckPostgresRequirement.svelte

@@ -4,7 +4,7 @@ import { PostgresTriggerService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import { emptyString } from '../../../utils';
-let loadingConfiguration = false;
+let loadingConfiguration = $state(false);
 const checkDatabaseConfiguration = async () => {
     if (emptyString(postgres_resource_path)) {
         sendUserToast('You must first pick a database resource', true);
@@ -40,9 +40,7 @@ const checkConnectionAndDatabaseConfiguration = async () => {
     }
     loadingConfiguration = false;
 };
-export let can_write;
-export let postgres_resource_path;
-export let checkConnection = undefined;
+let { can_write, postgres_resource_path, checkConnection = undefined } = $props();
 </script>
 
 {#if postgres_resource_path}