feat(front): Confirmation modal when deleting a resource or a variable (#648)

* feat(front): add confirmation modal when deleting a resource or a variable

* feat(front): add shift bypass

* feat(front): clear callbacks

* feat(front): Add alert to inform user can confirmation modals can be bypassed

frontend/src/lib/components/Dropdown.svelte

@@ -55,10 +55,10 @@
 			{#each dropdownItems as item, i}
 				{#if item.action}
 					<button
-						on:click={() => {
+						on:click={(event) => {
 							if (!item.disabled) {
 								open = false
-								item.action && item.action()
+								item.action && item.action(event)
 								dispatch('click', { item: item?.eventName })
 							}
 						}}

frontend/src/lib/components/flows/content/RemoveStepConfirmationModal.svelte

@@ -26,7 +26,7 @@
 		<Alert type="info" title="Bypass confirmation">
 			<div>
 				You can press
-				<Badge color="dark-gray">SHIFT</Badge>
+				<kbd color="dark-gray">SHIFT</kbd>
 				while removing a step to bypass confirmation.
 			</div>
 		</Alert>

frontend/src/lib/utils.ts

@@ -123,7 +123,7 @@ export interface DropdownItem {
 	// If a DropdownItem has no action and no href, it will be created as a text line
 	displayName: string
 	eventName?: string //the event to send when clicking this item
-	action?: (() => Promise<void>) | (() => void)
+	action?: ((event?: MouseEvent) => Promise<void>) | ((event?: MouseEvent) => void)
 	href?: string
 	separatorTop?: boolean
 	separatorBottom?: boolean

frontend/src/routes/resources.svelte

@@ -41,6 +41,9 @@
 	import { page } from '$app/stores'
 
 	import { onMount } from 'svelte'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import Badge from '$lib/components/common/badge/Badge.svelte'
 
 	type ResourceW = Resource & { canWrite: boolean }
 	type ResourceTypeW = ResourceType & { canWrite: boolean }
@@ -61,6 +64,8 @@
 
 	let shareModal: ShareModal
 	let appConnect: AppConnect
+	let deleteConfirmedCallback: (() => void) | undefined = undefined
+	$: open = Boolean(deleteConfirmedCallback)
 
 	async function loadResources(): Promise<void> {
 		resources = (await ResourceService.listResource({ workspace: $workspaceStore! })).map((x) => {
@@ -222,8 +227,14 @@
 											disabled: !canWrite,
 											icon: faTrash,
 											type: 'delete',
-											action: () => {
-												deleteResource(path, is_oauth)
+											action: (event) => {
+												if (event?.shiftKey) {
+													deleteResource(path, is_oauth)
+												} else {
+													deleteConfirmedCallback = () => {
+														deleteResource(path, is_oauth)
+													}
+												}
 											}
 										}
 									]}
@@ -348,5 +359,31 @@
 				Save
 			</button>
 		{/if}
-	</div></Modal
+	</div>
+</Modal>
+
+<ConfirmationModal
+	{open}
+	title="Remove resource"
+	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 this resource?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing a resource to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

frontend/src/routes/variables.svelte

@@ -21,6 +21,9 @@
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
 	import { faPlus, faCircle } from '@fortawesome/free-solid-svg-icons'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import Badge from '$lib/components/common/badge/Badge.svelte'
 
 	type ListableVariableW = ListableVariable & { canWrite: boolean }
 
@@ -30,6 +33,9 @@
 	let shareModal: ShareModal
 	let variableEditor: VariableEditor
 
+	let deleteConfirmedCallback: (() => void) | undefined = undefined
+	$: open = Boolean(deleteConfirmedCallback)
+
 	// If relative, the dropdown is positioned relative to its button
 	async function loadVariables(): Promise<void> {
 		variables = (await VariableService.listVariable({ workspace: $workspaceStore! })).map((x) => {
@@ -119,7 +125,16 @@
 									},
 									{
 										displayName: 'Delete',
-										action: () => deleteVariable(path, account),
+
+										action: (event) => {
+											if (event?.shiftKey) {
+												deleteVariable(path, account)
+											} else {
+												deleteConfirmedCallback = () => {
+													deleteVariable(path, account)
+												}
+											}
+										},
 										disabled: !canWrite
 									},
 									{
@@ -182,5 +197,28 @@
 	/>
 </CenteredPage>
 
-<style>
-</style>
+<ConfirmationModal
+	{open}
+	title="Remove variable"
+	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 this variable?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing a variable to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>