windmill-components 1.623.2 → 1.655.0

package/package/components/triggers/email/EmailTriggerEditorInner.svelte

@@ -17,6 +17,7 @@ import { untrack } from 'svelte';
 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 { saveEmailTriggerFromCfg } from './utils';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
@@ -56,7 +57,7 @@ let originalConfig = $state(undefined);
 let hasChanged = $derived(!deepEqual(getEmailTriggerConfig(), originalConfig ?? {}));
 const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin);
 const emailConfig = $derived.by(getEmailTriggerConfig);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(drawerLoading ||
     !can_write ||
     pathError != '' ||
@@ -316,7 +317,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" />
@@ -336,6 +340,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/gcp/GcpTriggerEditorInner.svelte

@@ -22,6 +22,7 @@ import { base } from '../../../base';
 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 Subsection from '../../Subsection.svelte';
 import Toggle from '../../Toggle.svelte';
 let drawer = $state(undefined);
@@ -60,7 +61,7 @@ let { useDrawer = true, description = undefined, hideTarget = false, hideTooltip
 let hasChanged = $derived(!deepEqual(getGcpConfig(), originalConfig ?? {}));
 const gcpConfig = $derived.by(getGcpConfig);
 const saveDisabled = $derived(pathError != '' || emptyString(script_path) || !isValid || !can_write || !hasChanged);
-const captureConfig = $derived.by(isEditor ? getGcpCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getGcpCaptureConfig : () => ({}));
 export async function openEdit(ePath, isFlow, defaultValues) {
     drawerLoading = true;
     try {
@@ -387,7 +388,12 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+						{ name: 'Manual Ack', active: !auto_acknowledge_msg }
+					]} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="settings" label="Settings" />
@@ -455,6 +461,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/http/RouteCapture.svelte

@@ -2,7 +2,7 @@
 import Label from '../../Label.svelte';
 import CopyableCodeBlock from '../../details/CopyableCodeBlock.svelte';
 import { bash } from 'svelte-highlight/languages';
-// import { page } from '$app/stores'
+// import { page } from '$app/state'
 import { base } from '../../../base';
 import CaptureSection from '../CaptureSection.svelte';
 import { isObject } from '../../../utils';

package/package/components/triggers/http/RouteEditorConfigSection.svelte

@@ -5,7 +5,7 @@ import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { userStore, workspaceStore } from '../../../stores';
 import { HttpTriggerService } from '../../../gen';
-// import { page } from '$app/stores'
+// import { page } from '$app/state'
 import { getHttpRoute } from './utils';
 import { isCloudHosted } from '../../../cloud';
 import Toggle from '../../Toggle.svelte';

package/package/components/triggers/http/RouteEditorInner.svelte

@@ -36,6 +36,7 @@ import { untrack } from 'svelte';
 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';
@@ -95,7 +96,7 @@ let hasChanged = $derived(!deepEqual(getRouteConfig(), originalConfig ?? {}));
 let scopes = $derived(['http_triggers:read:' + path]);
 const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin);
 const routeConfig = $derived.by(getRouteConfig);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(drawerLoading ||
     !can_write ||
     pathError != '' ||
@@ -240,7 +241,7 @@ function loadTriggerConfig(cfg) {
         signature_options_type = 'custom_signature';
     }
     if (!isCloudHosted()) {
-        static_asset_config = cfg?.static_asset_config;
+        static_asset_config = cfg?.static_asset_config ?? undefined;
         s3FileUploadRawMode = !!cfg?.static_asset_config;
         is_static_website = cfg?.is_static_website ?? false;
     }
@@ -614,6 +615,13 @@ $effect(() => {
 
 			{#if !is_static_website}
 				<Section label="Advanced" collapsable>
+					{#snippet header()}
+						<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+							{ name: 'Async', active: request_type === 'async' },
+							{ name: 'SSE', active: request_type === 'sync_sse' },
+							{ name: 'Authentication', active: authentication_method !== 'none' }
+						]} />
+					{/snippet}
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="request_options" label="Request Options" />
@@ -828,6 +836,7 @@ $effect(() => {
 						</div>
 					</div>
 				</Section>
+				<div class="pb-8" />
 			{/if}
 		</div>
 	{/if}

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

@@ -1,4 +1,5 @@
 <script lang="ts">import { Alert, Button } from '../../common';
+import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import Path from '../../Path.svelte';
@@ -8,7 +9,7 @@ import { KafkaTriggerService } from '../../../gen';
 import { usedTriggerKinds, userStore, workspaceStore } from '../../../stores';
 import { canWrite, capitalize, emptyString, sendUserToast } from '../../../utils';
 import Section from '../../Section.svelte';
-import { Loader2 } from 'lucide-svelte';
+import { Loader2, RotateCcw } from 'lucide-svelte';
 import Label from '../../Label.svelte';
 import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte';
 import { untrack } from 'svelte';
@@ -18,9 +19,13 @@ 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';
+import TriggerFilters from '../TriggerFilters.svelte';
+import Select from '../../select/Select.svelte';
+import Toggle from '../../Toggle.svelte';
 let { useDrawer = true, description = undefined, hideTarget = false, hideTooltips = false, isEditor = false, allowDraft = false, trigger = undefined, customLabel, isDeployed = false, cloudDisabled = false, onConfigChange = undefined, onCaptureConfigChange = undefined, onUpdate = undefined, onDelete = undefined, onReset = undefined } = $props();
 let drawer = $state();
 let is_flow = $state(false);
@@ -42,14 +47,19 @@ let extra_perms = $state(undefined);
 let kafkaCfgValid = $state(false);
 let kafkaResourcePath = $state('');
 let kafkaCfg = $state({});
+let autoOffsetReset = $state('latest');
+let autoCommit = $state(true);
 let deploymentLoading = $state(false);
+let resetLoading = $state(false);
 let optionTabSelected = $state('error_handler');
 let errorHandlerSelected = $state('slack');
 let error_handler_path = $state();
 let error_handler_args = $state({});
 let retry = $state();
+let filters = $state([]);
 let suspendedJobsModal = $state(null);
 let originalConfig = $state(undefined);
+let resetConfirmOpen = $state(false);
 const isValid = $derived(!!kafkaResourcePath &&
     kafkaCfgValid &&
     kafkaCfg.topics &&
@@ -66,7 +76,7 @@ const saveDisabled = $derived(pathError !== '' ||
     kafkaCfg.topics.some((t) => emptyString(t)) ||
     !hasChanged);
 const kafkaConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 $effect(() => {
     is_flow = itemKind === 'flow';
 });
@@ -111,6 +121,8 @@ export async function openNew(nis_flow, fixedScriptPath_, nDefaultValues) {
             group_id: nDefaultValues?.group_id ?? '',
             topics: nDefaultValues?.topics ?? ['']
         };
+        autoOffsetReset = nDefaultValues?.auto_offset_reset ?? 'latest';
+        autoCommit = nDefaultValues?.auto_commit ?? true;
         initialScriptPath = '';
         fixedScriptPath = fixedScriptPath_ ?? '';
         script_path = fixedScriptPath;
@@ -120,6 +132,7 @@ export async function openNew(nis_flow, fixedScriptPath_, nDefaultValues) {
         error_handler_path = nDefaultValues?.error_handler_path ?? undefined;
         error_handler_args = nDefaultValues?.error_handler_args ?? {};
         retry = nDefaultValues?.retry ?? undefined;
+        filters = nDefaultValues?.filters ?? [];
         errorHandlerSelected = getHandlerType(error_handler_path ?? '');
         mode = nDefaultValues?.mode ?? 'enabled';
         originalConfig = undefined;
@@ -140,12 +153,15 @@ function loadTriggerConfig(cfg) {
         group_id: cfg?.group_id,
         topics: cfg?.topics
     };
+    autoOffsetReset = cfg?.auto_offset_reset ?? 'latest';
+    autoCommit = cfg?.auto_commit ?? true;
     mode = cfg?.mode ?? 'enabled';
     extra_perms = cfg?.extra_perms;
     can_write = canWrite(path, cfg?.extra_perms, $userStore);
     error_handler_path = cfg?.error_handler_path;
     error_handler_args = cfg?.error_handler_args ?? {};
     retry = cfg?.retry;
+    filters = cfg?.filters ?? [];
     errorHandlerSelected = getHandlerType(error_handler_path ?? '');
 }
 async function loadTrigger(defaultConfig) {
@@ -169,6 +185,9 @@ function getSaveCfg() {
         kafka_resource_path: kafkaResourcePath,
         group_id: kafkaCfg.group_id,
         topics: kafkaCfg.topics,
+        filters,
+        auto_offset_reset: autoOffsetReset,
+        auto_commit: autoCommit,
         mode,
         extra_perms: extra_perms,
         error_handler_path,
@@ -199,6 +218,23 @@ function getCaptureConfig() {
         path
     };
 }
+async function resetOffsets() {
+    resetLoading = true;
+    try {
+        await KafkaTriggerService.resetKafkaOffsets({
+            workspace: $workspaceStore,
+            path: initialPath
+        });
+        sendUserToast('Offset reset triggered. The consumer will restart and re-read from the beginning.');
+    }
+    catch (error) {
+        sendUserToast(error.body || error.message, true);
+    }
+    finally {
+        resetLoading = false;
+        resetConfirmOpen = false;
+    }
+}
 async function handleToggleMode(newMode) {
     mode = newMode;
     if (!trigger?.draftConfig) {
@@ -225,6 +261,18 @@ $effect(() => {
 });
 </script>
 
+<ConfirmationModal
+	title="Reset consumer offset"
+	confirmationText="Reset"
+	open={resetConfirmOpen}
+	loading={resetLoading}
+	onConfirmed={resetOffsets}
+	onCanceled={() => (resetConfirmOpen = false)}
+>
+	This will re-process all messages from the beginning of the topic. The consumer will restart
+	automatically.
+</ConfirmationModal>
+
 {#if mode === 'suspended'}
 	<TriggerSuspendedJobsModal
 		bind:this={suspendedJobsModal}
@@ -374,7 +422,79 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges
+						{error_handler_path}
+						{retry}
+						extraBadges={[
+							{ name: 'Earliest offset', active: autoOffsetReset !== 'latest' },
+							{ name: 'Manual commit', active: !autoCommit },
+							{ name: 'Filters', active: filters.length > 0 }
+						]}
+					/>
+				{/snippet}
+				<div class="flex flex-col gap-6">
+					<Label label="Initial offset">
+						{#snippet header()}
+							<span class="text-2xs text-tertiary ml-2">
+								Only applies when no committed offset exists
+							</span>
+						{/snippet}
+						<Select
+							items={[
+								{ label: 'Latest (new messages only)', value: 'latest' },
+								{ label: 'Earliest (from beginning)', value: 'earliest' }
+							]}
+							bind:value={autoOffsetReset}
+							disabled={!can_write}
+						/>
+					</Label>
+
+					<div class="flex flex-col gap-2">
+						<Label label="Auto-commit offsets">
+							{#snippet header()}
+								<span class="text-2xs text-tertiary ml-2">
+									Automatically commit offsets after receiving each message
+								</span>
+							{/snippet}
+							<Toggle bind:checked={autoCommit} disabled={!can_write} />
+						</Label>
+						{#if !autoCommit}
+							<Alert title="Manual commit mode" type="info" size="xs">
+								Offsets will not be committed automatically. Use <code
+									>wmill.commit_kafka_offsets(trigger_path, topic, partition, offset)</code
+								>
+								in Python or <code
+									>wmill.commitKafkaOffsets(triggerPath, topic, partition, offset)</code
+								> in TypeScript with the values from the event payload. The consumer collects
+								all pending commits and commits the highest offset for each topic/partition
+								pair.
+							</Alert>
+						{/if}
+					</div>
+
+					{#if edit && can_write}
+						<Label label="Consumer offset">
+							{#snippet header()}
+								<span class="text-2xs text-tertiary ml-2">
+									Force re-read all messages from the beginning
+								</span>
+							{/snippet}
+							<Button
+								variant="default"
+								size="xs"
+								startIcon={{ icon: RotateCcw }}
+								disabled={resetLoading}
+								loading={resetLoading}
+								onclick={() => (resetConfirmOpen = true)}
+							>
+								Reset offset to earliest
+							</Button>
+						</Label>
+					{/if}
+
+					<TriggerFilters bind:filters disabled={!can_write} />
+
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -394,6 +514,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

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

@@ -78,6 +78,7 @@ $effect(() => {
 					/>
 				</Subsection>
 			</div>
+
 		</div>
 	</Section>
 </div>

package/package/components/triggers/kafka/utils.js

@@ -16,6 +16,9 @@ export async function saveKafkaTriggerFromCfg(initialPath, cfg, edit, workspace,
         kafka_resource_path: cfg.kafka_resource_path,
         group_id: cfg.group_id,
         topics: cfg.topics,
+        filters: cfg.filters ?? [],
+        auto_offset_reset: cfg.auto_offset_reset ?? 'latest',
+        auto_commit: cfg.auto_commit ?? true,
         ...errorHandlerAndRetries
     };
     try {

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

@@ -1,4 +1,5 @@
-<script lang="ts">import { Alert, Button } from '../../common';
+<script lang="ts">import { untrack } from 'svelte';
+import { Alert, Button } from '../../common';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import Path from '../../Path.svelte';
@@ -17,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 Toggle from '../../Toggle.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
@@ -58,7 +60,7 @@ let originalConfig = $state(undefined);
 let optionTabSelected = $state('connection_options');
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
 const mqttConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(pathError != '' || emptyString(script_path) || !can_write || !isValid || !hasChanged);
 const activateV5Options = $state({
     topic_alias_maximum: Boolean(DEFAULT_V5_CONFIG.topic_alias_maximum),
@@ -394,7 +396,13 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+						{ name: 'Custom Client ID', active: !!client_id },
+						{ name: 'MQTT v3', active: client_version === 'v3' }
+					]} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="connection_options" label="Connection Options" />
@@ -531,6 +539,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/native/NativeTriggerEditor.svelte

@@ -10,6 +10,7 @@ import ScriptPicker from '../../ScriptPicker.svelte';
 import Section from '../../Section.svelte';
 import Required from '../../Required.svelte';
 import NextcloudTriggerForm from './services/nextcloud/NextcloudTriggerForm.svelte';
+import GoogleTriggerForm from './services/google/GoogleTriggerForm.svelte';
 import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
 import { handleConfigChange } from '../utils';
 import { deepEqual } from 'fast-equals';
@@ -28,6 +29,8 @@ const ServiceFormComponent = $derived.by(() => {
     switch (service) {
         case 'nextcloud':
             return NextcloudTriggerForm;
+        case 'google':
+            return GoogleTriggerForm;
         default:
             return null;
     }
@@ -50,7 +53,7 @@ let isFlow = $state(false);
 let externalId = $state(null);
 let can_write = $state(true);
 let originalConfig = $state(undefined);
-let initialConfig = undefined;
+let initialConfig = $state(undefined);
 export function openNew(nis_flow, fixedScriptPath_, defaultValues) {
     if (useDrawer) {
         drawer?.openDrawer();
@@ -64,9 +67,10 @@ export function openNew(nis_flow, fixedScriptPath_, defaultValues) {
     fixedScriptPath = fixedScriptPath_ ?? '';
     scriptPath = fixedScriptPath;
     initialScriptPath = '';
-    isFlow = nis_flow ?? false;
+    itemKind = nis_flow ? 'flow' : 'script';
     externalId = null;
     loadingConfig = false;
+    loadingForm = false;
     can_write = true;
     originalConfig = undefined;
     initialConfig = undefined;
@@ -85,7 +89,7 @@ export function openRecreate(nativeTrigger) {
     errors = {};
     scriptPath = nativeTrigger.script_path;
     initialScriptPath = nativeTrigger.script_path;
-    isFlow = nativeTrigger.is_flow;
+    itemKind = nativeTrigger.is_flow ? 'flow' : 'script';
     externalId = null;
     loadingConfig = false;
     loadingForm = false;
@@ -108,7 +112,9 @@ export async function openEdit(externalIdOrPath, nis_flow, defaultValues) {
     externalId = externalIdOrPath;
     loadingConfig = true;
     loadingForm = true;
+    originalConfig = undefined;
     initialConfig = undefined;
+    itemKind = nis_flow ? 'flow' : 'script';
     try {
         const fullTrigger = await NativeTriggerService.getNativeTrigger({
             workspace: $workspaceStore,
@@ -118,7 +124,6 @@ export async function openEdit(externalIdOrPath, nis_flow, defaultValues) {
         serviceConfig = fullTrigger.service_config || {};
         scriptPath = fullTrigger.script_path;
         initialScriptPath = fullTrigger.script_path;
-        isFlow = nis_flow ?? fullTrigger.is_flow;
         can_write = canWrite(fullTrigger.script_path, {}, $userStore);
         externalData = fullTrigger.external_data;
         // Apply default values if provided (for draft triggers)
@@ -126,17 +131,12 @@ export async function openEdit(externalIdOrPath, nis_flow, defaultValues) {
             serviceConfig = { ...serviceConfig, ...defaultValues };
             externalData = { ...externalData, ...defaultValues };
         }
-        originalConfig = structuredClone($state.snapshot(getSaveCfg()));
     }
     catch (err) {
         sendUserToast(`Failed to load trigger configuration: ${err}`, true);
         externalData = null;
     }
     finally {
-        // For drawer mode, set initialConfig here; for inline mode, the effect handles it after form settles
-        if (!defaultValues) {
-            initialConfig = structuredClone($state.snapshot(getSaveCfg()));
-        }
         clearTimeout(loadingTimeout);
         loadingConfig = false;
         showLoading = false;
@@ -149,6 +149,14 @@ function getSaveCfg() {
         service_config: serviceConfig
     };
 }
+// Capture originalConfig after the form has settled (loadingConfig and loadingForm both false)
+// This ensures we compare against the form's normalized config, not raw backend data
+$effect(() => {
+    if (!loadingConfig && !loadingForm && originalConfig === undefined && !isNew) {
+        originalConfig = structuredClone($state.snapshot(getSaveCfg()));
+        initialConfig = structuredClone($state.snapshot(getSaveCfg()));
+    }
+});
 function close() {
     drawer?.closeDrawer();
 }
@@ -167,9 +175,6 @@ let validationErrors = $derived.by(() => {
 });
 let isValid = $derived.by(() => Object.keys(validationErrors).length === 0);
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
-$effect(() => {
-    console.log('loading', getSaveCfg(), originalConfig);
-});
 let saveDisabled = $derived(loading ||
     !isValid ||
     emptyString(scriptPath) ||
@@ -179,7 +184,7 @@ let saveDisabled = $derived(loading ||
     !hasChanged);
 const saveCfg = $derived.by(getSaveCfg);
 $effect(() => {
-    if (!loadingConfig && !loadingForm) {
+    if (!loadingConfig && !loadingForm && (isNew || initialConfig)) {
         handleConfigChange(saveCfg, initialConfig, saveDisabled, !isNew, onConfigChange);
     }
 });
@@ -216,7 +221,10 @@ async function save() {
     loading = false;
 }
 let templateUrl = $derived(isFlow ? flowTemplateUrl : scriptTemplateUrl);
-let itemKind = $derived(isFlow ? 'flow' : 'script');
+let itemKind = $state('script');
+$effect(() => {
+    isFlow = itemKind === 'flow';
+});
 </script>
 
 {#if useDrawer}
@@ -308,9 +316,6 @@ let itemKind = $derived(isFlow ? 'flow' : 'script');
 							bind:scriptPath
 							allowRefresh={can_write}
 							bind:itemKind
-							on:select={(e) => {
-								isFlow = e.detail.itemKind === 'flow'
-							}}
 							kinds={['script']}
 							allowFlow={true}
 							allowEdit={!$userStore?.operator}

package/package/components/triggers/native/NativeTriggerTable.svelte

@@ -10,6 +10,8 @@ import { Eye, Pen, RefreshCw, Trash } from 'lucide-svelte';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
 import { goto } from '../../../navigation';
 import Alert from '../../common/alert/Alert.svelte';
+import GoogleDriveIcon from '../../icons/GoogleDriveIcon.svelte';
+import GoogleCalendarIcon from '../../icons/GoogleCalendarIcon.svelte';
 let { service, triggers = [], loading = false, onEdit, onRecreate } = $props();
 const serviceConfig = $derived(getServiceConfig(service));
 let deleteConfirmationOpen = $state(false);
@@ -79,6 +81,20 @@ async function confirmDeleteTrigger() {
 									{trigger.script_path}
 								{/if}
 							</div>
+							{#if service === 'google'}
+								{@const triggerType = trigger.service_config?.triggerType}
+								{@const resourceName = trigger.service_config?.resourceName}
+								{@const calendarName = trigger.service_config?.calendarName}
+								<div class="text-secondary text-xs truncate text-left font-normal flex items-center gap-1 mb-0.5">
+									{#if triggerType === 'calendar'}
+										<GoogleCalendarIcon height="12px" width="12px" />
+										Calendar: {calendarName || trigger.service_config?.calendarId || ''}
+									{:else}
+										<GoogleDriveIcon height="12px" width="12px" />
+										Drive: {resourceName ? resourceName : trigger.service_config?.resourceId ? trigger.service_config.resourceId : 'All changes'}
+									{/if}
+								</div>
+							{/if}
 							<div class="text-secondary text-xs truncate text-left font-normal">
 								external ID: {trigger.external_id}
 							</div>