Editor bar data tables

frontend/src/lib/components/EditorBar.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	export const EDITOR_BAR_WIDTH_THRESHOLD = 1300
+	export const EDITOR_BAR_WIDTH_THRESHOLD = 1420
 </script>
 
 <script lang="ts">
@@ -115,6 +115,7 @@
 	let resourceEditor: ResourceEditorDrawer | undefined = $state()
 	let s3FilePicker: S3FilePicker | undefined = $state()
 	let ducklakePicker: ItemPicker | undefined = $state()
+	let dataTablePicker: ItemPicker | undefined = $state()
 	let databasePicker: ItemPicker | undefined = $state()
 	let gitRepoPickerOpen = $state(false)
 
@@ -193,6 +194,10 @@
 		['duckdb', 'python3'].includes(lang ?? '') ||
 			['typescript', 'javascript'].includes(scriptLangToEditorLang(lang))
 	)
+	let showDataTablePicker = $derived(
+		['duckdb', 'python3'].includes(lang ?? '') ||
+			['typescript', 'javascript'].includes(scriptLangToEditorLang(lang))
+	)
 	let showDatabasePicker = $derived(['duckdb'].includes(lang ?? ''))
 	let showGitRepoPicker = $derived(lang === 'ansible')
 
@@ -726,7 +731,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				if (!editor?.getCode().includes('import wmill')) {
 					editor?.insertAtBeginning('import wmill\n')
 				}
-				editor?.insertAtCursor(`db = wmill.ducklake(${name == 'main' ? '' : `'${name}'`})\n`)
+				editor?.insertAtCursor(`dl = wmill.ducklake(${name == 'main' ? '' : `'${name}'`})\n`)
 			} else if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
 				if (!editor?.getCode().includes('import * as wmill from')) {
 					editor?.insertAtBeginning(`import * as wmill from "npm:windmill-client@1"\n`)
@@ -734,7 +739,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				editor?.insertAtCursor(`let sql = wmill.ducklake(${name == 'main' ? '' : `'${name}'`})\n`)
 			}
 		}}
-		tooltip="Attach a Ducklake in your DuckDB script. Ducklake allows you to manipulate large data on S3 blob files through a traditional SQL interface."
+		tooltip="Attach a Ducklake to your scripts. Ducklake allows you to manipulate large data on S3 blob files through a traditional SQL interface."
 		documentationLink="https://www.windmill.dev/docs/core_concepts/ducklake"
 		itemName="ducklake"
 		loadItems={async () =>
@@ -744,6 +749,35 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 	/>
 {/if}
 
+{#if showDataTablePicker}
+	<ItemPicker
+		bind:this={dataTablePicker}
+		pickCallback={async (_, name) => {
+			if (lang === 'duckdb') {
+				const connStr = name == 'main' ? 'datatable' : `datatable://${name}`
+				editor?.insertAtCursor(`ATTACH '${connStr}' AS dt;\n`)
+			} else if (lang === 'python3') {
+				if (!editor?.getCode().includes('import wmill')) {
+					editor?.insertAtBeginning('import wmill\n')
+				}
+				editor?.insertAtCursor(`db = wmill.datatable(${name == 'main' ? '' : `'${name}'`})\n`)
+			} else if (['javascript', 'typescript'].includes(scriptLangToEditorLang(lang))) {
+				if (!editor?.getCode().includes('import * as wmill from')) {
+					editor?.insertAtBeginning(`import * as wmill from "npm:windmill-client@1"\n`)
+				}
+				editor?.insertAtCursor(`let sql = wmill.datatable(${name == 'main' ? '' : `'${name}'`})\n`)
+			}
+		}}
+		tooltip="Attach a datatable to your script.."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/data_tables"
+		itemName="data table"
+		loadItems={async () =>
+			(await WorkspaceService.listDataTables({ workspace: $workspaceStore ?? 'NO_W' })).map(
+				(path) => ({ path })
+			)}
+	/>
+{/if}
+
 {#if showDatabasePicker}
 	<ItemPicker
 		bind:this={databasePicker}
@@ -917,6 +951,20 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				</Button>
 			{/if}
 
+			{#if showDataTablePicker && customUi?.dataTable != false}
+				<Button
+					aiId="editor-bar-use-datatable"
+					aiDescription="Use DataTable"
+					title="Use DataTable"
+					variant="subtle"
+					on:click={() => dataTablePicker?.openDrawer()}
+					unifiedSize="sm"
+					startIcon={{ icon: DatabaseIcon }}
+					{iconOnly}
+					>+Data table
+				</Button>
+			{/if}
+
 			{#if customUi?.reset != false}
 				<Button
 					aiId="editor-bar-reset-content"

frontend/src/lib/components/assets/lib.ts

@@ -75,7 +75,7 @@ export function formatAssetKind(asset: {
 		case 'ducklake':
 			return 'Ducklake'
 		case 'datatable':
-			return 'Datatable'
+			return 'Data table'
 	}
 }
 

frontend/src/lib/components/custom_ui.ts

@@ -77,6 +77,7 @@ export type EditorBarUi = {
 	s3object?: boolean
 	database?: boolean
 	ducklake?: boolean
+	dataTable?: boolean
 }
 
 export type EditableSchemaFormUi = {