windmill/frontend/src/lib/components/FlowHistoryJobPicker.svelte

<script lang="ts">
	import { HistoryIcon } from 'lucide-svelte'
	import { createEventDispatcher, untrack } from 'svelte'
	import PopoverV2 from '$lib/components/meltComponents/Popover.svelte'
	import HistoricInputs from './HistoricInputs.svelte'
	import { JobService } from '$lib/gen'
	import { Button } from './common'
	import { useOperatingWorkspace } from '$lib/components/operatingWorkspace.svelte'

	const operatingWorkspace = useOperatingWorkspace()

	interface Props {
		path: string
		selected?: string | undefined
		selectInitial?: boolean
		loading?: boolean
		newFlow?: boolean
	}

	let {
		path,
		selected = undefined,
		selectInitial = false,
		loading = $bindable(false),
		newFlow = false
	}: Props = $props()
	const dispatch = createEventDispatcher()

	async function loadInitial() {
		loading = true
		let jobs = await JobService.listJobs({
			workspace: $operatingWorkspace!,
			scriptPathExact: path,
			jobKinds: ['flow', 'flowpreview'].join(','),
			perPage: 1
		})
		if (jobs.length > 0) {
			if (selectInitial) {
				dispatch('select', { jobId: jobs[0].id, initial: true })
			}
		} else {
			dispatch('nohistory')
		}
		loading = false
	}

	$effect(() => {
		if ($operatingWorkspace && !newFlow) {
			untrack(() => loadInitial())
		}
	})
</script>

<PopoverV2 closeButton={false}>
	{#snippet trigger()}
		<Button variant="default" startIcon={{ icon: HistoryIcon }}>History</Button>
	{/snippet}
	{#snippet content()}
		<div class="p-2 h-[400px] overflow-hidden w-80 border shadow-sm">
			<HistoricInputs
				on:select={(e) => {
					if (e.detail) {
						dispatch('select', { jobId: e.detail?.jobId, initial: false })
					} else {
						dispatch('unselect')
					}
				}}
				{selected}
				runnableId={path}
				runnableType={'FlowPath'}
			/>
		</div>
	{/snippet}
</PopoverV2>