From 8fcb9c4292b64e80464cfe1bf4fcdf638e0e7ebd Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 11 Dec 2025 13:06:21 +0000
Subject: [PATCH] add hover edit button for resource pickers (#7340)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add hover edit button for disabled resource pickers

When a resource picker is disabled but has a value selected, show an edit
button on hover that allows editing the selected resource. This provides
a way to modify the resource even when the picker itself is disabled.

Changes:
- Added hover state tracking to ResourcePicker component
- Edit button (Pen icon) appears on hover when picker is disabled and has a value
- Button opens ResourceEditorDrawer for the selected resource
- Added ARIA role="group" for accessibility compliance

Fixes #7339

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: windmill-internal-app[bot] <windmill-internal-app[bot]@users.noreply.github.com>

* Update ResourcePicker.svelte

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: windmill-internal-app[bot] <windmill-internal-app[bot]@users.noreply.github.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 .../src/lib/components/ResourcePicker.svelte  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 57a22b4c0e..94517edd29 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -153,6 +153,7 @@
 	let appConnect: AppConnect | undefined = $state()
 	let resourceEditor: ResourceEditorDrawer | undefined = $state()
 	let dbManagerDrawer: DbManagerDrawer | undefined = $state()
+	let hovering = $state(false)
 </script>
 
 <AppConnect
@@ -177,7 +178,12 @@
 />
 <!-- {JSON.stringify({ value, collection })} -->
 <div class="flex flex-col w-full items-start {className}">
-	<div class="flex flex-row w-full items-center">
+	<div
+		class="flex flex-row w-full items-center relative"
+		role="group"
+		onmouseenter={() => (hovering = true)}
+		onmouseleave={() => (hovering = false)}
+	>
 		<Select
 			{disabled}
 			{disablePortal}
@@ -267,6 +273,19 @@
 				</div>
 			{/snippet}
 		</Select>
+		{#if value && hovering}
+			<div class="absolute right-2 z-20">
+				<Button
+					variant="subtle"
+					size="xs2"
+					wrapperClasses="pl-1"
+					btnClasses="hover:bg-surface-tertiary"
+					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					startIcon={{ icon: Pen }}
+					iconOnly
+				/>
+			</div>
+		{/if}
 	</div>
 	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'resource', path: value }, { resource_type: resourceType })}
 		<ExploreAssetButton