windmill-components 1.665.1 → 1.677.0

package/package/components/sidebar/OperatorMenu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog, GraduationCap, Table2 } from 'lucide-svelte';
 import { base } from '../../base';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
-import { clearWorkspaceFromStorage, enterpriseLicense, superadmin, userWorkspaces, workspaceStore, tutorialsToDo, skippedAll } from '../../stores';
+import { Plus } from 'lucide-svelte';
+import { clearWorkspaceFromStorage, enterpriseLicense, superadmin, usedTriggerKinds, userWorkspaces, workspaceStore, tutorialsToDo, skippedAll } from '../../stores';
 import { twMerge } from 'tailwind-merge';
 import { USER_SETTINGS_HASH } from './settings';
 import { logout } from '../../logoutKit';
@@ -10,8 +11,9 @@ import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Menu, Menubar, MenuItem } from '../meltComponents';
 import MenuButton, { sidebarClasses } from './MenuButton.svelte';
 import MenuLink from './MenuLink.svelte';
-import ResizeTransitionWrapper from '../common/ResizeTransitionWrapper.svelte';
 let darkMode = $state(false);
+let showExtraTriggers = $state(false);
+let menubarEl = $state();
 let { isCollapsed = false, favoriteLinks = [] } = $props();
 let mainMenuLinks = $derived([
     { label: 'Home', id: 'home', href: `${base}/`, icon: Home },
@@ -70,232 +72,248 @@ let secondMenuLinks = $derived([
         label: 'Workers',
         id: 'workers',
         href: `${base}/workers`
+    },
+    {
+        label: 'Audit logs',
+        id: 'audit_logs',
+        href: `${base}/audit_logs`
     }
 ].filter(filterLink));
-let secondMenuTriggerLinks = $derived([
-    {
-        label: 'Custom HTTP routes',
-        id: 'triggers',
-        href: `${base}/routes`
-    },
+let allTriggerLinks = $derived([
+    { label: 'Custom HTTP routes', id: 'triggers', href: `${base}/routes`, kind: 'http' },
     {
         label: 'Websocket triggers',
         id: 'triggers',
-        href: `${base}/websocket_triggers`
+        href: `${base}/websocket_triggers`,
+        kind: 'ws'
     },
     {
         label: 'Postgres triggers',
         id: 'triggers',
-        href: `${base}/postgres_triggers`
-    },
-    {
-        label: 'Kafka triggers',
-        id: 'triggers',
-        href: `${base}/kafka_triggers`
-    },
-    {
-        label: 'NATS triggers',
-        id: 'triggers',
-        href: `${base}/nats_triggers`
-    },
-    {
-        label: 'SQS triggers',
-        id: 'triggers',
-        href: `${base}/sqs_triggers`
+        href: `${base}/postgres_triggers`,
+        kind: 'postgres'
     },
+    { label: 'Kafka triggers', id: 'triggers', href: `${base}/kafka_triggers`, kind: 'kafka' },
+    { label: 'NATS triggers', id: 'triggers', href: `${base}/nats_triggers`, kind: 'nats' },
+    { label: 'SQS triggers', id: 'triggers', href: `${base}/sqs_triggers`, kind: 'sqs' },
     {
         label: 'GCP Pub/Sub triggers',
         id: 'triggers',
-        href: `${base}/gcp_triggers`
-    },
-    {
-        label: 'MQTT triggers',
-        id: 'triggers',
-        href: `${base}/mqtt_triggers`
+        href: `${base}/gcp_triggers`,
+        kind: 'gcp'
     },
-    {
-        label: 'Email triggers',
-        id: 'triggers',
-        href: `${base}/email_triggers`
-    },
-    {
-        label: 'Audit logs',
-        id: 'audit_logs',
-        href: `${base}/audit_logs`
-    }
+    { label: 'MQTT triggers', id: 'triggers', href: `${base}/mqtt_triggers`, kind: 'mqtt' },
+    { label: 'Email triggers', id: 'triggers', href: `${base}/email_triggers`, kind: 'email' }
 ].filter(filterLink));
-let showMore = $state(false);
+let secondMenuTriggerLinks = $derived(allTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind)));
+let extraTriggerLinks = $derived(allTriggerLinks.filter((link) => !$usedTriggerKinds.includes(link.kind)));
 </script>
 
-<Menubar>
-	{#snippet children({ createMenu })}
-		<Menu {createMenu} usePointerDownOutside on:close={() => (showMore = false)}>
-			{#snippet triggr({ trigger })}
-				<MenuButton
-					class="!text-xs"
-					icon={MenuIcon}
-					{isCollapsed}
-					lightMode
-					label={undefined}
-					{trigger}
-				/>
-			{/snippet}
-			{#snippet children({ item })}
-				<div class="w-full max-w-full">
-					{#each favoriteLinks ?? [] as favorite (favorite.href)}
-						<MenuItem
-							href={favorite.href}
-							{item}
-							class={twMerge(
-								'w-full inline-flex flex-row px-2 py-2 hover:bg-surface-hover',
-								'data-[highlighted]:bg-surface-hover'
-							)}
-						>
-							<span class="center-center">
-								{#if favorite.kind == 'script'}
-									<Code2 size={16} />
-								{:else if favorite.kind == 'flow'}
-									<BarsStaggered size={16} />
-								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
-									<LayoutDashboard size={16} />
-								{:else if favorite.kind == 'asset'}
-									<Table2 size={16} />
-								{/if}
-							</span>
-							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
-								{favorite.label}
-							</span>
-						</MenuItem>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={menubarEl}
+	onmouseenter={() => {
+		const btn = menubarEl?.querySelector('[data-melt-menubar-trigger]')
+		if (btn instanceof HTMLElement) btn.click()
+	}}
+>
+	<Menubar>
+		{#snippet children({ createMenu })}
+			<Menu {createMenu} usePointerDownOutside on:close={() => (showExtraTriggers = false)}>
+				{#snippet triggr({ trigger })}
+					<MenuButton
+						class="!text-xs bg-surface !pl-3.5 !pr-2 !w-auto"
+						icon={MenuIcon}
+						isCollapsed={false}
+						lightMode
+						label={undefined}
+						{trigger}
+					/>
+				{/snippet}
+				{#snippet children({ item })}
+					<div class="w-full max-w-full">
+						{#each favoriteLinks ?? [] as favorite (favorite.href)}
+							<MenuItem
+								href={favorite.href}
+								{item}
+								class={twMerge(
+									'w-full inline-flex flex-row px-2 py-2 hover:bg-surface-hover',
+									'data-[highlighted]:bg-surface-hover'
+								)}
+							>
+								<span class="center-center">
+									{#if favorite.kind == 'script'}
+										<Code2 size={16} />
+									{:else if favorite.kind == 'flow'}
+										<BarsStaggered size={16} />
+									{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
+										<LayoutDashboard size={16} />
+									{:else if favorite.kind == 'asset'}
+										<Table2 size={16} />
+									{/if}
+								</span>
+								<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
+									{favorite.label}
+								</span>
+							</MenuItem>
+						{/each}
+					</div>
+
+					{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+						<MenuLink class="!text-xs" {...menuLink} {isCollapsed} {item} lightMode />
 					{/each}
-				</div>
 
-				{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} {item} lightMode />
-				{/each}
+					<div class="divide-y" role="none">
+						<div role="none">
+							<MenuItem
+								href={USER_SETTINGS_HASH}
+								class={twMerge(
+									'flex flex-row gap-3.5 items-center px-2 py-2',
+									sidebarClasses.text,
+									sidebarClasses.hoverBg
+								)}
+								lightMode
+								{item}
+							>
+								<Settings size={14} />
+								Account settings
+							</MenuItem>
+						</div>
 
-				<div class="divide-y" role="none">
-					<div role="none">
-						<MenuItem
-							href={USER_SETTINGS_HASH}
-							class={twMerge(
-								'flex flex-row gap-3.5 items-center px-2 py-2',
-								sidebarClasses.text,
-								sidebarClasses.hoverBg
-							)}
-							lightMode
-							{item}
-						>
-							<Settings size={14} />
-							Account settings
-						</MenuItem>
-					</div>
+						<div role="none">
+							<MenuItem
+								onClick={() => {
+									if (!document.documentElement.classList.contains('dark')) {
+										document.documentElement.classList.add('dark')
+										window.localStorage.setItem('dark-mode', 'dark')
+									} else {
+										document.documentElement.classList.remove('dark')
+										window.localStorage.setItem('dark-mode', 'light')
+									}
+								}}
+								lightMode
+								class={twMerge(
+									'w-full flex gap-3.5 px-2 py-2',
+									sidebarClasses.hoverBg,
+									sidebarClasses.text
+								)}
+								{item}
+							>
+								{#if darkMode}
+									<Sun size={14} />
+								{:else}
+									<Moon size={14} />
+								{/if}
+								Switch theme
+							</MenuItem>
+							<MenuItem
+								href="{base}/user/workspaces"
+								onClick={() => clearWorkspaceFromStorage()}
+								lightMode
+								class={twMerge(
+									'flex gap-3.5 px-2 py-2',
+									sidebarClasses.hoverBg,
+									sidebarClasses.text
+								)}
+								{item}
+							>
+								<Building size={14} />
+								All workspaces
+							</MenuItem>
 
-					<div role="none">
-						<MenuItem
-							onClick={() => {
-								if (!document.documentElement.classList.contains('dark')) {
-									document.documentElement.classList.add('dark')
-									window.localStorage.setItem('dark-mode', 'dark')
-								} else {
-									document.documentElement.classList.remove('dark')
-									window.localStorage.setItem('dark-mode', 'light')
-								}
-							}}
-							lightMode
-							class={twMerge(
-								'w-full flex gap-3.5 px-2 py-2',
-								sidebarClasses.hoverBg,
-								sidebarClasses.text
-							)}
-							{item}
-						>
-							{#if darkMode}
-								<Sun size={14} />
-							{:else}
-								<Moon size={14} />
+							{#if $superadmin}
+								<MenuItem
+									href="#superadmin-settings"
+									class={twMerge(
+										'flex flex-row gap-3.5 items-center px-2 py-2 ',
+										'text-secondary text-xs',
+										'hover:bg-surface-hover hover:text-primary cursor-pointer',
+										'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+									)}
+									{item}
+								>
+									<ServerCog size={14} />
+									Instance settings
+								</MenuItem>
 							{/if}
-							Switch theme
-						</MenuItem>
-						<MenuItem
-							href="{base}/user/workspaces"
-							onClick={() => clearWorkspaceFromStorage()}
-							lightMode
-							class={twMerge('flex gap-3.5 px-2 py-2', sidebarClasses.hoverBg, sidebarClasses.text)}
-							{item}
-						>
-							<Building size={14} />
-							All workspaces
-						</MenuItem>
 
-						{#if $superadmin}
 							<MenuItem
-								href="#superadmin-settings"
+								onClick={() => logout()}
 								class={twMerge(
-									'flex flex-row gap-3.5 items-center px-2 py-2 ',
-									'text-secondary text-xs',
-									'hover:bg-surface-hover hover:text-primary cursor-pointer',
+									'flex flex-row gap-3.5  items-center px-2 py-2 w-full',
+									'text-primary text-xs',
+									'hover:bg-surface-hover cursor-pointer',
 									'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 								)}
 								{item}
 							>
-								<ServerCog size={14} />
-								Instance settings
+								<LogOut size={14} />
+								Sign out
 							</MenuItem>
-						{/if}
-
-						<MenuItem
-							onClick={() => logout()}
-							class={twMerge(
-								'flex flex-row gap-3.5  items-center px-2 py-2 w-full',
-								'text-primary text-xs',
-								'hover:bg-surface-hover cursor-pointer',
-								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-							)}
-							{item}
-						>
-							<LogOut size={14} />
-							Sign out
-						</MenuItem>
-					</div>
-					<div onmouseleave={() => (showMore = false)} role="none">
-						{#if secondMenuLinks.length}
-							<ResizeTransitionWrapper vertical innerClass="w-full">
-								{#if !showMore}
-									<div onmouseenter={() => (showMore = true)} role="none">
-										<MenuItem {item}>
-											<div class="px-2 py-2 text-primary text-2xs">More...</div>
-										</MenuItem>
-									</div>
-								{:else}
-									{#snippet renderSecondMenuLinks(menuLinks: SecondMenuLink[])}
-										{#each menuLinks as menuLink (menuLink.href ?? menuLink.label)}
-											<MenuItem
-												href={menuLink.href}
-												class={twMerge(
-													'flex flex-row gap-3.5 items-center px-2 py-2 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
-													'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-												)}
-												{item}
+						</div>
+						<div role="none">
+							{#snippet renderSecondMenuLinks(menuLinks: SecondMenuLink[])}
+								{#each menuLinks as menuLink (menuLink.href ?? menuLink.label)}
+									<MenuItem
+										href={menuLink.href}
+										class={twMerge(
+											'flex flex-row gap-3.5 items-center px-2 py-2 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
+											'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+										)}
+										{item}
+									>
+										{menuLink.label}
+									</MenuItem>
+								{/each}
+							{/snippet}
+							{#if secondMenuLinks.length || secondMenuTriggerLinks.length || extraTriggerLinks.length}
+								<div class="divide-y">
+									{#if secondMenuLinks.length}<div
+											>{@render renderSecondMenuLinks(secondMenuLinks)}</div
+										>{/if}
+									{#if secondMenuTriggerLinks.length}<div
+											>{@render renderSecondMenuLinks(secondMenuTriggerLinks)}</div
+										>{/if}
+									{#if extraTriggerLinks.length}<div>
+											<!-- svelte-ignore a11y_no_static_element_interactions -->
+											<div
+												class="flex flex-row gap-3.5 items-center px-2 py-2 w-full text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer"
+												role="button"
+												tabindex="0"
+												onclick={(e) => {
+													e.stopPropagation()
+													showExtraTriggers = !showExtraTriggers
+												}}
 											>
-												{menuLink.label}
-											</MenuItem>
-										{/each}
-									{/snippet}
-									<div class="divide-y">
-										<div>{@render renderSecondMenuLinks(secondMenuLinks)}</div>
-										<div>{@render renderSecondMenuLinks(secondMenuTriggerLinks)}</div>
-									</div>
-								{/if}
-							</ResizeTransitionWrapper>
-						{/if}
-						{#if $enterpriseLicense}
-							<MultiplayerMenu />
-						{/if}
+												<Plus size={12} />
+												<span class="text-2xs">More triggers</span>
+											</div>
+											{#if showExtraTriggers}
+												{#each extraTriggerLinks as menuLink (menuLink.href)}
+													<MenuItem
+														href={menuLink.href}
+														class={twMerge(
+															'flex flex-row gap-3.5 items-center px-2 py-2 pl-6 text-tertiary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
+															'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+														)}
+														{item}
+													>
+														{menuLink.label}
+													</MenuItem>
+												{/each}
+											{/if}
+										</div>{/if}
+								</div>
+							{/if}
+							{#if $enterpriseLicense}
+								<MultiplayerMenu />
+							{/if}
+						</div>
 					</div>
-				</div>
-			{/snippet}
-		</Menu>
-	{/snippet}
-</Menubar>
+				{/snippet}
+			</Menu>
+		{/snippet}
+	</Menubar>
+</div>
 
 <DarkModeObserver bind:darkMode />

package/package/components/triggers/CaptureWrapper.svelte

@@ -217,7 +217,7 @@ $effect(() => {
 				{hasPreprocessor}
 				{isFlow}
 				{captureLoading}
-				{triggerDeployed}
+				groupId={args?.group_id}
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor

package/package/components/triggers/TriggerFilters.svelte

@@ -1,16 +1,29 @@
 <script lang="ts">import { Button } from '../common';
 import Section from '../Section.svelte';
+import Select from '../select/Select.svelte';
 import { Plus, X } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
 import JsonEditor from '../JsonEditor.svelte';
-let { filters = $bindable([]), disabled = false } = $props();
+let { filters = $bindable([]), filterLogic = $bindable(), disabled = false } = $props();
+const filterLogicItems = [
+    { label: 'all criteria (AND)', value: 'and' },
+    { label: 'any criterion (OR)', value: 'or' }
+];
+let description = $derived(filterLogic === 'or'
+    ? 'Filters will limit the execution of the trigger to only messages that match any criterion.'
+    : 'Filters will limit the execution of the trigger to only messages that match all criteria.');
 </script>
 
 <Section label="Filters">
 	<p class="text-xs mb-1 text-primary">
-		Filters will limit the execution of the trigger to only messages that match all criteria.<br />
+		{description}<br />
 		The JSON filter checks if the value at the key is equal or a superset of the filter value.
 	</p>
+	{#if filters.length > 0}
+		<div class="mt-2 mb-1 max-w-xs">
+			<Select items={filterLogicItems} bind:value={filterLogic} {disabled} size="sm" />
+		</div>
+	{/if}
 	<div class="flex flex-col gap-4 mt-1">
 		{#each filters as v, i (i)}
 			<div class="flex w-full gap-2 items-center">
@@ -19,11 +32,10 @@ let { filters = $bindable([]), disabled = false } = $props();
 						<div class="text-secondary text-sm mb-2">Key</div>
 						<input type="text" bind:value={v.key} {disabled} />
 					</label>
-					<!-- svelte-ignore a11y_label_has_associated_control -->
-					<label class="flex flex-col w-full">
+					<div class="flex flex-col w-full">
 						<div class="text-secondary text-sm mb-2">Value</div>
 						<JsonEditor bind:value={v.value} code={JSON.stringify(v.value)} {disabled} />
-					</label>
+					</div>
 					{#if v.key}
 						{@const isObject = v.value !== null && typeof v.value === 'object'}
 						<div class="text-xs text-tertiary font-mono mt-2 p-2 bg-surface-secondary rounded">

package/package/components/triggers/TriggerFilters.svelte.d.ts

@@ -3,8 +3,9 @@ interface Props {
         key: string;
         value: any;
     }[];
+    filterLogic: 'and' | 'or';
     disabled?: boolean;
 }
-declare const TriggerFilters: import("svelte").Component<Props, {}, "filters">;
+declare const TriggerFilters: import("svelte").Component<Props, {}, "filters" | "filterLogic">;
 type TriggerFilters = ReturnType<typeof TriggerFilters>;
 export default TriggerFilters;

package/package/components/triggers/kafka/KafkaCapture.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">import { fade } from 'svelte/transition';
+import { Url } from '../../common';
 import CaptureSection from '../CaptureSection.svelte';
-let { captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isFlow = false, captureLoading = false, triggerDeployed = false } = $props();
+let { captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isFlow = false, captureLoading = false, groupId = undefined } = $props();
+let captureGroupId = $derived(groupId ? `${groupId}_wm_capture` : undefined);
 </script>
 
 {#if captureInfo}
@@ -16,7 +18,6 @@ let { captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isF
 		on:testWithArgs
 		{hasPreprocessor}
 		{isFlow}
-		displayAlert={triggerDeployed}
 	>
 		{#snippet description()}
 			{#if captureInfo.active}
@@ -35,5 +36,8 @@ let { captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isF
 				</p>
 			{/if}
 		{/snippet}
+		{#if captureGroupId}
+			<Url label="Test group ID" url={captureGroupId} />
+		{/if}
 	</CaptureSection>
 {/if}

package/package/components/triggers/kafka/KafkaCapture.svelte.d.ts

@@ -5,7 +5,7 @@ interface Props {
     hasPreprocessor?: boolean;
     isFlow?: boolean;
     captureLoading?: boolean;
-    triggerDeployed?: boolean;
+    groupId?: string;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/triggers/kafka/KafkaTriggerEditorInner.svelte

@@ -61,6 +61,7 @@ let error_handler_path = $state();
 let error_handler_args = $state({});
 let retry = $state();
 let filters = $state([]);
+let filterLogic = $state('and');
 let suspendedJobsModal = $state(null);
 let originalConfig = $state(undefined);
 let resetConfirmOpen = $state(false);
@@ -137,6 +138,7 @@ export async function openNew(nis_flow, fixedScriptPath_, nDefaultValues) {
         error_handler_args = nDefaultValues?.error_handler_args ?? {};
         retry = nDefaultValues?.retry ?? undefined;
         filters = nDefaultValues?.filters ?? [];
+        filterLogic = 'and';
         errorHandlerSelected = getHandlerType(error_handler_path ?? '');
         mode = nDefaultValues?.mode ?? 'enabled';
         originalConfig = undefined;
@@ -166,6 +168,7 @@ function loadTriggerConfig(cfg) {
     error_handler_args = cfg?.error_handler_args ?? {};
     retry = cfg?.retry;
     filters = cfg?.filters ?? [];
+    filterLogic = cfg?.filter_logic ?? 'and';
     errorHandlerSelected = getHandlerType(error_handler_path ?? '');
     permissionedAs = cfg?.permissioned_as;
     selectedPermissionedAs = undefined;
@@ -193,6 +196,7 @@ function getSaveCfg() {
         group_id: kafkaCfg.group_id,
         topics: kafkaCfg.topics,
         filters,
+        filter_logic: filterLogic,
         auto_offset_reset: autoOffsetReset,
         auto_commit: autoCommit,
         mode,
@@ -510,7 +514,7 @@ $effect(() => {
 						</Label>
 					{/if}
 
-					<TriggerFilters bind:filters disabled={!can_write} />
+					<TriggerFilters bind:filters bind:filterLogic disabled={!can_write} />
 
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>

package/package/components/triggers/kafka/utils.js

@@ -17,6 +17,7 @@ export async function saveKafkaTriggerFromCfg(initialPath, cfg, edit, workspace,
         group_id: cfg.group_id,
         topics: cfg.topics,
         filters: cfg.filters ?? [],
+        filter_logic: cfg.filter_logic ?? 'and',
         auto_offset_reset: cfg.auto_offset_reset ?? 'latest',
         auto_commit: cfg.auto_commit ?? true,
         ...errorHandlerAndRetries,