windmill-components 1.642.0 → 1.655.1

package/package/components/CompareWorkspaces.svelte

@@ -1,17 +1,24 @@
-<script lang="ts">import { AlertTriangle, ArrowDown, ArrowDownRight, ArrowRight, ArrowUp, ArrowUpRight, Building, DiffIcon, GitFork, Loader2 } from 'lucide-svelte';
+<script lang="ts">import { AlertTriangle, ArrowDown, ArrowDownRight, ArrowRight, ArrowUp, ArrowUpRight, Building, DiffIcon, GitFork, Loader2, Trash2, Upload } from 'lucide-svelte';
 import { Alert, Badge } from './common';
-import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, VariableService, WorkspaceService } from '../gen';
+import { AppService, EmailTriggerService, FlowService, FolderService, GcpTriggerService, HttpTriggerService, KafkaTriggerService, MqttTriggerService, NatsTriggerService, PostgresTriggerService, ScheduleService, ScriptService, SqsTriggerService, UserService, WebsocketTriggerService, WorkspaceService } from '../gen';
 import Button from './common/button/Button.svelte';
+import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
+import Row from './common/table/Row.svelte';
 import DiffDrawer from './DiffDrawer.svelte';
+import DeployWorkspaceDrawer from './DeployWorkspaceDrawer.svelte';
 import ParentWorkspaceProtectionAlert from './ParentWorkspaceProtectionAlert.svelte';
-import { getAllModules } from './flows/flowExplorer';
 import { userWorkspaces, workspaceStore } from '../stores';
-import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
-import Row from './common/table/Row.svelte';
-import { sendUserToast } from '../toast';
+import { deployItem, getItemValue, getOnBehalfOfEmail } from '../utils_workspace_deploy';
 import Tooltip from './Tooltip.svelte';
+import OnBehalfOfSelector, { needsOnBehalfOfSelection } from './OnBehalfOfSelector.svelte';
+import { sendUserToast } from '../toast';
 import { deepEqual } from 'fast-equals';
+import WorkspaceDeployLayout from './WorkspaceDeployLayout.svelte';
+import { triggerDisplayNamesMap, triggerKindToTriggerType } from './triggers/utils';
+import { getEmailAddress, getEmailDomain } from './triggers/email/utils';
+import { base } from '../base';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 let { currentWorkspaceId, parentWorkspaceId, comparison } = $props();
 let currentWorkspaceInfo = $derived($userWorkspaces.find((w) => w.id == currentWorkspaceId));
 let parentWorkspaceInfo = $derived($userWorkspaces.find((w) => w.id == parentWorkspaceId));
@@ -19,6 +26,9 @@ let mergeIntoParent = $state(true);
 let deploying = $state(false);
 let hasAutoSelected = $state(false);
 let canDeployToParent = $state(true);
