From 50cb4df1303c93d007b289ca45b71d0ffe587928 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 28 Oct 2024 10:42:01 +0100
Subject: [PATCH] Add full path to popover

---
 .../propertyPicker/ObjectViewer.svelte        | 48 ++++++++++++-------
 .../propertyPicker/PropPicker.svelte          | 45 +++++++----------
 .../propertyPicker/PropPickerResult.svelte    |  9 +---
 3 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index afb93eb1a4..612c3501d6 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -6,7 +6,7 @@
 	import { NEVER_TESTED_THIS_FAR } from '../flows/models'
 	import Portal from '$lib/components/Portal.svelte'
 	import { Button } from '$lib/components/common'
-
+	import Popover from '$lib/components/Popover.svelte'
 	import { Download, PanelRightOpen } from 'lucide-svelte'
 	import S3FilePicker from '../S3FilePicker.svelte'
 	import { workspaceStore } from '$lib/stores'
@@ -20,6 +20,7 @@
 	export let topBrackets = false
 	export let allowCopy = true
 	export let collapseLevel: number | undefined = undefined
+	export let prefix = ''
 
 	let s3FileViewer: S3FilePicker
 
@@ -48,17 +49,29 @@
 
 	const dispatch = createEventDispatcher()
 
+	function computeFullKey(key: string, rawKey: boolean) {
+		if (rawKey) {
+			return `${prefix}('${key}')`
+		}
+		const keyToSelect = computeKey(key, isArray, currentPath)
+		const separator = !prefix || keyToSelect.startsWith('[') ? '' : '.'
+		return prefix + separator + keyToSelect
+	}
+
 	function selectProp(key: string, value: any | undefined = undefined) {
+		const fullKey = computeFullKey(key, rawKey)
 		if (pureViewer && allowCopy) {
-			const valueToCopy = value !== undefined ? value : computeKey(key, isArray, currentPath)
+			const valueToCopy = value !== undefined ? value : fullKey
 			copyToClipboard(valueToCopy)
 		}
-		dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath))
+		dispatch('select', fullKey)
 	}
 
 	$: keyLimit = isArray ? 1 : 100
 
 	$: fullyCollapsed = keys.length > 1 && collapsed
+
+	$: console.log('dbg current path : ', currentPath)
 </script>
 
 <Portal name="object-viewer">
