Merge branch 'glm/postgres_trigger_polishing' into feat/postgres-trig…

…ger-captures
windmill-labs · Feb 6, 2025 · 90c9a13 · 90c9a13
2 parents c87f5b9 + 8d5ca59
commit 90c9a13
Show file tree

Hide file tree

Showing 8 changed files with 453 additions and 345 deletions.
diff --git a/frontend/src/lib/components/Label.svelte b/frontend/src/lib/components/Label.svelte
@@ -13,10 +13,12 @@
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
 			<div class="flex flex-row items-center gap-2">
-				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
-				{#if required}
-					<Required required={true} />
-				{/if}
+				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6"
+					>{label}
+					{#if required}
+						<Required required={true} />
+					{/if}
+				</span>
 				<slot name="header" />
 			</div>
 		{/if}

diff --git a/frontend/src/lib/components/Section.svelte b/frontend/src/lib/components/Section.svelte
@@ -46,6 +46,8 @@
 				<slot name="header" />
 				{#if tooltip}
 					<Tooltip {documentationLink}>{tooltip}</Tooltip>
+				{:else if $$slots.tooltip}
+					<slot name="tooltip" />
 				{/if}
 				{#if eeOnly}
 					{#if !$enterpriseLicense}

diff --git a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
@@ -5,6 +5,7 @@
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 
 	let name: string = ''
+	export let customName: string | undefined = undefined
 
 	const dispatch = createEventDispatcher()
 
@@ -24,7 +25,7 @@
 		<div class="flex flex-row gap-2 p-2 rounded-md">
 			<input
 				bind:value={name}
-				placeholder="Field name"
+				placeholder={`${customName ?? 'Field'} name`}
 				on:keydown={(event) => {
 					if (event.key === 'Enter') {
 						addField()
@@ -44,7 +45,7 @@
 				disabled={!name}
 				shortCut={{ Icon: CornerDownLeft, withoutModifier: true }}
 			>
-				Add field
+				Add {customName ? customName.toLowerCase() : 'field'}
 			</Button>
 		</div>
 	</svelte:fragment>

diff --git a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
@@ -12,6 +12,8 @@
 
 	export let kind: 'websocket' | 'nats' | 'kafka' | 'postgres'
 	export let args: Record<string, any>
+	export let noButton = false
+	export let testLoading: boolean = false
 
 	const kindToName: { [key: string]: string } = {
 		websocket: 'WebSocket',
@@ -20,9 +22,8 @@
 		postgres: 'Postgres'
 	}
 
-	let testLoading: boolean = false
 	let promise: CancelablePromise<any> | null = null
-	async function testTriggerConnection() {
+	export async function testTriggerConnection() {
 		if (testLoading) {
 			promise?.cancel()
 			return
@@ -63,16 +64,18 @@
 	}
 </script>
 
-<div class="flex flex-row justify-end mt-1">
-	<Button
-		spacingSize="sm"
-		size="xs"
-		color="light"
-		variant="border"
-		on:click={testTriggerConnection}
-		loading={testLoading}
-		clickableWhileLoading
-	>
-		Test connection
-	</Button>
-</div>
+{#if !noButton}
+	<div class="flex flex-row justify-end mt-1">
+		<Button
+			spacingSize="sm"
+			size="xs"
+			color="light"
+			variant="border"
+			on:click={testTriggerConnection}
+			loading={testLoading}
+			clickableWhileLoading
+		>
+			Test connection
+		</Button>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
@@ -29,27 +29,34 @@
 
 	export let can_write: boolean
 	export let postgres_resource_path: string
+	export let checkConnection: any | undefined = undefined
+
 	$: if (postgres_resource_path === undefined) {
 		config.show = false
 	}
+
+	console.log('dbg check connection', checkConnection)
 </script>
 
 {#if postgres_resource_path}
 	<div class="flex flex-col justify-end mt-1 gap-2">
 		<Button
 			disabled={!can_write}
 			loading={loadingConfiguration}
-			on:click={checkDatabaseConfiguration}
+			on:click={() =>
+				checkDatabaseConfiguration().then(checkConnection ? checkConnection() : () => {})}
 			size="xs"
 			color="light"
 			spacingSize="sm"
 			variant="border"
-			>Check database configuration
+		>
+			{`Check database configuration ${checkConnection ? 'and connection' : ''}`}
 			<Tooltip
 				documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#requirements"
 			>
 				<p class="text-sm">
 					Verifies whether the database is configured with the required <strong>settings</strong>.
+					{checkConnection && 'Also checks whether the connection to the database is working.'}
 				</p>
 			</Tooltip>
 		</Button>

diff --git a/frontend/src/lib/components/triggers/postgres/PostgresEditorConfigSection.svelte b/frontend/src/lib/components/triggers/postgres/PostgresEditorConfigSection.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import Section from '$lib/components/Section.svelte'
+	import Label from '$lib/components/Label.svelte'
 	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
 	import CaptureTable from '../CaptureTable.svelte'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
@@ -10,6 +11,17 @@
 	import type { PublicationData } from '$lib/gen'
 	import { emptyString } from '$lib/utils'
 	import CheckPostgresRequirement from './CheckPostgresRequirement.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { X } from 'lucide-svelte'
+	const DEFAULT_PUBLICATION: PublicationData = {
+		transaction_to_track: ['Insert', 'Update', 'Delete'],
+		table_to_track: [
+			{
+				schema_name: 'public',
+				table_to_track: []
+			}
+		]
+	}
 
 	let transactionType: string[] = ['Insert', 'Update', 'Delete']
 	export let headless: boolean = false
@@ -28,40 +40,36 @@
 			}
 		]
 	}
-	$: publication =
-		publication === undefined
-			? {
-					transaction_to_track: ['Insert', 'Update', 'Delete'],
-					table_to_track: [
-						{
-							schema_name: 'public',
-							table_to_track: []
-						}
-					]
-			  }
-			: publication
-	$: notEmpty = publication.table_to_track && publication.table_to_track.length > 0
-	let selectedTable: 'all' | 'specific' = notEmpty ? 'specific' : 'all'
-	$: isValid =
-		!emptyString(postgres_resource_path) &&
-		publication.transaction_to_track.length > 0 &&
-		(selectedTable === 'all' || (notEmpty ?? false))
+
+	let selectedTable: 'all' | 'specific' = 'all'
+
+	function updateConfig(publication: PublicationData) {
+		if (publication === undefined) {
+			publication = { ...DEFAULT_PUBLICATION }
+			selectedTable = 'specific'
+		} else {
+			selectedTable =
+				publication.table_to_track && publication.table_to_track.length > 0 ? 'specific' : 'all'
+		}
+		const notEmpty = publication.table_to_track && publication.table_to_track.length > 0
+		selectedTable = notEmpty ? 'specific' : 'all'
+		isValid =
+			!emptyString(postgres_resource_path) &&
+			publication.transaction_to_track.length > 0 &&
+			(selectedTable === 'all' || (notEmpty ?? false))
+	}
 
 	$: if (emptyString(postgres_resource_path)) {
 		selectedTable = 'specific'
-		publication = {
-			transaction_to_track: ['Insert', 'Update', 'Delete'],
-			table_to_track: [
-				{
-					schema_name: 'public',
-					table_to_track: []
-				}
-			]
-		}
+		publication = { ...DEFAULT_PUBLICATION }
 	}
+
+	$: updateConfig(publication)
+
+	let testTriggerConnection: TestTriggerConnection | undefined = undefined
 </script>
 
-<div>
+<div class="h-full">
 	{#if showCapture && captureInfo}
 		<CaptureSection
 			disabled={!isValid}
@@ -76,7 +84,7 @@
 		/>
 	{/if}
 	<Section label="Postgres config" {headless}>
-		<div class="flex flex-col gap-3">
+		<div class="flex flex-col gap-4">
 			<div class="mb-2">
 				<p class="text-xs mb-1 text-tertiary">
 					Pick a database to connect to <Required required={true} />
@@ -87,39 +95,62 @@
 					resourceType={'postgresql'}
 				/>
 				{#if postgres_resource_path}
-					<TestTriggerConnection kind="postgres" args={{ postgres_resource_path }} />
-					<CheckPostgresRequirement bind:postgres_resource_path bind:can_write />
+					<TestTriggerConnection
+						kind="postgres"
+						args={{ postgres_resource_path }}
+						noButton
+						bind:this={testTriggerConnection}
+					/>
+					<CheckPostgresRequirement
+						bind:postgres_resource_path
+						bind:can_write
+						checkConnection={testTriggerConnection?.testTriggerConnection}
+					/>
 				{/if}
 			</div>
 			{#if postgres_resource_path}
-				<Section label="Transactions">
-					<p class="text-xs mb-3 text-tertiary">
-						Choose the types of database transactions that should trigger a script or flow. You can
-						select from <strong>Insert</strong>, <strong>Update</strong>,
-						<strong>Delete</strong>, or any combination of these operations to define when the
-						trigger should activate.
-					</p>
+				<Label label="Transactions">
+					<svelte:fragment slot="header">
+						<Tooltip small>
+							Choose the types of database transactions that should trigger a script or flow. You
+							can select from <strong>Insert</strong>, <strong>Update</strong>,
+							<strong>Delete</strong>, or any combination of these operations to define when the
+							trigger should activate.
+						</Tooltip>
+					</svelte:fragment>
 					<MultiSelect
-						ulOptionsClass={'!bg-surface-secondary'}
 						noMatchingOptionsMsg=""
 						createOptionMsg={null}
 						duplicates={false}
 						options={transactionType}
 						allowUserOptions="append"
 						bind:selected={publication.transaction_to_track}
-					/>
-				</Section>
-				<Section label="Table tracking">
-					<p class="text-xs mb-3 text-tertiary">
-						Select the tables to track. You can choose to track
-						<strong>all tables in your database</strong>,
-						<strong>all tables within a specific schema</strong>,
-						<strong>specific tables in a schema</strong>, or even
-						<strong>specific columns of a table</strong>. Additionally, you can apply a
-						<strong>filter</strong> to retrieve only rows that do not match the specified criteria.
-					</p>
+						ulOptionsClass={'!bg-surface !text-sm'}
+						ulSelectedClass="!text-sm"
+						outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
+						placeholder="Select transactions"
+						--sms-options-margin="4px"
+					>
+						<svelte:fragment slot="remove-icon">
+							<div class="hover:text-primary p-0.5">
+								<X size={12} />
+							</div>
+						</svelte:fragment>
+					</MultiSelect>
+				</Label>
+				<Label label="Table tracking">
+					<svelte:fragment slot="header">
+						<Tooltip small>
+							Select the tables to track. You can choose to track
+							<strong>all tables in your database</strong>,
+							<strong>all tables within a specific schema</strong>,
+							<strong>specific tables in a schema</strong>, or even
+							<strong>specific columns of a table</strong>. Additionally, you can apply a
+							<strong>filter</strong> to retrieve only rows that do not match the specified criteria.
+						</Tooltip>
+					</svelte:fragment>
 					<RelationPicker bind:selectedTable bind:relations={publication.table_to_track} />
-				</Section>
+				</Label>
 			{/if}
 		</div>
 	</Section>