fix: improve history and saved inputs rever mechanism

Author: rubenfiszel

backend/windmill-api/openapi.yaml

@@ -4444,7 +4444,7 @@ paths:
 
   /w/{workspace}/scripts/delete/p/{path}:
     post:
-      summary: delete all scripts at a given path (require admin)
+      summary: delete script at a given path (require admin)
       operationId: deleteScriptByPath
       tags:
         - script

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -161,6 +161,7 @@
 	$: selectedJobStep !== undefined && onSelectedJobStepChange()
 
 	let renderCount: number = 0
+	let schemaFormWithArgPicker: SchemaFormWithArgPicker | undefined = undefined
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -324,6 +325,7 @@
 	<div class="overflow-y-auto grow flex flex-col pt-4">
 		<div class="border-b">
 			<SchemaFormWithArgPicker
+				bind:this={schemaFormWithArgPicker}
 				runnableId={initialPath == '' ? $pathStore : initialPath}
 				runnableType={'FlowPath'}
 				previewArgs={$previewArgs}
@@ -335,7 +337,10 @@
 				{jsonView}
 			>
 				<div class="w-full flex flex-row justify-between">
-					<InputSelectedBadge {inputSelected} />
+					<InputSelectedBadge
+						on:click={() => schemaFormWithArgPicker?.resetSelected()}
+						{inputSelected}
+					/>
 					<div class="flex flex-row gap-2">
 						<Toggle
 							bind:checked={jsonView}

frontend/src/lib/components/HistoricInputs.svelte

@@ -7,7 +7,6 @@
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	import JobLoader from './runs/JobLoader.svelte'
 	import { DataTable } from '$lib/components/table'
-	import { clickOutside } from '$lib/utils'
 	import InfiniteList from './InfiniteList.svelte'
 
 	export let runnableId: string | undefined = undefined
@@ -82,12 +81,6 @@
 		resetSelected(true)
 	})
 
