windmill-components 1.623.1 → 1.642.0

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

@@ -0,0 +1,384 @@
+<script lang="ts">import { NativeTriggerService } from '../../../gen/services.gen';
+import { validateCommonFields, getServiceConfig, getTemplatePath, saveNativeTriggerFromCfg } from './utils';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../../stores';
+import { canWrite, emptyString, sendUserToast } from '../../../utils';
+import { Button } from '../../common';
+import Drawer from '../../common/drawer/Drawer.svelte';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import { Loader2, Save } from 'lucide-svelte';
+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';
+let { service, onUpdate, useDrawer = true, hideTarget = false, allowDraft = false, trigger = undefined, customLabel, isDeployed = false, cloudDisabled = false, description, onConfigChange, onDelete, onReset } = $props();
+const serviceInfo = $derived(getServiceConfig(service));
+const scriptTemplateUrl = $derived.by(() => {
+    const templateId = getTemplatePath(service, 'script');
+    return templateId;
+});
+const flowTemplateUrl = $derived.by(() => {
+    const templateId = getTemplatePath(service, 'flow');
+    return templateId;
+});
+let serviceFormRef = $state(null);
+const ServiceFormComponent = $derived.by(() => {
+    switch (service) {
+        case 'nextcloud':
+            return NextcloudTriggerForm;
+        case 'google':
+            return GoogleTriggerForm;
+        default:
+            return null;
+    }
+});
+let drawer = $state();
+let isNew = $state(false);
+let isRecreate = $state(false);
+let oldExternalIdToDelete = $state(null);
+let loading = $state(false);
+let loadingConfig = $state(false);
+let loadingForm = $state(false);
+let showLoading = $state(false);
+let serviceConfig = $state({});
+let externalData = $state(null);
+let errors = $state({});
+let scriptPath = $state('');
+let initialScriptPath = $state('');
+let fixedScriptPath = $state('');
+let isFlow = $state(false);
+let externalId = $state(null);
+let can_write = $state(true);
+let originalConfig = $state(undefined);
+let initialConfig = $state(undefined);
+export function openNew(nis_flow, fixedScriptPath_, defaultValues) {
+    if (useDrawer) {
+        drawer?.openDrawer();
+    }
+    isNew = true;
+    isRecreate = false;
+    oldExternalIdToDelete = null;
+    serviceConfig = defaultValues ? { ...defaultValues } : {};
+    externalData = defaultValues ? { ...defaultValues } : null;
+    errors = {};
+    fixedScriptPath = fixedScriptPath_ ?? '';
+    scriptPath = fixedScriptPath;
+    initialScriptPath = '';
+    itemKind = nis_flow ? 'flow' : 'script';
+    externalId = null;
+    loadingConfig = false;
+    loadingForm = false;
+    can_write = true;
+    originalConfig = undefined;
+    initialConfig = undefined;
+}
+export function openRecreate(nativeTrigger) {
+    if (useDrawer) {
+        drawer?.openDrawer();
+    }
+    isNew = true;
+    isRecreate = true;
+    oldExternalIdToDelete = nativeTrigger.external_id;
+    const cachedConfig = nativeTrigger.service_config || {};
+    serviceConfig = { ...cachedConfig };
+    // Pass cached config as externalData so the form applies it after loading events
+    externalData = { ...cachedConfig };
+    errors = {};
+    scriptPath = nativeTrigger.script_path;
+    initialScriptPath = nativeTrigger.script_path;
+    itemKind = nativeTrigger.is_flow ? 'flow' : 'script';
+    externalId = null;
+    loadingConfig = false;
+    loadingForm = false;
+    can_write = true;
+    originalConfig = undefined;
+    initialConfig = undefined;
+}
+export async function openEdit(externalIdOrPath, nis_flow, defaultValues) {
+    let loadingTimeout = setTimeout(() => {
+        showLoading = true;
+    }, 100);
+    if (useDrawer) {
+        drawer?.openDrawer();
+    }
+    isNew = false;
+    isRecreate = false;
+    oldExternalIdToDelete = null;
+    externalData = null;
+    errors = {};
+    externalId = externalIdOrPath;
+    loadingConfig = true;
+    loadingForm = true;
+    originalConfig = undefined;
+    initialConfig = undefined;
+    itemKind = nis_flow ? 'flow' : 'script';
+    try {
+        const fullTrigger = await NativeTriggerService.getNativeTrigger({
+            workspace: $workspaceStore,
+            serviceName: service,
+            externalId: externalIdOrPath
+        });
+        serviceConfig = fullTrigger.service_config || {};
+        scriptPath = fullTrigger.script_path;
+        initialScriptPath = fullTrigger.script_path;
+        can_write = canWrite(fullTrigger.script_path, {}, $userStore);
+        externalData = fullTrigger.external_data;
+        // Apply default values if provided (for draft triggers)
+        if (defaultValues) {
+            serviceConfig = { ...serviceConfig, ...defaultValues };
+            externalData = { ...externalData, ...defaultValues };
+        }
+    }
+    catch (err) {
+        sendUserToast(`Failed to load trigger configuration: ${err}`, true);
+        externalData = null;
+    }
+    finally {
+        clearTimeout(loadingTimeout);
+        loadingConfig = false;
+        showLoading = false;
+    }
+}
+function getSaveCfg() {
+    return {
+        script_path: scriptPath,
+        is_flow: isFlow,
+        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();
+}
+let validationErrors = $derived.by(() => {
+    if (!serviceFormRef) {
+        return {};
+    }
+    const commonErrors = validateCommonFields({
+        script_path: scriptPath
+    });
+    let serviceErrors = {};
+    if (serviceFormRef?.validate) {
+        serviceErrors = serviceFormRef.validate();
+    }
+    return { ...commonErrors, ...serviceErrors };
+});
+let isValid = $derived.by(() => Object.keys(validationErrors).length === 0);
+let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
+let saveDisabled = $derived(loading ||
+    !isValid ||
+    emptyString(scriptPath) ||
+    loadingConfig ||
+    loadingForm ||
+    !can_write ||
+    !hasChanged);
+const saveCfg = $derived.by(getSaveCfg);
+$effect(() => {
+    if (!loadingConfig && !loadingForm && (isNew || initialConfig)) {
+        handleConfigChange(saveCfg, initialConfig, saveDisabled, !isNew, onConfigChange);
+    }
+});
+async function save() {
+    loading = true;
+    const saveCfg = getSaveCfg();
+    const newExternalId = await saveNativeTriggerFromCfg(service, externalId ?? '', saveCfg, !isNew, $workspaceStore, usedTriggerKinds);
+    if (newExternalId) {
+        if (isNew) {
+            externalId = newExternalId;
+            isNew = false;
+            if (isRecreate && oldExternalIdToDelete) {
+                try {
+                    await NativeTriggerService.deleteNativeTrigger({
+                        workspace: $workspaceStore,
+                        serviceName: service,
+                        externalId: oldExternalIdToDelete
+                    });
+                    sendUserToast(`${serviceInfo?.serviceDisplayName} trigger recreated (old trigger deleted)`);
+                }
+                catch (deleteErr) {
+                    // Still show success for creation, but warn about deletion failure
+                    sendUserToast(`${serviceInfo?.serviceDisplayName} trigger created, but failed to delete old trigger: ${deleteErr.body || deleteErr.message}`, true);
+                }
+            }
+        }
+        onUpdate?.(saveCfg.path);
+        originalConfig = structuredClone($state.snapshot(getSaveCfg()));
+        initialScriptPath = saveCfg.script_path;
+        if (useDrawer) {
+            close();
+        }
+    }
+    loading = false;
+}
+let templateUrl = $derived(isFlow ? flowTemplateUrl : scriptTemplateUrl);
+let itemKind = $state('script');
+$effect(() => {
+    isFlow = itemKind === 'flow';
+});
+</script>
+
+{#if useDrawer}
+	<Drawer size="800px" bind:this={drawer}>
+		<DrawerContent
+			title={isRecreate
+				? `Recreate ${serviceInfo?.serviceDisplayName} trigger`
+				: isNew
+					? `New ${serviceInfo?.serviceDisplayName} trigger`
+					: `Edit ${serviceInfo?.serviceDisplayName} trigger`}
+			on:close={drawer?.closeDrawer}
+		>
+			{#snippet actions()}
+				{@render drawerActions()}
+			{/snippet}
+			{@render content()}
+		</DrawerContent>
+	</Drawer>
+{:else}
+	<Section
+		label={!customLabel ? `${serviceInfo?.serviceDisplayName} trigger` : ''}
+		headerClass="grow min-w-0 h-[30px]"
+	>
+		{#snippet header()}
+			{#if customLabel}
+				{@render customLabel()}
+			{/if}
+		{/snippet}
+		{#snippet action()}
+			{@render inlineActions()}
+		{/snippet}
+		{@render content()}
+	</Section>
+{/if}
+
+{#snippet drawerActions()}
+	<Button
+		size="sm"
+		startIcon={{ icon: Save }}
+		variant="accent"
+		on:click={save}
+		disabled={saveDisabled}
+		{loading}
+	>
+		Save
+	</Button>
+{/snippet}
+
+{#snippet inlineActions()}
+	{#if !loadingConfig}
+		<TriggerEditorToolbar
+			{trigger}
+			permissions={loadingConfig || !can_write ? 'none' : 'create'}
+			mode="enabled"
+			{allowDraft}
+			edit={!isNew}
+			isLoading={loading}
+			{isDeployed}
+			{saveDisabled}
+			onUpdate={save}
+			{onReset}
+			{onDelete}
+			{cloudDisabled}
+			onToggleMode={() => {}}
+			disableSuspendedMode={true}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet content()}
+	{#if loadingConfig && showLoading}
+		<Loader2 class="animate-spin" />
+	{:else}
+		<div class="flex flex-col gap-4">
+			{#if description}
+				{@render description()}
+			{/if}
+		</div>
+		<div class="flex flex-col gap-12 mt-6">
+			{#if !hideTarget}
+				<Section label="Runnable">
+					<p class="text-xs mb-1 text-primary">
+						Pick a script or flow to be triggered<Required required={true} />
+					</p>
+					<div class="flex flex-row mb-2">
+						<ScriptPicker
+							disabled={fixedScriptPath != '' || !can_write}
+							initialPath={fixedScriptPath || initialScriptPath}
+							bind:scriptPath
+							allowRefresh={can_write}
+							bind:itemKind
+							kinds={['script']}
+							allowFlow={true}
+							allowEdit={!$userStore?.operator}
+							clearable
+						/>
+						{#if emptyString(scriptPath)}
+							<Button
+								btnClasses="ml-4"
+								variant="accent"
+								size="xs"
+								href={templateUrl}
+								target="_blank"
+								disabled={!can_write}
+							>
+								Create from template
+							</Button>
+						{/if}
+					</div>
+					{#if errors.runnable_path}
+						<div class="text-red-500 text-xs mt-1">{errors.runnable_path}</div>
+					{/if}
+				</Section>
+			{/if}
+
+			{#if loadingConfig}
+				<Section label="{serviceInfo?.serviceDisplayName} configuration">
+					<div class="flex items-center gap-2 text-secondary text-xs">
+						<Loader2 class="animate-spin" size={16} />
+						Loading configuration from {serviceInfo?.serviceDisplayName}...
+					</div>
+				</Section>
+			{:else if ServiceFormComponent}
+				<ServiceFormComponent
+					bind:loading={loadingForm}
+					bind:this={serviceFormRef}
+					bind:serviceConfig
+					bind:errors
+					{externalData}
+					disabled={loading || loadingConfig || !can_write}
+					path={scriptPath}
+					{isFlow}
+					token=""
+					triggerTokens={undefined}
+					scopes={[]}
+				/>
+			{:else}
+				<Section label="{serviceInfo?.serviceDisplayName} configuration">
+					<div class="text-red-500 text-xs space-y-2">
+						<div>Failed to load service configuration component for {service}.</div>
+						<div class="text-secondary">
+							Ensure your workspace has a connected {serviceInfo?.serviceDisplayName} integration.
+						</div>
+						<Button
+							unifiedSize="xs"
+							variant="default"
+							href="/workspace_settings?tab=integrations"
+							target="_blank"
+						>
+							Manage integrations
+						</Button>
+					</div>
+				</Section>
+			{/if}
+		</div>
+	{/if}
+{/snippet}

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

@@ -0,0 +1,26 @@
+import type { NativeServiceName } from '../../../gen/types.gen';
+import type { ExtendedNativeTrigger } from './utils';
+import { type Trigger } from '../utils';
+import type { Snippet } from 'svelte';
+interface Props {
+    service: NativeServiceName;
+    onUpdate?: (path?: string) => void;
+    useDrawer?: boolean;
+    hideTarget?: boolean;
+    allowDraft?: boolean;
+    trigger?: Trigger;
+    customLabel?: Snippet;
+    isDeployed?: boolean;
+    cloudDisabled?: boolean;
+    description?: Snippet;
+    onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void;
+    onDelete?: () => void;
+    onReset?: () => void;
+}
+declare const NativeTriggerEditor: import("svelte").Component<Props, {
+    openNew: (nis_flow?: boolean, fixedScriptPath_?: string, defaultValues?: Record<string, any>) => void;
+    openRecreate: (nativeTrigger: ExtendedNativeTrigger) => void;
+    openEdit: (externalIdOrPath: string, nis_flow?: boolean, defaultValues?: Record<string, any>) => Promise<void>;
+}, "">;
+type NativeTriggerEditor = ReturnType<typeof NativeTriggerEditor>;
+export default NativeTriggerEditor;

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

@@ -0,0 +1,171 @@
+<script lang="ts">import { NativeTriggerService } from '../../../gen/services.gen';
+import { getServiceConfig } from './utils';
+import { sendUserToast } from '../../../utils';
+import { workspaceStore } from '../../../stores';
+import Skeleton from '../../common/skeleton/Skeleton.svelte';
+import Button from '../../common/button/Button.svelte';
+import RowIcon from '../../common/table/RowIcon.svelte';
+import Dropdown from '../../DropdownV2.svelte';
+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);
+let triggerToDelete = $state(null);
+let isDeleting = $state(false);
+function openDeleteConfirmation(trigger) {
+    triggerToDelete = trigger;
+    deleteConfirmationOpen = true;
+}
+function closeDeleteConfirmation() {
+    deleteConfirmationOpen = false;
+    triggerToDelete = null;
+    isDeleting = false;
+}
+async function confirmDeleteTrigger() {
+    if (!triggerToDelete)
+        return;
+    isDeleting = true;
+    try {
+        await NativeTriggerService.deleteNativeTrigger({
+            workspace: $workspaceStore,
+            serviceName: service,
+            externalId: triggerToDelete.external_id
+        });
+        sendUserToast(`${serviceConfig?.serviceDisplayName} trigger deleted`);
+        triggers = triggers.filter((native_trigger) => native_trigger.external_id !== triggerToDelete?.external_id);
+        closeDeleteConfirmation();
+    }
+    catch (err) {
+        sendUserToast(`Failed to delete trigger: ${err.body || err.message}`, true);
+        isDeleting = false;
+    }
+}
+</script>
+
+<div class="w-full">
+	{#if loading}
+		{#each new Array(6) as _}
+			<Skeleton layout={[[6], 0.4]} />
+		{/each}
+	{:else if !triggers?.length}
+		<div class="text-center text-sm font-semibold text-emphasis mt-2">
+			No {serviceConfig?.serviceDisplayName} triggers
+		</div>
+	{:else}
+		<div class="border rounded-md divide-y">
+			{#each triggers as trigger (trigger.external_id)}
+				{@const isFlow = trigger.is_flow}
+				{@const href = `${isFlow ? '/flows/get' : '/scripts/get'}/${trigger.script_path}`}
+				<div
+					class="hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md flex flex-col"
+				>
+					<div class="w-full flex gap-5 items-center">
+						<RowIcon kind={isFlow ? 'flow' : 'script'} />
+
+						<a
+							href="#{trigger.external_id}"
+							onclick={() => onEdit?.(trigger)}
+							class="min-w-0 grow hover:underline decoration-gray-400"
+						>
+							<div class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate">
+								{#if trigger.marked}
+									<span class="text-xs">
+										{@html trigger.marked}
+									</span>
+								{:else}
+									{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>
+						</a>
+
+						<div class="flex gap-2 items-center justify-end">
+							<Button
+								on:click={() => onEdit?.(trigger)}
+								unifiedSize="md"
+								startIcon={{ icon: Pen }}
+								variant="subtle"
+							>
+								Edit
+							</Button>
+							<Dropdown
+								size="md"
+								items={[
+									{
+										displayName: `View ${isFlow ? 'Flow' : 'Script'}`,
+										icon: Eye,
+										action: () => {
+											goto(href)
+										}
+									},
+									{
+										displayName: 'Delete',
+										type: 'delete' as const,
+										icon: Trash,
+										action: () => openDeleteConfirmation(trigger)
+									}
+								]}
+							/>
+						</div>
+					</div>
+					{#if trigger.error}
+						<div class="w-full flex justify-between items-center gap-2">
+							<div class="text-2xs font-normal text-red-500 truncate">
+								Error: {trigger.error}
+							</div>
+							<Button
+								size="xs"
+								variant="subtle"
+								startIcon={{ icon: RefreshCw }}
+								on:click={() => onRecreate?.(trigger)}
+							>
+								Recreate
+							</Button>
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<ConfirmationModal
+	open={deleteConfirmationOpen}
+	title="Delete {serviceConfig?.serviceDisplayName} trigger"
+	confirmationText="Delete"
+	loading={isDeleting}
+	onConfirmed={confirmDeleteTrigger}
+	onCanceled={closeDeleteConfirmation}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to delete this trigger?</span>
+		{#if triggerToDelete?.external_id}
+			<span>External ID: {triggerToDelete.external_id}</span>
+		{/if}
+		<Alert type="warning" title="Warning">
+			This will permanently delete the trigger from both Windmill and {serviceConfig?.serviceDisplayName}.
+			This action cannot be undone.
+		</Alert>
+	</div>
+</ConfirmationModal>

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

@@ -0,0 +1,16 @@
+import type { NativeServiceName } from '../../../gen/types.gen';
+import type { ExtendedNativeTrigger } from './utils';
+type TriggerW = ExtendedNativeTrigger & {
+    marked?: any;
+};
+interface Props {
+    service: NativeServiceName;
+    triggers: TriggerW[];
+    loading?: boolean;
+    onEdit?: (trigger: TriggerW) => void;
+    onRecreate?: (trigger: TriggerW) => void;
+    onSync?: () => Promise<void>;
+}
+declare const NativeTriggerTable: import("svelte").Component<Props, {}, "">;
+type NativeTriggerTable = ReturnType<typeof NativeTriggerTable>;
+export default NativeTriggerTable;

package/package/components/triggers/native/NativeTriggersPanel.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">import NativeTriggerEditor from './NativeTriggerEditor.svelte';
+import Description from '../../Description.svelte';
+import { onMount } from 'svelte';
+import { NATIVE_TRIGGER_SERVICES } from './utils';
+let { service, selectedTrigger, isFlow, path, isDeployed = false, defaultValues = undefined, customLabel = undefined, ...restProps } = $props();
+let editor = $state(undefined);
+async function openEditor(isFlow, isDraft) {
+    if (isDraft) {
+        editor?.openNew(isFlow, path, defaultValues);
+    }
+    else {
+        // selectedTrigger.path contains the external_id for native triggers
+        editor?.openEdit(selectedTrigger.path, isFlow, defaultValues);
+    }
+}
+onMount(() => {
+    openEditor(isFlow, selectedTrigger.isDraft ?? false);
+});
+const serviceDisplayName = $derived(NATIVE_TRIGGER_SERVICES[service].serviceDisplayName);
+</script>
+
+<div class="flex flex-col gap-4">
+	<NativeTriggerEditor
+		bind:this={editor}
+		{service}
+		useDrawer={false}
+		hideTarget
+		allowDraft={true}
+		trigger={selectedTrigger}
+		{customLabel}
+		{isDeployed}
+		{...restProps}
+	>
+		{#snippet description()}
+			<Description link="https://www.windmill.dev/docs/core_concepts/{service}_triggers">
+				{serviceDisplayName} triggers execute scripts and flows in response to events in {serviceDisplayName}.
+			</Description>
+		{/snippet}
+	</NativeTriggerEditor>
+</div>

package/package/components/triggers/native/NativeTriggersPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+import type { NativeServiceName } from '../../../gen';
+import type { Trigger } from '../utils';
+interface Props {
+    service: NativeServiceName;
+    selectedTrigger: Trigger;
+    isFlow: boolean;
+    path: string;
+    isDeployed?: boolean;
+    defaultValues?: Record<string, any>;
+    customLabel?: Snippet;
+}
+declare const NativeTriggersPanel: import("svelte").Component<Props, {}, "">;
+type NativeTriggersPanel = ReturnType<typeof NativeTriggersPanel>;
+export default NativeTriggersPanel;