windmill-components 1.444.1 → 1.447.4

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -27,7 +27,7 @@ export let newFlow = false;
 export let smallErrorHandler = false;
 export let workspace = $workspaceStore;
 let flowTutorials = undefined;
-const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore, pathStore } = getContext('FlowEditorContext');
+const { customUi, selectedId, moving, history, flowStateStore, flowStore, flowInputsStore, pathStore } = getContext('FlowEditorContext');
 const { primarySchedule, triggersCount } = getContext('TriggerContext');
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, inlineScript) {
@@ -237,7 +237,7 @@ function setExpr(module, expr) {
 		<FlowGraphV2
 			earlyStop={$flowStore.value?.skip_expr !== undefined}
 			cache={$flowStore.value?.cache_ttl !== undefined}
-			triggerNode={true}
+			triggerNode={customUi?.triggers != false}
 			path={$pathStore}
 			{newFlow}
 			{disableAi}

package/package/components/flows/pickers/FlowScriptPicker.svelte

@@ -6,7 +6,7 @@ export let disabled = false;
 export let label;
 export let lang = undefined;
 export let id = undefined;
-const enterpriseLangs = ['bigquery', 'snowflake', 'mssql'];
+const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb'];
 </script>
 
 <Popover disablePopup={!enterpriseLangs.includes(lang || '') || !!$enterpriseLicense}>

package/package/components/flows/previousResults.d.ts

@@ -23,7 +23,7 @@ export declare function getFailureStepPropPicker(flowState: FlowState, flow: Ope
     extraLib: string;
 };
 export declare function getStepPropPicker(flowState: FlowState, parentModule: FlowModule | undefined, previousModule: FlowModule | undefined, id: string, flow: OpenFlow, args: any, include_node: boolean): StepPropPicker;
-export declare function buildExtraLib(flowInput: Record<string, any>, results: Record<string, any>, resume: boolean): string;
+export declare function buildExtraLib(flowInput: Record<string, any>, results: Record<string, any>, resume: boolean, previousId: string | undefined): string;
 export declare function buildPrefixRegex(words: string[]): Array<{
     regex: RegExp;
     word: string;

package/package/components/flows/previousResults.js

@@ -144,11 +144,11 @@ export function getStepPropPicker(flowState, parentModule, previousModule, id, f
         pickableProperties['approvers'] = 'The list of approvers';
     }
     return {
-        extraLib: buildExtraLib(flowInput, priorIds, previousModule?.suspend != undefined),
+        extraLib: buildExtraLib(flowInput, priorIds, previousModule?.suspend != undefined, previousModule?.id),
         pickableProperties
     };
 }
-export function buildExtraLib(flowInput, results, resume) {
+export function buildExtraLib(flowInput, results, resume, previousId) {
     return `
 /**
 * get variable (including secret) at path
@@ -177,6 +177,11 @@ declare const params: any;
  */
 declare const results = ${JSON.stringify(results)};
 
+/**
+ * Result of the previous step
+ */
+declare const previous_result: ${previousId ? JSON.stringify(results[previousId]) : 'any'};
+
 ${resume
         ? `
 /**

package/package/components/flows/types.d.ts

@@ -16,6 +16,12 @@ export type ExtendedOpenFlow = OpenFlow & {
     ws_error_handler_muted?: boolean;
     dedicated_worker?: boolean;
     visible_to_runner_only?: boolean;
+    on_behalf_of_email?: string;
+};
+export type FlowInputEditorState = {
+    selectedTab: 'inputEditor' | 'history' | 'savedInputs' | 'json' | 'captures' | 'firstStepInputs' | undefined;
+    editPanelSize: number | undefined;
+    payloadData: Record<string, any> | undefined;
 };
 export type FlowEditorContext = {
     selectedId: Writable<string>;
@@ -28,6 +34,7 @@ export type FlowEditorContext = {
     history: History<OpenFlow>;
     pathStore: Writable<string>;
     flowStore: Writable<ExtendedOpenFlow>;
+    flowInputEditorState: Writable<FlowInputEditorState>;
     flowStateStore: Writable<FlowState>;
     testStepStore: Writable<Record<string, any>>;
     saveDraft: () => void;

package/package/components/flows/utils.d.ts

@@ -17,6 +17,7 @@ export declare function cleanInputs(flow: OpenFlow | any): OpenFlow & {
     ws_error_handler_muted?: boolean;
     dedicated_worker?: boolean;
     visible_to_runner_only?: boolean;
+    on_behalf_of_email?: string;
 };
 export declare function getDefaultExpr(key: string | undefined, previousModuleId: string | undefined, previousExpr?: string): string;
 export declare function jobsToResults(jobs: Job[]): any;

package/package/components/flows/utils.js

@@ -62,6 +62,9 @@ export function filteredContentForExport(flow) {
     if (flow.visible_to_runner_only) {
         o['visible_to_runner_only'] = flow.visible_to_runner_only;
     }
+    if (flow.on_behalf_of_email) {
+        o['on_behalf_of_email'] = flow.on_behalf_of_email;
+    }
     if (flow.ws_error_handler_muted) {
         o['ws_error_handler_muted'] = flow.ws_error_handler_muted;
     }

package/package/components/graph/graphBuilder.js

@@ -114,7 +114,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             data: {
                 eventHandlers: eventHandlers,
                 modules: modules,
-                hasPreprocessor: !!preprocessorModule,
+                hasPreprocessor: !!preprocessorModule || flowPathForTriggerNode == undefined,
                 ...extra
             }
         };

package/package/components/graph/renderers/triggers/TriggersBadge.svelte

@@ -1,4 +1,4 @@
-<script>import { Calendar, Mail, Webhook, Unplug } from 'lucide-svelte';
+<script>import { Calendar, Mail, Webhook, Unplug, PlugZap } from 'lucide-svelte';
 import TriggerButton from './TriggerButton.svelte';
 import Popover from '../../../Popover.svelte';
 import TriggerCount from './TriggerCount.svelte';
@@ -9,13 +9,16 @@ import {} from '../../../triggers';
 import { FlowService, ScriptService } from '../../../../gen';
 import { enterpriseLicense, workspaceStore } from '../../../../stores';
 import KafkaIcon from '../../../icons/KafkaIcon.svelte';
+import NatsIcon from '../../../icons/NatsIcon.svelte';
 const { selectedTrigger, triggersCount } = getContext('TriggerContext');
 export let path;
 export let newItem;
 export let isFlow;
 export let selected;
 export let showOnlyWithCount;
-export let triggersToDisplay = ['webhooks', 'schedules', 'routes', 'websockets', 'kafka', 'emails'];
+export let triggersToDisplay = showOnlyWithCount
+    ? ['webhooks', 'schedules', 'routes', 'websockets', 'kafka', 'nats', 'emails']
+    : ['webhooks', 'schedules', 'routes', 'websockets', 'eventStreams', 'emails'];
 const dispatch = createEventDispatcher();
 onMount(() => {
     if (!newItem) {
@@ -42,23 +45,34 @@ const triggerTypeConfig = {
     routes: { icon: Route, countKey: 'http_routes_count' },
     websockets: { icon: Unplug, countKey: 'websocket_count' },
     kafka: { icon: KafkaIcon, countKey: 'kafka_count' },
-    emails: { icon: Mail, countKey: 'email_count' }
+    nats: { icon: NatsIcon, countKey: 'nats_count' },
+    emails: { icon: Mail, countKey: 'email_count' },
+    eventStreams: { icon: PlugZap }
 };
+function camelCaseToWords(s) {
+    const result = s.replace(/([A-Z])/g, ' $1');
+    return result.charAt(0).toUpperCase() + result.slice(1).toLowerCase();
+}
 </script>
 
 {#each triggersToDisplay as type}
 	{@const { icon, countKey } = triggerTypeConfig[type]}
-	{#if (!showOnlyWithCount || ($triggersCount?.[countKey] ?? 0) > 0) && !(type === 'kafka' && !$enterpriseLicense)}
+	{#if (!showOnlyWithCount || ((countKey && $triggersCount?.[countKey]) || 0) > 0) && !(type === 'kafka' && !$enterpriseLicense) && !(type === 'nats' && !$enterpriseLicense)}
 		<Popover>
-			<svelte:fragment slot="text">{type.charAt(0).toUpperCase() + type.slice(1)}</svelte:fragment>
+			<svelte:fragment slot="text">{camelCaseToWords(type)}</svelte:fragment>
 			<TriggerButton
 				on:click={() => {
-					$selectedTrigger = type
+					$selectedTrigger = type === 'eventStreams' ? 'kafka' : type
 					dispatch('select')
 				}}
-				selected={selected && $selectedTrigger === type}
+				selected={selected &&
+					($selectedTrigger === type ||
+						(type === 'eventStreams' &&
+							($selectedTrigger === 'kafka' || $selectedTrigger === 'nats')))}
 			>
-				<TriggerCount count={$triggersCount?.[countKey]} />
+				{#if countKey}
+					<TriggerCount count={$triggersCount?.[countKey]} />
+				{/if}
 				<svelte:component this={icon} size={12} />
 			</TriggerButton>
 		</Popover>

package/package/components/graph/renderers/triggers/TriggersBadge.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         isFlow: boolean;
         selected: boolean;
         showOnlyWithCount: boolean;
-        triggersToDisplay?: ("emails" | "webhooks" | "schedules" | "routes" | "websockets" | "kafka")[] | undefined;
+        triggersToDisplay?: ("kafka" | "nats" | "emails" | "webhooks" | "schedules" | "routes" | "websockets" | "eventStreams")[] | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/package/components/icons/NatsIcon.svelte

@@ -0,0 +1,19 @@
+<script>export let size = 16;
+export let color = undefined;
+let clazz = '';
+export { clazz as class };
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	viewBox="0 0 64 64"
+	class={clazz}
+	fill={color ?? 'currentColor'}
+	stroke-width="0"
+>
+	<path
+		d="M1.156 50H27.53l15.125 14V50h20.187V0H1.156zm9.937-38.312h11.563l22.25 20.75v-20.75h7.375V38.5H41.094L18.47 17.375V38.5h-7.375z"
+	/>
+</svg>

package/package/components/icons/NatsIcon.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+        color?: string | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NatsIconProps = typeof __propDef.props;
+export type NatsIconEvents = typeof __propDef.events;
+export type NatsIconSlots = typeof __propDef.slots;
+export default class NatsIcon extends SvelteComponent<NatsIconProps, NatsIconEvents, NatsIconSlots> {
+}
+export {};

package/package/components/icons/OracleDBIcon.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+	{height}
+	{width}
+	id="svg3430"
+	version="1.1"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+>
+  <path fill="#C74634" fill-rule="evenodd" d="M7.957359,18.9123664 C4.11670252,18.9123664 1,15.803458 1,11.9617373 C1,8.12000773 4.11670252,5 7.957359,5 L16.0437948,5 C19.8855156,5 23,8.12000773 23,11.9617373 C23,15.803458 19.8855156,18.9123664 16.0437948,18.9123664 L7.957359,18.9123664 L7.957359,18.9123664 Z M15.8639176,16.4585488 C18.352201,16.4585488 20.3674397,14.448858 20.3674397,11.9617373 C20.3674397,9.47460595 18.352201,7.45381934 15.8639176,7.45381934 L8.1360824,7.45381934 C5.64895285,7.45381934 3.63255855,9.47460595 3.63255855,11.9617373 C3.63255855,14.448858 5.64895285,16.4585488 8.1360824,16.4585488 L15.8639176,16.4585488 L15.8639176,16.4585488 Z"/>
+</svg>

package/package/components/icons/OracleDBIcon.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  OracleDbIconProps */
+/** @typedef {typeof __propDef.events}  OracleDbIconEvents */
+/** @typedef {typeof __propDef.slots}  OracleDbIconSlots */
+export default class OracleDbIcon extends SvelteComponent<{
+    height?: string | undefined;
+    width?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type OracleDbIconProps = typeof __propDef.props;
+export type OracleDbIconEvents = typeof __propDef.events;
+export type OracleDbIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/icons/index.d.ts

@@ -63,6 +63,7 @@ import RssIcon from './RssIcon.svelte';
 import ShopifyIcon from './ShopifyIcon.svelte';
 import TypeformIcon from './TypeformIcon.svelte';
 import BigQueryIcon from './BigQueryIcon.svelte';
+import OracleDBIcon from './OracleDBIcon.svelte';
 import GraphqlIcon from './GraphqlIcon.svelte';
 import NocoDbIcon from './NocoDbIcon.svelte';
 import AzureIcon from './AzureIcon.svelte';
@@ -94,6 +95,8 @@ import KeycloakIcon from './KeycloakIcon.svelte';
 import ZitadelIcon from './ZitadelIcon.svelte';
 import SpotifyIcon from './SpotifyIcon.svelte';
 import XeroIcon from './XeroIcon.svelte';
+import KafkaIcon from './KafkaIcon.svelte';
+import NatsIcon from './NatsIcon.svelte';
 export declare const APP_TO_ICON_COMPONENT: {
     readonly postgresql: typeof PostgresIcon;
     readonly mysql: typeof Mysql;
@@ -162,6 +165,7 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly shopify: typeof ShopifyIcon;
     readonly typeform: typeof TypeformIcon;
     readonly bigquery: typeof BigQueryIcon;
+    readonly oracledb: typeof OracleDBIcon;
     readonly graphql: typeof GraphqlIcon;
     readonly nocodb: typeof NocoDbIcon;
     readonly azure: typeof AzureIcon;
@@ -193,5 +197,7 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly zitadel: typeof ZitadelIcon;
     readonly spotify: typeof SpotifyIcon;
     readonly xero: typeof XeroIcon;
+    readonly kafka: typeof KafkaIcon;
+    readonly nats: typeof NatsIcon;
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon, XeroIcon };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, OracleDBIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon, XeroIcon, KafkaIcon, NatsIcon };

package/package/components/icons/index.js

@@ -63,6 +63,7 @@ import RssIcon from './RssIcon.svelte';
 import ShopifyIcon from './ShopifyIcon.svelte';
 import TypeformIcon from './TypeformIcon.svelte';
 import BigQueryIcon from './BigQueryIcon.svelte';
+import OracleDBIcon from './OracleDBIcon.svelte';
 import GraphqlIcon from './GraphqlIcon.svelte';
 import NocoDbIcon from './NocoDbIcon.svelte';
 import AzureIcon from './AzureIcon.svelte';
@@ -94,6 +95,8 @@ import KeycloakIcon from './KeycloakIcon.svelte';
 import ZitadelIcon from './ZitadelIcon.svelte';
 import SpotifyIcon from './SpotifyIcon.svelte';
 import XeroIcon from './XeroIcon.svelte';
+import KafkaIcon from './KafkaIcon.svelte';
+import NatsIcon from './NatsIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -162,6 +165,7 @@ export const APP_TO_ICON_COMPONENT = {
     shopify: ShopifyIcon,
     typeform: TypeformIcon,
     bigquery: BigQueryIcon,
+    oracledb: OracleDBIcon,
     graphql: GraphqlIcon,
     nocodb: NocoDbIcon,
     azure: AzureIcon,
@@ -192,6 +196,8 @@ export const APP_TO_ICON_COMPONENT = {
     keycloak: KeycloakIcon,
     zitadel: ZitadelIcon,
     spotify: SpotifyIcon,
-    xero: XeroIcon
+    xero: XeroIcon,
+    kafka: KafkaIcon,
+    nats: NatsIcon
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon, XeroIcon };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, OracleDBIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon, XeroIcon, KafkaIcon, NatsIcon };

package/package/components/meltComponents/ButtonDropDown.svelte

@@ -0,0 +1,32 @@
+<script>import Popover from './Popover.svelte';
+export let dropdownItems = [];
+export let closeOnClick = false;
+export let placement = 'bottom';
+export let open = false;
+</script>
+
+<Popover bind:open closeButton={false} {placement}>
+	<svelte:fragment slot="trigger">
+		<slot {open} />
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="flex flex-col bg-surface">
+			{#each dropdownItems as item}
+				<button
+					class="hover:bg-surface-hover p-2 transition-colors duration-150"
+					on:click={() => {
+						item.onClick()
+						if (closeOnClick) {
+							open = false
+						}
+					}}
+				>
+					<div class="flex flex-row items-center gap-2">
+						<svelte:component this={item.icon} size={14} />
+						<p class="text-xs text-secondary">{item.label}</p>
+					</div>
+				</button>
+			{/each}
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/meltComponents/ButtonDropDown.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        dropdownItems?: {
+            label: string;
+            onClick: () => void;
+            icon?: any;
+        }[] | undefined;
+        closeOnClick?: boolean | undefined;
+        placement?: any;
+        open?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            open: boolean;
+        };
+    };
+};
+export type ButtonDropDownProps = typeof __propDef.props;
+export type ButtonDropDownEvents = typeof __propDef.events;
+export type ButtonDropDownSlots = typeof __propDef.slots;
+export default class ButtonDropDown extends SvelteComponent<ButtonDropDownProps, ButtonDropDownEvents, ButtonDropDownSlots> {
+}
+export {};

package/package/components/meltComponents/Popover.svelte

@@ -4,19 +4,23 @@ import { X } from 'lucide-svelte';
 export let open = false;
 export let closeButton = true;
 export let displayArrow = false;
+export let placement = 'bottom';
 const { elements: { trigger, content, arrow, close }, states } = createPopover({
-    forceVisible: true
+    forceVisible: true,
+    positioning: {
+        placement
+    }
 });
 const sync = createSync(states);
 $: sync.open(open, (v) => (open = v));
 </script>
 
-<button type="button" {...$trigger} use:$trigger.action aria-label="Popup button">
+<button class="w-full h-full" type="button" {...$trigger} use:$trigger.action aria-label="Popup button">
 	<slot name="trigger" />
 </button>
 
 {#if open}
-	<div {...$content} use:$content.action transition:fade={{ duration: 100 }} class="content">
+	<div {...$content} use:$content.action transition:fade={{ duration: 100 }} class="content z-[9999]">
 		{#if displayArrow}
 			<div {...$arrow} use:$arrow.action />
 		{/if}
@@ -68,7 +72,6 @@ $: sync.open(open, (v) => (open = v));
 }
 
 	.content {
-    z-index: 10;
     width: -moz-fit-content;
     width: fit-content;
     overflow: hidden;

package/package/components/meltComponents/Popover.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         closeButton?: boolean | undefined;
         displayArrow?: boolean | undefined;
+        placement?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/runs/RunsFilter.svelte

@@ -244,8 +244,8 @@ let tagTimeout = undefined;
 
 						<span class="text-xs absolute -top-4"
 							>Label <Tooltip
-								>Labels are string values in the array at the result field 'wm_labels' to easily
-								filter them</Tooltip
+								><a href="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#jobs-labels" target="_blank">Job Labels</a> are string values in the array at the result field 'wm_labels' to easily
+								filter them.</Tooltip
 							></span
 						>
 

package/package/components/schema/AddPropertyFormV2.svelte

@@ -0,0 +1,46 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { Button } from '../common';
+import { CornerDownLeft } from 'lucide-svelte';
+import Popover from '../meltComponents/Popover.svelte';
+let name = '';
+const dispatch = createEventDispatcher();
+function addField() {
+    dispatch('add', { name });
+    name = '';
+}
+let open = false;
+</script>
+
+<Popover closeButton={false} bind:open>
+	<svelte:fragment slot="trigger">
+		<slot name="trigger" />
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="flex flex-row gap-2 p-2 rounded-md">
+			<input
+				bind:value={name}
+				placeholder="Field name"
+				on:keydown={(event) => {
+					if (event.key === 'Enter') {
+						addField()
+						open = false
+					}
+				}}
+			/>
+			<Button
+				variant="contained"
+				color="dark"
+				size="xs"
+				id="flow-editor-add-property"
+				on:click={() => {
+					addField()
+					open = false
+				}}
+				disabled={!name}
+				shortCut={{ Icon: CornerDownLeft, withoutModifier: true }}
+			>
+				Add field
+			</Button>
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/schema/AddPropertyFormV2.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        add: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+    };
+};
+export type AddPropertyFormV2Props = typeof __propDef.props;
+export type AddPropertyFormV2Events = typeof __propDef.events;
+export type AddPropertyFormV2Slots = typeof __propDef.slots;
+export default class AddPropertyFormV2 extends SvelteComponent<AddPropertyFormV2Props, AddPropertyFormV2Events, AddPropertyFormV2Slots> {
+}
+export {};