-	async function getPropPickerElements(): Promise<HTMLElement[]> {
-		return Array.from(
-			document.querySelectorAll('[data-schema-picker], [data-schema-picker] *')
-		) as HTMLElement[]
-	}
-
 	async function loadArgsFromHistory(
 		id: string | undefined,
 		input: boolean | undefined,
@@ -126,6 +119,7 @@
 	}
 
 	export function resetSelected(dispatchEvent?: boolean) {
+		console.log('resetSelected')
 		selected = undefined
 		if (dispatchEvent) {
 			dispatch('select', undefined)
@@ -159,15 +153,7 @@
 	/>
 {/if}
 
-<div
-	class="h-full w-full flex flex-col gap-4"
-	use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
-	on:click_outside={() => {
-		if (selected) {
-			resetSelected(true)
-		}
-	}}
->
+<div class="h-full w-full flex flex-col gap-4">
 	<div class="grow-0" data-schema-picker>
 		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
 			{#if loading && (jobs == undefined || jobs?.length == 0)}

frontend/src/lib/components/SavedInputsPicker.svelte

@@ -7,7 +7,6 @@
 	import { Edit, Trash2, Save, Eye } from 'lucide-svelte'
 	import Toggle from './Toggle.svelte'
 	import { Cell } from './table/index'
-	import { clickOutside } from '$lib/utils'
 	import SaveInputsButton from '$lib/components/SaveInputsButton.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import InfiniteList from './InfiniteList.svelte'
@@ -133,11 +132,6 @@
 		resetSelected(true)
 	})
 
-	async function getPropPickerElements(): Promise<HTMLElement[]> {
-		const elements = document.querySelectorAll('[data-schema-picker], [data-schema-picker] *')
-		return elements ? (Array.from(elements) as HTMLElement[]) : []
-	}
-
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape' && isEditing) {
 			setEditing(null)
@@ -191,13 +185,7 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div
-	class="w-full flex flex-col gap-1 h-full overflow-y-auto"
-	use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
-	on:click_outside={() => {
-		resetSelected(true)
-	}}
->
+<div class="w-full flex flex-col gap-1 h-full overflow-y-auto">
 	{#if !noButton}
 		<div>
 			<Popover class="w-full" placement="bottom" disablePopup={runnableId && previewArgs}>

frontend/src/lib/components/SavedInputsV2.svelte

@@ -18,6 +18,11 @@
 	export let isValid: boolean
 	export let args: object
 
+	export function resetSelected() {
+		historicInputs?.resetSelected(true)
+		savedInputsPicker?.resetSelected(true)
+	}
+
 	let savedArgs: any = undefined
 	let runnableType: RunnableType | undefined = undefined
 	let savedInputsPicker: SavedInputsPicker | undefined = undefined

frontend/src/lib/components/SchemaFormWithArgPicker.svelte

@@ -19,6 +19,13 @@
 
 	const dispatch = createEventDispatcher()
 
+	export function resetSelected() {
+		console.log('resetSelected')
+		historicInputs?.resetSelected(true)
+		savedInputsPicker?.resetSelected(true)
+		captureTable?.resetSelected(true)
+	}
+
 	const getDropdownItems = () => {
 		return [
 			{
@@ -71,7 +78,9 @@
 	let dropdownItems: any
 	let rightPanelOpen = false
 
+	let savedInputsPicker: SavedInputsPicker | undefined = undefined
 	let loading = false
+	let captureTable: CaptureTable | undefined = undefined
 	let historicInputs: HistoricInputs | undefined = undefined
 	$: selectedTab, (dropdownItems = getDropdownItems())
 </script>
@@ -119,6 +128,7 @@
 								{runnableId}
 								{runnableType}
 								{previewArgs}
+								bind:this={savedInputsPicker}
 								on:select={(e) => {
 									dispatch('select', { payload: e.detail, type: 'saved' })
 								}}
@@ -138,6 +148,7 @@
 									on:select={(e) => {
 										dispatch('select', { payload: e.detail, type: 'captures' })
 									}}
+									bind:this={captureTable}
 									isFlow={true}
 									headless={true}
 									addButton={false}

frontend/src/lib/components/flows/content/FlowInput.svelte

@@ -308,6 +308,7 @@
 			savedPreviewArgs = undefined
 		}
 	}
+	let historicInputs: HistoricInputs | undefined = undefined
 </script>
 
 <!-- Add svelte:window to listen for keyboard events -->
@@ -348,6 +349,7 @@
 				{diff}
 				disableDnd={!!previewSchema}
 				on:rejectChange={(e) => {
+					console.log('rejectChange')
 					rejectChange(e.detail).then(() => {
 						updatePreviewSchema(selectedSchema)
 					})
@@ -422,7 +424,9 @@
 								size="xs"
 								startIcon={{ icon: X }}
 								shortCut={{ key: 'esc', withoutModifier: true }}
-								nonCaptureEvent
+								on:click={() => {
+									historicInputs?.resetSelected(true)
+								}}
 							/>
 						</div>
 					{:else}
@@ -460,6 +464,7 @@
 							}}
 						>
 							<HistoricInputs
+								bind:this={historicInputs}
 								runnableId={initialPath ?? undefined}
 								runnableType={$pathStore ? 'FlowPath' : undefined}
 								on:select={(e) => {

frontend/src/lib/components/schema/InputSelectedBadge.svelte

@@ -24,7 +24,7 @@
 			size="xs2"
 			startIcon={{ icon: X }}
 			shortCut={{ key: 'esc', withoutModifier: true }}
-			nonCaptureEvent
+			on:click
 		/>
 	</div>
 </div>

frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte

@@ -344,7 +344,7 @@
 	let stepDetail: FlowModule | string | undefined = undefined
 	let token = 'TOKEN_TO_CREATE'
 	let rightPaneSelected = 'saved_inputs'
-
+	let savedInputsV2: SavedInputsV2 | undefined = undefined
 	let flowHistory: FlowHistory | undefined = undefined
 </script>
 
@@ -449,7 +449,12 @@
 
 					<div class="flex flex-col align-left">
 						<div class="flex flex-row justify-between">
-							<InputSelectedBadge {inputSelected} />
+							<InputSelectedBadge
+								on:click={() => {
+									savedInputsV2?.resetSelected()
+								}}
+								{inputSelected}
+							/>
 							<Toggle
 								bind:checked={jsonView}
 								label="JSON View"
@@ -525,6 +530,7 @@
 		</svelte:fragment>
 		<svelte:fragment slot="save_inputs">
 			<SavedInputsV2
+				bind:this={savedInputsV2}
 				{jsonView}
 				flowPath={flow?.path}
 				{isValid}

frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte

@@ -496,6 +496,8 @@
 
 	let token = 'TOKEN_TO_CREATE'
 	let rightPaneSelected = 'saved_inputs'
+
+	let savedInputsV2: SavedInputsV2 | undefined = undefined
 </script>
 
 <MoveDrawer
@@ -652,7 +654,12 @@
 
 					<div class="flex flex-col align-left">
 						<div class="flex flex-row justify-between">
-							<InputSelectedBadge {inputSelected} />
+							<InputSelectedBadge
+								on:click={() => {
+									savedInputsV2?.resetSelected()
+								}}
+								{inputSelected}
+							/>
 							<Toggle
 								bind:checked={jsonView}
 								label="JSON View"
@@ -715,6 +722,7 @@
 			<svelte:fragment slot="save_inputs">
 				{#if args}
 					<SavedInputsV2
+						bind:this={savedInputsV2}
 						scriptPath={script?.path}
 						scriptHash={topHash}
 						{isValid}