From e6985415ef4cd98c1e8a3ddad2356416de44fb80 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 30 Sep 2022 15:04:57 +0200
Subject: [PATCH] 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   |  4 +-
 .../RemoveStepConfirmationModal.svelte        |  2 +-
 frontend/src/lib/utils.ts                     |  2 +-
 frontend/src/routes/resources.svelte          | 43 ++++++++++++++++--
 frontend/src/routes/variables.svelte          | 44 +++++++++++++++++--
 5 files changed, 85 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index f9aa585695..d684abcdb7 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/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 })
 							}
 						}}
diff --git a/frontend/src/lib/components/flows/content/RemoveStepConfirmationModal.svelte b/frontend/src/lib/components/flows/content/RemoveStepConfirmationModal.svelte
index cc411f64ab..7934643479 100644
--- a/frontend/src/lib/components/flows/content/RemoveStepConfirmationModal.svelte
+++ b/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>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index c98e976b31..c23d24aa43 100644
--- a/frontend/src/lib/utils.ts
+++ b/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
diff --git a/frontend/src/routes/resources.svelte b/frontend/src/routes/resources.svelte
index 220fc329cf..76850d7c37 100644
--- a/frontend/src/routes/resources.svelte
+++ b/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>
diff --git a/frontend/src/routes/variables.svelte b/frontend/src/routes/variables.svelte
index 64570c38c2..86a1ef986e 100644
--- a/frontend/src/routes/variables.svelte
+++ b/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>