windmill-components 1.448.50 → 1.472.2

package/package/components/triggers/{WebsocketTriggersPanel.svelte → websocket/WebsocketTriggersPanel.svelte}

@@ -1,14 +1,13 @@
-<script>import { userStore, workspaceStore } from '../../stores';
-import { WebsocketTriggerService } from '../../gen';
-import Skeleton from '../common/skeleton/Skeleton.svelte';
-import { canWrite } from '../../utils';
-import Alert from '../common/alert/Alert.svelte';
+<script>import { userStore, workspaceStore } from '../../../stores';
+import { WebsocketTriggerService } from '../../../gen';
+import { canWrite } from '../../../utils';
 import { getContext, onMount } from 'svelte';
 import WebsocketTriggerEditor from './WebsocketTriggerEditor.svelte';
-import { isCloudHosted } from '../../cloud';
-import TriggersEditorSection from './TriggersEditorSection.svelte';
-import Section from '../Section.svelte';
-import Description from '../Description.svelte';
+import { isCloudHosted } from '../../../cloud';
+import Section from '../../Section.svelte';
+import { Alert } from '../../common';
+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 wsTriggerEditor;
+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 ?? {}), websocket_count: wsTriggers?.length };
+        openForm = wsTriggers?.length === 0 || dontCloseOnLoad;
     }
     catch (e) {
         console.error('impossible to load WS triggers', e);
@@ -53,14 +55,44 @@ export async function loadTriggers() {
 
 {#if isCloudHosted()}
 	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-		Websocket triggers are disabled in the multi-tenant cloud.
+		WebSocket 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/websocket_triggers">
-			Websocket triggers allow real-time bidirectional communication between your scripts/flows and
-			external systems. Each trigger creates a unique websocket endpoint.
+			WebSocket triggers allow real-time bidirectional communication between your scripts/flows and
+			external systems. Each trigger creates a unique WebSocket endpoint.
 		</Description>
+
+		{#if !newItem && wsTriggers && wsTriggers.length > 0}
+			<Section label="WebSockets">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each wsTriggers as wsTriggers (wsTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{wsTriggers.path}</div>
+								<div class="col-span-2 truncate">
+									{wsTriggers.url}
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if wsTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+
 		<TriggersEditorSection
 			on:applyArgs
 			on:saveTrigger={(e) => {
@@ -77,43 +109,7 @@ export async function loadTriggers() {
 			{canHavePreprocessor}
 			{hasPreprocessor}
 			{newItem}
+			{openForm}
 		/>
-
-		{#if !newItem}
-			<Section label="Websockets">
-				<div class="flex flex-col gap-4">
-					{#if wsTriggers}
-						{#if wsTriggers.length == 0}
-							<div class="text-xs text-secondary text-center"> No WS triggers </div>
-						{:else}
-							<div class="flex flex-col divide-y pt-2">
-								{#each wsTriggers as wsTriggers (wsTriggers.path)}
-									<div class="grid grid-cols-5 text-2xs items-center py-2">
-										<div class="col-span-2 truncate">{wsTriggers.path}</div>
-										<div class="col-span-2 truncate">
-											{wsTriggers.url}
-										</div>
-										<div class="flex justify-end">
-											<button
-												on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
-												class="px-2"
-											>
-												{#if wsTriggers.canWrite}
-													Edit
-												{:else}
-													View
-												{/if}
-											</button>
-										</div>
-									</div>
-								{/each}
-							</div>
-						{/if}
-					{:else}
-						<Skeleton layout={[[8]]} />
-					{/if}
-				</div>
-			</Section>
-		{/if}
 	</div>
 {/if}

package/package/components/triggers.d.ts

@@ -18,5 +18,5 @@ export type TriggerContext = {
     showCaptureHint: Writable<boolean | undefined>;
 };
 export declare function setScheduledPollSchedule(primarySchedule: Writable<ScheduleTrigger | undefined | false>, triggersCount: Writable<TriggersCount | undefined>): void;
-export type TriggerKind = 'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll' | 'kafka' | 'nats';
+export type TriggerKind = 'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll' | 'kafka' | 'nats' | 'postgres' | 'sqs';
 export declare function captureTriggerKindToTriggerKind(kind: CaptureTriggerKind): TriggerKind;

package/package/components/triggers.js

@@ -29,6 +29,10 @@ export function captureTriggerKindToTriggerKind(kind) {
             return 'kafka';
         case 'nats':
             return 'nats';
+        case 'sqs':
+            return 'sqs';
+        case 'postgres':
+            return 'postgres';
         default:
             throw new Error(`Unknown CaptureTriggerKind: ${kind}`);
     }

package/package/components/tutorials/FlowBuilderTutorialErrorHandler.svelte

@@ -11,7 +11,7 @@ export function runTutorial() {
 
 <Tutorial
 	bind:this={tutorial}
-	index={0}
+	index={4}
 	name="error-handler"
 	tainted={false}
 	on:error

package/package/components/wizards/AgChartWizard.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
-import { Popup } from '../common';
+import Popover from '../meltComponents/Popover.svelte';
 import Label from '../Label.svelte';
 import { offset, flip, shift } from 'svelte-floating-ui/dom';
 import Button from '../common/button/Button.svelte';
@@ -18,36 +18,38 @@ function removeDataset() {
 }
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{
 		strategy: 'fixed',
 		placement: 'left-end',
 		middleware: [offset(8), flip(), shift()]
 	}}
-	containerClasses="border rounded-lg shadow-lg bg-surface p-4"
+	closeOnOtherPopoverOpen
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<slot name="trigger" />
 	</svelte:fragment>
-	{#if value}
-		<div class="flex flex-col w-96 p-2 gap-4">
-			<Label label="Name">
-				<input type="text" bind:value={value.name} />
-			</Label>
+	<svelte:fragment slot="content">
+		{#if value}
+			<div class="flex flex-col w-96 gap-4 p-4 max-h-[70vh] overflow-y-auto">
+				<Label label="Name">
+					<input type="text" bind:value={value.name} />
+				</Label>
 
-			<OneOfInputSpecsEditor
-				key={'Data'}
-				bind:oneOf={value.value}
-				id={$selectedComponent?.[0] ?? ''}
-				shouldCapitalize={true}
-				resourceOnly={false}
-				inputSpecsConfiguration={value.value?.['configuration']}
-				labels={value.value?.['labels']}
-				tooltip={value.value?.['tooltip']}
-				disabledOptions={isEE ? [] : ['range-bar', 'range-area']}
-			/>
+				<OneOfInputSpecsEditor
+					key={'Data'}
+					bind:oneOf={value.value}
+					id={$selectedComponent?.[0] ?? ''}
+					shouldCapitalize={true}
+					resourceOnly={false}
+					inputSpecsConfiguration={value.value?.['configuration']}
+					labels={value.value?.['labels']}
+					tooltip={value.value?.['tooltip']}
+					disabledOptions={isEE ? [] : ['range-bar', 'range-area']}
+				/>
 
-			<Button color="red" size="xs" on:click={removeDataset}>Remove dataset</Button>
-		</div>
-	{/if}
-</Popup>
+				<Button color="red" size="xs" on:click={removeDataset}>Remove dataset</Button>
+			</div>
+		{/if}
+	</svelte:fragment>
+</Popover>

package/package/components/wizards/AgGridWizard.svelte

@@ -1,9 +1,10 @@
-<script>import { Alert, Popup } from '../common';
+<script>import { Alert } from '../common';
 import Toggle from '../Toggle.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
 import Label from '../Label.svelte';
 import Tooltip from '../Tooltip.svelte';
 import Button from '../common/button/Button.svelte';
+import Popover from '../meltComponents/Popover.svelte';
 import { offset, flip, shift } from 'svelte-floating-ui/dom';
 export let value;
 const presets = [
@@ -62,162 +63,165 @@ $: if (value && value.cellRendererType === null) {
 }
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{
 		strategy: 'fixed',
 		placement: 'left-end',
 		middleware: [offset(8), flip(), shift()]
 	}}
-	containerClasses="border rounded-lg shadow-lg bg-surface p-4"
+	closeOnOtherPopoverOpen
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<slot name="trigger" />
 	</svelte:fragment>
-	{#if value}
-		<div class="flex flex-col w-96 p-2 gap-4">
-			<span class="text-sm mb-2 leading-6 font-semibold">
-				Column definitions
-				<Tooltip
-					documentationLink="https://www.ag-grid.com/javascript-data-grid/column-definitions/"
-				>
-					Column definitions are used to define columns in ag-Grid.
-				</Tooltip>
-			</span>
-
-			<Label label="Header name">
-				<input type="text" placeholder="Header name" bind:value={value.headerName} />
-			</Label>
-
-			<Label label="Editable value">
-				<Toggle
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-					}}
-					options={{ right: 'Editable' }}
-					bind:checked={value.editable}
-					size="xs"
-				/>
-			</Label>
-
-			<Label label="Min width (px)">
-				<input type="number" placeholder="width" bind:value={value.minWidth} />
-			</Label>
-
-			<Label label="Flex">
-				<svelte:fragment slot="header">
+	<svelte:fragment slot="content">
+		{#if value}
+			<div class="flex flex-col w-96 p-4 gap-4 max-h-[70vh] overflow-y-auto">
+				<span class="text-sm mb-2 leading-6 font-semibold">
+					Column definitions
 					<Tooltip
-						documentationLink="https://www.ag-grid.com/javascript-data-grid/column-sizing/#column-flex"
+						documentationLink="https://www.ag-grid.com/javascript-data-grid/column-definitions/"
 					>
-						It's often required that one or more columns fill the entire available space in the
-						grid. For this scenario, it is possible to use the flex config. Some columns could be
-						set with a regular width config, while other columns would have a flex config. Flex
-						sizing works by dividing the remaining space in the grid among all flex columns in
-						proportion to their flex value. For example, suppose the grid has a total width of 450px
-						and it has three columns: the first with width: 150; the second with flex: 1; and third
-						with flex: 2. The first column will be 150px wide, leaving 300px remaining. The column
-						with flex: 2 has twice the size with flex: 1. So final sizes will be: 150px, 100px,
-						200px.
+						Column definitions are used to define columns in ag-Grid.
 					</Tooltip>
-				</svelte:fragment>
-
-				<input type="range" step="1" bind:value={value.flex} min={1} max={12} />
-				<div class="text-xs">{value.flex}</div>
-			</Label>
+				</span>
 
-			<Label label="Hide">
-				<Toggle
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-					}}
-					options={{ right: 'Hide' }}
-					bind:checked={value.hide}
-					size="xs"
-				/>
-			</Label>
+				<Label label="Header name">
+					<input type="text" placeholder="Header name" bind:value={value.headerName} />
+				</Label>
 
-			<Label label="Value formatter">
-				<svelte:fragment slot="header">
-					<Tooltip
-						documentationLink="https://www.ag-grid.com/javascript-data-grid/value-formatters/"
-					>
-						Value formatters allow you to format values for display. This is useful when data is one
-						type (e.g. numeric) but needs to be converted for human reading (e.g. putting in
-						currency symbols and number formatting).
-					</Tooltip>
-				</svelte:fragment>
-				<svelte:fragment slot="action">
-					<Button
+				<Label label="Editable value">
+					<Toggle
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+						}}
+						options={{ right: 'Editable' }}
+						bind:checked={value.editable}
 						size="xs"
-						color="light"
-						variant="border"
-						on:click={() => {
-							// @ts-ignore
-							value.valueFormatter = null
-							renderCount++
+					/>
+				</Label>
+
+				<Label label="Min width (px)">
+					<input type="number" placeholder="width" bind:value={value.minWidth} />
+				</Label>
+
+				<Label label="Flex">
+					<svelte:fragment slot="header">
+						<Tooltip
+							documentationLink="https://www.ag-grid.com/javascript-data-grid/column-sizing/#column-flex"
+						>
+							It's often required that one or more columns fill the entire available space in the
+							grid. For this scenario, it is possible to use the flex config. Some columns could be
+							set with a regular width config, while other columns would have a flex config. Flex
+							sizing works by dividing the remaining space in the grid among all flex columns in
+							proportion to their flex value. For example, suppose the grid has a total width of
+							450px and it has three columns: the first with width: 150; the second with flex: 1;
+							and third with flex: 2. The first column will be 150px wide, leaving 300px remaining.
+							The column with flex: 2 has twice the size with flex: 1. So final sizes will be:
+							150px, 100px, 200px.
+						</Tooltip>
+					</svelte:fragment>
+
+					<input type="range" step="1" bind:value={value.flex} min={1} max={12} />
+					<div class="text-xs">{value.flex}</div>
+				</Label>
+
+				<Label label="Hide">
+					<Toggle
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
 						}}
-					>
-						Clear
-					</Button>
-				</svelte:fragment>
-			</Label>
-			<div>
-				{#key renderCount}
-					<div class="flex flex-col gap-4">
-						<div class="relative">
-							{#if !presets.find((preset) => preset.value === value?.valueFormatter)}
-								<div class="z-50 absolute bg-opacity-50 bg-surface top-0 left-0 bottom-0 right-0" />
-							{/if}
-							<div class="text-xs font-semibold">Presets</div>
-							<select
-								bind:value={value.valueFormatter}
-								on:change={() => {
-									renderCount++
-								}}
-								placeholder="Code"
-							>
-								{#each presets as preset}
-									<option value={preset.value}>{preset.label}</option>
-								{/each}
-							</select>
-						</div>
+						options={{ right: 'Hide' }}
+						bind:checked={value.hide}
+						size="xs"
+					/>
+				</Label>
 
-						<SimpleEditor
-							extraLib={'declare const value: any'}
-							autoHeight
-							lang="javascript"
-							bind:code={value.valueFormatter}
-						/>
-						<div class="text-xs text-secondary -mt-4">Use `value` in the formatter</div>
-					</div>
-				{/key}
-			</div>
+				<Label label="Value formatter">
+					<svelte:fragment slot="header">
+						<Tooltip
+							documentationLink="https://www.ag-grid.com/javascript-data-grid/value-formatters/"
+						>
+							Value formatters allow you to format values for display. This is useful when data is
+							one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in
+							currency symbols and number formatting).
+						</Tooltip>
+					</svelte:fragment>
+					<svelte:fragment slot="action">
+						<Button
+							size="xs"
+							color="light"
+							variant="border"
+							on:click={() => {
+								// @ts-ignore
+								value.valueFormatter = null
+								renderCount++
+							}}
+						>
+							Clear
+						</Button>
+					</svelte:fragment>
+				</Label>
+				<div>
+					{#key renderCount}
+						<div class="flex flex-col gap-4">
+							<div class="relative">
+								{#if !presets.find((preset) => preset.value === value?.valueFormatter)}
+									<div
+										class="z-50 absolute bg-opacity-50 bg-surface top-0 left-0 bottom-0 right-0"
+									/>
+								{/if}
+								<div class="text-xs font-semibold">Presets</div>
+								<select
+									bind:value={value.valueFormatter}
+									on:change={() => {
+										renderCount++
+									}}
+									placeholder="Code"
+								>
+									{#each presets as preset}
+										<option value={preset.value}>{preset.label}</option>
+									{/each}
+								</select>
+							</div>
+
+							<SimpleEditor
+								extraLib={'declare const value: any'}
+								autoHeight
+								lang="javascript"
+								bind:code={value.valueFormatter}
+							/>
+							<div class="text-xs text-secondary -mt-4">Use `value` in the formatter</div>
+						</div>
+					{/key}
+				</div>
 
-			<Label label="Sort">
-				<select bind:value={value.sort}>
-					<option value={null}>None</option>
-					<option value="asc">Ascending</option>
-					<option value="desc">Descending</option>
-				</select>
-			</Label>
+				<Label label="Sort">
+					<select bind:value={value.sort}>
+						<option value={null}>None</option>
+						<option value="asc">Ascending</option>
+						<option value="desc">Descending</option>
+					</select>
+				</Label>
 
-			<Label label="Filter">
-				<svelte:fragment slot="header">
-					<Tooltip documentationLink="https://www.ag-grid.com/javascript-data-grid/filtering/">
-						Filtering allows you to limit the rows displayed in your grid to those that match
-						criteria you specify.
-					</Tooltip>
-				</svelte:fragment>
-				<Toggle
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-					}}
-					options={{ right: 'Enable filter' }}
-					bind:checked={value.filter}
-					size="xs"
-				/>
-			</Label>
+				<Label label="Filter">
+					<svelte:fragment slot="header">
+						<Tooltip documentationLink="https://www.ag-grid.com/javascript-data-grid/filtering/">
+							Filtering allows you to limit the rows displayed in your grid to those that match
+							criteria you specify.
+						</Tooltip>
+					</svelte:fragment>
+					<Toggle
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+						}}
+						options={{ right: 'Enable filter' }}
+						bind:checked={value.filter}
+						size="xs"
+					/>
+				</Label>
 
-			<!--
+				<!--
 		EE only
 
 		<Label label="Aggregation function">
@@ -249,27 +253,28 @@ $: if (value && value.cellRendererType === null) {
 		</Label>
 		 -->
 
-			<Label label="Type">
-				<select bind:value={value.cellRendererType}>
-					<option value="text">Text</option>
-					<option value="link">Link</option>
-				</select>
-			</Label>
+				<Label label="Type">
+					<select bind:value={value.cellRendererType}>
+						<option value="text">Text</option>
+						<option value="link">Link</option>
+					</select>
+				</Label>
 
-			{#if value.cellRendererType === 'link'}
-				<Alert type="info" title="Label" size="xs">
-					They are two ways to define a link:
-					<ul class="list-disc list-inside">
-						<li>
-							<strong>String</strong>: The string will be used as the link and the label.
-						</li>
-						<li>
-							<strong>Object</strong>: The object must have a <code>href</code> and a
-							<code>label</code> property.
-						</li>
-					</ul>
-				</Alert>
-			{/if}
-		</div>
-	{/if}
-</Popup>
+				{#if value.cellRendererType === 'link'}
+					<Alert type="info" title="Label" size="xs">
+						They are two ways to define a link:
+						<ul class="list-disc list-inside">
+							<li>
+								<strong>String</strong>: The string will be used as the link and the label.
+							</li>
+							<li>
+								<strong>Object</strong>: The object must have a <code>href</code> and a
+								<code>label</code> property.
+							</li>
+						</ul>
+					</Alert>
+				{/if}
+			</div>
+		{/if}
+	</svelte:fragment>
+</Popover>