fix(frontend): add confirmation modal to delete script/flow/app

frontend/src/lib/components/common/table/AppRow.svelte

@@ -24,6 +24,7 @@
 	export let starred: boolean
 	export let shareModal: ShareModal
 	export let moveDrawer: MoveDrawer
+	export let deleteConfirmedCallback: (() => void) | undefined
 
 	let { summary, path, extra_perms, canWrite, workspace_id } = app
 
@@ -120,9 +121,16 @@
 				{
 					displayName: 'Delete',
 					icon: faTrashAlt,
-					action: async () => {
-						await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
-						dispatch('change')
+					action: async (event) => {
+						if (event?.shiftKey) {
+							await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+							dispatch('change')
+						} else {
+							deleteConfirmedCallback = async () => {
+								await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+								dispatch('change')
+							}
+						}
 					},
 					type: 'delete',
 					disabled: !canWrite

frontend/src/lib/components/common/table/FlowRow.svelte

@@ -31,6 +31,7 @@
 	export let starred: boolean
 	export let shareModal: ShareModal
 	export let moveDrawer: MoveDrawer
+	export let deleteConfirmedCallback: (() => void) | undefined
 
 	let { summary, path, extra_perms, canWrite, workspace_id, archived } = flow
 
@@ -187,8 +188,14 @@
 				{
 					displayName: 'Delete',
 					icon: faTrashAlt,
-					action: () => {
-						path ? deleteFlow(path) : null
+					action: (event) => {
+						if (event?.shiftKey) {
+							deleteFlow(path)
+						} else {
+							deleteConfirmedCallback = () => {
+								deleteFlow(path)
+							}
+						}
 					},
 					type: 'delete',
 					disabled: !canWrite

frontend/src/lib/components/common/table/ScriptRow.svelte

@@ -18,7 +18,8 @@
 		faFileExport,
 		faList,
 		faPlay,
-		faShare
+		faShare,
+		faTrashAlt
 	} from '@fortawesome/free-solid-svg-icons'
 	import { MoreVertical } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
@@ -32,6 +33,7 @@
 	export let starred: boolean
 	export let shareModal: ShareModal
 	export let moveDrawer: MoveDrawer
+	export let deleteConfirmedCallback: (() => void) | undefined
 
 	let {
 		summary,
@@ -212,9 +214,15 @@
 					: [
 							{
 								displayName: 'Delete',
-								icon: faArchive,
-								action: () => {
-									path ? deleteScript(path) : null
+								icon: faTrashAlt,
+								action: (event) => {
+									if (event?.shiftKey) {
+										deleteScript(path)
+									} else {
+										deleteConfirmedCallback = () => {
+											deleteScript(path)
+										}
+									}
 								},
 								type: dlt,
 								disabled: !canWrite

frontend/src/lib/components/home/ItemsList.svelte

@@ -2,7 +2,7 @@
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { AppService, FlowService, ListableApp, Script, ScriptService, type Flow } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
+	import { Alert, Badge, Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
 	import { canWrite } from '$lib/utils'
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import type uFuzzy from '@leeoniya/ufuzzy'
@@ -21,6 +21,7 @@
 	import { Icon } from 'svelte-awesome'
 	import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons'
 	import MoveDrawer from '../MoveDrawer.svelte'
+	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
 
 	type TableItem<T, U extends 'script' | 'flow' | 'app'> = T & {
 		canWrite: boolean
@@ -49,6 +50,8 @@
 
 	let nbDisplayed = 30
 
+	export let deleteConfirmedCallback: (() => void) | undefined = undefined
+
 	async function loadScripts(): Promise<void> {
 		const loadedScripts = await ScriptService.listScripts({
 			workspace: $workspaceStore!,
@@ -320,6 +323,7 @@
 				{#each (items ?? []).slice(0, nbDisplayed) as item, i (item.type + '/' + item.path + (item.summary ?? ''))}
 					{#if item.type == 'script'}
 						<ScriptRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadScripts}
@@ -329,6 +333,7 @@
 						/>
 					{:else if item.type == 'flow'}
 						<FlowRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadFlows}
@@ -338,6 +343,7 @@
 						/>
 					{:else if item.type == 'app'}
 						<AppRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadApps}
@@ -359,3 +365,29 @@
 		{/if}
 	</div>
 </CenteredPage>
+
+<ConfirmationModal
+	open={Boolean(deleteConfirmedCallback)}
+	title="Remove"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove it?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

frontend/src/routes/(root)/(logged)/resources/+page.svelte

@@ -74,8 +74,6 @@
 		types: true
 	}
 
-	$: open = Boolean(deleteConfirmedCallback)
-
 	$: owners = Array.from(
 		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
 	).sort()
@@ -647,7 +645,7 @@
 />
 
 <ConfirmationModal
-	{open}
+	open={Boolean(deleteConfirmedCallback)}
 	title="Remove resource"
 	confirmationText="Remove"
 	on:canceled={() => {