@@ -84,24 +97,27 @@
 			<ul class={`w-full pl-2 ${level === 0 ? 'border-none' : 'border-l border-dotted'}`}>
 				{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
 					<li>
-						<Button
-							on:click={() => selectProp(key)}
-							size="xs2"
-							color="dark"
-							variant="contained"
-							wrapperClasses="inline-flex p-0 whitespace-nowrap w-fit h-4"
-							btnClasses="font-normal rounded-[0.275rem]"
-						>
-							<span class={pureViewer ? 'cursor-auto' : ''}>
-								{!isArray ? key : index}
-							</span>
-						</Button>
+						<Popover>
+							<svelte:fragment slot="text">{computeFullKey(key, rawKey)}</svelte:fragment>
+							<Button
+								on:click={() => selectProp(key)}
+								size="xs2"
+								color="dark"
+								variant="contained"
+								wrapperClasses="inline-flex p-0 whitespace-nowrap w-fit h-4"
+								btnClasses="font-normal rounded-[0.275rem]"
+							>
+								<span class={pureViewer ? 'cursor-auto' : ''}>
+									{!isArray ? key : index}
+								</span>
+							</Button>
+						</Popover>
 						:
 						{#if getTypeAsString(json[key]) === 'object'}
 							<svelte:self
 								json={json[key]}
 								level={level + 1}
-								currentPath={computeKey(key, isArray, currentPath)}
+								currentPath={computeFullKey(key, isArray)}
 								{pureViewer}
 								{allowCopy}
 								on:select
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index 3038a99a7a..ec49e8c245 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -4,7 +4,6 @@
 	import { getContext } from 'svelte'
 	import { Badge, Button } from '../common'
 	import type { PropPickerWrapperContext } from '../flows/propPicker/PropPickerWrapper.svelte'
-	import { createEventDispatcher } from 'svelte'
 
 	import ObjectViewer from './ObjectViewer.svelte'
 	import { keepByKey } from './utils'
@@ -22,7 +21,6 @@
 	let displayVariable = false
 	let displayResources = false
 	let allResultsCollapsed = true
-	const dispatch = createEventDispatcher()
 
 	const EMPTY_STRING = ''
 	let search = ''
@@ -86,12 +84,8 @@
 				allowCopy={false}
 				pureViewer={!$propPickerConfig}
 				json={flowInputsFiltered}
-				on:select={(e) => {
-					dispatch(
-						'select',
-						e.detail?.startsWith('[') ? `flow_input${e.detail}` : `flow_input.${e.detail}`
-					)
-				}}
+				prefix="flow_input"
+				on:select
 			/>
 		</div>
 		{#if error}
@@ -120,9 +114,8 @@
 							pureViewer={!$propPickerConfig}
 							collapsed={false}
 							json={suggestedPropsFiltered}
-							on:select={(e) => {
-								dispatch('select', `results.${e.detail}`)
-							}}
+							prefix="results"
+							on:select
 						/>
 					</div>
 				{/if}
@@ -133,9 +126,8 @@
 						pureViewer={!$propPickerConfig}
 						collapsed={true}
 						json={resultByIdFiltered}
-						on:select={(e) => {
-							dispatch('select', `results.${e.detail}`)
-						}}
+						prefix="results"
+						on:select
 					/>
 				</div>
 			{/if}
@@ -149,9 +141,8 @@
 						json={Object.fromEntries(
 							Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
 						)}
-						on:select={(e) => {
-							dispatch('select', `results.${e.detail}`)
-						}}
+						prefix="results"
+						on:select
 					/>
 				</div>
 			{/if}
@@ -166,9 +157,7 @@
 							resumes: 'All resume payloads from all approvers',
 							approvers: 'The list of approvers'
 						}}
-						on:select={(e) => {
-							dispatch('select', `${e.detail}`)
-						}}
+						on:select
 					/>
 				</div>
 			{/if}
@@ -181,9 +170,8 @@
 							pureViewer={!$propPickerConfig}
 							collapsed={false}
 							json={suggestedPropsFiltered}
-							on:select={(e) => {
-								dispatch('select', `results.${e.detail}`)
-							}}
+							prefix="results"
+							on:select
 						/>
 					</div>
 				{/if}
@@ -207,9 +195,8 @@
 						pureViewer={!$propPickerConfig}
 						bind:collapsed={allResultsCollapsed}
 						json={resultByIdFiltered}
-						on:select={(e) => {
-							dispatch('select', `results.${e.detail}`)
-						}}
+						prefix="results"
+						on:select
 					/>
 				</div>
 			{/if}
@@ -236,7 +223,8 @@
 						pureViewer={!$propPickerConfig}
 						rawKey={true}
 						json={variables}
-						on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
+						prefix="variable"
+						on:select
 					/>
 				{:else}
 					<Button
@@ -274,7 +262,8 @@
 						pureViewer={!$propPickerConfig}
 						rawKey={true}
 						json={resources}
-						on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
+						prefix="resource"
+						on:select
 					/>
 				{:else}
 					<Button
diff --git a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
index adf9d76aec..07fd605f08 100644
--- a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
 	import ObjectViewer from './ObjectViewer.svelte'
 
 	export let result: any
 	export let extraResults: any = undefined
 	export let flow_input: any = undefined
-
-	const dispatch = createEventDispatcher()
 </script>
 
 <div class="w-full px-2">
@@ -21,11 +18,7 @@
 	{#if flow_input}
 		<span class="font-bold text-sm">Flow Input</span>
 		<div class="overflow-y-auto w-full">
-			<ObjectViewer
-				allowCopy={false}
-				json={flow_input}
-				on:select={(e) => dispatch('select', `flow_input.${e.detail}`)}
-			/>
+			<ObjectViewer allowCopy={false} json={flow_input} prefix="flow_input" on:select />
 		</div>
 	{/if}
 </div>