add hover edit button for resource pickers (#7340)

* 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>
This commit is contained in:
claude[bot]
2025-12-11 13:06:21 +00:00
committed by GitHub
parent 355ef401a4
commit 8fcb9c4292
@@ -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