windmill-components 1.60.3 → 1.83.1

package/assets/app.css

@@ -23,6 +23,9 @@
 		display: none !important;
 	}
 
+	.svelte-select-list {
+		z-index: 1000 !important;
+	}
 	.nowrap pre code.hljs {
 		whitespace: normal !important;
 	}
@@ -47,12 +50,23 @@
 	.Template-editor span.mtk20 {
 		color: black !important;
 	}
+
+	::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(155, 155, 155, 0.5);
+		border: transparent;
+	}
 }
 
 @layer components {
 	/* Flow graph viewer -> Svelvet library internal class overwrite */
 	.Node {
 		display: flex !important;
-		cursor: pointer !important;
 	}
 }

package/common.d.ts

@@ -1,4 +1,4 @@
-import type { Script } from "./gen";
+import type { Script } from './gen';
 export type OwnerKind = 'group' | 'user' | 'folder';
 export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
 export type SupportedLanguage = Script.language;
@@ -11,7 +11,7 @@ export interface SchemaProperty {
     contentEncoding?: 'base64' | 'binary';
     format?: string;
     items?: {
-        type?: 'string' | 'number' | 'bytes';
+        type?: 'string' | 'number' | 'bytes' | 'object';
         contentEncoding?: 'base64';
     };
     properties?: {
@@ -19,7 +19,7 @@ export interface SchemaProperty {
     };
 }
 export type Schema = {
-    $schema: string;
+    $schema: string | undefined;
     type: string;
     properties: {
         [name: string]: SchemaProperty;
@@ -31,4 +31,8 @@ export type Meta = {
     owner: string;
     name: string;
 };
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
+/** An inclusive range of integer numbers */
+export type IntRange<F extends number, T extends number> = F | Exclude<Enumerate<T>, Enumerate<F>> | T;
 export declare function pathToMeta(path: string): Meta;
+export {};

package/components/ApiConnectForm.svelte

@@ -1,8 +1,11 @@
-<script>import { ResourceService } from '../gen';
+<script>import { JobService, Preview, ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { emptySchema, emptyString } from '../utils';
+import { emptySchema, emptyString, sendUserToast } from '../utils';
+import { Loader2 } from 'lucide-svelte';
+import Button from './common/button/Button.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import Toggle from './Toggle.svelte';
 export let resource_type;
 export let args = {};
 export let password;
@@ -10,6 +13,8 @@ export let isValid = true;
 let schema = emptySchema();
 let notFound = false;
 async function loadSchema() {
+    rawCode = '{}';
+    viewJsonSchema = false;
     try {
         const rt = await ResourceService.getResourceType({
             workspace: $workspaceStore,
@@ -19,7 +24,6 @@ async function loadSchema() {
         notFound = false;
     }
     catch (e) {
-        rawCode = '{}';
         notFound = true;
     }
 }
@@ -40,17 +44,74 @@ function parseJson() {
 }
 let error = '';
 let rawCode = '';
+let viewJsonSchema = false;
+$: rawCode && parseJson();
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+let loading = false;
+async function testConnection() {
+    loading = true;
+    const job = await JobService.runScriptPreview({
+        workspace: $workspaceStore,
+        requestBody: {
+            language: 'deno',
+            content: `
+import { Client } from 'https://deno.land/x/postgres/mod.ts'
+export async function main(args: any) {
+	const client = new Client("postgres://" + args.user + ":" + args.password + "@" + args.host + ":" + args.port + "/" + args.dbname + "?sslmode=" + args.sslmode)
+	await client.connect()
+	return 'Connection successful'
+}
+				`,
+            args: {
+                args
+            }
+        }
+    });
+    await new Promise((r) => setTimeout(r, 3000));
+    loading = false;
+    const testResult = await JobService.getCompletedJob({
+        workspace: $workspaceStore,
+        id: job
+    });
+    if (testResult) {
+        sendUserToast(testResult.success ? testResult.result : testResult.result?.['error']?.['message'], !testResult.success);
+    }
+}
 </script>
 
-{#if notFound}
+{#if !notFound}
+	<div class="w-full flex gap-4 flex-row-reverse">
+		<Toggle
+			on:change={(e) => switchTab(e.detail)}
+			options={{
+				right: 'As JSON'
+			}}
+		/>
+		{#if resource_type == 'postgresql'}
+			<Button size="sm" on:click={testConnection}
+				>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
+			>
+		{/if}
+	</div>
+{:else}
 	<p class="italic text-gray-500 text-xs mb-4"
 		>No corresponding resource type found in your workspace for {resource_type}. Define the value in
 		JSON directly</p
 	>
+{/if}
+{#if notFound || viewJsonSchema}
 	{#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} />
 {:else}
-	<SchemaForm {password} isValid {schema} bind:args />
+	<SchemaForm noDelete {password} isValid {schema} bind:args />
 {/if}

package/components/AppConnect.svelte

@@ -34,6 +34,14 @@ const apiTokenApps = {
     supabase: {
         img: '/supabase_connect.png',
         instructions: ['Go to the API Settings of your app to find the project URL and key']
+    },
+    square: {
+        img: '/square_connect.gif',
+        instructions: [
+            'Go to <a href="https://developer.squareup.com/apps" target="_blank" rel=”noopener noreferrer”>https://developer.squareup.com/apps</a>',
+            'In the left pane, choose Credentials',
+            'At the top of the page, choose Production mode for a production access token or Sandbox mode for a Sandbox access token.'
+        ]
     }
 };
 </script>
@@ -52,6 +60,7 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import ApiConnectForm from './ApiConnectForm.svelte';
 import SearchItems from './SearchItems.svelte';
 import autosize from 'svelte-autosize';
+import WhitelistIp from './WhitelistIp.svelte';
 export let newPageOAuth = false;
 let filter = '';
 let manual = false;
@@ -63,7 +72,7 @@ let args = {};
 $: key =
     apiTokenApps[resource_type]?.key ??
         (args != undefined
-            ? Object.keys(args).filter((x) => ['token', 'password', 'api_key'].includes(x))[0]
+            ? Object.keys(args).filter((x) => ['token', 'password', 'api_key', 'key'].includes(x))[0]
             : undefined);
 let scopes = [];
 let extra_params = [];
@@ -126,6 +135,7 @@ async function loadResources() {
 async function next() {
     if (step == 1 && manual) {
         step += 1;
+        args = {};
     }
     else if (step == 1 && !manual) {
         const url = new URL(`/api/oauth/connect/${resource_type}`, $page.url.origin);
@@ -220,6 +230,7 @@ $: disabled =
             args['token'] == '' &&
             args['password'] == '' &&
             args['api_key'] == '' &&
+            args['key'] == '' &&
             key != undefined) ||
         (step == 3 && pathError != '') ||
         !isValid;
@@ -355,12 +366,9 @@ let filteredConnectsManual = [];
 				bind:error={pathError}
 				bind:path
 				initialPath=""
-				namePlaceholder="my_{resource_type}"
+				namePlaceholder={resource_type}
 				kind="resource"
 			/>
-			<h2 class="mt-4 mb-2">Description</h2>
-
-			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
 
 			{#if apiTokenApps[resource_type]}
 				<h2 class="mt-4 mb-2">Instructions</h2>
@@ -374,20 +382,28 @@ let filteredConnectsManual = [];
 					</ol>
 				</div>
 				{#if apiTokenApps[resource_type].img}
-					<div class="mt-4 w-full">
-						<img class="max-h-96 m-auto" alt="connect" src={apiTokenApps[resource_type].img} />
+					<div class="mt-4 w-full overflow-hidden">
+						<img class="m-auto  max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
 					</div>
 				{/if}
 			{/if}
+			{#if resource_type == 'postgresql' || resource_type == 'mysql' || resource_type == 'mongodb'}
+				<WhitelistIp />
+			{/if}
 
-			<h2 class="mt-8">Value</h2>
+			<h2 class="mt-4">Value</h2>
 			<div class="mt-4">
-				<ApiConnectForm password={key ?? ''} {resource_type} bind:args bind:isValid />
+				{#key resource_type}
+					<ApiConnectForm password={key ?? ''} {resource_type} bind:args bind:isValid />
+				{/key}
 			</div>
+
+			<h2 class="mt-4 mb-2">Description</h2>
+			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
 		{:else}
 			<Path
 				initialPath=""
-				namePlaceholder="my_{resource_type}"
+				namePlaceholder={resource_type}
 				bind:error={pathError}
 				bind:path
 				kind="resource"

package/components/ArgInput.svelte

@@ -15,6 +15,9 @@ import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
 import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import Range from './Range.svelte';
+import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -68,7 +71,7 @@ $: {
 }
 export function evalValueToRaw() {
     if (value) {
-        rawValue = JSON.stringify(value, null, 4);
+        rawValue = JSON.stringify(value, null, 2);
     }
 }
 function fileChanged(e, cb) {
@@ -129,19 +132,23 @@ $: {
             else if (inputCat == 'boolean') {
                 value = false;
             }
+            else if (inputCat == 'list') {
+                value = [];
+            }
         }
     }
 }
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+let redraw = 0;
 </script>
 
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
-			<div class="my-1 text-xs border-solid border border-gray-400 rounded p-2">
+			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
 				<span
 					class="underline"
 					on:click={() => {
@@ -161,6 +168,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								use:autosize
 								rows="1"
 								bind:value={description}
+								on:keydown|stopPropagation
 								placeholder="Field description"
 							/>
 							{#if type == 'string' && format != 'date-time'}
@@ -173,6 +181,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								<select bind:value={itemsType}>
 									<option value={undefined}>No specific item type</option>
 									<option value={{ type: 'string' }}> Items are strings</option>
+									<option value={{ type: 'object' }}> Items are objects (JSON)</option>
 									<option value={{ type: 'number' }}>Items are numbers</option>
 									<option value={{ type: 'string', contentEncoding: 'base64' }}
 										>Items are bytes</option
@@ -207,7 +216,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<input
 						{autofocus}
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						{disabled}
@@ -219,14 +227,12 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
-						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
 					}}
 					{disabled}
 					class={valid
@@ -238,44 +244,46 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<span>&nbsp; Not set</span>
 				{/if}
 			{:else if inputCat == 'list'}
-				<div>
-					<div>
-						{#each value ?? [] as v, i}
-							<div class="flex flex-row max-w-md mt-1">
-								{#if itemsType?.type == 'number'}
-									<input autofocus={autofocus && i == 0} type="number" bind:value={v} />
-								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-									<input
-										autofocus={autofocus && i == 0}
-										type="file"
-										class="my-6"
-										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-										multiple={false}
-									/>
-								{:else}
-									<input autofocus={autofocus && i == 0} type="text" bind:value={v} />
-								{/if}
-								<Button
-									variant="border"
-									color="red"
-									size="sm"
-									btnClasses="mx-6"
-									on:click={() => {
-										value = value.filter((el) => el != v)
-										if (value.length == 0) {
-											value = undefined
-										}
-									}}
-								>
-									<Icon data={faMinus} />
-								</Button>
-							</div>
-						{/each}
+				<div class="w-full">
+					<div class="w-full">
+						{#key redraw}
+							{#if Array.isArray(value)}
+								{#each value ?? [] as v, i}
+									<div class="flex max-w-md mt-1 w-full items-center">
+										{#if itemsType?.type == 'number'}
+											<input type="number" bind:value={v} />
+										{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+											<input
+												type="file"
+												class="my-6"
+												on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+												multiple={false}
+											/>
+										{:else if itemsType?.type == 'object'}
+											<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+										{:else}
+											<input type="text" bind:value={v} />
+										{/if}
+										<button
+											transition:fade|local={{ duration: 100 }}
+											class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
+											aria-label="Clear"
+											on:click={() => {
+												value.splice(i, 1)
+												redraw += 1
+											}}
+										>
+											<X size={14} />
+										</button>
+									</div>
+								{/each}
+							{/if}
+						{/key}
 					</div>
 					<Button
 						variant="border"
-						color="blue"
-						size="sm"
+						color="dark"
+						size="xs"
 						btnClasses="mt-1"
 						on:click={() => {
 							if (value == undefined || !Array.isArray(value)) {
@@ -287,9 +295,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						<Icon data={faPlus} class="mr-2" />
 						Add item
 					</Button>
-					<span class="ml-2">
-						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
-					</span>
 				</div>
 			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />
@@ -302,31 +307,21 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							bind:args={value}
 						/>
 					</div>
+				{:else if disabled}
+					<textarea disabled />
 				{:else}
-					<textarea
-						bind:this={el}
+					<JsonEditor
+						bind:editor
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
-						{autofocus}
-						{disabled}
-						use:autosize
-						style="max-height: {maxHeight}"
-						on:input={() => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
-						class="col-span-10 {valid
-							? ''
-							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
-						bind:value={rawValue}
+						code={rawValue}
+						bind:value
 					/>
 				{/if}
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
-						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					{disabled}
@@ -343,16 +338,11 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
-						on:blur={() => dispatch('blur')}
 						bind:this={editor}
 						lang={inputCat}
 						bind:code={value}
-						on:change={async () => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
 						autoHeight
 					/>
 				</div>
@@ -382,11 +372,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								rows="1"
 								bind:this={el}
 								on:focus={(e) => {
-									window.dispatchEvent(new Event('pointerup'))
 									dispatch('focus')
 								}}
-								on:blur={() => dispatch('blur')}
 								use:autosize
+								on:keydown|stopPropagation
 								type="text"
 								{disabled}
 								class="col-span-10 {valid
@@ -394,9 +383,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 								placeholder={defaultValue ?? ''}
 								bind:value
-								on:input={() => {
-									dispatch('input', { rawValue: value, isRaw: false })
-								}}
 							/>
 							{#if itemPicker}
 								<div class="ml-1 relative">
@@ -425,19 +411,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					{/if}
 				</div>
 			{/if}
-			{#if !required && inputCat != 'resource-object'}
-				<!-- <Tooltip placement="bottom" content="Reset to default value">
-					<Button
-						on:click={() => (value = undefined)}
-						{disabled}
-						color="alternative"
-						size="sm"
-						class="h-8"
-					>
-						<Icon data={faArrowRotateLeft} />
-					</Button>
-				</Tooltip> -->
-			{/if}
 			<slot name="actions" />
 		</div>
 		{#if !compact || (error && error != '')}

package/components/ArgInput.svelte.d.ts

@@ -20,7 +20,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;
         itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
+            type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
@@ -40,9 +40,8 @@ declare const __propDef: {
         focus?: (() => void) | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         focus: CustomEvent<any>;
-        input: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/CliHelpBox.svelte

@@ -0,0 +1,49 @@
+<script>import { page } from '$app/stores';
+import { userWorkspaces, workspaceStore } from '../stores';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { slide } from 'svelte/transition';
+import InlineCodeCopy from './InlineCodeCopy.svelte';
+$: opened = false;
+$: workspace = $userWorkspaces.find((e) => e.id === $workspaceStore);
+$: workspaceName = workspace?.name;
+$: workspaceId = workspace?.id;
+$: url = `${$page.url.protocol}//${$page.url.hostname}/`;
+</script>
+
+<div class="text-sm mt-2 flex">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="underline mr-4"
+		on:click={() => {
+			opened = !opened
+		}}
+	>
+		CLI quick setup
+		<Icon class="ml-2" data={opened ? faChevronUp : faChevronDown} scale={0.7} />
+	</span>
+</div>
+
+{#if opened}
+	<div
+		transition:slide|local
+		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+		role="alert"
+		id="dynamic-input-help-box"
+	>
+		<ul class="pl-0 list-decimal list-inside">
+			<li
+				>Install the latest wmill CLI from deno.land: <InlineCodeCopy
+					content={'deno install --unstable -A https://deno.land/x/wmill/main.ts'}
+				/></li
+			>
+			<li
+				>Setup the wmill cli for this workspace & remote: <InlineCodeCopy
+					content={`wmill workspace add ${workspaceName} ${workspaceId} ${url}`}
+				/></li
+			>
+			<li>Follow the prompts in your terminal</li>
+			<li>Use the run command above!</li>
+		</ul>
+	</div>
+{/if}

package/components/CliHelpBox.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CliHelpBoxProps = typeof __propDef.props;
+export type CliHelpBoxEvents = typeof __propDef.events;
+export type CliHelpBoxSlots = typeof __propDef.slots;
+export default class CliHelpBox extends SvelteComponentTyped<CliHelpBoxProps, CliHelpBoxEvents, CliHelpBoxSlots> {
+}
+export {};