windmill-components 1.448.50 → 1.472.2

package/package/components/triggers/postgres/PostgresTriggersPanel.svelte

@@ -0,0 +1,112 @@
+<script>import { userStore, workspaceStore } from '../../../stores';
+import { PostgresTriggerService } from '../../../gen';
+import { canWrite, sendUserToast } from '../../../utils';
+import { getContext, onMount } from 'svelte';
+import { isCloudHosted } from '../../../cloud';
+import { Alert } from '../../common';
+import PostgresTriggerEditor from './PostgresTriggerEditor.svelte';
+import Description from '../../Description.svelte';
+import TriggersEditorSection from '../TriggersEditorSection.svelte';
+import Section from '../../Section.svelte';
+export let isFlow;
+export let path;
+export let newItem = false;
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
+export let isEditor = false;
+let postgresTriggerEditor;
+let openForm = true;
+let dontCloseOnLoad = false;
+$: path && loadTriggers();
+const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
+onMount(() => {
+    if (defaultValues &&
+        $selectedTrigger === 'postgres' &&
+        Object.keys($defaultValues ?? {}).length > 0) {
+        postgresTriggerEditor.openNew(isFlow, path, $defaultValues);
+        defaultValues.set(undefined);
+    }
+});
+let postgresTriggers = undefined;
+export async function loadTriggers() {
+    try {
+        postgresTriggers = (await PostgresTriggerService.listPostgresTriggers({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).map((x) => {
+            return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
+        });
+        $triggersCount = { ...($triggersCount ?? {}), postgres_count: postgresTriggers?.length };
+        openForm = postgresTriggers?.length === 0 || dontCloseOnLoad;
+    }
+    catch (err) {
+        sendUserToast(`Could not load postgres triggers ${err.body}`, true);
+    }
+}
+</script>
+
+<PostgresTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={postgresTriggerEditor}
+/>
+{#if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning">
+		Postgres triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		<Description link="https://www.windmill.dev/docs/core_concepts/postgres_triggers">
+			Windmill can connect to a Postgres database and trigger runnables (scripts, flows) in response
+			to database transactions (INSERT, UPDATE, DELETE) on specified tables, schemas, or the entire
+			database. Listening is done using Postgres's logical replication streaming protocol, ensuring
+			efficient and low-latency triggering.
+		</Description>
+
+		{#if !newItem && postgresTriggers && postgresTriggers.length > 0}
+			<Section label="Postgres">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each postgresTriggers as postgresTriggers (postgresTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{postgresTriggers.path}</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => postgresTriggerEditor?.openEdit(postgresTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if postgresTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+		<TriggersEditorSection
+			on:applyArgs
+			on:saveTrigger={(e) => {
+				postgresTriggerEditor?.openNew(isFlow, path, e.detail.config)
+			}}
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="postgres"
+			{isFlow}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+		/>
+	</div>
+{/if}

package/package/components/triggers/postgres/PostgresTriggersPanel.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+        newItem?: boolean | undefined;
+        canHavePreprocessor?: boolean | undefined;
+        hasPreprocessor?: boolean | undefined;
+        isEditor?: boolean | undefined;
+        loadTriggers?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        applyArgs: any;
+        addPreprocessor: any;
+        updateSchema: any;
+        testWithArgs: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PostgresTriggersPanelProps = typeof __propDef.props;
+export type PostgresTriggersPanelEvents = typeof __propDef.events;
+export type PostgresTriggersPanelSlots = typeof __propDef.slots;
+export default class PostgresTriggersPanel extends SvelteComponent<PostgresTriggersPanelProps, PostgresTriggersPanelEvents, PostgresTriggersPanelSlots> {
+    get loadTriggers(): () => Promise<void>;
+}
+export {};

package/package/components/triggers/postgres/PublicationPicker.svelte

@@ -0,0 +1,129 @@
+<script>import Select from '../../apps/svelte-select/lib/Select.svelte';
+import { Button } from '../../common';
+import DarkModeObserver from '../../DarkModeObserver.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../../../defaults';
+import { PostgresTriggerService } from '../../../gen/services.gen';
+import { workspaceStore } from '../../../stores';
+import { sendUserToast } from '../../../toast';
+import { emptyString } from '../../../utils';
+import { RefreshCw } from 'lucide-svelte';
+export let items = [];
+export let can_write = true;
+export let publication_name = '';
+export let postgres_resource_path = '';
+export let relations = [];
+export let transaction_to_track = [];
+export let selectedTable = 'specific';
+async function listDatabasePublication() {
+    try {
+        const publications = await PostgresTriggerService.listPostgresPublication({
+            path: postgres_resource_path,
+            workspace: $workspaceStore
+        });
+        items = publications;
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+}
+async function updatePublication() {
+    try {
+        const message = await PostgresTriggerService.updatePostgresPublication({
+            path: postgres_resource_path,
+            workspace: $workspaceStore,
+            publication: publication_name,
+            requestBody: {
+                table_to_track: relations,
+                transaction_to_track: transaction_to_track
+            }
+        });
+        sendUserToast(message);
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+}
+async function deletePublication() {
+    try {
+        const message = await PostgresTriggerService.deletePostgresPublication({
+            path: postgres_resource_path,
+            workspace: $workspaceStore,
+            publication: publication_name
+        });
+        items = items.filter((item) => item != publication_name);
+        relations = [];
+        transaction_to_track = ['Insert', 'Update', 'Delete'];
+        publication_name = '';
+        sendUserToast(message);
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+}
+async function getAllRelations() {
+    try {
+        const publication_data = await PostgresTriggerService.getPostgresPublication({
+            path: postgres_resource_path,
+            workspace: $workspaceStore,
+            publication: publication_name
+        });
+        transaction_to_track = [...publication_data.transaction_to_track];
+        relations = publication_data.table_to_track ?? [];
+        if (relations.length === 0) {
+            selectedTable = 'all';
+        }
+        else {
+            selectedTable = 'specific';
+        }
+        selectedTable = selectedTable;
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+}
+listDatabasePublication();
+let darkMode = false;
+$: publication_name && getAllRelations();
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div class="flex gap-1">
+	<Select
+		disabled={!can_write}
+		class="grow shrink max-w-full"
+		bind:justValue={publication_name}
+		value={publication_name}
+		{items}
+		placeholder="Choose a publication"
+		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+		containerStyles={darkMode
+			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		portal={false}
+		on:select={getAllRelations}
+	/>
+	<Button
+		disabled={!can_write}
+		variant="border"
+		color="light"
+		wrapperClasses="self-stretch"
+		on:click={listDatabasePublication}
+		startIcon={{ icon: RefreshCw }}
+		iconOnly
+	/>
+	<Button
+		color="light"
+		size="xs"
+		variant="border"
+		disabled={emptyString(publication_name) || !can_write}
+		on:click={updatePublication}>Update</Button
+	>
+	<Button
+		color="light"
+		size="xs"
+		variant="border"
+		disabled={emptyString(publication_name) || !can_write}
+		on:click={deletePublication}>Delete</Button
+	>
+</div>

package/package/components/triggers/postgres/PublicationPicker.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Relations } from '../../../gen';
+declare const __propDef: {
+    props: {
+        items?: string[] | undefined;
+        can_write?: boolean | undefined;
+        publication_name?: string | undefined;
+        postgres_resource_path?: string | undefined;
+        relations?: Relations[] | undefined;
+        transaction_to_track?: string[] | undefined;
+        selectedTable?: "all" | "specific" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PublicationPickerProps = typeof __propDef.props;
+export type PublicationPickerEvents = typeof __propDef.events;
+export type PublicationPickerSlots = typeof __propDef.slots;
+export default class PublicationPicker extends SvelteComponent<PublicationPickerProps, PublicationPickerEvents, PublicationPickerSlots> {
+}
+export {};

package/package/components/triggers/postgres/RelationPicker.svelte

@@ -0,0 +1,266 @@
+<script>import { Button } from '../../common';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { Plus, Trash, X } from 'lucide-svelte';
+import MultiSelect from 'svelte-multiselect';
+import { invalidRelations } from './utils';
+import AddPropertyFormV2 from '../../schema/AddPropertyFormV2.svelte';
+import Label from '../../Label.svelte';
+import { emptyStringTrimmed, sendUserToast } from '../../../utils';
+export let relations = [];
+export let selectedTable;
+export let can_write = true;
+let cached = relations;
+const defaultRelations = [
+    {
+        schema_name: 'public',
+        table_to_track: []
+    }
+];
+function addTable(name, index) {
+    if (relations == undefined || !Array.isArray(relations)) {
+        relations = [];
+        relations = relations.concat({
+            schema_name: 'public',
+            table_to_track: []
+        });
+    }
+    relations[index].table_to_track = relations[index].table_to_track.concat({
+        table_name: name,
+        columns_name: []
+    });
+}
+</script>
+
+<div class="flex flex-col gap-4 h-full">
+	<div class="grow-0 flex flex-row gap-2 w-full items-center">
+		<div class="grow-0">
+			<ToggleButtonGroup
+				on:selected={({ detail }) => {
+					if (detail === 'all') {
+						cached = relations
+						relations = []
+					} else {
+						if (cached.length === 0) {
+							relations = defaultRelations
+						} else {
+							relations = cached
+						}
+					}
+					selectedTable = detail
+				}}
+				selected={selectedTable}
+				let:item
+			>
+				<ToggleButton value="all" label="All Tables" light {item} />
+				<ToggleButton value="specific" label="Specific Tables" light {item} />
+			</ToggleButtonGroup>
+		</div>
+	</div>
+	{#if selectedTable !== 'all'}
+		{#if relations && relations.length > 0}
+			<div class="flex flex-col gap-4 grow min-h-0 overflow-y-auto">
+				{#each relations as v, i}
+					<div class="flex w-full gap-3 items-center">
+						<div class="w-full flex flex-col gap-2 border py-2 px-4 rounded-md">
+							<Label label="Schema Name" required class="w-full">
+								<svelte:fragment slot="header">
+									<Tooltip small>
+										<p>
+											Enter the name of the <strong>schema</strong> that contains the table(s) you
+											want to track.
+											<br />If no tables are added, all tables within the <strong>schema</strong> will
+											be tracked for the selected transactions (insert, update, delete).
+										</p>
+									</Tooltip>
+								</svelte:fragment>
+
+								<input class="mt-1" type="text" bind:value={v.schema_name} />
+							</Label>
+							<div class="flex flex-col w-full gap-4 items-center p-5">
+								{#each v.table_to_track as table_to_track, j}
+									<div
+										class="relative rounded bg-surface-disabled p-2 flex w-full flex-col gap-4 group"
+									>
+										<Label label="Table Name" required>
+											<svelte:fragment slot="header">
+												<Tooltip small>Enter the name of the table you want to track.</Tooltip>
+											</svelte:fragment>
+											<input
+												type="text"
+												bind:value={table_to_track.table_name}
+												class="!bg-surface mt-1"
+											/>
+										</Label>
+										<!-- svelte-ignore a11y-label-has-associated-control -->
+										<Label label="Columns">
+											<svelte:fragment slot="header">
+												<Tooltip
+													documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#selecting-specific-columns"
+													small
+												>
+													<p>
+														Enter the names of the <strong>columns</strong> you want to track.
+														<br />If no columns are specified, all columns in the table will be
+														tracked for the selected transactions (insert, update, delete).
+													</p>
+													<p class="text-xs text-gray-500 mt-1">
+														<strong class="font-semibold">Note:</strong>
+														<br />- If your trigger contains <strong>UPDATE</strong> or
+														<strong>DELETE</strong>
+														transactions, the row filter WHERE clause must contain only columns covered
+														by the <strong>replica identity</strong> (see REPLICA IDENTITY).
+														<br />- If your trigger contains only <strong>INSERT</strong> transactions,
+														the row filter WHERE clause can use any column.
+													</p>
+												</Tooltip>
+											</svelte:fragment>
+											<div class="mt-1">
+												<MultiSelect
+													options={table_to_track.columns_name ?? []}
+													allowUserOptions="append"
+													bind:selected={table_to_track.columns_name}
+													ulOptionsClass={'!bg-surface !text-sm'}
+													ulSelectedClass="!text-sm"
+													outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
+													noMatchingOptionsMsg=""
+													createOptionMsg={null}
+													duplicates={false}
+													placeholder="Select columns"
+													--sms-options-margin="4px"
+												>
+													<svelte:fragment slot="remove-icon">
+														<div class="hover:text-primary p-0.5">
+															<X size={12} />
+														</div>
+													</svelte:fragment>
+												</MultiSelect>
+											</div>
+										</Label>
+										<Label label="Where Clause">
+											<svelte:fragment slot="header">
+												<Tooltip
+													documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#filtering-rows-with-where-condition"
+													small
+												>
+													<p class="text-sm">
+														Use this field to define a row filter for the selected table. The <strong
+															>WHERE</strong
+														> clause allows only simple expressions and cannot include user-defined functions,
+														operators, types, collations, system column references, or non-immutable
+														built-in functions.
+													</p>
+													<p class="text-xs text-gray-500 mt-1">
+														<strong class="font-semibold">Note:</strong>
+														<br />- If your trigger contains <strong>UPDATE</strong> or
+														<strong>DELETE</strong>
+														transactions, the row filter WHERE clause must contain only columns covered
+														by the <strong>replica identity</strong> (see REPLICA IDENTITY).
+														<br />- If your trigger contains only <strong>INSERT</strong> transactions,
+														the row filter WHERE clause can use any column.
+													</p>
+												</Tooltip>
+											</svelte:fragment>
+											<input
+												type="text"
+												bind:value={table_to_track.where_clause}
+												class="!bg-surface mt-1"
+											/>
+										</Label>
+										<Button
+											variant="border"
+											wrapperClasses="absolute -top-3 -right-3"
+											btnClasses="hidden group-hover:block hover:bg-red-500 hover:text-white p-2 rounded-full hover:border-red-500 transition-all duration-300"
+											color="light"
+											size="xs"
+											on:click={() => {
+												v.table_to_track = v.table_to_track.filter((_, index) => index !== j)
+											}}
+											iconOnly
+											startIcon={{ icon: Trash }}
+										/>
+									</div>
+								{/each}
+								<AddPropertyFormV2
+									customName="Table"
+									on:add={({ detail }) => {
+										addTable(detail.name, i)
+									}}
+								>
+									<svelte:fragment slot="trigger">
+										<Button
+											wrapperClasses="w-full border border-dashed rounded-md"
+											color="light"
+											size="xs"
+											startIcon={{ icon: Plus }}
+											nonCaptureEvent
+										>
+											Add table
+										</Button>
+									</svelte:fragment>
+								</AddPropertyFormV2>
+							</div>
+						</div>
+
+						<Button
+							variant="border"
+							color="light"
+							size="xs"
+							btnClasses="bg-surface-secondary hover:bg-red-500 hover:text-white p-2 rounded-full"
+							aria-label="Clear"
+							on:click={() => {
+								relations = relations.filter((_, index) => index !== i)
+							}}
+						>
+							<Trash size={14} />
+						</Button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+		<div class="grow min-w-0 pr-10">
+			<AddPropertyFormV2
+				customName="Schema"
+				on:add={({ detail }) => {
+					if (relations == undefined || !Array.isArray(relations)) {
+						relations = []
+						relations = relations.concat({
+							schema_name: 'public',
+							table_to_track: []
+						})
+					} else if (emptyStringTrimmed(detail.name)) {
+						sendUserToast('Schema name must not be empty', true)
+					} else {
+						const appendedRelations = relations.concat({
+							schema_name: detail.name,
+							table_to_track: []
+						})
+						if (
+							invalidRelations(appendedRelations, {
+								showError: true,
+								trackSchemaTableError: false
+							}) === false
+						) {
+							relations = appendedRelations
+						}
+					}
+				}}
+			>
+				<svelte:fragment slot="trigger">
+					<Button
+						variant="border"
+						color="light"
+						size="xs"
+						btnClasses="w-full"
+						disabled={!can_write}
+						startIcon={{ icon: Plus }}
+						nonCaptureEvent
+					>
+						Add schema
+					</Button>
+				</svelte:fragment>
+			</AddPropertyFormV2>
+		</div>
+	{/if}
+</div>

package/package/components/triggers/postgres/RelationPicker.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Relations } from '../../../gen';
+declare const __propDef: {
+    props: {
+        relations?: Relations[] | undefined;
+        selectedTable: 'all' | 'specific';
+        can_write?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RelationPickerProps = typeof __propDef.props;
+export type RelationPickerEvents = typeof __propDef.events;
+export type RelationPickerSlots = typeof __propDef.slots;
+export default class RelationPicker extends SvelteComponent<RelationPickerProps, RelationPickerEvents, RelationPickerSlots> {
+}
+export {};

package/package/components/triggers/postgres/SlotPicker.svelte

@@ -0,0 +1,92 @@
+<script>import Select from '../../apps/svelte-select/lib/Select.svelte';
+import { Button } from '../../common';
+import DarkModeObserver from '../../DarkModeObserver.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../../../defaults';
+import { PostgresTriggerService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { sendUserToast } from '../../../toast';
+import { emptyString } from '../../../utils';
+import { RefreshCw } from 'lucide-svelte';
+export let edit;
+export let replication_slot_name = '';
+export let postgres_resource_path = '';
+let items = [];
+async function listDatabaseSlot() {
+    try {
+        const result = await PostgresTriggerService.listPostgresReplicationSlot({
+            path: postgres_resource_path,
+            workspace: $workspaceStore
+        });
+        let exist = false;
+        items = result
+            .map((slot) => {
+            if (replication_slot_name && replication_slot_name === slot.slot_name) {
+                exist = true;
+            }
+            if (!emptyString(slot.slot_name) && !slot.active) {
+                return slot.slot_name;
+            }
+        })
+            .filter((slot) => slot != undefined);
+        if (edit && replication_slot_name) {
+            if (!exist) {
+                sendUserToast(`Replication ${replication_slot_name} does not exist`, true);
+            }
+        }
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+}
+async function deleteSlot() {
+    try {
+        const message = await PostgresTriggerService.deletePostgresReplicationSlot({
+            path: postgres_resource_path,
+            workspace: $workspaceStore,
+            requestBody: {
+                name: replication_slot_name
+            }
+        });
+        items = items.filter((item) => item != replication_slot_name);
+        replication_slot_name = '';
+        sendUserToast(message);
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+}
+listDatabaseSlot();
+let darkMode = false;
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div class="flex gap-1">
+	<Select
+		class="grow shrink max-w-full"
+		bind:justValue={replication_slot_name}
+		value={replication_slot_name}
+		{items}
+		placeholder="Choose a slot name"
+		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+		containerStyles={darkMode
+			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		portal={false}
+	/>
+	<Button
+		variant="border"
+		color="light"
+		wrapperClasses="self-stretch"
+		on:click={listDatabaseSlot}
+		startIcon={{ icon: RefreshCw }}
+		iconOnly
+	/>
+	<Button
+		color="light"
+		size="xs"
+		variant="border"
+		disabled={emptyString(replication_slot_name)}
+		on:click={deleteSlot}>Delete</Button
+	>
+</div>

package/package/components/triggers/postgres/SlotPicker.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        edit: boolean;
+        replication_slot_name?: string | undefined;
+        postgres_resource_path?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlotPickerProps = typeof __propDef.props;
+export type SlotPickerEvents = typeof __propDef.events;
+export type SlotPickerSlots = typeof __propDef.slots;
+export default class SlotPicker extends SvelteComponent<SlotPickerProps, SlotPickerEvents, SlotPickerSlots> {
+}
+export {};