windmill-components 1.504.6 → 1.511.0

package/package/components/triggers/websocket/WebsocketTriggerEditorInner.svelte

@@ -17,7 +17,10 @@ import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
 import { untrack } from 'svelte';
 import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
 import { saveWebsocketTriggerFromCfg } from './utils';
-import { handleConfigChange } from '../utils';
+import { getHandlerType, handleConfigChange } from '../utils';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import Tab from '../../common/tabs/Tab.svelte';
+import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
 let { useDrawer = true, description = undefined, hideTarget = false, hideTooltips = false, isEditor = false, allowDraft = false, trigger = undefined, isDeployed = false, customLabel = undefined, onConfigChange = undefined, onCaptureConfigChange = undefined, onUpdate = undefined, onDelete = undefined, onReset = undefined, cloudDisabled = false } = $props();
 let drawer = $state();
 let is_flow = $state(false);
@@ -43,6 +46,11 @@ let showLoading = $state(false);
 let initialConfig = undefined;
 let deploymentLoading = $state(false);
 let isValid = $state(false);
+let optionTabSelected = $state('error_handler');
+let errorHandlerSelected = $state('slack');
+let error_handler_path = $state();
+let error_handler_args = $state({});
+let retry = $state();
 const websocketCfg = $derived.by(getSaveCfg);
 const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived.by(() => {
@@ -110,6 +118,10 @@ export async function openNew(nis_flow, fixedScriptPath_, defaultValues) {
         url_runnable_args = defaultValues?.url_runnable_args ?? {};
         dirtyPath = false;
         can_return_message = false;
+        error_handler_path = defaultValues?.error_handler_path ?? undefined;
+        error_handler_args = defaultValues?.error_handler_args ?? {};
+        retry = defaultValues?.retry ?? undefined;
+        errorHandlerSelected = getHandlerType(error_handler_path ?? '');
     }
     finally {
         clearTimeout(loadingTimeout);
@@ -129,6 +141,10 @@ function loadTriggerConfig(cfg) {
     url_runnable_args = cfg?.url_runnable_args;
     can_return_message = cfg?.can_return_message;
     can_write = canWrite(path, cfg?.extra_perms, $userStore);
+    error_handler_path = cfg?.error_handler_path;
+    error_handler_args = cfg?.error_handler_args ?? {};
+    retry = cfg?.retry;
+    errorHandlerSelected = getHandlerType(error_handler_path ?? '');
 }
 function getSaveCfg() {
     return {
@@ -141,7 +157,10 @@ function getSaveCfg() {
         initial_messages,
         url_runnable_args,
         can_return_message,
-        enabled
+        enabled,
+        error_handler_path,
+        error_handler_args,
+        retry
     };
 }
 async function loadTrigger(defaultConfig) {
@@ -243,14 +262,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'WebSocket trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsButtons()}
-		</svelte:fragment>
+		{/snippet}
 		{@render config()}
 	</Section>
 {/if}
@@ -593,6 +612,28 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+
+			<Section label="Advanced" collapsable>
+				<div class="flex flex-col gap-4">
+					<div class="min-h-96">
+						<Tabs bind:selected={optionTabSelected}>
+							<Tab value="error_handler">Error Handler</Tab>
+							<Tab value="retries">Retries</Tab>
+						</Tabs>
+						<div class="mt-4">
+							<TriggerRetriesAndErrorHandler
+								{optionTabSelected}
+								{itemKind}
+								{can_write}
+								bind:errorHandlerSelected
+								bind:error_handler_path
+								bind:error_handler_args
+								bind:retry
+							/>
+						</div>
+					</div>
+				</div>
+			</Section>
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/websocket/utils.js

@@ -2,6 +2,15 @@ import { WebsocketTriggerService } from '../../../gen';
 import { sendUserToast } from '../../../toast';
 import { get } from 'svelte/store';
 export async function saveWebsocketTriggerFromCfg(initialPath, triggerCfg, edit, workspace, usedTriggerKinds) {
+    const errorHandlerAndRetries = !triggerCfg.is_flow
+        ? {
+            error_handler_path: triggerCfg.error_handler_path,
+            error_handler_args: triggerCfg.error_handler_path
+                ? triggerCfg.error_handler_args
+                : undefined,
+            retry: triggerCfg.retry
+        }
+        : {};
     const requestBody = {
         path: triggerCfg.path,
         script_path: triggerCfg.script_path,
@@ -10,7 +19,8 @@ export async function saveWebsocketTriggerFromCfg(initialPath, triggerCfg, edit,
         filters: triggerCfg.filters,
         initial_messages: triggerCfg.initial_messages,
         url_runnable_args: triggerCfg.url_runnable_args,
-        can_return_message: triggerCfg.can_return_message
+        can_return_message: triggerCfg.can_return_message,
+        ...errorHandlerAndRetries
     };
     try {
         if (edit) {

package/package/components/workspaceSettings/AISettings.svelte

@@ -160,8 +160,6 @@ async function onAiProviderChange(provider) {
 					{#if aiProviders[provider]}
 						<div class="mb-4 flex flex-col gap-2">
 							<div class="flex flex-row gap-1">
-								<!-- this can be removed once the parent component moves to runes -->
-								<!-- svelte-ignore binding_property_non_reactive -->
 								<ResourcePicker
 									selectFirst
 									resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth

package/package/components/workspaceSettings/FilterList.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">import { Plus, X } from 'lucide-svelte';
+let { title = '', tooltip = undefined, items = $bindable([]), placeholder = 'Add filter (e.g. f/**)' } = $props();
+let newItem = $state('');
+let inputRef = $state(null);
+function addItem() {
+    const value = newItem.trim();
+    if (value && !items.includes(value)) {
+        items = [...items, value];
+        newItem = '';
+        inputRef?.focus();
+    }
+}
+function removeItem(idx) {
+    items = items.filter((_, i) => i !== idx);
+}
+</script>
+
+<div class="flex flex-col gap-1">
+	<div class="flex items-center gap-2 mb-1">
+		<h4 class="font-semibold text-sm">{title}</h4>
+		{#if tooltip}
+			{@render tooltip?.()}
+		{/if}
+	</div>
+
+	<div class="flex flex-wrap gap-2 items-center mb-1">
+		{#each items as item, idx (item)}
+			<span class="flex items-center bg-gray-100 rounded-full px-3 py-1 text-xs text-gray-700">
+				{item}
+				<button
+					class="ml-2 text-gray-400 hover:text-red-500 focus:outline-none"
+					onclick={() => removeItem(idx)}
+					aria-label="Remove filter"
+				>
+					<X size={14} />
+				</button>
+			</span>
+		{/each}
+
+		<input
+			bind:this={inputRef}
+			class="border border-gray-300 rounded-full px-3 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-primary"
+			{placeholder}
+			value={newItem}
+			oninput={(e) => (newItem = e.currentTarget.value)}
+			onkeydown={(e) => e.key === 'Enter' && (addItem(), e.preventDefault())}
+		/>
+		<button
+			class="ml-1 text-primary hover:bg-primary/10 rounded-full p-1"
+			onclick={addItem}
+			aria-label="Add filter"
+		>
+			<Plus size={14} />
+		</button>
+	</div>
+</div>

package/package/components/workspaceSettings/FilterList.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const FilterList: import("svelte").Component<{
+    title?: string;
+    tooltip?: any;
+    items?: string[];
+    placeholder?: string;
+}, {}, "items">;
+type FilterList = ReturnType<typeof FilterList>;
+export default FilterList;