feat(frontend): add confirmation modal to the app button (#3199)

* feat(frontend): add confirmation modal to the app button

* feat(frontend): add missing await

* feat(frontend): select the component immediatly

frontend/src/lib/components/ScriptBuilder.svelte

@@ -889,7 +889,7 @@
 				</div>
 
 				<div class="gap-4 flex">
-					<div class="flex justify-start w-full">
+					<div class="flex justify-start w-full border rounded-md overflow-hidden">
 						<div>
 							<button
 								on:click={async () => {
@@ -898,7 +898,7 @@
 							>
 								<Badge
 									color="gray"
-									class="center-center !bg-surface-selected !text-tertiary !h-[28px]  !w-[70px] rounded-r-none"
+									class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
 								>
 									<Pen size={12} class="mr-2" /> Path
 								</Badge>
@@ -909,7 +909,7 @@
 							readonly
 							value={script.path}
 							size={script.path?.length || 50}
-							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
+							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
 							on:focus={({ currentTarget }) => {
 								currentTarget.select()
 							}}

frontend/src/lib/components/ScriptEditor.svelte

@@ -230,7 +230,7 @@
 		/>
 	</div>
 </Modal>
-<div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
+<div class="border-b shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
 			scriptPath={edit ? path : undefined}
@@ -279,7 +279,7 @@
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane size={60} minSize={10} class="!overflow-visible">
-			<div class="pl-2 h-full !overflow-visible">
+			<div class="pl-2 h-full !overflow-visible bg-gray-50 dark:bg-[#2F343F]">
 				{#key lang}
 					<Editor
 						folding

frontend/src/lib/components/apps/components/buttons/AppButton.svelte

@@ -19,6 +19,8 @@
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 	import { initCss } from '../../utils'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import Portal from 'svelte-portal'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -81,6 +83,8 @@
 	$: resolvedConfig.beforeIcon && handleBeforeIcon()
 	$: resolvedConfig.afterIcon && handleAfterIcon()
 
+	let confirmedCallback: (() => void) | undefined = undefined
+
 	async function handleBeforeIcon() {
 		if (resolvedConfig.beforeIcon) {
 			beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon)
@@ -109,21 +113,29 @@
 		event?.preventDefault()
 
 		$selectedComponent = [id]
-		const inputOutput = { result: outputs.result.peak(), loading: true }
-		if (rowContext && rowInputs) {
-			rowInputs.set(id, inputOutput)
-		}
-		if (iterContext && listInputs) {
-			listInputs.set(id, inputOutput)
-		}
-		if (preclickAction) {
-			await preclickAction()
+		const action = async () => {
+			const inputOutput = { result: outputs.result.peak(), loading: true }
+			if (rowContext && rowInputs) {
+				rowInputs.set(id, inputOutput)
+			}
+			if (iterContext && listInputs) {
+				listInputs.set(id, inputOutput)
+			}
+			if (preclickAction) {
+				await preclickAction()
+			}
+
+			if (!runnableComponent) {
+				runnableWrapper?.handleSideEffect(true)
+			} else {
+				await runnableComponent?.runComponent()
+			}
 		}
 
-		if (!runnableComponent) {
-			runnableWrapper?.handleSideEffect(true)
+		if (resolvedConfig?.confirmationModal?.selected === 'confirmationModal') {
+			confirmedCallback = action
 		} else {
-			await runnableComponent?.runComponent()
+			await action()
 		}
 	}
 	let loading = false
@@ -225,3 +237,29 @@
 		{/key}
 	</AlignWrapper>
 </RunnableWrapper>
+
+{#if resolvedConfig?.confirmationModal?.selected === 'confirmationModal'}
+	<Portal target="#app-editor-top-level-drawer">
+		<ConfirmationModal
+			open={Boolean(confirmedCallback)}
+			title={resolvedConfig?.confirmationModal?.configuration?.confirmationModal?.title ?? ''}
+			confirmationText={resolvedConfig?.confirmationModal?.configuration?.confirmationModal
+				?.confirmationText ?? ''}
+			on:canceled={() => {
+				confirmedCallback = undefined
+			}}
+			on:confirmed={() => {
+				if (confirmedCallback) {
+					confirmedCallback()
+				}
+				confirmedCallback = undefined
+			}}
+		>
+			<div class="flex flex-col w-full space-y-4">
+				<span>
+					{resolvedConfig?.confirmationModal?.configuration?.confirmationModal?.description ?? ''}
+				</span>
+			</div>
+		</ConfirmationModal>
+	</Portal>
+{/if}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -1013,8 +1013,42 @@ export const components = {
 					value: false,
 					fieldType: 'boolean'
 				},
+
 				onSuccess: onSuccessClick,
-				onError: onErrorClick
+				onError: onErrorClick,
+				confirmationModal: {
+					type: 'oneOf',
+					selected: 'none',
+					tooltip: 'If defined, the user will be asked to confirm the action in a modal.',
+					labels: {
+						none: 'Do nothing',
+						confirmationModal: 'Show confirmation modal'
+					},
+					configuration: {
+						none: {},
+						confirmationModal: {
+							title: {
+								fieldType: 'text',
+								type: 'static',
+								value: 'Title',
+								placeholder: 'Confirmation modal title'
+							},
+							description: {
+								fieldType: 'text',
+								type: 'static',
+								value: 'Are you sure?',
+								placeholder: 'Are you sure?'
+							},
+							confirmationText: {
+								fieldType: 'text',
+								type: 'static',
+								value: 'Confirm',
+								placeholder: 'Confirm',
+								tooltip: 'The text of the button that confirms the action.'
+							}
+						}
+					}
+				}
 			}
 		}
 	},