windmill-components 1.511.1 → 1.531.0

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -15,6 +15,6 @@ interface Props {
     overrideAllowKindChange?: boolean;
     originalType?: string | undefined;
 }
-declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "disableCreate" | "pattern" | "format" | "contentEncoding" | "customErrorMessage" | "dateFormat" | "enum_" | "enumLabels" | "minRows" | "disableVariablePicker">;
+declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "disableCreate" | "pattern" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "dateFormat" | "minRows" | "disableVariablePicker">;
 type StringTypeNarrowing = ReturnType<typeof StringTypeNarrowing>;
 export default StringTypeNarrowing;

package/package/components/TemplateEditor.svelte

@@ -395,7 +395,7 @@ async function loadMonaco() {
     model.updateOptions(updateOptions);
     try {
         editor = meditor.create(divEl, {
-            ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+            ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets, false),
             model,
             // overflowWidgetsDomNode: widgets,
             // lineNumbers: 'on',

package/package/components/UserSettings.svelte

@@ -21,9 +21,9 @@ export function closeDrawer() {
 function removeHash() {
     window.location.hash = '';
 }
-function handleTokenCreated(event) {
-    newToken = event.detail;
-    dispatch('tokenCreated', newToken);
+function handleTokenCreated(token) {
+    newToken = token;
+    dispatch('tokenCreated', token);
 }
 </script>
 
@@ -53,7 +53,7 @@ function handleTokenCreated(event) {
 				defaultNewTokenLabel={newTokenLabel}
 				defaultNewTokenWorkspace={newTokenWorkspace}
 				{scopes}
-				on:tokenCreated={handleTokenCreated}
+				onTokenCreated={handleTokenCreated}
 			/>
 		</div>
 	</DrawerContent>

package/package/components/WorkerTagSelect.svelte

@@ -1,13 +1,26 @@
 <script lang="ts">import { workerTags, workspaceStore } from '../stores';
 import { WorkerService } from '../gen';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import { Button } from './common';
 import { RotateCw } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
+import Popover from './Popover.svelte';
 let { tag = $bindable(), noLabel = false, nullTag = undefined, disabled = false, placeholder, inputClass } = $props();
 let loading = $state(false);
+let visible = $state(false);
+let timeout = undefined;
+let tagsToWorkerExists = $state(undefined);
+onMount(() => {
+    visible = true;
+});
+onDestroy(() => {
+    visible = false;
+    if (timeout) {
+        clearTimeout(timeout);
+    }
+});
 loadWorkerGroups();
 const dispatch = createEventDispatcher();
 async function loadWorkerGroups(force = false) {
@@ -28,9 +41,64 @@ let items = $derived([
     ...(tag && tag != '' && !($workerTags ?? []).includes(tag) ? [tag] : []),
     ...($workerTags ?? [])
 ]);
+let lastCheck = undefined;
+async function loadTagsToWorkerExists(tags) {
+    if (lastCheck && Date.now() - lastCheck < 5000) {
+        return;
+    }
+    if (timeout) {
+        clearTimeout(timeout);
+    }
+    if (open) {
+        tagsToWorkerExists = await WorkerService.existsWorkersWithTags({ tags: tags.join(',') });
+        lastCheck = Date.now();
+        if (visible) {
+            timeout = setTimeout(() => {
+                loadTagsToWorkerExists(tags);
+            }, 5000);
+        }
+    }
+}
+// let finalItems = $derived(
+// 	items.map((item) => {
+// 		if (tagsToWorkerExists) {
+// 			return {
+// 				value: item,
+// 				__select_group: tagsToWorkerExists[item]
+// 					? `${placeholder ?? 'Worker'}s available`
+// 					: `No ${placeholder ?? 'Worker'}s`
+// 			}
+// 		}
+// 		return item
+// 	})
+// )
+$effect(() => {
+    if ($workerTags && open) {
+        loadTagsToWorkerExists($workerTags);
+    }
+});
 let open = $state(false);
 </script>
 
+{#snippet startSnippet({ item })}
+	{#if tagsToWorkerExists}
+		{#if tagsToWorkerExists[item.value]}
+			<Popover>
+				{#snippet text()}
+					At least one worker with this tag exists and is running.
+				{/snippet}
+				<div class="rounded-full inline-block bg-green-500 text-white text-xs w-2 h-2 mr-1"></div>
+			</Popover>
+		{:else}
+			<Popover>
+				{#snippet text()}
+					No workers with this tag exist or is running.
+				{/snippet}
+				<div class="rounded-full inline-block bg-red-500 text-white text-xs w-2 h-2 mr-1"></div>
+			</Popover>
+		{/if}
+	{/if}
+{/snippet}
 <div class="flex gap-1 items-center relative">
 	{#if !noLabel}
 		<div class="text-tertiary text-2xs">{placeholder ?? 'tag'}</div>
@@ -44,6 +112,7 @@ let open = $state(false);
 		placeholder={nullTag ? nullTag : (placeholder ?? 'lang default')}
 		items={safeSelectItems(items)}
 		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
+		{startSnippet}
 	/>
 	{#if open}
 		<div class="absolute top-0 -right-12">

package/package/components/apps/components/display/AppAccordionList.svelte

@@ -121,7 +121,7 @@ function toggleAccordion(index) {
 										subGridId={`${id}-0`}
 										containerHeight={componentContainerHeight -
 											(30 * accordionInput?.value.length + 40)}
-										on:focus={() => {
+										onFocus={() => {
 											if (!$connectingInput.opened) {
 												$selectedComponent = [id]
 											}

package/package/components/apps/components/display/AppCarouselList.svelte

@@ -101,14 +101,20 @@ $componentControl[id] = {
 
 <InitializeComponent {id} />
 
+{#snippet nonRenderedPlaceholder()}
+	<ListWrapper disabled value={undefined} index={0}>
+		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+	</ListWrapper>
+{/snippet}
 <RunnableWrapper
-	render={true}
+	{render}
 	{outputs}
 	autoRefresh
 	{componentInput}
 	{id}
 	bind:initializing
 	bind:result
+	{nonRenderedPlaceholder}
 >
 	{#if everRender}
 		<div class="w-full flex flex-wrap overflow-auto divide-y max-h-full">
@@ -206,7 +212,7 @@ $componentControl[id] = {
 											style={css?.container?.style}
 											subGridId={`${id}-0`}
 											containerHeight={componentContainerHeight - 40}
-											on:focus={() => {
+											onFocus={() => {
 												if (!$connectingInput.opened) {
 													$selectedComponent = [id]
 												}
@@ -219,9 +225,7 @@ $componentControl[id] = {
 						</Carousel>
 					{/key}
 				{:else}
-					<ListWrapper disabled value={undefined} index={0}>
-						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-					</ListWrapper>
+					{@render nonRenderedPlaceholder?.()}
 					{#if !Array.isArray(result)}
 						<div class="text-center text-tertiary">Input data is not an array</div>
 					{/if}
@@ -229,8 +233,6 @@ $componentControl[id] = {
 			{/if}
 		</div>
 	{:else if $app.subgrids}
-		<ListWrapper disabled value={undefined} index={0}>
-			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-		</ListWrapper>
+		{@render nonRenderedPlaceholder?.()}
 	{/if}
 </RunnableWrapper>

package/package/components/apps/components/display/AppDisplayComponent.svelte

@@ -9,6 +9,7 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { userStore } from '../../../../stores';
+let result_stream = $state(undefined);
 let { id, componentInput, initializing = $bindable(undefined), customCss = undefined, render, configuration } = $props();
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
 const { app, worldStore, componentControl, workspace, appPath } = getContext('AppViewerContext');
@@ -24,6 +25,7 @@ const outputs = initOutput($worldStore, id, {
     loading: false
 });
 let css = $state(initCss($app.css?.displaycomponent, customCss));
+let loading = $state(false);
 </script>
 
 {#each Object.keys(components['displaycomponent'].initialData.configuration) as key (key)}
@@ -45,7 +47,15 @@ let css = $state(initCss($app.css?.displaycomponent, customCss));
 	/>
 {/each}
 
-<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper
+	{outputs}
+	{render}
+	{componentInput}
+	{id}
+	bind:initializing
+	bind:result
+	bind:loading
+>
 	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
@@ -70,8 +80,10 @@ let css = $state(initCss($app.css?.displaycomponent, customCss));
 			)}
 		>
 			<DisplayResult
+				{loading}
 				workspaceId={workspace}
 				{result}
+				{result_stream}
 				{requireHtmlApproval}
 				disableExpand={resolvedConfig?.hideDetails}
 				appPath={$userStore ? undefined : $appPath}

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -72,13 +72,13 @@ let jobId = $derived(resolvedConfig.jobId);
 				<FlowStatusViewer
 					workspaceId={workspace}
 					{jobId}
-					on:start={() => {
+					onStart={() => {
 						outputs?.jobId.set(jobId)
 						outputs?.loading.set(true)
 					}}
-					on:done={(e) => {
+					onDone={({ job }) => {
 						outputs?.loading.set(false)
-						outputs?.result.set(e?.detail?.result)
+						outputs?.result.set(job?.result as any)
 					}}
 				/>
 			{:else}

package/package/components/apps/components/display/AppText.svelte

@@ -2,7 +2,7 @@
 const bubble = createBubbler();
 import Tooltip from '../../../Tooltip.svelte';
 import { Clipboard } from 'lucide-svelte';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { copyToClipboard, isCodeInjection } from '../../../../utils';
 import Button from '../../../common/button/Button.svelte';
@@ -34,7 +34,7 @@ $componentControl[id] = {
     }
 };
 const outputs = initOutput($worldStore, id, {
-    result,
+    result: untrack(() => result),
     loading: initializing
 });
 function getComponent() {

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

@@ -18,6 +18,7 @@ import { CancelablePromise } from '../../../../../gen';
 import RefreshButton from '../../helpers/RefreshButton.svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import InsertRowDrawerButton from '../InsertRowDrawerButton.svelte';
+import { assert } from '../../../../../utils';
 let { id, configuration, customCss = undefined, render, initializing = $bindable(undefined), actions = [] } = $props();
 $effect.pre(() => {
     if (initializing === undefined) {
@@ -224,7 +225,13 @@ async function listColumnsIfAvailable() {
     gridItem.data.configuration.columnDefs.loading = true;
     gridItem.data = gridItem.data;
     $app = $app;
-    let tableMetadata = await loadTableMetaData(resolvedConfig.type.configuration[selected].resource, $workspaceStore, resolvedConfig.type.configuration[selected].table, selected);
+    let resource = resolvedConfig.type.configuration[selected].resource;
+    assert('resource starts with $res:', resource?.startsWith('$res:'), resource);
+    let tableMetadata = await loadTableMetaData({
+        type: 'database',
+        resourcePath: resource.substring(5),
+        resourceType: selected
+    }, $workspaceStore, resolvedConfig.type.configuration[selected].table);
     if (!tableMetadata)
         return;
     let old = columnDefs?.value ?? [];

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

@@ -1,8 +1,8 @@
 <script lang="ts">import { ColumnIdentity } from './utils';
-import init, { parse_sql, parse_mysql, parse_bigquery, parse_snowflake, parse_mssql } from 'windmill-sql-datatype-parser-wasm';
+import init, { parse_sql, parse_mysql, parse_bigquery, parse_snowflake, parse_mssql, parse_duckdb } from 'windmill-sql-datatype-parser-wasm';
 import wasmUrl from 'windmill-sql-datatype-parser-wasm/windmill_sql_datatype_parser_wasm_bg.wasm?url';
 init(wasmUrl);
-import { argSigToJsonSchemaType } from '../../../../../inferArgSig';
+import { argSigToJsonSchemaType } from 'windmill-utils-internal';
 import SchemaForm from '../../../../SchemaForm.svelte';
 import { untrack } from 'svelte';
 let schema = $state(undefined);
@@ -24,8 +24,9 @@ function parseSQLArgs(field, dbType) {
         case 'ms_sql_server':
             rawType = parse_mssql(field);
             break;
-        default:
-            throw new Error('Language not supported');
+        case 'duckdb':
+            rawType = parse_duckdb(field);
+            break;
     }
     return rawType;
 }

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

@@ -77,6 +77,15 @@ export function makeCountQuery(dbType, table, whereClause = undefined, columnDef
             query += `SELECT COUNT(*) as count FROM \`${table}\``;
             break;
         }
+        case 'duckdb':
+            if (filteredColumns.length > 0) {
+                quicksearchCondition += ` ($quicksearch = '' OR CONCAT(' ', ${filteredColumns.join(', ')}) LIKE CONCAT('%', $quicksearch, '%'))`;
+            }
+            else {
+                quicksearchCondition += ` ($quicksearch = '' OR 1 = 1)`;
+            }
+            query += `SELECT COUNT(*) as count FROM ${table}`;
+            break;
         default:
             throw new Error('Unsupported database type:' + dbType);
     }
@@ -91,7 +100,8 @@ export function makeCountQuery(dbType, table, whereClause = undefined, columnDef
         (dbType === 'mysql' ||
             dbType === 'postgresql' ||
             dbType === 'snowflake' ||
-            dbType === 'bigquery')) {
+            dbType === 'bigquery' ||
+            dbType === 'duckdb')) {
         query = query.replace(`${andCondition}`, wherePrefix);
     }
     return query;

package/package/components/apps/components/display/dbtable/queries/createTable.d.ts

@@ -20,6 +20,6 @@ type CreateTableValuesColumn = {
     not_null?: boolean;
     datatype_length?: number;
 };
-export declare function makeCreateTableQuery(values: CreateTableValues, resourceType: DbType, schema?: string): string;
+export declare function makeCreateTableQuery(values: CreateTableValues, dbType: DbType, schema?: string): string;
 export declare function datatypeDefaultLength(datatype: string): number;
 export {};

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

@@ -1,9 +1,9 @@
 import { dbSupportsSchemas } from '../utils';
-export function makeCreateTableQuery(values, resourceType, schema) {
+export function makeCreateTableQuery(values, dbType, schema) {
     const pkCount = values.columns.reduce((p, c) => p + (c.primaryKey ? 1 : 0), 0);
     function transformColumn(c) {
         const datatype = c.datatype_length ? `${c.datatype}(${c.datatype_length})` : c.datatype;
-        const defValue = c.defaultValue && formatDefaultValue(c.defaultValue, datatype, resourceType);
+        const defValue = c.defaultValue && formatDefaultValue(c.defaultValue, datatype, dbType);
         let str = `  ${c.name} ${datatype}`;
         if (c.not_null)
             str += ' NOT NULL';
@@ -26,7 +26,7 @@ export function makeCreateTableQuery(values, resourceType, schema) {
             l += ` ON UPDATE ${fk.onUpdate}`;
         return l;
     }
-    const useSchema = dbSupportsSchemas(resourceType);
+    const useSchema = dbSupportsSchemas(dbType);
     const lines = values.columns.map(transformColumn);
     lines.push(...values.foreignKeys.map(transformFk));
     if (pkCount > 1) {

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

@@ -37,6 +37,13 @@ export function makeDeleteQuery(table, columns, dbType) {
             query += `\nDELETE FROM ${table} \nWHERE ${conditions}`;
             return query;
         }
+        case 'duckdb': {
+            const conditions = columns
+                .map((c) => `($${c.field} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${c.field})`)
+                .join('\n    AND ');
+            query += `\nDELETE FROM ${table} \nWHERE ${conditions}`;
+            return query;
+        }
         default:
             throw new Error('Unsupported database type');
     }

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

@@ -12,6 +12,8 @@ function formatInsertValues(columns, dbType, startIndex = 1) {
             return columns.map(() => `?`).join(', ');
         case 'bigquery':
             return columns.map((c) => `@${c.field}`).join(', ');
+        case 'duckdb':
+            return columns.map((c) => `$${c.field}`).join(', ');
         default:
             throw new Error('Unsupported database type');
     }

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

@@ -155,6 +155,20 @@ CASE WHEN :order_by = '${column.field}' AND :is_desc IS true THEN \`${column.fie
             query += ` LIMIT @limit OFFSET @offset`;
             break;
         }
+        case 'duckdb': {
+            const orderBy = `
+      ${columnDefs
+                .map((column) => `
+      (CASE WHEN $order_by = '${column.field}' AND $is_desc IS false THEN "${column.field}"::text END),
+      (CASE WHEN $order_by = '${column.field}' AND $is_desc IS true THEN "${column.field}"::text END) DESC`)
+                .join(',\n')}`;
+            quicksearchCondition = `($quicksearch = '' OR CONCAT(${filteredColumns.join(', ')}) ILIKE '%' || $quicksearch || '%')`;
+            query += `SELECT ${filteredColumns.join(', ')} FROM ${table}\n`;
+            query += ` WHERE ${whereClause ? `${whereClause} AND` : ''} ${quicksearchCondition}\n`;
+            query += ` ORDER BY ${orderBy}\n`;
+            query += ` LIMIT $limit::INT OFFSET $offset::INT`;
+            break;
+        }
         default:
             throw new Error('Unsupported database type');
     }

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

@@ -41,6 +41,13 @@ export function makeUpdateQuery(table, column, columns, dbType) {
             query += `\nUPDATE ${table} SET ${column.field} = @value_to_update \nWHERE ${conditions}`;
             return query;
         }
+        case 'duckdb': {
+            const conditions = columns
+                .map((c) => `($${c.field} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${c.field})`)
+                .join('\n    AND ');
+            query += `\nUPDATE ${table} SET ${column.field} = $value_to_update \nWHERE ${conditions}`;
+            return query;
+        }
         default:
             throw new Error('Unsupported database type');
     }

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

@@ -1,6 +1,7 @@
-import { type Preview } from '../../../../../gen';
+import { type ScriptLang } from '../../../../../gen';
 import type { DBSchema, DBSchemas, SQLSchema } from '../../../../../stores';
 import { type IntrospectionQuery } from 'graphql';
+import type { DbInput } from '../../../../dbOps';
 export declare enum ColumnIdentity {
     ByDefault = "By Default",
     Always = "Always",
@@ -40,8 +41,8 @@ export type ColumnDef = {
     defaultUserValue?: any;
     defaultValueNull?: boolean;
 } & ColumnMetadata;
-export declare function loadTableMetaData(resource: string, workspace: string | undefined, table: string | undefined, resourceType: string): Promise<TableMetadata | undefined>;
-export declare function loadAllTablesMetaData(resource: string, workspace: string | undefined, resourceType: string): Promise<Record<string, TableMetadata> | undefined>;
+export declare function loadTableMetaData(input: DbInput, workspace: string | undefined, table: string | undefined): Promise<TableMetadata | undefined>;
+export declare function loadAllTablesMetaData(workspace: string | undefined, input: DbInput): Promise<Record<string, TableMetadata> | undefined>;
 export declare function resourceTypeToLang(rt: string): string;
 declare const scripts: Record<string, {
     code: string;
@@ -76,10 +77,10 @@ export declare function formatSchema(dbSchema: {
 };
 export declare function formatGraphqlSchema(schema: IntrospectionQuery): string;
 export type DbType = (typeof dbTypes)[number];
-export declare const dbTypes: readonly ["mysql", "ms_sql_server", "postgresql", "snowflake", "bigquery"];
+export declare const dbTypes: readonly ["mysql", "ms_sql_server", "postgresql", "snowflake", "bigquery", "duckdb"];
 export declare const isDbType: (str?: string) => str is DbType;
 export declare function buildVisibleFieldList(columnDefs: ColumnDef[], dbType: DbType): string[];
-export declare function getLanguageByResourceType(name: string): Preview['language'];
+export declare function getLanguageByResourceType(name: string): ScriptLang;
 export declare function buildParameters(columns: Array<{
     field: string;
     datatype: string;