From af940a46fc470f25d59fb3d034671b24bf669be2 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 19 Jun 2024 10:19:15 +0200
Subject: [PATCH] fix(frontend): fix full screen mode of the EvalInputEditor
 (#3928)

* update datafusion

* fix(frontend): fix full screen mode of the EvalInputEditor

* fix(frontend): improve code

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
---
 .../inputEditor/EvalV2InputEditor.svelte              |  8 +++++++-
 .../lib/components/common/drawer/Disposable.svelte    |  6 ++++--
 .../src/lib/components/common/drawer/Drawer.svelte    | 11 ++++++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
index f213ecfd81..2bbb71a2e1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
@@ -10,6 +10,7 @@
 	import { Drawer } from '$lib/components/common'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import Toggle from '$lib/components/Toggle.svelte'
+	import { zIndexes } from '$lib/zIndexes'
 
 	export let componentInput: EvalV2AppInput | undefined
 	export let id: string
@@ -56,7 +57,12 @@
 
 {#if componentInput?.type === 'evalv2'}
 	{#if fullscreen}
-		<Drawer placement="bottom" on:close={() => (fullscreen = false)} open>
+		<Drawer
+			placement="bottom"
+			on:close={() => (fullscreen = false)}
+			open
+			offset={zIndexes.monacoEditor}
+		>
 			<Splitpanes horizontal class="h-full">
 				<Pane size={50}>
 					<SimpleEditor
diff --git a/frontend/src/lib/components/common/drawer/Disposable.svelte b/frontend/src/lib/components/common/drawer/Disposable.svelte
index b524e89c38..8b21b92e4d 100644
--- a/frontend/src/lib/components/common/drawer/Disposable.svelte
+++ b/frontend/src/lib/components/common/drawer/Disposable.svelte
@@ -14,7 +14,9 @@
 		openedDrawers.push(id)
 	}
 
-	let offset = 0
+	export let initialOffset = 0
+
+	let offset = initialOffset
 
 	export function toggleDrawer() {
 		if (!open) {
@@ -37,7 +39,7 @@
 
 	export function closeDrawer() {
 		open = false
-		offset = 0
+		offset = initialOffset
 		// remove the last opened drawer
 		openedDrawers = openedDrawers.filter((drawer) => drawer !== id)
 	}
diff --git a/frontend/src/lib/components/common/drawer/Drawer.svelte b/frontend/src/lib/components/common/drawer/Drawer.svelte
index 33dc40a13f..88d3359274 100644
--- a/frontend/src/lib/components/common/drawer/Drawer.svelte
+++ b/frontend/src/lib/components/common/drawer/Drawer.svelte
@@ -10,6 +10,7 @@
 	export let size = '600px'
 	export let alwaysOpen = false
 	export let shouldUsePortal: boolean = true
+	export let offset: number = 0
 
 	let disposable: Disposable | undefined = undefined
 
@@ -62,7 +63,15 @@
 </script>
 
 <ConditionalPortal condition={shouldUsePortal}>
-	<Disposable let:handleClickAway let:zIndex bind:open bind:this={disposable} on:open on:close>
+	<Disposable
+		initialOffset={offset}
+		let:handleClickAway
+		let:zIndex
+		bind:open
+		bind:this={disposable}
+		on:open
+		on:close
+	>
 		<aside
 			class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
 			class:open