windmill-components 1.448.50 → 1.472.2

package/package/components/triggers/{NatsTriggersPanel.svelte → nats/NatsTriggersPanel.svelte}

@@ -1,14 +1,13 @@
-<script>import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
-import { NatsTriggerService } from '../../gen';
-import { canWrite } from '../../utils';
-import Alert from '../common/alert/Alert.svelte';
+<script>import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { NatsTriggerService } from '../../../gen';
+import { canWrite } from '../../../utils';
 import { getContext, onMount } from 'svelte';
 import NatsTriggerEditor from './NatsTriggerEditor.svelte';
-import { isCloudHosted } from '../../cloud';
-import TriggersEditorSection from './TriggersEditorSection.svelte';
-import Section from '../Section.svelte';
-import Skeleton from '../common/skeleton/Skeleton.svelte';
-import Description from '../Description.svelte';
+import { isCloudHosted } from '../../../cloud';
+import Section from '../../Section.svelte';
+import Alert from '../../common/alert/Alert.svelte';
+import Description from '../../Description.svelte';
+import TriggersEditorSection from '../TriggersEditorSection.svelte';
 export let isFlow;
 export let path;
 export let newItem = false;
@@ -16,6 +15,8 @@ export let isEditor = false;
 export let canHavePreprocessor = false;
 export let hasPreprocessor = false;
 let natsTriggerEditor;
