Add confirmation modal for deleting triggers

Author: Guilhem-lm

frontend/src/lib/components/SchedulePanel.svelte

@@ -33,9 +33,7 @@
 	bind:this={scheduleEditor}
 	hideTarget
 	allowDraft
-	hasDraft={!!selectedTrigger.draftConfig}
-	isDraftOnly={selectedTrigger.isDraft}
-	primary={selectedTrigger.isPrimary}
+	trigger={selectedTrigger}
 	draftSchema={schema}
 	{customLabel}
 	{...restProps}

frontend/src/lib/components/triggers/DeleteTriggerButton.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Trash } from 'lucide-svelte'
+	import Button from '../common/button/Button.svelte'
+	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
+	import { triggerIconMap, type Trigger } from './utils'
+	import TriggerLabel from './TriggerLabel.svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	interface Props {
+		onDelete: (() => void) | undefined
+		trigger?: Trigger
+		small?: boolean
+	}
+
+	let { onDelete, trigger = undefined, small = false }: Props = $props()
+
+	let confirmationModalOpen = $state(false)
+</script>
+
+<ConfirmationModal
+	title="Are you sure you want to delete this draft trigger ?"
+	confirmationText="Delete"
+	open={confirmationModalOpen}
+	on:canceled={() => {
+		confirmationModalOpen = false
+	}}
+	on:confirmed={() => {
+		onDelete?.()
+		confirmationModalOpen = false
+	}}
+>
+	{#if trigger !== undefined}
+		{@const IconComponent = triggerIconMap[trigger.type]}
+		<div class="flex flex-row gap-2 items-center grow min-w-0 pr-2 rounded-md my-4">
+			<IconComponent
+				size={16}
+				class={twMerge(trigger.isDraft ? 'text-frost-400' : '', 'shrink-0')}
+			/>
+			<TriggerLabel {trigger} />
+		</div>
+	{/if}
+</ConfirmationModal>
+
+<Button
+	size="xs"
+	startIcon={{ icon: Trash }}
+	iconOnly
+	color={'light'}
+	on:click={() => {
+		confirmationModalOpen = true
+	}}
+	btnClasses={twMerge(small ? 'px-1 py-1' : '', 'bg-transparent hover:bg-red-500 hover:text-white')}
+/>

frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
-	import { Trash, Save, RotateCcw } from 'lucide-svelte'
+	import { Save, RotateCcw } from 'lucide-svelte'
 	import { type Snippet } from 'svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { Tooltip } from '../meltComponents'
+	import DeleteTriggerButton from './DeleteTriggerButton.svelte'
+	import type { Trigger } from './utils'
 
 	interface Props {
-		isDraftOnly: any
-		hasDraft: any
 		saveDisabled: any
 		enabled: boolean | undefined
 		allowDraft: any
@@ -21,12 +21,10 @@
 		onToggleEnabled?: (enabled: boolean) => void
 		onUpdate?: () => void
 		cloudDisabled?: boolean
-		triggerType?: string
+		trigger?: Trigger
 	}
 
 	let {
-		isDraftOnly,
-		hasDraft,
 		saveDisabled,
 		enabled,
 		allowDraft,
@@ -39,7 +37,8 @@
 		onReset,
 		onToggleEnabled,
 		onUpdate,
-		cloudDisabled = false
+		cloudDisabled = false,
+		trigger
 	}: Props = $props()
 
 	const canSave = $derived((permissions === 'write' && edit) || permissions === 'create')
@@ -73,7 +72,7 @@
 	{/if}
 {:else}
 	<div class="flex flex-row gap-2 items-center">
-		{#if !isDraftOnly && !hasDraft && enabled !== undefined}
+		{#if !trigger?.draftConfig && enabled !== undefined}
 			<div class="center-center">
 				<Toggle
 					size="2sm"
@@ -86,18 +85,9 @@
 				/>
 			</div>
 		{/if}
-		{#if isDraftOnly}
-			<Button
-				size="xs"
-				startIcon={{ icon: Trash }}
-				iconOnly
-				color={'light'}
-				on:click={() => {
-					onDelete?.()
-				}}
-				btnClasses="hover:bg-red-500 hover:text-white"
-			/>
-		{:else if hasDraft}
+		{#if trigger?.isDraft}
+			<DeleteTriggerButton {onDelete} {trigger} />
+		{:else if !trigger?.isDraft && trigger?.draftConfig}
 			<Button
 				size="xs"
 				startIcon={{ icon: RotateCcw }}
@@ -109,7 +99,7 @@
 				Reset changes
 			</Button>
 		{/if}
-		{#if canSave && (isDraftOnly || hasDraft)}
+		{#if canSave && trigger?.draftConfig}
 			<Tooltip placement="bottom-end" disablePopup={!saveDisabled && !cloudDisabled && isDeployed}>
 				<Button
 					size="xs"
@@ -120,15 +110,15 @@
 					}}
 					loading={isLoading}
 				>
-					{isDraftOnly ? 'Deploy' : 'Update'}
+					{trigger?.isDraft ? 'Deploy' : 'Update'}
 				</Button>
 				<span slot="text">
 					{#if !isDeployed}
 						Deploy the runnable to enable trigger creation
 					{:else if cloudDisabled}
 						This trigger is disabled in the multi-tenant cloud
 					{:else}
-						Enter a valid config to {isDraftOnly ? 'deploy' : 'update'} the trigger
+						Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
 					{/if}
 				</span>
 			</Tooltip>

frontend/src/lib/components/triggers/TriggersTable.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import DataTable from '$lib/components/table/DataTable.svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
-	import { Plus, Star, Loader2, Trash, RotateCcw } from 'lucide-svelte'
+	import { Plus, Star, Loader2, RotateCcw } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { triggerIconMap, type Trigger, type TriggerType } from './utils'
 	import AddTriggersButton from './AddTriggersButton.svelte'
 	import TriggerLabel from './TriggerLabel.svelte'
+	import DeleteTriggerButton from './DeleteTriggerButton.svelte'
 
 	interface Props {
 		// Props
@@ -94,14 +95,7 @@
 
 							{#if !['email', 'webhook', 'cli'].includes(trigger.type)}
 								{#if trigger.isDraft}
-									<Button
-										size="xs"
-										color="light"
-										btnClasses="transition-all duration-200 text-transparent hover:bg-surface group-hover:text-primary bg-transparent px-1 py-1"
-										startIcon={{ icon: Trash }}
-										iconOnly
-										on:click={() => onDeleteDraft?.(index)}
-									/>
+									<DeleteTriggerButton {trigger} onDelete={() => onDeleteDraft?.(index)} small />
 								{:else if !!trigger.draftConfig && !trigger.isDraft}
 									<Button
 										size="xs"

frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte

@@ -21,7 +21,7 @@
 	import type { Snippet } from 'svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { saveGcpTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
+	import { handleConfigChange, type Trigger } from '../utils'
 
 	let drawer: Drawer | undefined = $state(undefined)
 	let is_flow: boolean = $state(false)
@@ -55,8 +55,7 @@
 		hideTooltips = false,
 		isEditor = false,
 		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
+		trigger = undefined,
 		isDeployed = false,
 		customLabel = undefined,
 		onConfigChange = undefined,
@@ -72,8 +71,7 @@
 		hideTooltips?: boolean
 		isEditor?: boolean
 		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
+		trigger?: Trigger
 		isDeployed?: boolean
 		customLabel?: Snippet
 		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
@@ -225,7 +223,7 @@
 
 	async function handleToggleEnabled(toggleEnabled: boolean) {
 		enabled = toggleEnabled
-		if (!isDraftOnly && !hasDraft) {
+		if (!trigger?.draftConfig) {
 			await GcpTriggerService.setGcpTriggerEnabled({
 				path: initialPath,
 				workspace: $workspaceStore ?? '',
@@ -279,8 +277,6 @@
 {#snippet actionsButtons()}
 	{#if !drawerLoading && can_write}
 		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
 			permissions={drawerLoading || !can_write ? 'none' : 'create'}
 			{saveDisabled}
 			{enabled}
@@ -293,6 +289,7 @@
 			{onDelete}
 			onToggleEnabled={handleToggleEnabled}
 			{cloudDisabled}
+			{trigger}
 		/>
 	{/if}
 {/snippet}

frontend/src/lib/components/triggers/gcp/GcpTriggerPanel.svelte

@@ -44,8 +44,7 @@
 			hideTarget
 			hideTooltips={!isDeployed || cloudDisabled}
 			allowDraft={true}
-			hasDraft={!!selectedTrigger.draftConfig}
-			isDraftOnly={selectedTrigger.isDraft}
+			trigger={selectedTrigger}
 			{customLabel}
 			{isDeployed}
 			{cloudDisabled}

frontend/src/lib/components/triggers/http/RouteEditorInner.svelte

@@ -39,15 +39,14 @@
 		description = undefined,
 		isEditor = false,
 		customLabel = undefined,
-		isDraftOnly = false,
 		allowDraft = false,
-		hasDraft = false,
 		isDeployed = false,
 		onConfigChange = undefined,
 		onCaptureConfigChange = undefined,
 		onUpdate = undefined,
 		onDelete = undefined,
-		onReset = undefined
+		onReset = undefined,
+		trigger = undefined
 	} = $props()
 
 	// Form data state
@@ -526,7 +525,7 @@
 				{can_write}
 				bind:static_asset_config
 				showTestingBadge={isEditor}
-				{isDraftOnly}
+				isDraftOnly={trigger?.isDraft}
 			/>
 
 			{#if !is_static_website}
@@ -717,8 +716,7 @@
 {#snippet saveButton()}
 	{#if !drawerLoading}
 		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
+			{trigger}
 			permissions={drawerLoading || !can_write ? 'none' : can_write && isAdmin ? 'create' : 'write'}
 			{saveDisabled}
 			enabled={undefined}

frontend/src/lib/components/triggers/http/RoutesPanel.svelte

@@ -37,9 +37,8 @@
 	hideTarget
 	{isEditor}
 	{customLabel}
-	isDraftOnly={selectedTrigger.isDraft}
+	trigger={selectedTrigger}
 	allowDraft
-	hasDraft={!!selectedTrigger.draftConfig}
 	{...restProps}
 >
 	{#snippet description()}

frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte

@@ -15,7 +15,7 @@
 	import type { Snippet } from 'svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { saveKafkaTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
+	import { handleConfigChange, type Trigger } from '../utils'
 
 	interface Props {
 		useDrawer?: boolean
@@ -24,8 +24,7 @@
 		hideTooltips?: boolean
 		isEditor?: boolean
 		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
+		trigger?: Trigger
 		customLabel?: Snippet
 		isDeployed?: boolean
 		cloudDisabled?: boolean
@@ -43,8 +42,7 @@
 		hideTooltips = false,
 		isEditor = false,
 		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
+		trigger = undefined,
 		customLabel,
 		isDeployed = false,
 		cloudDisabled = false,
@@ -281,8 +279,7 @@
 {#snippet actionsButtons(size: 'xs' | 'sm' = 'sm')}
 	{#if !drawerLoading}
 		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
+			{trigger}
 			permissions={drawerLoading || !can_write ? 'none' : 'create'}
 			{enabled}
 			{allowDraft}

frontend/src/lib/components/triggers/kafka/KafkaTriggersPanel.svelte

@@ -45,8 +45,7 @@
 			hideTarget
 			hideTooltips={!isDeployed || cloudDisabled}
 			allowDraft={true}
-			hasDraft={!!selectedTrigger.draftConfig}
-			isDraftOnly={selectedTrigger.isDraft}
+			trigger={selectedTrigger}
 			{customLabel}
 			{isDeployed}
 			{cloudDisabled}