windmill-components 1.208.0 → 1.216.0

package/package/common.d.ts

@@ -23,11 +23,40 @@ export interface SchemaProperty {
         contentEncoding?: 'base64';
         enum?: string[];
     };
+    min?: number;
+    max?: number;
+    currency?: string;
+    currencyLocale?: string;
+    multiselect?: boolean;
+    customErrorMessage?: string;
     properties?: {
         [name: string]: SchemaProperty;
     };
     required?: string[];
 }
+export interface ModalSchemaProperty {
+    selectedType?: string;
+    description: string;
+    name: string;
+    required: boolean;
+    min?: number;
+    max?: number;
+    currency?: string;
+    currencyLocale?: string;
+    multiselect?: boolean;
+    format?: string;
+    pattern?: string;
+    enum_?: string[];
+    default?: any;
+    items?: {
+        type?: 'string' | 'number';
+        enum?: string[];
+    };
+    contentEncoding?: 'base64' | 'binary';
+    schema?: Schema;
+    customErrorMessage?: string;
+}
+export declare function modalToSchema(schema: ModalSchemaProperty): SchemaProperty;
 export type Schema = {
     $schema: string | undefined;
     type: string;

package/package/common.js

@@ -1,3 +1,23 @@
+export function modalToSchema(schema) {
+    return {
+        type: schema.selectedType,
+        description: schema.description,
+        pattern: schema.pattern,
+        default: schema.default,
+        enum: schema.enum_,
+        items: schema.items,
+        contentEncoding: schema.contentEncoding,
+        format: schema.format,
+        customErrorMessage: schema.customErrorMessage,
+        properties: schema.schema?.properties,
+        required: schema.schema?.required,
+        min: schema.min,
+        max: schema.max,
+        currency: schema.currency,
+        currencyLocale: schema.currencyLocale,
+        multiselect: schema.multiselect
+    };
+}
 export function pathToMeta(path) {
     const splitted = path.split('/');
     let ownerKind;

package/package/components/ApiConnectForm.svelte

@@ -6,6 +6,8 @@ import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 import TestConnection from './TestConnection.svelte';
 import SupabaseIcon from './icons/SupabaseIcon.svelte';
+import Popup from './common/popup/Popup.svelte';
+import Button from './common/button/Button.svelte';
 export let resource_type;
 export let args = {};
 export let linkedSecret = undefined;
@@ -61,6 +63,32 @@ function switchTab(asJson) {
     }
 }
 $: resource_type == 'postgresql' && isSupabaseAvailable();
+let connectionString = '';
+let validConnectionString = true;
+function parseConnectionString(close) {
+    // parse postgres connection string
+    const regex = /postgres:\/\/(?<user>[^:@]+)(?::(?<password>[^@]+))?@(?<host>[^:\/?]+)(?::(?<port>\d+))?\/(?<dbname>[^\?]+)?(?:\?.*sslmode=(?<sslmode>[^&]+))?/;
+    const match = connectionString.match(regex);
+    if (match) {
+        validConnectionString = true;
+        const { user, password, host, port, dbname, sslmode } = match.groups;
+        rawCode = JSON.stringify({
+            ...args,
+            user,
+            password: password || args?.password,
+            host,
+            port: port || args?.port,
+            dbname: dbname || args?.dbname,
+            sslmode: sslmode || args?.sslmode
+        }, null, 2);
+        rawCodeEditor?.setCode(rawCode);
+        close(null);
+    }
+    else {
+        validConnectionString = false;
+    }
+}
+let rawCodeEditor = undefined;
 </script>
 
 {#if !notFound}
@@ -72,6 +100,52 @@ $: resource_type == 'postgresql' && isSupabaseAvailable();
 			}}
 		/>
 		<TestConnection {resource_type} {args} />