+let openForm = true;
+let dontCloseOnLoad = false;
 $: path && loadTriggers();
 const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
 onMount(() => {
@@ -37,6 +38,7 @@ export async function loadTriggers() {
             return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
         });
         $triggersCount = { ...($triggersCount ?? {}), nats_count: natsTriggers?.length };
+        openForm = natsTriggers?.length === 0 || dontCloseOnLoad;
     }
     catch (e) {
         console.error('impossible to load nats triggers', e);
@@ -71,6 +73,34 @@ function saveTrigger(path, args) {
 		<Description link="https://www.windmill.dev/docs/core_concepts/nats_triggers">
 			NATS triggers execute scripts and flows in response to messages published to NATS subjects.
 		</Description>
+
+		{#if !newItem && natsTriggers && natsTriggers.length > 0}
+			<Section label="NATS Triggers">
+				<div class="flex flex-col divide-y pt-2">
+					{#each natsTriggers as natsTrigger (natsTrigger.path)}
+						<div class="grid grid-cols-5 text-2xs items-center py-2">
+							<div class="col-span-2 truncate">{natsTrigger.path}</div>
+							<div class="col-span-2 truncate">
+								{natsTrigger.nats_resource_path}
+							</div>
+							<div class="flex justify-end">
+								<button
+									on:click={() => natsTriggerEditor?.openEdit(natsTrigger.path, isFlow)}
+									class="px-2"
+								>
+									{#if natsTrigger.canWrite}
+										Edit
+									{:else}
+										View
+									{/if}
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</Section>
+		{/if}
+
 		<TriggersEditorSection
 			on:saveTrigger={(e) => {
 				saveTrigger(path, e.detail.config)
@@ -86,41 +116,8 @@ function saveTrigger(path, args) {
 			{canHavePreprocessor}
 			{hasPreprocessor}
 			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
 		/>
-
-		{#if !newItem}
-			{#if natsTriggers}
-				<Section label="NATS Triggers">
-					{#if natsTriggers.length == 0}
-						<div class="text-xs text-secondary text-center"> No nats triggers </div>
-					{:else}
-						<div class="flex flex-col divide-y pt-2">
-							{#each natsTriggers as natsTrigger (natsTrigger.path)}
-								<div class="grid grid-cols-5 text-2xs items-center py-2">
-									<div class="col-span-2 truncate">{natsTrigger.path}</div>
-									<div class="col-span-2 truncate">
-										{natsTrigger.nats_resource_path}
-									</div>
-									<div class="flex justify-end">
-										<button
-											on:click={() => natsTriggerEditor?.openEdit(natsTrigger.path, isFlow)}
-											class="px-2"
-										>
-											{#if natsTrigger.canWrite}
-												Edit
-											{:else}
-												View
-											{/if}
-										</button>
-									</div>
-								</div>
-							{/each}
-						</div>
-					{/if}
-				</Section>
-			{:else}
-				<Skeleton layout={[[8]]} />
-			{/if}
-		{/if}
 	</div>
 {/if}

package/package/components/triggers/postgres/CheckPostgresRequirement.svelte

@@ -0,0 +1,71 @@
+<script>import { Button } from '../../common';
+import Tooltip from '../../Tooltip.svelte';
+import { PostgresTriggerService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { sendUserToast } from '../../../toast';
+import { emptyString } from '../../../utils';
+let loadingConfiguration = false;
+const checkDatabaseConfiguration = async () => {
+    if (emptyString(postgres_resource_path)) {
+        sendUserToast('You must first pick a database resource', true);
+        return;
+    }
+    try {
+        const invalidConfig = !(await PostgresTriggerService.isValidPostgresConfiguration({
+            workspace: $workspaceStore,
+            path: postgres_resource_path
+        }));
+        let msg = 'Database is in logical mode. Triggers can be used.';
+        if (invalidConfig) {
+            msg =
+                'Database is NOT in logical mode. Triggers cannot be used. Refer to the PostgreSQL documentation for configuration requirements.';
+        }
+        sendUserToast(msg, invalidConfig);
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+    loadingConfiguration = false;
+};
+const checkConnectionAndDatabaseConfiguration = async () => {
+    try {
+        loadingConfiguration = true;
+        if (checkConnection) {
+            await checkConnection();
+        }
+        await checkDatabaseConfiguration();
+    }
+    catch (error) {
+        sendUserToast(error.body, true);
+    }
+    loadingConfiguration = false;
+};
+export let can_write;
+export let postgres_resource_path;
+export let checkConnection = undefined;
+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={checkConnectionAndDatabaseConfiguration}
+			size="xs"
+			color="light"
+			spacingSize="sm"
+			variant="border"
+		>
+			{`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>
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        can_write: boolean;
+        postgres_resource_path: string;
+        checkConnection?: any | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckPostgresRequirementProps = typeof __propDef.props;
+export type CheckPostgresRequirementEvents = typeof __propDef.events;
+export type CheckPostgresRequirementSlots = typeof __propDef.slots;
+export default class CheckPostgresRequirement extends SvelteComponent<CheckPostgresRequirementProps, CheckPostgresRequirementEvents, CheckPostgresRequirementSlots> {
+}
+export {};

package/package/components/triggers/postgres/PostgresEditorConfigSection.svelte

@@ -0,0 +1,152 @@
+<script>import ResourcePicker from '../../ResourcePicker.svelte';
+import Section from '../../Section.svelte';
+import Label from '../../Label.svelte';
+import CaptureSection, {} from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
+import TestTriggerConnection from '../TestTriggerConnection.svelte';
+import Required from '../../Required.svelte';
+import MultiSelect from 'svelte-multiselect';
+import RelationPicker from './RelationPicker.svelte';
+import { emptyString } from '../../../utils';
+import CheckPostgresRequirement from './CheckPostgresRequirement.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { X } from 'lucide-svelte';
+const DEFAULT_PUBLICATION = {
+    transaction_to_track: ['Insert', 'Update', 'Delete'],
+    table_to_track: [
+        {
+            schema_name: 'public',
+            table_to_track: []
+        }
+    ]
+};
+let transactionType = ['Insert', 'Update', 'Delete'];
+export let headless = false;
+export let can_write = false;
+export let showCapture = false;
+export let captureTable = undefined;
+export let captureInfo = undefined;
+export let isValid = false;
+export let postgres_resource_path = '';
+export let publication = {
+    transaction_to_track: ['Insert', 'Update', 'Delete'],
+    table_to_track: [
+        {
+            schema_name: 'public',
+            table_to_track: []
+        }
+    ]
+};
+let selectedTable = 'all';
+function updateConfig(publication) {
+    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));
+}
+$: updateConfig(publication);
+let testTriggerConnection = undefined;
+</script>
+
+<div class="h-full">
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			disabled={!isValid}
+			on:captureToggle
+			captureType="postgres"
+			{captureInfo}
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		/>
+	{/if}
+	<Section label="Postgres config" {headless}>
+		<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} />
+				</p>
+				<ResourcePicker
+					disabled={!can_write}
+					bind:value={postgres_resource_path}
+					resourceType={'postgresql'}
+					on:change={() => {
+						if (emptyString(postgres_resource_path)) {
+							selectedTable = 'specific'
+							publication = { ...DEFAULT_PUBLICATION }
+						}
+					}}
+				/>
+				{#if postgres_resource_path}
+					<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}
+				<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
+						noMatchingOptionsMsg=""
+						createOptionMsg={null}
+						duplicates={false}
+						options={transactionType}
+						allowUserOptions="append"
+						bind:selected={publication.transaction_to_track}
+						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 documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#define-what-to-track" 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} />
+				</Label>
+			{/if}
+		</div>
+	</Section>
+</div>

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

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+import { type CaptureInfo } from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
+import type { PublicationData } from '../../../gen';
+declare const __propDef: {
+    props: {
+        headless?: boolean | undefined;
+        can_write?: boolean | undefined;
+        showCapture?: boolean | undefined;
+        captureTable?: CaptureTable | undefined;
+        captureInfo?: CaptureInfo | undefined;
+        isValid?: boolean | undefined;
+        postgres_resource_path?: string | undefined;
+        publication?: PublicationData | undefined;
+    };
+    events: {
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
+        applyArgs: CustomEvent<{
+            kind: "preprocessor" | "main";
+            args: Record<string, any> | undefined;
+        }>;
+        updateSchema: CustomEvent<{
+            payloadData: Record<string, any>;
+            redirect: boolean;
+        }>;
+        addPreprocessor: CustomEvent<null>;
+        testWithArgs: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PostgresEditorConfigSectionProps = typeof __propDef.props;
+export type PostgresEditorConfigSectionEvents = typeof __propDef.events;
+export type PostgresEditorConfigSectionSlots = typeof __propDef.slots;
+export default class PostgresEditorConfigSection extends SvelteComponent<PostgresEditorConfigSectionProps, PostgresEditorConfigSectionEvents, PostgresEditorConfigSectionSlots> {
+}
+export {};

package/package/components/triggers/postgres/PostgresTriggerEditor.svelte

@@ -0,0 +1,19 @@
+<script>import { tick } from 'svelte';
+import PostgresTriggerEditorInner from './PostgresTriggerEditorInner.svelte';
+let open = false;
+export async function openEdit(ePath, isFlow) {
+    open = true;
+    await tick();
+    drawer?.openEdit(ePath, isFlow);
+}
+export async function openNew(is_flow, initial_script_path, defaultValues) {
+    open = true;
+    await tick();
+    drawer?.openNew(is_flow, initial_script_path, defaultValues);
+}
+let drawer;
+</script>
+
+{#if open}
+	<PostgresTriggerEditorInner on:update bind:this={drawer} />
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
+        openNew?: ((is_flow: boolean, initial_script_path?: string, defaultValues?: Record<string, any>) => Promise<void>) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PostgresTriggerEditorProps = typeof __propDef.props;
+export type PostgresTriggerEditorEvents = typeof __propDef.events;
+export type PostgresTriggerEditorSlots = typeof __propDef.slots;
+export default class PostgresTriggerEditor extends SvelteComponent<PostgresTriggerEditorProps, PostgresTriggerEditorEvents, PostgresTriggerEditorSlots> {
+    get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
+    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined, defaultValues?: Record<string, any> | undefined) => Promise<void>;
+}
+export {};