windmill-components 1.60.3 → 1.70.0

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -40,7 +40,7 @@ const dispatch = createEventDispatcher();
 			{#if retry}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<Repeat size={14} />
@@ -51,7 +51,7 @@ const dispatch = createEventDispatcher();
 			{#if earlyStop}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<Square size={14} />
@@ -62,7 +62,7 @@ const dispatch = createEventDispatcher();
 			{#if suspend}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<PhoneIncoming size={14} />
@@ -73,7 +73,7 @@ const dispatch = createEventDispatcher();
 			{#if sleep}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<Bed size={14} />
@@ -100,7 +100,7 @@ const dispatch = createEventDispatcher();
 						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center 
 						border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
 						hover:border-red-700 {selected ? '' : '!hidden'}"
-						on:click={(event) => dispatch('delete', event)}
+						on:click|preventDefault|stopPropagation={(event) => dispatch('delete', event)}
 					>
 						<X size={12} strokeWidth={2} />
 					</button>

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -9,12 +9,10 @@ import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowInputsItem from './FlowInputsItem.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
 import { slide } from 'svelte/transition';
-import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
-import { Icon } from 'svelte-awesome';
-import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
 import FlowConstantsItem from './FlowConstantsItem.svelte';
 export let root = false;
 export let modules;
+export let parentType = undefined;
 let indexToRemove = undefined;
 const { select, selectedId } = getContext('FlowEditorContext');
 async function insertNewModuleAtIndex(index, kind) {
@@ -45,17 +43,21 @@ async function insertNewModuleAtIndex(index, kind) {
         else if (kind == 'approval') {
             flowModule.summary = 'Approval';
         }
+        else if (kind == 'end') {
+            flowModule.summary = 'Terminate flow';
+            flowModule.stop_after_if = { skip_if_stopped: false, expr: 'true' };
+        }
         select(flowModule.id);
     });
 }
 function removeAtIndex(index) {
-    select('settings-graph');
     if (!modules)
         return;
     const [removedModule] = modules.splice(index, 1);
     modules = modules;
     const leaves = findLeaves(removedModule);
     leaves.forEach((leafId) => deleteFlowStateById(leafId));
+    select('settings-graph');
 }
 function findLeaves(flowModule) {
     const id = flowModule.id;
@@ -122,10 +124,15 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 				</div>
 			{/each}
 		{/if}
-		<InsertModuleButton
-			trigger={modules?.length == 0}
-			on:new={(e) => insertNewModuleAtIndex(modules?.length ?? 0, e.detail)}
-		/>
+		{#if !modules || modules[modules?.length - 1]?.summary != 'Terminate flow'}
+			<InsertModuleButton
+				stop={!root && parentType == 'branchone'}
+				trigger={root && modules?.length == 0}
+				on:new={(e) => insertNewModuleAtIndex(modules?.length ?? 0, e.detail)}
+			/>
+		{:else}
+			<div class="my-2" />
+		{/if}
 	</ul>
 	{#if root}
 		<div class="sticky bottom-0 bg-gray-50 flex-none px-4 py-1 pb-2 border-t">

package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         root?: boolean | undefined;
         modules: FlowModule[] | undefined;
+        parentType?: 'flow' | 'forloop' | 'branchall' | 'branchone' | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/map/InsertModuleButton.svelte

@@ -2,9 +2,10 @@
 import { faCode, faCodeBranch, faPlus, faBarsStaggered, faBolt, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { Repeat } from 'lucide-svelte';
+import { Repeat, Square } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let trigger = false;
+export let stop = false;
 </script>
 
 <Menu noMinW placement="bottom-start" let:close>
@@ -25,7 +26,7 @@ export let trigger = false;
 			role="menuitem"
 			tabindex="-1"
 		>
-			<Icon data={faCode} scale={0.8} class="mr-1" />
+			<Icon data={faCode} scale={0.8} class="mr-2" />
 			Action (Script)
 		</button>
 		{#if trigger}
@@ -38,12 +39,12 @@ export let trigger = false;
 				role="menuitem"
 				tabindex="-1"
 			>
-				<Icon data={faBolt} scale={0.8} class="mr-1" />
+				<Icon data={faBolt} scale={0.8} class="mr-2" />
 				Trigger (Script)
 			</button>
 		{/if}
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left gap-1 p-2 hover:bg-gray-100"
 			on:click={() => {
 				close()
 				dispatch('new', 'approval')
@@ -51,18 +52,18 @@ export let trigger = false;
 			role="menuitem"
 			tabindex="-1"
 		>
-			<Icon data={faCheck} scale={0.8} class="mr-1" />
+			<Icon data={faCheck} class="mr-1.5" scale={0.8} />
 			Approval (Script)
 		</button>
 		<button
-			class="w-full inline-flex gap-1 text-left p-2 hover:bg-gray-100"
+			class="w-full inline-flex text-left p-2 hover:bg-gray-100"
 			on:click={() => {
 				close()
 				dispatch('new', 'forloop')
 			}}
 			role="menuitem"
 		>
-			<span>
+			<span class="mr-2">
 				<Repeat size={14} />
 			</span>
 
@@ -77,7 +78,7 @@ export let trigger = false;
 			}}
 			role="menuitem"
 		>
-			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			<Icon data={faCodeBranch} scale={0.8} class="mr-2" />
 			Branch to one
 		</button>
 
@@ -89,7 +90,7 @@ export let trigger = false;
 			}}
 			role="menuitem"
 		>
-			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			<Icon data={faCodeBranch} scale={0.8} class="mr-2" />
 			Branch to all
 		</button>
 
@@ -101,8 +102,21 @@ export let trigger = false;
 			}}
 			role="menuitem"
 		>
-			<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+			<Icon data={faBarsStaggered} scale={0.8} class="mr-2" />
 			Flow
 		</button>
+		{#if stop}
+			<button
+				class="w-full text-left p-2 hover:bg-gray-100 inline-flex gap-2.5"
+				on:click={() => {
+					close()
+					dispatch('new', 'end')
+				}}
+				role="menuitem"
+			>
+				<Square size={14} />
+				End Flow
+			</button>
+		{/if}
 	</div>
 </Menu>

package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         trigger?: boolean | undefined;
+        stop?: boolean | undefined;
     };
     events: {
         new: CustomEvent<any>;

package/components/flows/map/MapItem.svelte

@@ -8,7 +8,7 @@ import { faCodeBranch, faLongArrowDown } from '@fortawesome/free-solid-svg-icons
 import Icon from 'svelte-awesome';
 import IconedResourceType from '../../IconedResourceType.svelte';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
-import { Building, Repeat } from 'lucide-svelte';
+import { Building, Repeat, Square } from 'lucide-svelte';
 export let mod;
 export let index;
 const { select, selectedId } = getContext('FlowEditorContext');
@@ -97,6 +97,8 @@ function onDelete(event) {
 				<div slot="icon">
 					{#if mod.value.type === 'rawscript'}
 						<LanguageIcon lang={mod.value.language} width={16} height={16} />
+					{:else if mod.summary == 'Terminate flow'}
+						<Square size={16} />
 					{:else if mod.value.type === 'identity'}
 						<Icon data={faLongArrowDown} scale={1.1} />
 					{:else if mod.value.type === 'script'}

package/components/flows/utils.js

@@ -71,10 +71,10 @@ export async function loadSchemaFromModule(module) {
         let input_transforms = mod.input_transforms ?? module.input_transforms ?? {};
         if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(input_transforms).sort())) {
             input_transforms = keys.reduce((accu, key) => {
-                let nv = input_transforms[key] ?? (module.id == 'failure' && ['message', 'name'].includes(key)) ? { type: 'javascript', expr: `error.${key}` } : {
+                let nv = input_transforms[key] ?? ((module.id == 'failure' && ['message', 'name'].includes(key)) ? { type: 'javascript', expr: `error.${key}` } : {
                     type: 'static',
                     value: undefined
-                };
+                });
                 accu[key] = nv;
                 return accu;
             }, {});
@@ -128,7 +128,7 @@ export function codeToStaticTemplate(code) {
     if (lines.length == 1) {
         const line = lines[0].trim();
         if (line[0] == '`' && line.charAt(line.length - 1) == '`') {
-            return line.slice(1, line.length - 1);
+            return line.slice(1, line.length - 1).replaceAll('\\`', '`');
         }
     }
     return undefined;
@@ -142,30 +142,36 @@ export function emptyFlowModuleState() {
 }
 const aCharCode = 'a'.charCodeAt(0);
 export function numberToChars(n) {
+    if (n < 0) {
+        return "-" + numberToChars(-n);
+    }
     var b = [n], sp, out, i, div;
     sp = 0;
     while (sp < b.length) {
-        if (b[sp] > 25) {
-            div = Math.floor(b[sp] / 27);
+        if (b[sp] > (25)) {
+            div = Math.floor(b[sp] / (26));
             b[sp + 1] = div - 1;
-            b[sp] %= 27;
+            b[sp] %= (26);
         }
         sp += 1;
     }
     out = '';
     for (i = 0; i < b.length; i += 1) {
         let charCode = aCharCode + b[i];
-        out = (charCode == 26 ? '-' : String.fromCharCode(charCode)) + out;
+        out = String.fromCharCode(charCode) + out;
     }
     return out;
 }
 export function charsToNumber(n) {
-    let b = Math.pow(27, n.length - 1);
+    if (n.charAt(0) == '-') {
+        return charsToNumber(n.slice(1)) * -1;
+    }
+    let b = Math.pow(26, n.length - 1);
     let res = 0;
     for (let c of n) {
-        let charCode = c == '-' ? aCharCode + 26 : c.charCodeAt(0);
+        let charCode = (c == '-' || c == '_') ? aCharCode + 25 : c.charCodeAt(0);
         res += (charCode - aCharCode + 1) * b;
-        b = b / 27;
+        b = b / 26;
     }
     return res - 1;
 }

package/components/graph/FlowGraph.svelte

@@ -5,6 +5,7 @@ import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
 import { defaultIfEmptyString, truncateRev } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import { charsToNumber, numberToChars } from '../flows/utils';
+export let success = undefined;
 export let modules = [];
 export let failureModule = undefined;
 export let minHeight = 0;
@@ -72,11 +73,20 @@ function getConvertedFlowModule(module, parent = undefined, edgeLabel = undefine
         return flowModuleToLoop(module.value.modules, module, parent);
     }
     else if (type === 'branchone') {
-        const branches = [module.value.default, ...module.value.branches.map((b) => b.modules)];
-        return flowModuleToBranch(module, branches, ['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)], parent, insideLoop);
+        const branches = [
+            { summary: 'Default branch', modules: module.value.default },
+            ...module.value.branches.map((b, i) => ({
+                summary: defaultIfEmptyString(b.summary, 'Branch ' + (i + 1)),
+                modules: b.modules
+            }))
+        ];
+        return flowModuleToBranch(module, branches, ['Default', ...module.value.branches.map((x) => `${truncateRev(x.expr, 20)}`)], parent, insideLoop);
     }
     else if (type === 'branchall') {
-        const branches = module.value.branches.map((b) => b.modules);
+        const branches = module.value.branches.map((b, i) => ({
+            summary: defaultIfEmptyString(b.summary, `Branch ${i + 1}`),
+            modules: b.modules
+        }));
         return flowModuleToBranch(module, branches, [], parent, insideLoop);
     }
     else if (type === 'flow') {
@@ -119,6 +129,16 @@ function getStateColor(state) {
             return '#fff';
     }
 }
+function getResultColor() {
+    switch (success) {
+        case true:
+            return getStateColor(FlowStatusModule.type.SUCCESS);
+        case false:
+            return getStateColor(FlowStatusModule.type.FAILURE);
+        default:
+            return undefined;
+    }
+}
 function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel, header, insideLoop = false) {
     const langImg = {
         deno: '/icons/ts-lang.svg',
@@ -132,7 +152,9 @@ function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeL
         inline: ''
     };
     const wrapperWidth = lang ? 'w-[calc(100%-70px)]' : 'w-[calc(100%-50px)]';
-    let nodeId = id ?? numberToChars(idGenerator.next().value - 1);
+    let generatedId = idGenerator.next().value;
+    let nodeId = id ?? numberToChars(generatedId - 1);
+    // console.log(id, generatedId, nodeId, charsToNumber(nodeId))
     return {
         id: charsToNumber(nodeId),
         position: { x: -1, y: -1 },
@@ -201,14 +223,12 @@ function flowModuleToBranch(module, branches, edgesLabel, parent = undefined, in
     if (branches.length == 0) {
         branch.items.push([createVirtualNode(branchParent, 'No branches')]);
     }
-    branches.forEach((modules, i) => {
+    branches.forEach(({ summary, modules }, i) => {
         const items = [];
-        if (!modules.length) {
-            items.push(createVirtualNode(branchParent, 'Empty branch', edgesLabel[i]));
-        }
-        else {
-            modules.forEach((module) => {
-                const item = getConvertedFlowModule(module, items.length ? items : numberToChars(branch.node.id), edgesLabel[i], insideLoop);
+        items.push(createVirtualNode(branchParent, summary, edgesLabel[i]));
+        if (modules.length) {
+            modules.forEach((module, j) => {
+                const item = getConvertedFlowModule(module, items, undefined, insideLoop);
                 item && items.push(item);
             });
         }
@@ -235,6 +255,7 @@ function flattenNestedNodes(nestedNodes, nodes = []) {
     return array;
 }
 function layoutNodes(nodes) {
+    // console.log('layoutNodes', nodes)
     const stratify = dagStratify().id(({ id }) => numberToChars(id));
     const dag = stratify(nodes);
     const layout = sugiyama()
@@ -300,9 +321,10 @@ function createEdges(nodes) {
     });
     return edges;
 }
-function createVirtualNode(parentIds, label, edgesLabel, offset) {
+function createVirtualNode(parentIds, label, edgeLabel, offset) {
+    const id = -idGenerator.next().value - 1 + (offset ?? 0);
     return {
-        id: -idGenerator.next().value - 1 + (offset ?? 0),
+        id,
         position: { x: -1, y: -1 },
         data: {
             html: `
@@ -314,14 +336,15 @@ function createVirtualNode(parentIds, label, edgesLabel, offset) {
         width: NODE.width,
         height: NODE.height,
         borderColor: selectedNode == label ? 'black' : '#999',
-        bgColor: selectedNode == label ? '#f5f5f5' : '#d4e4ff',
+        bgColor: label == 'Result' ? getResultColor() : selectedNode == label ? '#f5f5f5' : '#d4e4ff',
         parentIds,
         clickCallback: (node) => {
             if (!notSelectable) {
                 selectedNode = label;
             }
             dispatch('click', label);
-        }
+        },
+        edgeLabel
     };
 }
 function createErrorHandler(mod, parent_module) {

package/components/graph/FlowGraph.svelte.d.ts

@@ -3,6 +3,7 @@ import { type FlowModule } from '../../gen';
 import { type GraphModuleState } from '.';
 declare const __propDef: {
     props: {
+        success?: boolean | undefined;
         modules?: FlowModule[] | undefined;
         failureModule?: FlowModule | undefined;
         minHeight?: number | undefined;

package/components/icons/SquareIcon.svelte

@@ -0,0 +1,9 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 30 30">
+	<path
+		d="M 7 4 C 5.343 4 4 5.343 4 7 L 4 23 C 4 24.657 5.343 26 7 26 L 23 26 C 24.657 26 26 24.657 26 23 L 26 7 C 26 5.343 24.657 4 23 4 L 7 4 z M 8 8 L 22 8 L 22 22 L 8 22 L 8 8 z M 12 12 L 12 18 L 18 18 L 18 12 L 12 12 z"
+	/>
+</svg>

package/components/icons/SquareIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SquareIconProps = typeof __propDef.props;
+export type SquareIconEvents = typeof __propDef.events;
+export type SquareIconSlots = typeof __propDef.slots;
+export default class SquareIcon extends SvelteComponentTyped<SquareIconProps, SquareIconEvents, SquareIconSlots> {
+}
+export {};

package/components/icons/index.d.ts

@@ -45,6 +45,7 @@ import SupabaseIcon from './SupabaseIcon.svelte';
 import WebdavIcon from './WebdavIcon.svelte';
 import ZammadIcon from './ZammadIcon.svelte';
 import SurrealdbIcon from './SurrealdbIcon.svelte';
+import SquareIcon from './SquareIcon.svelte';
 export declare const APP_TO_ICON_COMPONENT: {
     readonly postgresql: typeof PostgresIcon;
     readonly mysql: typeof Mysql;
@@ -92,6 +93,7 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly mongodb: typeof MongodbIcon;
     readonly reddit: typeof RedditIcon;
     readonly supabase: typeof SupabaseIcon;
+    readonly square: typeof SquareIcon;
     readonly webdav: typeof WebdavIcon;
     readonly zammad: typeof ZammadIcon;
     readonly nextcloud: typeof NextcloudIcon;

package/components/icons/index.js

@@ -45,6 +45,7 @@ import SupabaseIcon from './SupabaseIcon.svelte';
 import WebdavIcon from './WebdavIcon.svelte';
 import ZammadIcon from './ZammadIcon.svelte';
 import SurrealdbIcon from './SurrealdbIcon.svelte';
+import SquareIcon from './SquareIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -92,6 +93,7 @@ export const APP_TO_ICON_COMPONENT = {
     mongodb: MongodbIcon,
     reddit: RedditIcon,
     supabase: SupabaseIcon,
+    square: SquareIcon,
     webdav: WebdavIcon,
     zammad: ZammadIcon,
     nextcloud: NextcloudIcon,

package/components/jobs/JobDetail.svelte

@@ -3,6 +3,7 @@ import { page } from '$app/stores';
 import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
 import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import { CalendarClock } from 'lucide-svelte';
+import { onDestroy, onMount } from 'svelte';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
 import { Badge } from '../common';
@@ -10,13 +11,28 @@ import ScheduleEditor from '../ScheduleEditor.svelte';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
 let scheduleEditor;
+let time = Date.now();
+let interval;
+onMount(() => {
+    interval = setInterval(() => {
+        time = Date.now();
+    }, 1000);
+});
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
+function endedDate(started_at, duration_ms) {
+    const started = new Date(started_at);
+    started.setMilliseconds(started.getMilliseconds() + duration_ms);
+    return displayDaysAgo(started.toString());
+}
 </script>
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 
 <div class="border border-gray-400 rounded py-4">
-	<div class="grid grid-cols-1 lg:grid-cols-3 w-full gap-4">
-		<div class="flex-col">
+	<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
+		<div class="flex-col col-span-2">
 			<div class="flex flex-row text-sm">
 				{#if job === undefined}
 					No job found
@@ -130,9 +146,17 @@ let scheduleEditor;
 						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
 							class="mx-1.5"
 						>
-							Started {displayDaysAgo(job.started_at ?? '')}</span
-						>
-					</div>
+							<span>
+								{#if job?.['duration_ms']}
+									Ended {#key time}
+										{endedDate(job.started_at, job?.['duration_ms'])}{/key}
+								{:else}
+									Started {#key time}
+										{displayDaysAgo(job.started_at ?? '')}{/key}
+								{/if}</span
+							>
+						</span></div
+					>
 				{/if}
 				{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
 					<div class="inline-flex gap-1">

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,9 +1,8 @@
-<script>import { pluralize, truncate } from '../../utils';
+<script>import { copyToClipboard, pluralize, truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import { Badge } from '../common';
 import { NEVER_TESTED_THIS_FAR } from '../flows/utils';
 import { getTypeAsString } from '../flows/utils';
-import Popover from '../Popover.svelte';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
 export let json;
@@ -15,6 +14,7 @@ export let collapsed = level == 3 || Array.isArray(json);
 export let rawKey = false;
 export let topBrackets = false;
 export let topLevelNode = false;
+export let allowCopy = true;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -30,7 +30,10 @@ function collapse() {
     collapsed = !collapsed;
 }
 const dispatch = createEventDispatcher();
-function selectProp(key) {
+function selectProp(key, value) {
+    if (pureViewer && allowCopy) {
+        copyToClipboard(value);
+    }
     dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath));
 }
 </script>
@@ -50,7 +53,7 @@ function selectProp(key) {
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button on:click={() => selectProp(key)} class="whitespace-nowrap">
+					<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
 						{#if topLevelNode}
 							<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
 						{:else}
@@ -78,7 +81,7 @@ function selectProp(key) {
 							class="val {pureViewer
 								? 'cursor-auto'
 								: ''} rounded hover:bg-blue-100 {getTypeAsString(json[key])}"
-							on:click={() => selectProp(key)}
+							on:click={() => selectProp(key, json[key])}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
 								<WarningMessage />

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         rawKey?: boolean | undefined;
         topBrackets?: boolean | undefined;
         topLevelNode?: boolean | undefined;
+        allowCopy?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/propertyPicker/PropPicker.svelte

@@ -17,7 +17,7 @@ let displayResources = false;
 const dispatch = createEventDispatcher();
 const EMPTY_STRING = '';
 let search = '';
-const { propPickerConfig, clearFocus } = getContext('PropPickerWrapper');
+const { propPickerConfig } = getContext('PropPickerWrapper');
 $: flowInputsFiltered =
     search === EMPTY_STRING
         ? pickableProperties.flow_input
@@ -68,6 +68,7 @@ async function loadResources() {
 		</div>
 		<div class="overflow-y-auto mb-2">
 			<ObjectViewer
+				allowCopy={false}
 				pureViewer={!$propPickerConfig}
 				json={flowInputsFiltered}
 				on:select={(e) => {
@@ -79,6 +80,7 @@ async function loadResources() {
 			<span class="font-bold text-sm">Error</span>
 			<div class="overflow-y-auto mb-2">
 				<ObjectViewer
+					allowCopy={false}
 					pureViewer={!$propPickerConfig}
 					json={{
 						error: {
@@ -95,6 +97,7 @@ async function loadResources() {
 				<span class="font-bold text-sm">Previous Result</span>
 				<div class="overflow-y-auto mb-2">
 					<ObjectViewer
+						allowCopy={false}
 						topLevelNode
 						pureViewer={!$propPickerConfig}
 						json={Object.fromEntries(
@@ -110,6 +113,7 @@ async function loadResources() {
 				<span class="font-bold text-sm">Resume payloads</span>
 				<div class="overflow-y-auto mb-2">
 					<ObjectViewer
+						allowCopy={false}
 						topLevelNode
 						pureViewer={!$propPickerConfig}
 						json={{
@@ -127,6 +131,7 @@ async function loadResources() {
 				<span class="font-bold text-sm">All Results</span>
 				<div class="overflow-y-auto mb-2">
 					<ObjectViewer
+						allowCopy={false}
 						topLevelNode
 						pureViewer={!$propPickerConfig}
 						collapsed={true}
@@ -152,6 +157,7 @@ async function loadResources() {
 						}}>-</Button
 					>
 					<ObjectViewer
+						allowCopy={false}
 						pureViewer={!$propPickerConfig}
 						rawKey={true}
 						json={variables}
@@ -179,6 +185,7 @@ async function loadResources() {
 						}}>-</Button
 					>
 					<ObjectViewer
+						allowCopy={false}
 						pureViewer={!$propPickerConfig}
 						rawKey={true}
 						json={resources}