+		{#if resource_type == 'postgresql'}
+			<Popup
+				let:close
+				floatingConfig={{
+					placement: 'bottom'
+				}}
+			>
+				<svelte:fragment slot="button">
+					<Button
+						spacingSize="sm"
+						size="xs"
+						btnClasses="h-8"
+						color="light"
+						variant="border"
+						nonCaptureEvent
+					>
+						From connection string
+					</Button>
+				</svelte:fragment>
+				<div class="block text-primary">
+					<div class="w-[550px] flex flex-col items-start gap-1">
+						<div class="flex flex-row gap-1 w-full">
+							<input
+								type="text"
+								bind:value={connectionString}
+								placeholder="postgres://user:password@host:5432/dbname?sslmode=disable"
+							/>
+							<Button
+								size="xs"
+								color="blue"
+								buttonType="button"
+								on:click={() => {
+									parseConnectionString(close)
+								}}
+								disabled={connectionString.length <= 0}
+							>
+								Apply
+							</Button>
+						</div>
+						{#if !validConnectionString}
+							<p class="text-red-500 text-xs">Could not parse connection string</p>
+						{/if}
+					</div>
+				</div>
+			</Popup>
+		{/if}
 		{#if resource_type == 'postgresql' && supabaseWizard}
 			<a
 				target="_blank"
@@ -93,7 +167,13 @@ $: resource_type == 'postgresql' && isSupabaseAvailable();
 	{#if !emptyString(error)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
 			>{error}</span
 		>{:else}<div class="py-2" />{/if}
-	<SimpleEditor autoHeight lang="json" bind:code={rawCode} fixedOverflowWidgets={false} />
+	<SimpleEditor
+		bind:this={rawCodeEditor}
+		autoHeight
+		lang="json"
+		bind:code={rawCode}
+		fixedOverflowWidgets={false}
+	/>
 {:else}
 	<SchemaForm noDelete {linkedSecretCandidates} bind:linkedSecret isValid {schema} bind:args />
 {/if}

package/package/components/ArgEnum.svelte

@@ -1,4 +1,5 @@
-<script>import { Pen } from 'lucide-svelte';
+<script>import AutoComplete from 'simple-svelte-autocomplete';
+import { Pen } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 export let customValue;
@@ -8,40 +9,31 @@ export let enum_;
 export let autofocus;
 export let defaultValue;
 export let valid;
+export let disableCustomValue = false;
 const dispatch = createEventDispatcher();
 </script>
 
-{#if !customValue}
-	<select
-		on:focus={(e) => {
-			dispatch('focus')
-		}}
-		{disabled}
-		class="px-6"
-		bind:value
-	>
-		{#each enum_ ?? [] as e}
-			<option>{e}</option>
-		{/each}
-	</select>
-{:else}
-	<!-- svelte-ignore a11y-autofocus -->
-	<input
-		{autofocus}
-		on:focus
-		type="text"
-		class={twMerge(
-			'bg-surface-secondary',
-			valid
-				? ''
-				: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
-		)}
-		placeholder={defaultValue ?? ''}
-		bind:value
-	/>
-{/if}
+<AutoComplete
+	items={enum_ ?? []}
+	bind:selectedItem={value}
+	inputClassName={twMerge(
+		'bg-surface-secondary flex',
+		valid
+			? ''
+			: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+	)}
+	value={value ?? defaultValue}
+	hideArrow={true}
+	dropdownClassName="!text-sm !py-2 !rounded-sm !border-gray-200 !border !shadow-md"
+	className="w-full"
+	onFocus={() => {
+		dispatch('focus')
+	}}
+	{disabled}
+	{autofocus}
+/>
 
-{#if !disabled}
+{#if !disabled && !disableCustomValue}
 	<button
 		class="min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
 		on:click={() => {

package/package/components/ArgEnum.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         autofocus: boolean;
         defaultValue: string | undefined;
         valid: boolean;
+        disableCustomValue?: boolean | undefined;
     };
     events: {
         focus: CustomEvent<any>;

package/package/components/ArgInfo.svelte

@@ -2,10 +2,10 @@
 import { workspaceStore } from '../stores';
 import { copyToClipboard, truncate } from '../utils';
 import { ClipboardCopy, Expand } from 'lucide-svelte';
-import { Button, DrawerContent } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 import Tooltip from './Tooltip.svelte';
+import { Button, DrawerContent } from './common';
 export let value;
 let jsonViewer;
 let jsonViewerContent;

package/package/components/ArgInput.svelte

@@ -1,5 +1,5 @@
-<script>import { setInputCat as computeInputCat } from '../utils';
-import { ChevronDown, DollarSign, Plus, X } from 'lucide-svelte';
+<script>import { setInputCat as computeInputCat, emptyString } from '../utils';
+import { ChevronDown, DollarSign, Pipette, Plus, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import autosize from 'svelte-autosize';
 import Multiselect from 'svelte-multiselect';
@@ -21,6 +21,9 @@ import { twMerge } from 'tailwind-merge';
 import ArgEnum from './ArgEnum.svelte';
 import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte';
 import DateTimeInput from './DateTimeInput.svelte';
+import S3FilePicker from './S3FilePicker.svelte';
+import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte';
+import Label from './Label.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -52,9 +55,11 @@ export let resourceTypes;
 export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let simpleTooltip = undefined;
+export let customErrorMessage = undefined;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 let error = '';
+let s3FilePicker;
 let el = undefined;
 export let editor = undefined;
 let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
@@ -126,7 +131,15 @@ function validateInput(pattern, v, required) {
     }
     else {
         if (pattern && !testRegex(pattern, v)) {
-            error = `Should match ${pattern}`;
+            if (!emptyString(customErrorMessage)) {
+                error = customErrorMessage ?? '';
+            }
+            else if (format == 'email') {
+                error = 'invalid email address';
+            }
+            else {
+                error = `Should match ${pattern}`;
+            }
             valid && (valid = false);
         }
         else {
@@ -156,6 +169,17 @@ let customValue = false;
 $: validateInput(pattern, value, required);
 </script>
 
+<S3FilePicker
+	bind:this={s3FilePicker}
+	initialFileKey={value}
+	bind:selectedFileKey={value}
+	on:close={() => {
+		rawValue = JSON.stringify(value, null, 2)
+		editor?.setCode(rawValue)
+	}}
+	readOnlyMode={false}
+/>
+
 <!-- svelte-ignore a11y-autofocus -->
 <div class="flex flex-col w-full {minW ? 'min-w-[250px]' : ''}">
 	<div>
@@ -185,6 +209,9 @@ $: validateInput(pattern, value, required);
 
 			{#if type == 'array'}
 				<ArrayTypeNarrowing bind:itemsType />
+				<Label label="Display using multiselect">
+					<Toggle disabled={itemsType?.enum == undefined} bind:checked={extra.multiselect} />
+				</Label>
 			{:else if (type == 'string' && format != 'date-time') || ['number', 'object'].includes(type ?? '')}
 				<div class="p-2 my-1 text-xs border-solid border border-gray-200 rounded-lg">
 					<div class="w-min">
@@ -206,9 +233,20 @@ $: validateInput(pattern, value, required);
 					{#if seeEditable}
 						<div class="mt-2">
 							{#if type == 'string' && format != 'date-time'}
-								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
+								<StringTypeNarrowing
+									bind:customErrorMessage
+									bind:format
+									bind:pattern
+									bind:enum_
+									bind:contentEncoding
+								/>
 							{:else if type == 'number'}
-								<NumberTypeNarrowing bind:min={extra['min']} bind:max={extra['max']} />
+								<NumberTypeNarrowing
+									bind:min={extra['min']}
+									bind:max={extra['max']}
+									bind:currency={extra['currency']}
+									bind:currencyLocale={extra['currencyLocale']}
+								/>
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
 							{/if}
@@ -238,20 +276,34 @@ $: validateInput(pattern, value, required);
 					</div>
 				{:else if extra['seconds'] !== undefined}
 					<SecondsInput bind:seconds={value} on:focus />
-				{:else}
-					<input
-						{autofocus}
-						on:focus
-						{disabled}
-						type="number"
-						class={valid
-							? ''
-							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-						placeholder={defaultValue ?? ''}
+				{:else if extra?.currency}
+					<CurrencyInput
+						inputClasses={{
+							formatted: twMerge('px-2 w-full py-1.5 text-black'),
+							wrapper: 'w-full windmillapp',
+							formattedZero: twMerge('text-black')
+						}}
+						style="color:black;"
 						bind:value
-						min={extra['min']}
-						max={extra['max']}
+						currency={extra?.currency}
+						locale={extra?.currencyLocale ?? 'en-US'}
 					/>
+				{:else}
+					<div class="relative w-full">
+						<input
+							{autofocus}
+							on:focus
+							{disabled}
+							type="number"
+							class={valid
+								? ''
+								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+							placeholder={defaultValue ?? ''}
+							bind:value
+							min={extra['min']}
+							max={extra['max']}
+						/>
+					</div>
 				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
@@ -278,6 +330,15 @@ $: validateInput(pattern, value, required);
 								selectedOptionsDraggable={true}
 							/>
 						</div>
+					{:else if extra.multiselect}
+						<div class="items-start">
+							<Multiselect
+								{disabled}
+								bind:selected={value}
+								options={itemsType?.enum ?? []}
+								selectedOptionsDraggable={true}
+							/>
+						</div>
 					{:else}
 						<div class="w-full">
 							{#key redraw}
@@ -297,17 +358,19 @@ $: validateInput(pattern, value, required);
 												{:else if itemsType?.type == 'object'}
 													<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
 												{:else if Array.isArray(itemsType?.enum)}
-													<select
-														on:focus={(e) => {
+													<ArgEnum
+														on:focus={() => {
 															dispatch('focus')
 														}}
-														class="px-6"
+														{defaultValue}
+														{valid}
+														{customValue}
+														{disabled}
+														{autofocus}
 														bind:value={v}
-													>
-														{#each itemsType?.enum ?? [] as e}
-															<option>{e}</option>
-														{/each}
-													</select>
+														disableCustomValue={true}
+														enum_={itemsType?.enum ?? []}
+													/>
 												{:else}
 													<input type="text" bind:value={v} id="arg-input-array" />
 												{/if}
@@ -357,6 +420,30 @@ $: validateInput(pattern, value, required);
 				<span class="text-2xs text-tertiary">Loading resource types...</span>
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
 				<ObjectResourceInput {disablePortal} {format} bind:value {showSchemaExplorer} />
+			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format.replace('resource-', '') == 's3object'}
+				<div class="flex flex-col w-full gap-1">
+					<JsonEditor
+						bind:editor
+						on:focus={(e) => {
+							dispatch('focus')
+						}}
+						code={JSON.stringify({ s3: '' }, null, 2)}
+						bind:value
+					/>
+					<Button
+						variant="border"
+						color="light"
+						size="xs"
+						btnClasses="mt-1"
+						on:click={() => {
+							s3FilePicker?.open?.()
+						}}
+						id="arg-input-file-picker"
+						startIcon={{ icon: Pipette }}
+					>
+						Choose an object from the catalog
+					</Button>
+				</div>
 			{:else if inputCat == 'object' || inputCat == 'resource-object'}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
@@ -418,6 +505,18 @@ $: validateInput(pattern, value, required);
 						: undefined}
 					{showSchemaExplorer}
 				/>
+			{:else if inputCat == 'email'}
+				<input
+					{autofocus}
+					on:focus
+					{disabled}
+					type="email"
+					class={valid
+						? ''
+						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
+					placeholder={defaultValue ?? ''}
+					bind:value
+				/>
 			{:else if inputCat == 'string'}
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items-center justify-between relative">
@@ -439,7 +538,7 @@ $: validateInput(pattern, value, required);
 									'w-full',
 									valid
 										? ''
-										: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+										: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
 								)}
 								placeholder={defaultValue ?? ''}
 								bind:value

package/package/components/ArgInput.svelte.d.ts

@@ -43,6 +43,7 @@ declare const __propDef: {
         disablePortal?: boolean | undefined;
         showSchemaExplorer?: boolean | undefined;
         simpleTooltip?: string | undefined;
+        customErrorMessage?: string | undefined;
         editor?: SimpleEditor | undefined;
         focus?: (() => void) | undefined;
     };

package/package/components/DBSchemaExplorer.svelte

@@ -86,7 +86,7 @@ const scripts = {
         argName: 'api'
     },
     bigquery: {
-        code: `import { BigQuery } from '@google-cloud/bigquery@7.2.0';
+        code: `import { BigQuery } from 'npm:@google-cloud/bigquery@7.2.0';
 export async function main(args: bigquery) {
   const bq = new BigQuery({
     credentials: args
@@ -113,7 +113,7 @@ GROUP BY table_name".replace('{dataset.id}', dataset.id)
   }
   return schema
 }`,
-        lang: 'bun',
+        lang: 'deno',
         argName: 'args'
     },
     snowflake: {

package/package/components/DiffEditor.svelte

@@ -9,7 +9,7 @@ import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
-import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { buildWorkerDefinition } from './build_workers';
 buildWorkerDefinition('../../../workers', import.meta.url, false);
 const SIDE_BY_SIDE_MIN_WIDTH = 700;
 export let automaticLayout = true;

package/package/components/DisplayResult.svelte

@@ -6,6 +6,7 @@ import { Button, Drawer, DrawerContent } from './common';
 import { ClipboardCopy, Download, Expand } from 'lucide-svelte';
 import Portal from 'svelte-portal';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import S3FilePicker from './S3FilePicker.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -94,12 +95,16 @@ function inferResultKind(result) {
                 keys.includes('approvalPage')) {
                 return 'approval';
             }
+            else if (keys.length === 1 && keys.includes('s3')) {
+                return 's3object';
+            }
         }
         catch (err) { }
     }
     return 'json';
 }
 let jsonViewer;
+let s3FileViewer;
 function toJsonStr(result) {
     return JSON.stringify(result, null, 4);
 }
@@ -115,7 +120,7 @@ function contentOrRootString(obj) {
 
 <div class="inline-highlight relative grow min-h-[200px]">
 	{#if result != undefined && length != undefined && largeObject != undefined}
-		{#if resultKind && resultKind != 'json'}
+		{#if resultKind && !['json', 's3object'].includes(resultKind)}
 			<div class="top-0 flex flex-row w-full justify-between items-center"
 				><div class="mb-2 text-tertiary text-sm">
 					as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
@@ -133,7 +138,9 @@ function contentOrRootString(obj) {
 						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
 					</div>
 				{/if}</div
-			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
+			>
+		{/if}
+		{#if !forceJson && resultKind == 'table-col'}<div
 				class="grid grid-flow-col-dense border rounded-md"
 			>
 				{#each Object.keys(result) as col}
@@ -260,6 +267,17 @@ function contentOrRootString(obj) {
 					><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a></div
 				>
 			</div>
+		{:else if !forceJson && resultKind == 's3object'}
+			<div class="absolute top-1 h-full w-full">
+				<Highlight class="" language={json} code={toJsonStr(result).replace(/\\n/g, '\n')} />
+				<button
+					class="text-secondary underline text-2xs whitespace-nowrap"
+					on:click={() => {
+						s3FileViewer?.open?.()
+					}}
+					>s3 explorer
+				</button>
+			</div>
 		{:else if largeObject}<div class="text-sm text-tertiary"
 				><a
 					download="{filename ?? 'result'}.json"
@@ -332,4 +350,13 @@ function contentOrRootString(obj) {
 			</DrawerContent>
 		</Drawer>
 	</Portal>
+
+	<Portal>
+		<S3FilePicker
+			bind:this={s3FileViewer}
+			initialFileKey={result}
+			selectedFileKey={result}
+			readOnlyMode={true}
+		/>
+	</Portal>
 {/if}