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

<script lang="ts">
	import { WorkspaceService } from '$lib/gen'

	import Select from './select/Select.svelte'
	import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte'
	import { usePromise } from '$lib/svelte5Utils.svelte'
	import { useOperatingWorkspace } from '$lib/components/operatingWorkspace.svelte'

	const operatingWorkspace = useOperatingWorkspace()

	interface Props {
		value?: string | undefined
		disabled?: boolean
		disablePortal?: boolean
		showSchemaExplorer?: boolean
		placeholder?: string | undefined
		selectInputClass?: string
		class?: string
		onClear?: () => void
		/** Size the input to its content, like Path's folder picker. */
		useContentEditable?: boolean
		RightIcon?: any
	}

	let {
		value = $bindable(undefined),
		disabled = false,
		disablePortal = false,
		showSchemaExplorer = false,
		placeholder = undefined,
		selectInputClass = '',
		class: className = '',
		onClear = undefined,
		useContentEditable = false,
		RightIcon = undefined
	}: Props = $props()

	let datatables = usePromise(() =>
		WorkspaceService.listDataTables({ workspace: $operatingWorkspace ?? '' }).then((d) =>
			d.map((d) => d.name)
		)
	)
</script>

<div class={className}>
	<Select
		items={datatables.value?.map((d) => ({ value: d })) ?? []}
		bind:value
		loading={datatables.status === 'loading'}
		{disabled}
		{disablePortal}
		{placeholder}
		inputClass={selectInputClass}
		{onClear}
		{useContentEditable}
		{RightIcon}
	/>
	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'datatable', path: value })}
		<ExploreAssetButton class="mt-1 w-fit" asset={{ kind: 'datatable', path: value }} />
	{/if}
</div>