+let canPreserveInParent = $state(false);
+let canPreserveInCurrent = $state(false);
+let canPreserveOnBehalfOf = $derived(mergeIntoParent ? canPreserveInParent : canPreserveInCurrent);
 let selectableDiffs = $derived(comparison?.diffs.filter((diff) => {
     if (mergeIntoParent) {
         return diff.ahead > 0;
@@ -40,6 +50,12 @@ let itemsWithAheadChanges = $derived(comparison?.diffs.filter((diff) => {
 let hasBehindChanges = $derived(mergeIntoParent && itemsWithBehindChanges.length > 0);
 let hasAheadChanges = $derived(mergeIntoParent && itemsWithAheadChanges.length > 0);
 let summaryCache = $state({});
+// On-behalf-of tracking for flows and scripts
+// Source workspace on_behalf_of emails (keyed by workspace/kind:path)
+let onBehalfOfInfo = $state({});
+let onBehalfOfChoice = $state({});
+let customOnBehalfOfEmails = $state({});
+let deployTargetWorkspace = $derived(mergeIntoParent ? parentWorkspaceId : currentWorkspaceId);
 function getItemKey(diff) {
     return `${diff.kind}:${diff.path}`;
 }
@@ -89,84 +105,52 @@ async function fetchSummaries(diffs) {
         };
     }
 }
-async function getValue(kind, path, workspace) {
-    try {
-        if (kind == 'flow') {
-            const flow = await FlowService.getFlowByPath({
-                workspace: workspace,
-                path: path
-            });
-            getAllModules(flow.value.modules).forEach((x) => {
-                if (x.value.type == 'script' && x.value.hash != undefined) {
-                    x.value.hash = undefined;
-                }
-            });
-            return { summary: flow.summary, description: flow.description, value: flow.value };
-        }
-        else if (kind == 'script') {
-            const script = await ScriptService.getScriptByPath({
-                workspace: workspace,
-                path: path
-            });
-            return {
-                content: script.content,
-                lock: script.lock,
-                schema: script.schema,
-                summary: script.summary,
-                language: script.language
-            };
-        }
-        else if (kind == 'app') {
-            const app = await AppService.getAppByPath({
-                workspace: workspace,
-                path: path
-            });
-            return app;
-        }
-        else if (kind == 'variable') {
-            const variable = await VariableService.getVariable({
-                workspace: workspace,
-                path: path,
-                decryptSecret: true
-            });
-            return variable.value;
-        }
-        else if (kind == 'resource') {
-            const resource = await ResourceService.getResource({
-                workspace: workspace,
-                path: path
-            });
-            return resource.value;
-        }
-        else if (kind == 'resource_type') {
-            const resource = await ResourceService.getResourceType({
-                workspace: workspace,
-                path: path
-            });
-            return resource.schema;
-        }
-        else if (kind == 'folder') {
-            const folder = await FolderService.getFolder({
-                workspace: workspace,
-                name: path
-            });
-            return {
-                name: folder.name
-            };
-            // } else if (kind == 'trigger') {
-            // 	if (additionalInformation?.triggers) {
-            // 		return await getTriggerValue(additionalInformation.triggers.kind, path, workspace)
-            // 	} else {
-            // 		throw new Error(`Missing trigger information`)
-            // 	}
-        }
-        else {
-            throw new Error(`Unknown kind ${kind}`);
+async function fetchOnBehalfOfInfo(diffs) {
+    const flowsAndScripts = diffs.filter((d) => ['flow', 'script', 'app'].includes(d.kind));
+    for (const diff of flowsAndScripts) {
+        for (const workspace of [currentWorkspaceId, parentWorkspaceId]) {
+            const workspacedKey = getWorkspacedKey(workspace, getItemKey(diff));
+            if (onBehalfOfInfo[workspacedKey] !== undefined)
+                continue;
+            try {
+                onBehalfOfInfo[workspacedKey] = await getOnBehalfOfEmail(diff.kind, diff.path, workspace);
+            }
+            catch {
+                onBehalfOfInfo[workspacedKey] = undefined;
+            }
         }
     }
-    catch {
-        return {};
-    }
+}
+// Get source workspace email for an item
+function getSourceEmail(itemKey) {
+    const sourceWorkspace = mergeIntoParent ? currentWorkspaceId : parentWorkspaceId;
+    return onBehalfOfInfo[getWorkspacedKey(sourceWorkspace, itemKey)];
+}
+// Get target workspace email for an item (existing item in destination)
+function getTargetEmail(itemKey) {
+    const targetWorkspace = mergeIntoParent ? parentWorkspaceId : currentWorkspaceId;
+    return onBehalfOfInfo[getWorkspacedKey(targetWorkspace, itemKey)];
+}
+// Check if an item needs on_behalf_of selection
+function itemNeedsOnBehalfOfSelection(itemKey, kind) {
+    return needsOnBehalfOfSelection(kind, getSourceEmail(itemKey));
+}
+// Check if all required on_behalf_of selections are made
+let hasUnselectedOnBehalfOf = $derived(selectedItems.some((itemKey) => {
+    const diff = selectableDiffs.find((d) => getItemKey(d) === itemKey);
+    if (!diff)
+        return false;
+    return (itemNeedsOnBehalfOfSelection(itemKey, diff.kind) && onBehalfOfChoice[itemKey] === undefined);
+}));
+// Get the email to use for deployment based on user's choice
+function getOnBehalfOfEmailForDeploy(itemKey) {
+    const choice = onBehalfOfChoice[itemKey];
+    if (choice === 'target')
+        return getTargetEmail(itemKey);
+    if (choice === 'custom')
+        return customOnBehalfOfEmails[itemKey];
+    // 'me' or undefined = don't pass, backend will use deploying user's email
+    return undefined;
 }
 let diffDrawer = $state(undefined);
 let isFlow = $state(true);
@@ -177,8 +161,8 @@ async function showDiff(kind, path) {
         isFlow = kind == 'flow';
         diffDrawer?.openDrawer();
         let values = await Promise.all([
-            getValue(kind, path, workspaceTo),
-            getValue(kind, path, workspaceFrom)
+            getItemValue(kind, path, workspaceTo),
+            getItemValue(kind, path, workspaceFrom)
         ]);
         diffDrawer?.setDiff({
             mode: 'simple',
@@ -203,344 +187,25 @@ async function selectAllNonConflicts() {
         .map((d) => getItemKey(d))
         .filter((k) => !(deploymentStatus[k]?.status == 'deployed'));
 }
-async function checkAlreadyExists(kind, path, workspace) {
-    let exists;
-    if (kind == 'flow') {
-        exists = await FlowService.existsFlowByPath({
-            workspace: workspace,
-            path: path
-        });
-    }
-    else if (kind == 'script') {
-        exists = await ScriptService.existsScriptByPath({
-            workspace: workspace,
-            path: path
-        });
-    }
-    else if (kind == 'app') {
-        exists = await AppService.existsApp({
-            workspace: workspace,
-            path: path
-        });
-    }
-    else if (kind == 'variable') {
-        exists = await VariableService.existsVariable({
-            workspace: workspace,
-            path: path
-        });
-    }
-    else if (kind == 'resource') {
-        exists = await ResourceService.existsResource({
-            workspace: workspace,
-            path: path
-        });
-    }
-    else if (kind == 'schedule') {
-        exists = await ScheduleService.existsSchedule({
-            workspace: workspace,
-            path: path
-        });
-    }
-    else if (kind == 'resource_type') {
-        exists = await ResourceService.existsResourceType({
-            workspace: workspace,
-            path: path
-        });
-    }
-    else if (kind == 'folder') {
-        exists = await FolderService.existsFolder({
-            workspace: workspace,
-            name: path
-        });
-        // } else if (kind === 'trigger') {
-        // 	const triggersKind: TriggerKind[] = [
-        // 		'kafka',
-        // 		'mqtt',
-        // 		'nats',
-        // 		'postgres',
-        // 		'routes',
-        // 		'schedules',
-        // 		'sqs',
-        // 		'websockets',
-        // 		'gcp'
-        // 	]
-        // 	if (
-        // 		additionalInformation?.triggers &&
-        // 		triggersKind.includes(additionalInformation.triggers.kind)
-        // 	) {
-        // 		exists = await existsTrigger(
-        // 			{ workspace: workspace, path },
-        // 			additionalInformation.triggers.kind
-        // 		)
-        // 	} else {
-        // 		throw new Error(
-        // 			`Unexpected triggers kind, expected one of: '${triggersKind.join(', ')}' got: ${
-        // 				additionalInformation?.triggers?.kind
-        // 			}`
-        // 		)
-        // 	}
-    }
-    else {
-        throw new Error(`Unknown kind ${kind}`);
-    }
-    return exists;
-}
 const deploymentStatus = $state({});
-async function deploy(kind, path, workspaceToDeployTo, workspaceFrom) {
-    const statusPath = `${kind}:${path}`;
+function getWorkspacedKey(workspace, key) {
+    return `${workspace}/${key}`;
+}
+async function deploy(kind, path, workspaceToDeployTo, workspaceFrom, statusPath) {
     deploymentStatus[statusPath] = { status: 'loading' };
-    // await sleep(1000)
-    // if (Math.random() > 0.5) {
-    // 	deploymentStatus[statusPath] = {status: 'failed'}
-    // } else {
-    // 	deploymentStatus[statusPath] = {status: 'deployed'}
-    // }
-    // return
-    try {
-        let alreadyExists = await checkAlreadyExists(kind, path, workspaceToDeployTo);
-        if (kind == 'flow') {
-            const flow = await FlowService.getFlowByPath({
-                workspace: workspaceFrom,
-                path: path
-            });
-            getAllModules(flow.value.modules).forEach((x) => {
-                if (x.value.type == 'script' && x.value.hash != undefined) {
-                    x.value.hash = undefined;
-                }
-            });
-            if (alreadyExists) {
-                await FlowService.updateFlow({
-                    workspace: workspaceToDeployTo,
-                    path: path,
-                    requestBody: {
-                        ...flow
-                    }
-                });
-            }
-            else {
-                await FlowService.createFlow({
-                    workspace: workspaceToDeployTo,
-                    requestBody: {
-                        ...flow
-                    }
-                });
-            }
-        }
-        else if (kind == 'script') {
-            const script = await ScriptService.getScriptByPath({
-                workspace: workspaceFrom,
-                path: path
-            });
-            await ScriptService.createScript({
-                workspace: workspaceToDeployTo,
-                requestBody: {
-                    ...script,
-                    lock: script.lock,
-                    parent_hash: alreadyExists
-                        ? (await ScriptService.getScriptByPath({
-                            workspace: workspaceToDeployTo,
-                            path: path
-                        })).hash
-                        : undefined
-                }
-            });
-        }
-        else if (kind == 'app') {
-            const app = await AppService.getAppByPath({
-                workspace: workspaceFrom,
-                path: path
-            });
-            if (alreadyExists) {
-                if (app.raw_app) {
-                    const secret = await AppService.getPublicSecretOfLatestVersionOfApp({
-                        workspace: workspaceFrom,
-                        path: app.path
-                    });
-                    const js = await AppService.getRawAppData({
-                        secretWithExtension: `${secret}.js`,
-                        workspace: workspaceFrom
-                    });
-                    const css = await AppService.getRawAppData({
-                        secretWithExtension: `${secret}.css`,
-                        workspace: workspaceFrom
-                    });
-                    await AppService.updateAppRaw({
-                        workspace: workspaceToDeployTo,
-                        path: path,
-                        formData: {
-                            app,
-                            css,
-                            js
-                        }
-                    });
-                }
-                else {
-                    await AppService.updateApp({
-                        workspace: workspaceToDeployTo,
-                        path: path,
-                        requestBody: {
-                            ...app
-                        }
-                    });
-                }
-            }
-            else {
-                if (app.raw_app) {
-                    const secret = await AppService.getPublicSecretOfLatestVersionOfApp({
-                        workspace: workspaceFrom,
-                        path: app.path
-                    });
-                    const js = await AppService.getRawAppData({
-                        secretWithExtension: `${secret}.js`,
-                        workspace: workspaceFrom
-                    });
-                    const css = await AppService.getRawAppData({
-                        secretWithExtension: `${secret}.css`,
-                        workspace: workspaceFrom
-                    });
-                    await AppService.createAppRaw({
-                        workspace: workspaceToDeployTo,
-                        formData: {
-                            app,
-                            css,
-                            js
-                        }
-                    });
-                }
-                else {
-                    await AppService.createApp({
-                        workspace: workspaceToDeployTo,
-                        requestBody: {
-                            ...app
-                        }
-                    });
-                }
-            }
-        }
-        else if (kind == 'variable') {
-            const variable = await VariableService.getVariable({
-                workspace: workspaceFrom,
-                path: path,
-                decryptSecret: true
-            });
-            if (alreadyExists) {
-                await VariableService.updateVariable({
-                    workspace: workspaceToDeployTo,
-                    path: path,
-                    requestBody: {
-                        path: path,
-                        value: variable.value ?? '',
-                        is_secret: variable.is_secret,
-                        description: variable.description ?? ''
-                    },
-                    alreadyEncrypted: false
-                });
-            }
-            else {
-                await VariableService.createVariable({
-                    workspace: workspaceToDeployTo,
-                    requestBody: {
-                        path: path,
-                        value: variable.value ?? '',
-                        is_secret: variable.is_secret,
-                        description: variable.description ?? ''
-                    }
-                });
-            }
-        }
-        else if (kind == 'resource') {
-            const resource = await ResourceService.getResource({
-                workspace: workspaceFrom,
-                path: path
-            });
-            if (alreadyExists) {
-                await ResourceService.updateResource({
-                    workspace: workspaceToDeployTo,
-                    path: path,
-                    requestBody: {
-                        path: path,
-                        value: resource.value ?? '',
-                        description: resource.description ?? ''
-                    }
-                });
-            }
-            else {
-                await ResourceService.createResource({
-                    workspace: workspaceToDeployTo,
-                    requestBody: {
-                        path: path,
-                        value: resource.value ?? '',
-                        resource_type: resource.resource_type,
-                        description: resource.description ?? ''
-                    }
-                });
-            }
-        }
-        else if (kind == 'resource_type') {
-            const resource = await ResourceService.getResourceType({
-                workspace: workspaceFrom,
-                path: path
-            });
-            if (alreadyExists) {
-                await ResourceService.updateResourceType({
-                    workspace: workspaceToDeployTo,
-                    path: path,
-                    requestBody: {
-                        schema: resource.schema,
-                        description: resource.description ?? ''
-                    }
-                });
-            }
-            else {
-                await ResourceService.createResourceType({
-                    workspace: workspaceToDeployTo,
-                    requestBody: {
-                        description: resource.description ?? '',
-                        schema: resource.schema,
-                        name: resource.name
-                    }
-                });
-            }
-        }
-        else if (kind == 'folder') {
-            await FolderService.createFolder({
-                workspace: workspaceToDeployTo,
-                requestBody: {
-                    name: path
-                }
-            });
-            // } else if (kind === 'trigger') {
-            // 	if (additionalInformation?.triggers) {
-            // 		const { data, createFn, updateFn } = await getTriggersDeployData(
-            // 			additionalInformation.triggers.kind,
-            // 			path,
-            // 			workspaceFrom
-            // 		)
-            // 		if (alreadyExists) {
-            // 			await updateFn({
-            // 				path,
-            // 				workspace: workspaceToDeployTo,
-            // 				requestBody: data
-            // 			} as any)
-            // 		} else {
-            // 			await createFn({
-            // 				workspace: workspaceToDeployTo,
-            // 				requestBody: data
-            // 			} as any)
-            // 		}
-            // 	} else {
-            // 		throw new Error('Missing triggers kind')
-            // 	}
-        }
-        else {
-            throw new Error(`Unknown kind ${kind}`);
-        }
-        // allAlreadyExists[statusPath] = true
+    const result = await deployItem({
+        kind,
+        path,
+        workspaceFrom,
+        workspaceTo: workspaceToDeployTo,
+        onBehalfOfEmail: getOnBehalfOfEmailForDeploy(statusPath)
+    });
+    if (result.success) {
         deploymentStatus[statusPath] = { status: 'deployed' };
     }
-    catch (e) {
-        deploymentStatus[statusPath] = { status: 'failed', error: e.body || e.message };
-        sendUserToast(`Failed to deploy ${statusPath}: ${e.body || e.message}`);
+    else {
+        deploymentStatus[statusPath] = { status: 'failed', error: result.error };
+        sendUserToast(`Failed to deploy ${statusPath}: ${result.error}`);
     }
 }
 let deploymentErrorMessage = $state('');
@@ -582,10 +247,10 @@ async function deployChanges() {
             continue;
         }
         if (mergeIntoParent) {
-            await deploy(diff.kind, diff.path, parent, current);
+            await deploy(diff.kind, diff.path, parent, current, itemKey);
         }
         else {
-            await deploy(diff.kind, diff.path, current, parent);
+            await deploy(diff.kind, diff.path, current, parent, itemKey);
         }
     }
     deploying = false;
@@ -613,10 +278,35 @@ function toggleDeploymentDirection(v) {
     mergeIntoParent = v == 'deploy_to';
     selectDefault();
 }
-// Fetch summaries when comparison data loads
+// Fetch user permissions for both workspaces
+$effect(() => {
+    ;
+    [currentWorkspaceId, parentWorkspaceId];
+    async function fetchPermissions() {
+        try {
+            const parentUser = await UserService.whoami({ workspace: parentWorkspaceId });
+            canPreserveInParent =
+                parentUser.is_admin || parentUser.groups?.includes('wm_deployers') || false;
+        }
+        catch {
+            canPreserveInParent = false;
+        }
+        try {
+            const currentUser = await UserService.whoami({ workspace: currentWorkspaceId });
+            canPreserveInCurrent =
+                currentUser.is_admin || currentUser.groups?.includes('wm_deployers') || false;
+        }
+        catch {
+            canPreserveInCurrent = false;
+        }
+    }
+    fetchPermissions();
+});
+// Fetch summaries and on_behalf_of_email when comparison data loads
 $effect(() => {
     if (comparison?.diffs) {
         fetchSummaries(comparison.diffs);
+        fetchOnBehalfOfInfo(comparison.diffs);
     }
 });
 // Auto-select items on initial load
@@ -632,24 +322,247 @@ $effect(() => {
     [selectedItems, mergeIntoParent];
     allowBehindChangesOverride = false;
 });
+// Transform diffs to deployable item format for the shared layout
+let deployableItems = $derived((comparison?.diffs ?? [])
+    .filter((diff) => {
+    const key = getItemKey(diff);
+    const isSelectable = selectableDiffs.includes(diff);
+    const isDeployedAndIrrelevant = deploymentStatus[key]?.status === 'deployed' && !isSelectable;
+    return !isDeployedAndIrrelevant;
+})
+    .map((diff) => ({
+    key: getItemKey(diff),
+    path: diff.path,
+    kind: diff.kind,
+    diff
+})));
+let forkTriggers = $state([]);
+let loadingTriggers = $state(true);
+let deploymentDrawer = $state(undefined);
+let triggerToDelete = $state(undefined);
+/** Deployable trigger kinds and their list+delete services */
+const triggerServices = {
+    schedules: {
+        list: (ws) => ScheduleService.listSchedules({ workspace: ws }),
+        delete: (ws, path) => ScheduleService.deleteSchedule({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'schedules',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.enabled,
+            extraLabel: item.schedule
+        })
+    },
+    routes: {
+        list: (ws) => HttpTriggerService.listHttpTriggers({ workspace: ws }),
+        delete: (ws, path) => HttpTriggerService.deleteHttpTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'routes',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled',
+            extraLabel: `${(item.http_method ?? 'get').toUpperCase()} ${item.route_path ?? ''}`
+        })
+    },
+    websockets: {
+        list: (ws) => WebsocketTriggerService.listWebsocketTriggers({ workspace: ws }),
+        delete: (ws, path) => WebsocketTriggerService.deleteWebsocketTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'websockets',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled',
+            extraLabel: item.url
+        })
+    },
+    kafka: {
+        list: (ws) => KafkaTriggerService.listKafkaTriggers({ workspace: ws }),
+        delete: (ws, path) => KafkaTriggerService.deleteKafkaTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'kafka',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled',
+            extraLabel: item.topics?.join(', ')
+        })
+    },
+    postgres: {
+        list: (ws) => PostgresTriggerService.listPostgresTriggers({ workspace: ws }),
+        delete: (ws, path) => PostgresTriggerService.deletePostgresTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'postgres',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled'
+        })
+    },
+    nats: {
+        list: (ws) => NatsTriggerService.listNatsTriggers({ workspace: ws }),
+        delete: (ws, path) => NatsTriggerService.deleteNatsTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'nats',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled',
+            extraLabel: item.subjects?.join(', ')
+        })
+    },
+    mqtt: {
+        list: (ws) => MqttTriggerService.listMqttTriggers({ workspace: ws }),
+        delete: (ws, path) => MqttTriggerService.deleteMqttTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'mqtt',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled'
+        })
+    },
+    sqs: {
+        list: (ws) => SqsTriggerService.listSqsTriggers({ workspace: ws }),
+        delete: (ws, path) => SqsTriggerService.deleteSqsTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'sqs',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled',
+            extraLabel: item.queue_url
+        })
+    },
+    gcp: {
+        list: (ws) => GcpTriggerService.listGcpTriggers({ workspace: ws }),
+        delete: (ws, path) => GcpTriggerService.deleteGcpTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'gcp',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled',
+            extraLabel: item.topic_id
+        })
+    },
+    emails: {
+        list: (ws) => EmailTriggerService.listEmailTriggers({ workspace: ws }),
+        delete: (ws, path) => EmailTriggerService.deleteEmailTrigger({ workspace: ws, path }),
+        normalize: (item) => ({
+            path: item.path,
+            triggerKind: 'emails',
+            scriptPath: item.script_path,
+            isFlow: item.is_flow,
+            enabled: item.mode === 'enabled',
+            extraLabel: getEmailAddress(item.local_part, item.workspaced_local_part, currentWorkspaceId, emailDomain ?? '')
+        })
+    }
+};
+let emailDomain = $state(undefined);
+async function fetchAllTriggers() {
+    loadingTriggers = true;
+    try {
+        emailDomain = await getEmailDomain();
+        const entries = Object.values(triggerServices);
+        const results = await Promise.allSettled(entries.map(async (svc) => {
+            const items = await svc.list(currentWorkspaceId);
+            return items.map(svc.normalize);
+        }));
+        forkTriggers = results.flatMap((r) => (r.status === 'fulfilled' ? r.value : []));
+    }
+    catch (e) {
+        console.error('Failed to fetch fork triggers:', e);
+        forkTriggers = [];
+    }
+    finally {
+        loadingTriggers = false;
+    }
+}
+function deleteTrigger(trigger) {
+    triggerToDelete = trigger;
+}
+async function confirmDeleteTrigger() {
+    const trigger = triggerToDelete;
+    if (!trigger)
+        return;
+    triggerToDelete = undefined;
+    const triggerType = triggerKindToTriggerType(trigger.triggerKind);
+    const displayName = triggerType ? triggerDisplayNamesMap[triggerType] : trigger.triggerKind;
+    try {
+        const svc = triggerServices[trigger.triggerKind];
+        if (!svc) {
+            throw new Error(`No service for trigger kind: ${trigger.triggerKind}`);
+        }
+        await svc.delete(currentWorkspaceId, trigger.path);
+        forkTriggers = forkTriggers.filter((t) => !(t.path === trigger.path && t.triggerKind === trigger.triggerKind));
+        sendUserToast(`Deleted ${displayName} trigger '${trigger.path}'`);
+    }
+    catch (e) {
+        sendUserToast(`Failed to delete trigger '${trigger.path}': ${e.body || e.message}`, true);
+    }
+}
+function getTriggerDisplayName(triggerKind) {
+    const triggerType = triggerKindToTriggerType(triggerKind);
+    return triggerType ? triggerDisplayNamesMap[triggerType] : triggerKind;
+}
+const triggerKindToPagePath = {
+    schedules: '/schedules',
+    routes: '/routes',
+    websockets: '/websocket_triggers',
+    kafka: '/kafka_triggers',
+    postgres: '/postgres_triggers',
+    nats: '/nats_triggers',
+    mqtt: '/mqtt_triggers',
+    sqs: '/sqs_triggers',
+    gcp: '/gcp_triggers',
+    emails: '/email_triggers'
+};
+function getTriggerHref(triggerKind) {
+    const pagePath = triggerKindToPagePath[triggerKind];
+    return pagePath ? `${base}${pagePath}` : undefined;
+}
+// Fetch triggers when workspace is available
+$effect(() => {
+    if (currentWorkspaceId) {
+        fetchAllTriggers();
+    }
+});
 </script>
 
-<div class="flex flex-col h-full">
-	{#if $workspaceStore != currentWorkspaceId}
-		<Alert title="Targetting different workspace" type="info" class="my-2">
-			<span>
-				You are currently seeing the deployement page of workspace <b
-					>{currentWorkspaceInfo?.name} ({currentWorkspaceInfo?.id})</b
-				> which is not your currently selected workspace.
-			</span>
-			<a href="/">Click here to go home ({$workspaceStore})</a>
-		</Alert>
-	{/if}
-	{#if comparison}
-		{@const selectedConflicts = conflictingDiffs.filter((e) =>
-			selectedItems.includes(getItemKey(e))
-		).length}
-		<div class="bg-surface">
+{#if $workspaceStore != currentWorkspaceId}
+	<Alert title="Targetting different workspace" type="info" class="my-2">
+		<span>
+			You are currently seeing the deployement page of workspace <b
+				>{currentWorkspaceInfo?.name} ({currentWorkspaceInfo?.id})</b
+			> which is not your currently selected workspace.
+		</span>
+		<a href="/">Click here to go home ({$workspaceStore})</a>
+	</Alert>
+{/if}
+
+{#if comparison}
+	{@const selectedConflicts = conflictingDiffs.filter((e) =>
+		selectedItems.includes(getItemKey(e))
+	).length}
+
+	<WorkspaceDeployLayout
+		items={deployableItems}
+		{selectedItems}
+		{deploymentStatus}
+		selectablePredicate={(item) => selectableDiffs.some((d) => getItemKey(d) === item.key)}
+		{allSelected}
+		onToggleItem={(item) => {
+			const diff = comparison?.diffs.find((d) => getItemKey(d) === item.key)
+			if (diff) toggleItem(diff)
+		}}
+		onSelectAll={selectAll}
+		onDeselectAll={deselectAll}
+		emptyMessage="No comparison data available"
+	>
+		{#snippet header()}
 			<div class="flex items-center justify-between">
 				<div
 					class="flex flex-col gap-2 border bg-surface-tertiary w-full p-4 border-radius-5 rounded"
@@ -720,216 +633,169 @@ $effect(() => {
 					</div>
 				</div>
 			</div>
-		</div>
-
-		{#if mergeIntoParent}
-			<ParentWorkspaceProtectionAlert
-				{parentWorkspaceId}
-				onUpdateCanDeploy={(canDeploy) => {
-					canDeployToParent = canDeploy
-				}}
-			/>
-		{/if}
-		{#if conflictingDiffs.length > 0}
-			<Alert title="Conflicting changes detected" type="warning" class="mt-2">
-				<!-- <AlertTriangle class="w-4 h-4" /> -->
-				<span>
-					{conflictingDiffs.length} item{conflictingDiffs.length !== 1 ? 's have' : ' has'} conflicting
-					changes, it was modified on the original workspace while changes were made on this fork. Make
-					sure to resolve these before merging.
-				</span>
-			</Alert>
-		{/if}
-		{#if hasBehindChanges && hasAheadChanges && !(mergeIntoParent && !canDeployToParent)}
-			<Alert
-				title="This fork is behind {parentWorkspaceId} and needs to be up to date before deploying"
-				type="warning"
-				class="my-2"
-			>
-				You have items behind '{parentWorkspaceId}'. You need to update and test your changes before
-				being able to deploy.
-				<span class="font-medium flex flex-row gap-1 text-red-500">
-					<input
-						type="checkbox"
-						bind:checked={allowBehindChangesOverride}
-						class="rounded max-w-4"
-					/>
-					Override: Deploy despite {itemsWithBehindChanges.length} outdated item{itemsWithBehindChanges.length !==
-					1
-						? 's'
-						: ''}
-				</span>
-			</Alert>
-		{/if}
-		{#if !comparison.all_ahead_items_visible || !comparison.all_behind_items_visible}
-			<Alert title="This fork has changes not visible to your user" type="warning" class="my-2">
-				{#if !comparison.all_ahead_items_visible && !comparison.all_behind_items_visible}
-					This fork is ahead and behind its parent
-				{:else if !comparison.all_behind_items_visible}
-					This fork is behind of its parent
-				{:else if !comparison.all_ahead_items_visible}
-					This fork is ahead of its parent
-				{/if}
-				and some of the changes are not visible by you. Only a user with access to the whole context
-				may deploy or update this fork. You can share the link to this page to someone with proper permissions
-				to get it deployed.
-			</Alert>
-		{/if}
+		{/snippet}
 
-		<div class="px-4 py-2 flex items-center justify-between">
-			<div
-				class="flex items-center gap-2 text-secondary text-sm"
-				class:opacity-50={selectableDiffs.length == 0}
-			>
-				<input
-					type="checkbox"
-					disabled={selectableDiffs.length == 0}
-					checked={allSelected}
-					onchange={allSelected ? deselectAll : selectAll}
-					class="rounded max-w-4 w-full"
-				/> Select all
-			</div>
-		</div>
+		{#snippet alerts()}
+			{#if mergeIntoParent}
+				<ParentWorkspaceProtectionAlert
+					{parentWorkspaceId}
+					onUpdateCanDeploy={(canDeploy) => {
+						canDeployToParent = canDeploy
+					}}
+				/>
+			{/if}
+			{#if conflictingDiffs.length > 0}
+				<Alert title="Conflicting changes detected" type="warning" class="mt-2">
+					<span>
+						{conflictingDiffs.length} item{conflictingDiffs.length !== 1 ? 's have' : ' has'} conflicting
+						changes, it was modified on the original workspace while changes were made on this fork.
+						Make sure to resolve these before merging.
+					</span>
+				</Alert>
+			{/if}
+			{#if hasBehindChanges && hasAheadChanges && !(mergeIntoParent && !canDeployToParent)}
+				<Alert
+					title="This fork is behind {parentWorkspaceId} and needs to be up to date before deploying"
+					type="warning"
+					class="my-2"
+				>
+					You have items behind '{parentWorkspaceId}'. You need to update and test your changes
+					before being able to deploy.
+					<span class="font-medium flex flex-row gap-1 text-red-500">
+						<input
+							type="checkbox"
+							bind:checked={allowBehindChangesOverride}
+							class="rounded max-w-4"
+						/>
+						Override: Deploy despite {itemsWithBehindChanges.length} outdated item{itemsWithBehindChanges.length !==
+						1
+							? 's'
+							: ''}
+					</span>
+				</Alert>
+			{/if}
+			{#if !comparison.all_ahead_items_visible || !comparison.all_behind_items_visible}
+				<Alert title="This fork has changes not visible to your user" type="warning" class="my-2">
+					{#if !comparison.all_ahead_items_visible && !comparison.all_behind_items_visible}
+						This fork is ahead and behind its parent
+					{:else if !comparison.all_behind_items_visible}
+						This fork is behind of its parent
+					{:else if !comparison.all_ahead_items_visible}
+						This fork is ahead of its parent
+					{/if}
+					and some of the changes are not visible by you. Only a user with access to the whole context
+					may deploy or update this fork. You can share the link to this page to someone with proper
+					permissions to get it deployed.
+				</Alert>
+			{/if}
+		{/snippet}
 
-		<div class="flex-1 overflow-y-auto">
-			<div class="border rounded-md bg-surface-tertiary">
-				{#each comparison.diffs as diff}
-					{@const key = getItemKey(diff)}
-					{@const isSelectable = selectableDiffs.includes(diff)}
-					{@const isSelected = selectedItems.includes(key)}
-					{@const isConflict = diff.ahead > 0 && diff.behind > 0}
-					{@const oldSummary = mergeIntoParent
-						? summaryCache[key]?.parent
-						: summaryCache[key]?.current}
-					{@const newSummary = mergeIntoParent
-						? summaryCache[key]?.current
-						: summaryCache[key]?.parent}
-					{@const existsInBothWorkspaces = !(
-						(diff.exists_in_fork && !diff.exists_in_source) ||
-						(!diff.exists_in_fork && diff.exists_in_source)
-					)}
-					{@const isDeployedAndIrrelevant =
-						deploymentStatus[key]?.status == 'deployed' && !isSelectable}
+		{#snippet itemSummary(item)}
+			{@const diff = item.diff as WorkspaceItemDiff}
+			{@const key = item.key}
+			{@const isSelectable = selectableDiffs.includes(diff)}
+			{@const oldSummary = mergeIntoParent ? summaryCache[key]?.parent : summaryCache[key]?.current}
+			{@const newSummary = mergeIntoParent ? summaryCache[key]?.current : summaryCache[key]?.parent}
+			{@const existsInBothWorkspaces = !(
+				(diff.exists_in_fork && !diff.exists_in_source) ||
+				(!diff.exists_in_fork && diff.exists_in_source)
+			)}
+			{#if oldSummary != newSummary && isSelectable && existsInBothWorkspaces}
+				<span class="line-through text-secondary">{oldSummary || diff.path}</span>
+				{newSummary || diff.path}
+			{:else if !existsInBothWorkspaces}
+				{newSummary || oldSummary || diff.path}
+			{:else}
+				{newSummary || diff.path}
+			{/if}
+		{/snippet}
 
-					{#if !isDeployedAndIrrelevant}
-						<Row
-							isSelectable={isSelectable && !(deploymentStatus[key]?.status == 'deployed')}
-							alignWithSelectable={true}
-							disabled={!isSelectable}
-							selected={isSelected && !(deploymentStatus[key]?.status == 'deployed')}
-							onSelect={() => toggleItem(diff)}
-							path={diff.kind != 'resource' &&
-							diff.kind != 'variable' &&
-							diff.kind != 'resource_type'
-								? diff.path
-								: ''}
-							marked={undefined}
-							kind={diff.kind}
-							canFavorite={false}
-							workspaceId=""
-						>
-							{#snippet customSummary()}
-								{#if oldSummary != newSummary && isSelectable && existsInBothWorkspaces}
-									<span class="line-through text-secondary">{oldSummary || diff.path}</span>
-									{newSummary || diff.path}
-								{:else if !existsInBothWorkspaces}
-									{newSummary || oldSummary || diff.path}
-								{:else}
-									{newSummary || diff.path}
-								{/if}
-							{/snippet}
-							{#snippet actions()}
-								<!-- Status badges -->
-								{#if !diff.exists_in_fork && diff.exists_in_source && diff.ahead == 0 && diff.behind > 0}
-									<Badge
-										title="This item was newly created in the parent workspace '{parentWorkspaceId}'"
-										color="indigo"
-										size="xs">New</Badge
-									>
-								{/if}
-								{#if !diff.exists_in_fork && diff.exists_in_source && diff.ahead > 0}
-									<Badge
-										title="This item was deleted in '{currentWorkspaceId}'"
-										color="red"
-										size="xs">Deleted</Badge
-									>
-								{/if}
-								{#if diff.exists_in_fork && !diff.exists_in_source && diff.behind > 0}
-									<Badge
-										title="This item was deleted in the parent workspace '{parentWorkspaceId}'"
-										color="red"
-										size="xs">Deleted</Badge
-									>
-								{/if}
-								{#if diff.exists_in_fork && !diff.exists_in_source && diff.ahead > 0 && diff.behind == 0}
-									<Badge
-										title="This item was newly created in '{currentWorkspaceId}'"
-										color="indigo"
-										size="xs">New</Badge
-									>
-								{/if}
-								{#if !deploymentStatus[key] || deploymentStatus[key].status != 'deployed'}
-									<div class="flex items-center gap-2">
-										{#if isConflict || existsInBothWorkspaces}
-											{#if diff.ahead > 0}
-												<Badge color="green" size="xs">
-													<ArrowUpRight class="w-3 h-3 inline" />
-													{diff.ahead} ahead
-												</Badge>
-											{/if}
-											{#if diff.behind > 0}
-												<Badge color="blue" size="xs">
-													<ArrowDownRight class="w-3 h-3 inline" />
-													{diff.behind} behind
-												</Badge>
-											{/if}
-											{#if isConflict}
-												<Badge color="orange" size="xs">
-													<AlertTriangle class="w-3 h-3 inline" />
-													Conflict
-												</Badge>
-											{/if}
-										{/if}
-									</div>
-									<div class:invisible={!existsInBothWorkspaces}>
-										<Button
-											size="xs"
-											variant="subtle"
-											onclick={() => showDiff(diff.kind as Kind, diff.path)}
-										>
-											<DiffIcon class="w-3 h-3" />
-											Show diff
-										</Button>
-									</div>
-								{/if}
-								{#if deploymentStatus[key]}
-									{#if deploymentStatus[key].status == 'loading'}
-										<Loader2 class="animate-spin" />
-									{:else if deploymentStatus[key].status == 'deployed'}
-										<Badge color="green">Deployed</Badge>
-									{:else if deploymentStatus[key].status == 'failed'}
-										<div class="inline-flex gap-1">
-											<Badge color="red">Failed</Badge>
-											<Tooltip>{deploymentStatus[key].error}</Tooltip></div
-										>
-									{/if}
-								{/if}
-							{/snippet}
-						</Row>
+		{#snippet itemActions(item)}
+			{@const diff = item.diff as WorkspaceItemDiff}
+			{@const key = item.key}
+			{@const targetEmail = getTargetEmail(key)}
+			{@const isConflict = diff.ahead > 0 && diff.behind > 0}
+			{@const existsInBothWorkspaces = !(
+				(diff.exists_in_fork && !diff.exists_in_source) ||
+				(!diff.exists_in_fork && diff.exists_in_source)
+			)}
+			<!-- On-behalf-of selector -->
+			{#if itemNeedsOnBehalfOfSelection(key, diff.kind)}
+				<OnBehalfOfSelector
+					targetWorkspace={deployTargetWorkspace}
+					{targetEmail}
+					selected={onBehalfOfChoice[key]}
+					onSelect={(choice, email) => {
+						onBehalfOfChoice[key] = choice
+						if (email) customOnBehalfOfEmails[key] = email
+					}}
+					kind={diff.kind}
+					canPreserve={canPreserveOnBehalfOf}
+					customEmail={customOnBehalfOfEmails[key]}
+				/>
+			{/if}
+			<!-- Status badges -->
+			{#if !diff.exists_in_fork && diff.exists_in_source && diff.ahead == 0 && diff.behind > 0}
+				<Badge
+					title="This item was newly created in the parent workspace '{parentWorkspaceId}'"
+					color="indigo"
+					size="xs">New</Badge
+				>
+			{/if}
+			{#if !diff.exists_in_fork && diff.exists_in_source && diff.ahead > 0}
+				<Badge title="This item was deleted in '{currentWorkspaceId}'" color="red" size="xs"
+					>Deleted</Badge
+				>
+			{/if}
+			{#if diff.exists_in_fork && !diff.exists_in_source && diff.behind > 0}
+				<Badge
+					title="This item was deleted in the parent workspace '{parentWorkspaceId}'"
+					color="red"
+					size="xs">Deleted</Badge
+				>
+			{/if}
+			{#if diff.exists_in_fork && !diff.exists_in_source && diff.ahead > 0 && diff.behind == 0}
+				<Badge
+					title="This item was newly created in '{currentWorkspaceId}'"
+					color="indigo"
+					size="xs">New</Badge
+				>
+			{/if}
+			{#if !deploymentStatus[key] || deploymentStatus[key].status != 'deployed'}
+				<div class="flex items-center gap-2">
+					{#if isConflict || existsInBothWorkspaces}
+						{#if diff.ahead > 0}
+							<Badge color="green" size="xs">
+								<ArrowUpRight class="w-3 h-3 inline" />
+								{diff.ahead} ahead
+							</Badge>
+						{/if}
+						{#if diff.behind > 0}
+							<Badge color="blue" size="xs">
+								<ArrowDownRight class="w-3 h-3 inline" />
+								{diff.behind} behind
+							</Badge>
+						{/if}
+						{#if isConflict}
+							<Badge color="orange" size="xs">
+								<AlertTriangle class="w-3 h-3 inline" />
+								Conflict
+							</Badge>
+						{/if}
 					{/if}
-				{/each}
-			</div>
-		</div>
+				</div>
+				<div class:invisible={!existsInBothWorkspaces}>
+					<Button size="xs" variant="subtle" onclick={() => showDiff(diff.kind as Kind, diff.path)}>
+						<DiffIcon class="w-3 h-3" />
+						Show diff
+					</Button>
+				</div>
+			{/if}
+		{/snippet}
 
-		<div class="p-4 bg-surface">
+		{#snippet footer()}
 			<div class="flex items-center justify-between">
-				<div>
-					<!-- {#if comparison.summary.total_diffs === 0} -->
-					<!-- 	<Button color="red" variant="accent-secondary" on:click={deleteWorkspace}> -->
-					<!-- 		Delete Fork Workspace -->
-					<!-- 	</Button> -->
-					<!-- {/if} -->
-				</div>
+				<div></div>
 
 				<div class="flex flex-col items-end gap-2">
 					{#if comparison.all_behind_items_visible && comparison.all_ahead_items_visible}
@@ -939,7 +805,8 @@ $effect(() => {
 								disabled={selectedItems.length === 0 ||
 									deploying ||
 									(hasBehindChanges && !allowBehindChangesOverride) ||
-									(mergeIntoParent && !canDeployToParent)}
+									(mergeIntoParent && !canDeployToParent) ||
+									hasUnselectedOnBehalfOf}
 								loading={deploying}
 								on:click={deployChanges}
 							>
@@ -949,6 +816,15 @@ $effect(() => {
 									({selectedConflicts} conflicts)
 								{/if}
 							</Button>
+							{#if hasUnselectedOnBehalfOf}
+								<span class="text-xs text-yellow-600">
+									You must set the "on behalf of" user for all items before deploying
+									<Tooltip class="text-yellow-600">
+										The "run on behalf of" field defines which user's permissions will be applied
+										during execution. Make sure this is set to an appropriate user before deploying.
+									</Tooltip>
+								</span>
+							{/if}
 						{/if}
 					{/if}
 
@@ -965,11 +841,103 @@ $effect(() => {
 					{/if}
 				</div>
 			</div>
+		{/snippet}
+	</WorkspaceDeployLayout>
+
+	<!-- Fork Triggers Section -->
+	<div class="mt-6">
+		<div class="flex items-center gap-2 mb-2">
+			<h3 class="text-sm font-semibold">Triggers created in this fork</h3>
+			{#if !loadingTriggers}
+				<Badge color="indigo" size="xs"
+					>{forkTriggers.length} trigger{forkTriggers.length !== 1 ? 's' : ''}</Badge
+				>
+			{/if}
 		</div>
-		<DiffDrawer bind:this={diffDrawer} {isFlow} />
-	{:else}
-		<div class="flex items-center justify-center h-full">
-			<div class="text-gray-500">No comparison data available</div>
-		</div>
-	{/if}
-</div>
+
+		<Alert title="Deploy and/or delete these triggers" type="info" class="mb-2">
+			When forking a workspace, triggers are not forked to avoid unnecessary executions or
+			collisions. If you created this triggers with the intention of deploying them to the parent
+			workspace, you can do so here. Otherwise it is recommended to delete them or disable them.
+		</Alert>
+
+		{#if loadingTriggers}
+			<div class="flex items-center gap-2 text-secondary text-sm p-4">
+				<Loader2 class="animate-spin w-4 h-4" />
+				Loading triggers...
+			</div>
+		{:else if forkTriggers.length === 0}
+			<div class="text-secondary text-sm p-4 border rounded-md bg-surface-tertiary">
+				No triggers in this fork workspace.
+			</div>
+		{:else}
+			<div class="border rounded-md bg-surface-tertiary">
+				{#each forkTriggers as trigger (trigger.triggerKind + ':' + trigger.path)}
+					<Row
+						kind="trigger"
+						triggerKind={trigger.triggerKind}
+						path={trigger.path}
+						href={getTriggerHref(trigger.triggerKind)}
+						marked={undefined}
+						isSelectable={false}
+						canFavorite={false}
+						workspaceId={currentWorkspaceId}
+					>
+						{#snippet customSummary()}
+							<span>{getTriggerDisplayName(trigger.triggerKind)}</span>
+							<span class="text-secondary mx-1">&rarr;</span>
+							<span class="text-secondary">{trigger.scriptPath}</span>
+							{#if trigger.isFlow}
+								<Badge color="blue" size="xs">flow</Badge>
+							{/if}
+							{#if trigger.extraLabel}
+								<span class="text-tertiary text-xs">({trigger.extraLabel})</span>
+							{/if}
+						{/snippet}
+						{#snippet actions()}
+							{#if trigger.enabled != null}
+								<Badge color={trigger.enabled ? 'green' : 'gray'} size="xs">
+									{trigger.enabled ? 'Enabled' : 'Disabled'}
+								</Badge>
+							{/if}
+							<Button
+								size="xs"
+								variant="subtle"
+								onclick={() => {
+									deploymentDrawer?.openDrawer(trigger.path, 'trigger', {
+										triggers: { kind: trigger.triggerKind }
+									})
+								}}
+							>
+								<Upload size={12} />
+								Deploy
+							</Button>
+							<Button size="xs" variant="subtle" color="red" onclick={() => deleteTrigger(trigger)}>
+								<Trash2 size={12} />
+							</Button>
+						{/snippet}
+					</Row>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<DeployWorkspaceDrawer bind:this={deploymentDrawer} />
+	<DiffDrawer bind:this={diffDrawer} {isFlow} />
+	<ConfirmationModal
+		title="Delete trigger"
+		confirmationText="Delete"
+		open={!!triggerToDelete}
+		onConfirmed={confirmDeleteTrigger}
+		onCanceled={() => (triggerToDelete = undefined)}
+	>
+		{#if triggerToDelete}
+			Are you sure you want to delete the {getTriggerDisplayName(triggerToDelete.triggerKind)} trigger
+			'{triggerToDelete.path}'?
+		{/if}
+	</ConfirmationModal>
+{:else}
+	<div class="flex items-center justify-center h-full">
+		<div class="text-gray-500">No comparison data available</div>
+	</div>
+{/if}