windmill-components 1.542.5 → 1.555.0

package/package/components/Toast.svelte

@@ -3,12 +3,7 @@ import { CheckCircle2, XCircleIcon } from 'lucide-svelte';
 import { onMount } from 'svelte';
 import Button from './common/button/Button.svelte';
 import { processMessage } from './toast';
-export let message;
-export let toastId;
-export let error = false;
-export let actions = [];
-export let errorMessage = undefined;
-export let duration = 5000;
+let { message, toastId, error = false, actions = [], errorMessage = undefined, duration = 5000 } = $props();
 function handleClose() {
     toast.pop(toastId);
 }
@@ -46,7 +41,7 @@ onMount(() => {
 			<div class="ml-4 flex flex-shrink-0">
 				<button
 					type="button"
-					on:click={handleClose}
+					onclick={handleClose}
 					class="inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
 				>
 					<span class="sr-only">Close</span>

package/package/components/Toast.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { ToastAction } from '../toast';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toast: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     message: string;
     toastId: string;
     error?: boolean;
     actions?: ToastAction[];
     errorMessage?: string | undefined;
     duration?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toast = InstanceType<typeof Toast>;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
 export default Toast;

package/package/components/Toggle.svelte

@@ -4,12 +4,13 @@ import { twMerge } from 'tailwind-merge';
 import Tooltip from './Tooltip.svelte';
 import { AlertTriangle } from 'lucide-svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
+import { inputBorderClass } from './text_input/TextInput.svelte';
 export let options = {};
 export let checked = false;
 export let disabled = false;
 export let textClass = '';
 export let textStyle = '';
-export let color = 'blue';
+export let color = 'nord';
 export let id = (Math.random() + 1).toString(36).substring(10);
 export let lightMode = false;
 export let eeOnly = false;
@@ -31,8 +32,12 @@ export let textDisabled = false;
 	{#if Boolean(options?.left)}
 		<span
 			class={twMerge(
-				'mr-2 font-medium duration-50 select-none',
-				bothOptions || textDisabled ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
+				'mr-2 font-normal duration-50 select-none',
+				bothOptions || textDisabled
+					? checked
+						? 'text-disabled'
+						: 'text-tertiary'
+					: 'text-tertiary',
 				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
 				textClass
 			)}
@@ -77,22 +82,27 @@ export let textDisabled = false;
 					? 'peer-checked:bg-red-600'
 					: color == 'blue'
 						? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
-						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-400',
+						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
 					: size === '2sm'
 						? 'w-9 h-5 after:top-0.5 after:left-[2px] after:h-4 after:w-4'
 						: size === '2xs'
 							? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
-							: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
+							: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3',
+				inputBorderClass()
 			)}
 		></div>
 	</div>
 	{#if Boolean(options?.right)}
 		<span
 			class={twMerge(
-				'ml-2 font-medium duration-50 select-none',
-				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
+				'ml-2 font-normal duration-50 select-none',
+				bothOptions || textDisabled
+					? checked
+						? 'text-secondary'
+						: 'text-disabled'
+					: 'text-secondary',
 				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-xs' : 'text-sm',
 				textClass
 			)}

package/package/components/ToggleHubWorkspaceQuick.svelte

@@ -8,9 +8,9 @@ let { selected = $bindable('all') } = $props();
 <div class="max-w-min">
 	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
 		{#snippet children({ item })}
-			<ToggleButton value="all" label="All" light small {item} />
-			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small {item} />
-			<ToggleButton value="workspace" icon={Building} label="Workspace" light small {item} />
+			<ToggleButton value="all" label="All" light {item} />
+			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light {item} />
+			<ToggleButton value="workspace" icon={Building} label="Workspace" light {item} />
 		{/snippet}
 	</ToggleButtonGroup>
 </div>

package/package/components/WorkerGroup.svelte

@@ -187,20 +187,8 @@ $effect(() => {
 			class="mb-4"
 		>
 			{#snippet children({ item })}
-				<ToggleButton
-					position="left"
-					value="normal"
-					size="sm"
-					label="Any jobs within worker tags"
-					{item}
-				/>
-				<ToggleButton
-					position="dedicated"
-					value="dedicated"
-					size="sm"
-					label="Dedicated to a script/flow"
-					{item}
-				/>
+				<ToggleButton value="normal" small label="Any jobs within worker tags" {item} />
+				<ToggleButton value="dedicated" small label="Dedicated to a script/flow" {item} />
 			{/snippet}
 		</ToggleButtonGroup>
 		{#if selected == 'normal'}

package/package/components/apps/components/buttons/AppButton.svelte

@@ -70,6 +70,13 @@ async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
     $selectedComponent = [id];
+    // Show brief feedback for background mode
+    if (resolvedConfig.runInBackground) {
+        backgroundClickFeedback = true;
+        setTimeout(() => {
+            backgroundClickFeedback = false;
+        }, 300);
+    }
     const action = async () => {
         const inputOutput = { result: outputs.result.peak(), loading: true };
         if (rowContext && rowInputs) {
@@ -96,6 +103,7 @@ async function handleClick(event) {
     }
 }
 let loading = $state(false);
+let backgroundClickFeedback = $state(false);
 let css = $state(initCss($app.css?.buttoncomponent, customCss));
 $effect(() => {
     errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
@@ -150,6 +158,7 @@ let errorsMessage = $derived(Object.values(errors)
 	{render}
 	{outputs}
 	{extraKey}
+	allowConcurentRequests={resolvedConfig.runInBackground}
 	onSuccess={(r) => {
 		let inputOutput = { result: r, loading: false }
 		if (rowContext && rowInputs) {
@@ -173,45 +182,64 @@ let errorsMessage = $derived(Object.values(errors)
 			<div class="text-red-500 text-xs">{errorsMessage}</div>
 		{/if}
 		{#key css}
-			<Button
-				on:pointerdown={(e) => e.stopPropagation()}
-				btnClasses={twMerge(
-					css?.button?.class ?? '',
-					isMenuItem ? 'flex items-center justify-start' : '',
-					isMenuItem ? '!border-0' : '',
-					'wm-button',
-					`wm-button-${resolvedConfig.color}`
-				)}
-				variant={isMenuItem ? 'border' : 'contained'}
-				style={css?.button?.style}
-				wrapperClasses={twMerge(
-					css?.container?.class ?? '',
-					resolvedConfig.fillContainer ? 'w-full h-full' : '',
-					isMenuItem ? 'w-full' : '',
-					'wm-button-container',
-					`wm-button-container-${resolvedConfig.color}`
-				)}
-				wrapperStyle={css?.container?.style}
-				disabled={resolvedConfig.disabled}
-				on:click={handleClick}
-				size={resolvedConfig.size}
-				color={resolvedConfig.color}
-				{loading}
+			<div
+				class="inline-flex"
+				title={resolvedConfig.tooltip && String(resolvedConfig.tooltip).length > 0
+					? String(resolvedConfig.tooltip)
+					: undefined}
 			>
-				{#if resolvedConfig.beforeIcon}
-					{#key resolvedConfig.beforeIcon}
-						<div class={resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0 ? "min-w-4" : ""} bind:this={beforeIconComponent}></div>
-					{/key}
-				{/if}
-				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
-					<div>{resolvedConfig.label.toString()}</div>
-				{/if}
-				{#if resolvedConfig.afterIcon}
-					{#key resolvedConfig.afterIcon}
-						<div class={resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0 ? "min-w-4" : ""} bind:this={afterIconComponent}></div>
-					{/key}
-				{/if}
-			</Button>
+				<Button
+					on:pointerdown={(e) => e.stopPropagation()}
+					btnClasses={twMerge(
+						css?.button?.class ?? '',
+						isMenuItem ? 'flex items-center justify-start' : '',
+						isMenuItem ? '!border-0' : '',
+						'wm-button',
+						`wm-button-${resolvedConfig.color}`
+					)}
+					variant={isMenuItem ? 'border' : 'contained'}
+					style={css?.button?.style}
+					wrapperClasses={twMerge(
+						css?.container?.class ?? '',
+						resolvedConfig.fillContainer ? 'w-full h-full' : '',
+						isMenuItem ? 'w-full' : '',
+						'wm-button-container',
+						`wm-button-container-${resolvedConfig.color}`
+					)}
+					wrapperStyle={css?.container?.style}
+					disabled={resolvedConfig.disabled}
+					on:click={handleClick}
+					size={resolvedConfig.size}
+					color={resolvedConfig.color}
+					loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
+				>
+					{#if resolvedConfig.beforeIcon}
+						{#key resolvedConfig.beforeIcon}
+							<div
+								class={resolvedConfig.label?.toString() &&
+								resolvedConfig.label?.toString()?.length > 0
+									? 'min-w-4'
+									: ''}
+								bind:this={beforeIconComponent}
+							></div>
+						{/key}
+					{/if}
+					{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
+						<div>{resolvedConfig.label.toString()}</div>
+					{/if}
+					{#if resolvedConfig.afterIcon}
+						{#key resolvedConfig.afterIcon}
+							<div
+								class={resolvedConfig.label?.toString() &&
+								resolvedConfig.label?.toString()?.length > 0
+									? 'min-w-4'
+									: ''}
+								bind:this={afterIconComponent}
+							></div>
+						{/key}
+					{/if}
+				</Button>
+			</div>
 		{/key}
 	</AlignWrapper>
 </RunnableWrapper>

package/package/components/apps/components/display/dbtable/InsertRow.svelte

@@ -5,6 +5,7 @@ init(wasmUrl);
 import { argSigToJsonSchemaType } from 'windmill-utils-internal';
 import SchemaForm from '../../../../SchemaForm.svelte';
 import { untrack } from 'svelte';
+import Toggle from '../../../../Toggle.svelte';
 let schema = $state(undefined);
 function parseSQLArgs(field, dbType) {
     let rawType = '';
@@ -87,7 +88,9 @@ async function builtSchema(fields, dbType) {
 let { args = $bindable({}), dbType = 'postgresql', columnDefs = [], isInsertable = $bindable(false) } = $props();
 let fields = $derived(columnDefs
     ?.filter((t) => {
-    const shouldFilter = t.isidentity === ColumnIdentity.Always || t?.hideInsert === true;
+    const shouldFilter = t.isidentity === ColumnIdentity.Always ||
+        t?.hideInsert === true ||
+        t.defaultvalue?.startsWith('nextval('); // exclude postgres serial/auto increment fields
     return !shouldFilter;
 })
     .map((column) => {
@@ -119,5 +122,32 @@ $effect(() => {
 </script>
 
 {#if schema}
-	<SchemaForm onlyMaskPassword {schema} bind:args />
+	<SchemaForm onlyMaskPassword {schema} bind:args>
+		{#snippet actions({ item })}
+			{@const disabled = fields?.[fields?.findIndex((f) => f.name === item.id)]?.nullable != 'YES'}
+			{#if !disabled}
+				<Toggle
+					options={{ right: 'NULL' }}
+					class="pl-2"
+					textClass="text-tertiary"
+					size="2sm"
+					bind:checked={
+						() => args[item.id] === null,
+						(v) => {
+							if (!schema?.properties[item.id]) return
+							if (v) {
+								schema.properties[item.id].nullable = true
+								schema.properties[item.id].disabled = true
+								args[item.id] = null
+							} else {
+								delete schema.properties[item.id].disabled
+								delete schema.properties[item.id].nullable
+								args[item.id] = schema.properties[item.id].default ?? ''
+							}
+						}
+					}
+				/>
+			{/if}
+		{/snippet}
+	</SchemaForm>
 {/if}

package/package/components/apps/components/display/dbtable/queries/insert.js

@@ -69,7 +69,7 @@ function shouldOmitColumnInInsert(column) {
 export function makeInsertQuery(table, columns, dbType) {
     if (!table)
         throw new Error('Table name is required');
-    const columnsInsert = columns.filter((x) => !x.hideInsert);
+    const columnsInsert = columns.filter((x) => !x.hideInsert && !(dbType == 'postgresql' && x.defaultvalue?.startsWith('nextval(')));
     const columnsDefault = columns.filter((c) => !shouldOmitColumnInInsert(c));
     const allInsertColumns = columnsInsert.concat(columnsDefault);
     let query = buildParameters(columnsInsert, dbType);
@@ -80,6 +80,7 @@ export function makeInsertQuery(table, columns, dbType) {
     const defaultValues = formatDefaultValues(columnsDefault);
     const commaOrEmpty = shouldInsertComma ? ', ' : '';
     query += `INSERT INTO ${table} (${columnNames}) VALUES (${insertValues}${commaOrEmpty}${defaultValues})`;
+    console.log(query);
     return query;
 }
 export function getInsertInput(table, columns, resource, dbType) {

package/package/components/apps/components/display/dbtable/utils.d.ts

@@ -57,6 +57,14 @@ export declare function formatSchema(dbSchema: {
     schema: SQLSchema['schema'];
     publicOnly: SQLSchema['publicOnly'];
 }): {
+    [tableKey: string]: {
+        [columnKey: string]: {
+            type: string;
+            default: string;
+            required: boolean;
+        };
+    };
+} | {
     [schemaKey: string]: {
         [tableKey: string]: {
             [columnKey: string]: {
@@ -66,14 +74,6 @@ export declare function formatSchema(dbSchema: {
             };
         };
     };
-} | {
-    [tableKey: string]: {
-        [columnKey: string]: {
-            type: string;
-            default: string;
-            required: boolean;
-        };
-    };
 };
 export declare function formatGraphqlSchema(schema: IntrospectionQuery): string;
 export type DbType = (typeof dbTypes)[number];

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -13,6 +13,7 @@ import { getPrimaryKeys } from '../dbtable/utils';
 import InitializeComponent from '../../helpers/InitializeComponent.svelte';
 import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import RunnableComponent from '../../helpers/RunnableComponent.svelte';
+import { CancelablePromise } from '../../../../../gen';
 let { id, componentInput, configuration, initializing = $bindable(undefined), render, customCss = undefined, actions = undefined } = $props();
 let runnableComponent = $state(undefined);
 function clear() {
@@ -113,6 +114,7 @@ function updateSearchInOutputs() {
 $effect(() => {
     searchValue !== undefined && untrack(() => updateSearchInOutputs());
 });
+let ignoreFirst = true;
 </script>
 
 {#each Object.keys(components['aggridinfinitecomponent'].initialData.configuration) as key (key)}
@@ -144,10 +146,17 @@ $effect(() => {
 	bind:result
 	bind:loading
 	bind:runnableComponent
-	on:recompute={() => {
-		console.log('recompute')
-		clear()
-	}}
+	preventDefaultRefresh
+	overrideCallback={() =>
+		new CancelablePromise(async (resolve) => {
+			if (ignoreFirst) {
+				ignoreFirst = false
+				resolve()
+				return
+			}
+			clear()
+			resolve()
+		})}
 	{render}
 	autoRefresh={true}
 	allowConcurentRequests

package/package/components/apps/components/display/table/SyncColumnDefs.svelte

@@ -88,10 +88,10 @@ $effect(() => {
         });
     }
 });
+let keys = $derived(Object.keys(result[0] ?? []).filter((x) => x !== '__index'));
 async function syncColumns() {
     const gridItem = findGridItem($app, id);
     if (gridItem && result) {
-        const keys = Object.keys(result[0] ?? {}) ?? [];
         const conf = gridItem.data.configuration.columnDefs;
         const newColumns = keys.map((key) => ({
             field: key,
@@ -136,7 +136,7 @@ async function updateConfiguration() {
 					<div class="flex flex-col items-start gap-2">
 						<div class="text-xs"> No columns definition found. Columns found in data: </div>
 						<div class="text-sm flex flex-row gap-2">
-							{#each Object.keys(result[0] ?? []) as key}
+							{#each keys as key}
 								<Badge small color="dark-gray">{key}</Badge>
 							{/each}
 						</div>

package/package/components/apps/components/display/table/utils.js

@@ -140,12 +140,22 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
             ...(actionsIndex > -1
                 ? {
                     // keep width/pin/flex/align/hide from placeholder when provided
-                    ...(['width', 'minWidth', 'maxWidth', 'flex', 'pinned', 'headerName', 'cellStyle', 'cellClass', 'autoHeight', 'hide']
-                        .reduce((acc, key) => {
+                    ...[
+                        'width',
+                        'minWidth',
+                        'maxWidth',
+                        'flex',
+                        'pinned',
+                        'headerName',
+                        'cellStyle',
+                        'cellClass',
+                        'autoHeight',
+                        'hide'
+                    ].reduce((acc, key) => {
                         if (r[actionsIndex] && r[actionsIndex][key] !== undefined)
                             acc[key] = r[actionsIndex][key];
                         return acc;
-                    }, {}))
+                    }, {})
                 }
                 : {}),
             ...(customActionsHeader?.trim() ? { headerName: customActionsHeader } : {})
@@ -182,7 +192,7 @@ export function validateColumnDefs(columnDefs) {
             colDef.hideInsert = true;
         }
         // Check if 'field' property exists and is a non-empty string
-        if (noField && !(colDef.children && Array.isArray(colDef.children))) {
+        if (noField && !(colDef.children && Array.isArray(colDef.children)) && !colDef.cellRenderer) {
             isValid = false;
             errors.push(`Column at index ${index} is missing a valid 'field' property nor having any children.`);
         }

package/package/components/apps/components/helpers/RefreshButton.svelte

@@ -23,13 +23,17 @@ let cancelCallbacks = $state(undefined);
 		color="light"
 		size="xs2"
 		btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
-		on:click={() => {
+		on:click={(e) => {
 			if (buttonHover && loading) {
 				cancelCallbacks?.forEach((cb) => cb.cancel())
 			} else {
 				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) => cb())
 			}
 		}}
+		on:pointerdown={(e) => {
+			e.preventDefault()
+			e.stopPropagation()
+		}}
 		iconOnly
 	/>
 	{#snippet text()}

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -53,8 +53,6 @@ function refreshOnStaticChange() {
         refreshIfAutoRefresh('static changed');
     }
 }
-// $: sendUserToast('args' + JSON.stringify(runnableInputValues) + Boolean(extraQueryParams) || args)
-// $: console.log(runnableInputValues)
 let firstRefresh = true;
 function genCallbacks({ onDone, onCancel, onError }) {
     const callbacks = {
@@ -404,7 +402,7 @@ async function runTransformer(res) {
             return {
                 error: {
                     name: 'TransformerError',
-                    message: 'An error occured in the transformer',
+                    message: 'An error occurred in the transformer',
                     stack: err.message
                 }
             };
@@ -632,7 +630,7 @@ $effect(() => {
 	<div class="h-full flex relative flex-row flex-wrap {wrapperClass} visible" style={wrapperStyle}>
 		<!-- {Object.keys(schemaStripped?.properties ?? {}).length > 0} -->
 		{#if render && (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
-			<div class="px-2 h-fit min-h-0">
+			<div class="px-2 h-fit min-h-0 w-full min-w-[350px]">
 				<SchemaForm
 					noVariablePicker
 					onlyMaskPassword
@@ -665,7 +663,7 @@ $effect(() => {
 							<div class="bg-surface">
 								<Alert type="error" title="Error during execution">
 									<div class="flex flex-col gap-2 overflow-auto">
-										An error occured, please contact the app author.
+										An error occurred, please contact the app author.
 
 										{#if $errorByComponent?.[id]?.error}
 											<div class="font-bold">{$errorByComponent[id].error}</div>

package/package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -75,6 +75,7 @@ interface Props {
     onSuccess?: (result: any) => void;
     children?: import('svelte').Snippet;
     nonRenderedPlaceholder?: import('svelte').Snippet;
+    preventDefaultRefresh?: boolean;
 }
 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/apps/components/inputs/currency/CurrencyInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import DarkModeObserver from '../../../../DarkModeObserver.svelte';
+import { inputBaseClass, inputBorderClass } from '../../../../text_input/TextInput.svelte';
 import { onMount, untrack } from 'svelte';
 /* Forked from MIT LICENSE
 https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
@@ -141,7 +142,7 @@ let darkMode = $state(false);
 		bind:value
 	/>
 	<input
-		class="
+		class="{inputBaseClass} {inputBorderClass()} 
 			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
 			{isNegativeAllowed && !isZero && !isNegative
 			? (inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE)