From bdce1b75cb9a9bbc3fe922f937165b32f09b79a6 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 12 Feb 2025 11:51:19 +0000
Subject: [PATCH] replace popup with melt popover in RunForm

---
 frontend/src/lib/components/RunForm.svelte    | 28 +++++++++----------
 .../components/RunFormAdvancedPopup.svelte    |  9 ++----
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 22a31ff530..9be671846d 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -12,7 +12,7 @@
 	import SharedBadge from './SharedBadge.svelte'
 
 	import TimeAgo from './TimeAgo.svelte'
-	import Popup from './common/popup/Popup.svelte'
+	import Popover from './meltComponents/Popover.svelte'
 	import { autoPlacement } from '@floating-ui/core'
 	import { Calendar, CornerDownLeft } from 'lucide-svelte'
 	import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte'
@@ -58,7 +58,6 @@
 	export let jsonView = false
 
 	let reloadArgs = 0
-	let blockPopupOpen = false
 	let jsonEditor: JsonInputs | undefined = undefined
 	let schemaHeight = 0
 
@@ -206,7 +205,7 @@
 					{scheduledForStr ? 'Schedule to run later' : buttonText}
 				</Button>
 				<div>
-					<Popup
+					<Popover
 						floatingConfig={{
 							middleware: [
 								autoPlacement({
@@ -221,22 +220,23 @@
 								})
 							]
 						}}
-						let:close
-						blockOpen={blockPopupOpen}
+						closeButton
+						usePointerDownOutside
 					>
-						<svelte:fragment slot="button">
+						<svelte:fragment slot="trigger">
 							<Button nonCaptureEvent startIcon={{ icon: Calendar }} size="xs" color="light">
 								Advanced
 							</Button>
 						</svelte:fragment>
-						<RunFormAdvancedPopup
-							bind:scheduledForStr
-							bind:invisible_to_owner
-							bind:overrideTag
-							bind:runnable
-							on:close={() => close(null)}
-						/>
-					</Popup>
+						<svelte:fragment slot="content">
+							<RunFormAdvancedPopup
+								bind:scheduledForStr
+								bind:invisible_to_owner
+								bind:overrideTag
+								bind:runnable
+							/>
+						</svelte:fragment>
+					</Popover>
 				</div>
 			</div>
 			{#if overrideTag}
diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
index da7508a114..f0ba3d1eb9 100644
--- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte
+++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER } from '$lib/consts'
 	import Label from './Label.svelte'
-	import CloseButton from './common/CloseButton.svelte'
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 	import { userStore, workerTags, workspaceStore } from '$lib/stores'
@@ -36,15 +35,11 @@
 	}
 </script>
 
-<div class="flex flex-col gap-4 p-2">
+<div class="flex flex-col gap-4 p-4">
 	<div class="flex flex-col gap-2">
 		{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
 			<div class="">
-				<Label label="Schedule to run later">
-					<svelte:fragment slot="action">
-						<CloseButton on:close noBg />
-					</svelte:fragment>
-				</Label>
+				<Label label="Schedule to run later" />
 
 				<div class="flex flex-row items-center my-1">
 					<div>