create datatable test

frontend/e2e/datatable.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect } from '@playwright/test'
+
+test('create new data table with custom instance', async ({ page }) => {
+	// Generate unique ID with timestamp
+	const timestamp = Date.now()
+	const datatableId = `datatable_${timestamp}`
+
+	// Navigate to workspace settings data tables tab
+	await page.goto('/workspace_settings?tab=windmill_data_tables')
+
+	// Click on 'New Data Table' button
+	const newDataTableButton = page.locator('button:has-text("New Data Table")')
+	await newDataTableButton.waitFor({ state: 'visible' })
+	await newDataTableButton.click()
+
+	// Find the second-to-last row in the table (last row contains the button)
+	const table = page.locator('table')
+	await table.waitFor({ state: 'visible' })
+
+	const lastRow = table.locator('tr').nth(-2)
+	await lastRow.waitFor({ state: 'visible' })
+
+	// Fill the name input with generated ID
+	const nameInput = lastRow.locator('input[id="name"]')
+	await nameInput.waitFor({ state: 'visible' })
+	await nameInput.fill(datatableId)
+
+	// Verify database type is 'Instance'
+	const databaseTypeSelect = lastRow.locator('input[id="database-type-select"]')
+	await expect(databaseTypeSelect).toHaveValue('Instance')
+
+	// Click on custom instance DB select and add new database
+	const customInstanceDbSelect = lastRow.locator('input[id="custom-instance-db-select"]')
+	await customInstanceDbSelect.waitFor({ state: 'visible' })
+	await customInstanceDbSelect.click()
+	await customInstanceDbSelect.fill(datatableId)
+
+	// Click on the "Add new:" button
+	const addNewButton = page.locator(`button:has-text("Add new: ")`)
+	await addNewButton.waitFor({ state: 'visible' })
+	await addNewButton.click()
+
+	// Click on Setup button
+	const setupButton = lastRow.locator('button:has-text("Setup")')
+	await setupButton.waitFor({ state: 'visible' })
+	await setupButton.click()
+
+	// Wait for popover to appear and click run setup button
+	const runSetupButton = page.locator('button[id="run-custom-instance-db-setup-button"]')
+	await runSetupButton.waitFor({ state: 'visible' })
+	await runSetupButton.click()
+
+	const confirmBtn = page.locator('button:has-text("Setup database")')
+	await confirmBtn.waitFor({ state: 'visible' })
+	await confirmBtn.click()
+
+	// Verify success toast appears
+	const successToast = page.locator('text=Setup successful')
+	await expect(successToast).toBeVisible({ timeout: 10000 })
+
+	const closeModalBtn = page.locator('button[id="modal-close-button"]')
+	await closeModalBtn.click()
+
+	const saveBtn = page.locator('button:has-text("Save")')
+	await saveBtn.click()
+
+	// Verify success toast appears
+	const saveSuccessToast = page.locator('text=saved successfully')
+	await expect(saveSuccessToast).toBeVisible({ timeout: 10000 })
+})

frontend/e2e/dbmanager.spec.ts

@@ -1,6 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('has Home text', async ({ page }) => {
-	await page.goto('/')
-	await expect(page.locator('text=Home').first()).toBeVisible()
-})

frontend/src/lib/components/ResourcePicker.svelte

@@ -206,6 +206,7 @@
 			inputClass={selectInputClass}
 			placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
 			itemLabelWrapperClasses="flex-1"
+			id="resource-picker-select"
 		>
 			{#snippet endSnippet({ item, close })}
 				<Button

frontend/src/lib/components/common/modal/Modal2.svelte

@@ -91,6 +91,7 @@
 												<slot name="header-right" />
 												<div class="w-8">
 													<button
+														id="modal-close-button"
 														on:click={() => {
 															close()
 														}}

frontend/src/lib/components/workspaceSettings/CustomInstanceDbSelect.svelte

@@ -52,6 +52,7 @@
 		placeholder="Search or create..."
 		showPlaceholderOnOpen
 		items={onlySelectedTags}
+		id="custom-instance-db-select"
 		disabled={!$isCustomInstanceDbEnabled}
 	>
 		{#snippet endSnippet({ item })}

frontend/src/lib/components/workspaceSettings/CustomInstanceDbWizardModal.svelte

@@ -160,6 +160,7 @@
 				{/if}
 				<Button
 					size="sm"
+					id="run-custom-instance-db-setup-button"
 					variant={!status?.success ? 'accent' : 'default'}
 					endIcon={status?.success ? undefined : { icon: ArrowRight }}
 					disabled={!$isCustomInstanceDbEnabled}

frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte

@@ -192,7 +192,7 @@
 		{#each tempSettings.dataTables as dataTable, dataTableIndex}
 			<Row>
 				<Cell first class="w-48 relative">
-					<TextInput bind:value={dataTable.name} inputProps={{ placeholder: 'Name' }} />
+					<TextInput bind:value={dataTable.name} inputProps={{ placeholder: 'Name', id: 'name' }} />
 				</Cell>
 				<Cell>
 					<div class="flex gap-2">
@@ -221,6 +221,7 @@
 										}
 									}
 								}
+								id="database-type-select"
 								class="w-28"
 							/>
 						</div>