windmill-components 1.13.25 → 1.22.0

package/common.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pathToMeta = void 0;
-function pathToMeta(path) {
+export function pathToMeta(path) {
     const splitted = path.split('/');
     let ownerKind;
     if (splitted[0] == 'g') {
@@ -24,4 +21,3 @@ function pathToMeta(path) {
         name: splitted.slice(2).join('/')
     };
 }
-exports.pathToMeta = pathToMeta;

package/components/AppConnect.svelte

@@ -0,0 +1,281 @@
+<script context="module">"use strict";
+const apiTokenApps = {
+    airtable: {
+        img: 'airtable_connect.png',
+        instructions: 'Click on the top-right avatar -> Account -> Api'
+    }
+};
+</script>
+
+<script>import IconedResourceType from './IconedResourceType.svelte';
+import PageHeader from './PageHeader.svelte';
+import { workspaceStore, userStore, oauthStore } from '../stores';
+import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { OauthService, ResourceService, VariableService } from '../gen';
+import { createEventDispatcher, onMount } from 'svelte';
+import Modal from './Modal.svelte';
+import Icon from 'svelte-awesome';
+import Path from './Path.svelte';
+import Password from './Password.svelte';
+import { sendUserToast, truncateRev } from '../utils';
+let manual = false;
+let value = '';
+let valueToken;
+let connects = {};
+let connectsManual = [];
+let scopes = [];
+let path;
+let modal;
+let resource_type = '';
+let step = 1;
+let no_back = false;
+let pathError = '';
+export function open() {
+    step = 1;
+    value = '';
+    resource_type = '';
+    no_back = false;
+    modal.openModal();
+}
+export function openFromOauth(rt) {
+    resource_type = rt;
+    value = $oauthStore?.access_token;
+    valueToken = $oauthStore;
+    $oauthStore = undefined;
+    manual = false;
+    step = 3;
+    no_back = true;
+    modal.openModal();
+}
+async function loadConnects() {
+    connects = await OauthService.listOAuthConnects();
+}
+async function loadResources() {
+    const availableRts = await ResourceService.listResourceTypeNames({
+        workspace: $workspaceStore
+    });
+    connectsManual = Object.entries(apiTokenApps).filter(([key, _]) => availableRts.includes(key));
+}
+async function next() {
+    if (step < 3 && manual) {
+        step += 1;
+    }
+    else if (step == 1 && !manual) {
+        window.location.href = `/api/oauth/connect/${resource_type}?scopes=${scopes.join('+')}`;
+    }
+    else {
+        let exists = await VariableService.existsVariable({
+            workspace: $workspaceStore,
+            path
+        });
+        if (exists) {
+            throw Error(`Variable at path ${path} already exists. Delete it or pick another path`);
+        }
+        exists = await ResourceService.existsResource({
+            workspace: $workspaceStore,
+            path
+        });
+        if (exists) {
+            throw Error(`Resource at path ${path} already exists. Delete it or pick another path`);
+        }
+        let account = undefined;
+        if (valueToken.refresh_token != undefined && valueToken.expires_in != undefined) {
+            account = Number(await OauthService.createAccount({
+                workspace: $workspaceStore,
+                requestBody: {
+                    refresh_token: valueToken.refresh_token,
+                    expires_in: valueToken.expires_in,
+                    owner: path.split('/').slice(0, 2).join('/'),
+                    client: resource_type
+                }
+            }));
+        }
+        await VariableService.createVariable({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                value,
+                is_secret: true,
+                description: `OAuth token for ${resource_type}`,
+                is_oauth: true,
+                account: account
+            }
+        });
+        await ResourceService.createResource({
+            workspace: $workspaceStore,
+            requestBody: {
+                resource_type,
+                path,
+                value: { token: `$var:${path}` },
+                description: `OAuth token for ${resource_type}`,
+                is_oauth: true
+            }
+        });
+        dispatch('refresh');
+        sendUserToast(`App token set at resource and variable path: ${path}`);
+        modal.closeModal();
+    }
+}
+async function back() {
+    if (step > 1) {
+        step -= 1;
+    }
+}
+const dispatch = createEventDispatcher();
+$: {
+    if ($workspaceStore) {
+        loadResources();
+    }
+}
+onMount(() => {
+    loadConnects();
+});
+</script>
+
+<Modal
+	bind:this={modal}
+	on:close={() => {
+		dispatch('close')
+	}}
+>
+	<div slot="title">Connect an app</div>
+	<div slot="content">
+		{#if step == 1}
+			<PageHeader title="OAuth apps" />
+			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+				{#each Object.entries(connects) as [key, values]}
+					<button
+						class="px-4 h-8 {key == resource_type ? 'item-button-selected' : 'item-button'}"
+						on:click={() => {
+							manual = false
+							resource_type = key
+							scopes = values
+							dispatch('click')
+						}}
+					>
+						<IconedResourceType name={key} after={true} />
+					</button>
+				{/each}
+			</div>
+			<PageHeader title="scopes" primary={false} />
+			{#if !manual && resource_type != ''}
+				{#each scopes as v}
+					<div class="flex flex-row max-w-md">
+						<input type="text" bind:value={v} />
+						<button
+							class="default-button-secondary mx-6"
+							on:click={() => {
+								scopes = scopes.filter((el) => el != v)
+							}}><Icon data={faMinus} class="mb-1" /></button
+						>
+					</div>
+				{/each}
+				<button
+					class="default-button-secondary mt-1"
+					on:click={() => {
+						scopes = scopes.concat('')
+					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
+				><span class="ml-2">{(scopes ?? []).length} item(s)</span>
+			{:else}
+				<p class="italic text-sm">Pick an oauth app and customize the scopes here</p>
+			{/if}
+			<PageHeader title="API token apps" />
+			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+				{#each connectsManual as [key, instructions]}
+					<button
+						class="px-4 h-8 {key == resource_type ? 'item-button-selected' : 'item-button'}"
+						on:click={() => {
+							manual = true
+							resource_type = key
+							dispatch('click')
+						}}
+					>
+						<IconedResourceType name={key} after={true} />
+					</button>
+				{/each}
+			</div>
+		{:else if step == 2}
+			{#if manual}
+				<PageHeader title="Instructions" />
+				<div>
+					{apiTokenApps[resource_type].instructions}
+				</div>
+				{#if apiTokenApps[resource_type].img}
+					<div class="mt-4">
+						<img alt="connect" src={apiTokenApps[resource_type].img} />
+					</div>
+				{/if}
+				<div class="mt-4">
+					<Password bind:password={value} label="Paste token here" />
+				</div>
+			{/if}
+		{:else}
+			<Path
+				bind:error={pathError}
+				bind:path
+				initialPath={`u/${$userStore?.username ?? ''}/my_${resource_type}`}
+				kind="resource"
+			/>
+			<ul class="mt-10 bg-white">
+				<li>
+					1. A secret variable containing the token <span class="font-bold"
+						>{truncateRev(value, 5, '*****')}</span
+					>
+					will be stored at
+					<span class="font-mono">{path}</span>. You can refer to this variable anywhere this token
+					is required.
+				</li>
+				<li class="mt-4">
+					2. A resource with a unique token field will be stored at <span class="font-mono"
+						>{path}</span
+					>
+					and refer to the secret variable <span class="font-mono">{path}</span> as its token (using
+					variable templating
+					<span class="font-mono">`$var:${path}`</span>). You can refer to this resource anywhere
+					this token is required. A script can use the resource type
+					<span class="font-mono">{resource_type}</span> as a type parameter to restrict the kind of
+					tokens it accepts to this app.
+				</li>
+			</ul>
+		{/if}
+	</div>
+	<div slot="submission">
+		{#if step > 1 && !no_back}
+			<button class="default-button px-4 py-2 font-semibold" on:click={back}>Back</button>
+		{/if}
+		<button
+			class="default-button px-4 py-2 font-semibold"
+			class:default-button-disabled={(step == 1 && resource_type == '') ||
+				(step == 2 && value == '') ||
+				(step == 3 && pathError != '')}
+			on:click={next}
+		>
+			{step == 3 ? 'Connect' : 'Next'}
+		</button>
+	</div>
+</Modal>
+
+<style>
+	.item-button {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-width: 1px;
+    border-radius: 0.125rem
+}
+	.item-button-selected {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+    border-radius: 0.125rem
+}
+
+	.selected:hover {
+    border-radius: 0.375rem;
+    border-width: 1px;
+    border-color: rgb(156 163 175 / var(--tw-border-opacity));
+    --tw-border-opacity: 0.5
+}</style>

package/components/AppConnect.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: (() => void) | undefined;
+        openFromOauth?: ((rt: string) => void) | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AppConnectProps = typeof __propDef.props;
+export declare type AppConnectEvents = typeof __propDef.events;
+export declare type AppConnectSlots = typeof __propDef.slots;
+export default class AppConnect extends SvelteComponentTyped<AppConnectProps, AppConnectEvents, AppConnectSlots> {
+    get open(): () => void;
+    get openFromOauth(): (rt: string) => void;
+}
+export {};

package/components/ArgInfo.svelte

@@ -1,26 +1,21 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.value = void 0;
-const utils_1 = require("$lib/utils");
-const Modal_svelte_1 = __importDefault(require("./Modal.svelte"));
-const Tooltip_svelte_1 = __importDefault(require("./Tooltip.svelte"));
-const json_1 = __importDefault(require("svelte-highlight/languages/json"));
-const github_1 = __importDefault(require("svelte-highlight/styles/github"));
-const svelte_highlight_1 = require("svelte-highlight");
-const gen_1 = require("$lib/gen");
-const stores_1 = require("$lib/stores");
+<script>import { truncate } from '../utils';
+import Modal from './Modal.svelte';
+import Tooltip from './Tooltip.svelte';
+import json from 'svelte-highlight/languages/json';
+import github from 'svelte-highlight/styles/github';
+import { Highlight } from 'svelte-highlight';
+import { ResourceService } from '../gen';
+import { workspaceStore } from '../stores';
+export let value;
 let resourceViewer;
 let resource;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
 async function getResource(path) {
-    resource = await gen_1.ResourceService.getResource({ workspace: $workspaceStore, path });
+    resource = await ResourceService.getResource({ workspace: $workspaceStore, path });
 }
-let asJson = JSON.stringify(exports.value, null, 4);
+let asJson = JSON.stringify(value, null, 4);
 </script>
 
 <svelte:head>

package/components/ArgInput.svelte

@@ -1,43 +1,43 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.evalValueToRaw = exports.displayHeader = exports.itemsType = exports.editableSchema = exports.disabled = exports.enum_ = exports.maxRows = exports.minRows = exports.valid = exports.pattern = exports.required = exports.type = exports.contentEncoding = exports.format = exports.description = exports.defaultValue = exports.value = exports.label = void 0;
-const Tooltip_svelte_1 = __importDefault(require("./Tooltip.svelte"));
-const transition_1 = require("svelte/transition");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const StringTypeNarrowing_svelte_1 = __importDefault(require("./StringTypeNarrowing.svelte"));
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const ResourcePicker_svelte_1 = __importDefault(require("./ResourcePicker.svelte"));
-const ObjectTypeNarrowing_svelte_1 = __importDefault(require("./ObjectTypeNarrowing.svelte"));
-const ObjectResourceInput_svelte_1 = __importDefault(require("./ObjectResourceInput.svelte"));
-const FieldHeader_svelte_1 = __importDefault(require("./FieldHeader.svelte"));
-exports.label = '';
-exports.defaultValue = undefined;
-exports.description = '';
-exports.format = '';
-exports.contentEncoding = '';
-exports.type = undefined;
-exports.required = false;
-exports.valid = exports.required ? false : true;
-exports.minRows = 1;
-exports.maxRows = 10;
-exports.enum_ = undefined;
-exports.disabled = false;
-exports.editableSchema = false;
-exports.itemsType = undefined;
-exports.displayHeader = true;
-let seeEditable = exports.enum_ != undefined || exports.pattern != undefined;
-$: minHeight = `${1 + exports.minRows * 1.2}em`;
-$: maxHeight = exports.maxRows ? `${1 + exports.maxRows * 1.2}em` : `auto`;
-$: validateInput(exports.pattern, exports.value);
+<script>import Tooltip from './Tooltip.svelte';
+import { slide } from 'svelte/transition';
+import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import StringTypeNarrowing from './StringTypeNarrowing.svelte';
+import Icon from 'svelte-awesome';
+import ResourcePicker from './ResourcePicker.svelte';
+import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
+import ObjectResourceInput from './ObjectResourceInput.svelte';
+import FieldHeader from './FieldHeader.svelte';
+import { createEventDispatcher } from 'svelte';
+import { setInputCat as computeInputCat } from '../utils';
+export let label = '';
+export let value;
+export let defaultValue = undefined;
+export let description = '';
+export let format = '';
+export let contentEncoding = '';
+export let type = undefined;
+export let required = false;
+export let pattern = undefined;
+export let valid = required ? false : true;
+export let minRows = 1;
+export let maxRows = 10;
+export let enum_ = undefined;
+export let disabled = false;
+export let editableSchema = false;
+export let itemsType = undefined;
+export let displayHeader = true;
+export let numberAsString = false;
+let seeEditable = enum_ != undefined || pattern != undefined;
+const dispatch = createEventDispatcher();
+$: minHeight = `${1 + minRows * 1.2}em`;
+$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
+$: validateInput(pattern, value);
 let error = '';
-let rawValue;
+let rawValue = undefined;
 $: {
     if (rawValue) {
         try {
-            exports.value = JSON.parse(rawValue);
+            value = JSON.parse(rawValue);
         }
         catch (err) {
             error = err.toString();
@@ -45,23 +45,25 @@ $: {
     }
 }
 $: {
-    if (!exports.type || exports.type == 'object' || (exports.type == 'array' && exports.itemsType?.type == undefined)) {
+    if (inputCat === 'object') {
         evalValueToRaw();
+        validateInput(pattern, value);
     }
-    if (exports.defaultValue) {
-        let stringified = JSON.stringify(exports.defaultValue, null, 4);
+    if (defaultValue) {
+        let stringified = JSON.stringify(defaultValue, null, 4);
         if (stringified.length > 50) {
-            exports.minRows = 3;
+            minRows = 3;
         }
-        if (exports.type != 'string') {
-            exports.minRows = Math.max(exports.minRows, Math.min(stringified.split(/\r\n|\r|\n/).length + 1, exports.maxRows));
+        if (type != 'string') {
+            minRows = Math.max(minRows, Math.min(stringified.split(/\r\n|\r|\n/).length + 1, maxRows));
         }
     }
 }
-function evalValueToRaw() {
-    rawValue = JSON.stringify(exports.value, null, 4);
+export function evalValueToRaw() {
+    if (value) {
+        rawValue = JSON.stringify(value, null, 4);
+    }
 }
-exports.evalValueToRaw = evalValueToRaw;
 function fileChanged(e, cb) {
     let t = e.target;
     if (t && 'files' in t && t.files.length > 0) {
@@ -76,18 +78,18 @@ function fileChanged(e, cb) {
     }
 }
 function validateInput(pattern, v) {
-    if (exports.required && v == undefined) {
+    if (required && (v == undefined || v == null)) {
         error = 'This field is required';
-        exports.valid = false;
+        valid = false;
     }
     else {
         if (pattern && !testRegex(pattern, v)) {
             error = `Should match ${pattern}`;
-            exports.valid = false;
+            valid = false;
         }
         else {
             error = '';
-            exports.valid = true;
+            valid = true;
         }
     }
 }
@@ -101,10 +103,11 @@ function testRegex(pattern, value) {
     }
 }
 $: {
-    if (exports.value == undefined) {
-        exports.value = exports.defaultValue;
+    if (value == undefined) {
+        value = defaultValue;
     }
 }
+export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 
 <div class="flex flex-col w-full">
@@ -161,17 +164,18 @@ $: {
 			</div>
 		</div>
 		<div class="container">
-			{#if type == 'number' || type == 'integer'}
+			{#if inputCat == 'number' && !numberAsString}
 				<input
 					{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}
+					placeholder={defaultValue ?? ''}
 					bind:value
+					on:input={() => dispatch('input', { value, isRaw: true })}
 				/>
-			{:else if type == 'boolean'}
+			{:else if inputCat == 'boolean'}
 				<input
 					{disabled}
 					type="checkbox"
@@ -183,12 +187,12 @@ $: {
 				{#if type == 'boolean' && value == undefined}
 					<span>&nbsp; Not set</span>
 				{/if}
-			{:else if type == 'array' && itemsType?.type != undefined}
+			{:else if inputCat == 'list'}
 				{#each value ?? [] as v}
 					<div class="flex flex-row max-w-md">
-						{#if itemsType.type == 'number'}
+						{#if itemsType?.type == 'number'}
 							<input type="number" bind:value={v} />
-						{:else if itemsType.type == 'string' && itemsType.contentEncoding == 'base64'}
+						{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
 							<input
 								type="file"
 								class="my-6"
@@ -218,49 +222,50 @@ $: {
 						value = value.concat('')
 					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
 				><span class="ml-2">{(value ?? []).length} item(s)</span>
-			{:else if type == 'object' && format?.startsWith('resource')}
+			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />
-			{:else if !type || type == 'object' || type == 'array'}
+			{:else if inputCat == 'object'}
 				<textarea
 					{disabled}
 					style="min-height: {minHeight}; max-height: {maxHeight}"
 					class="col-span-10 {valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-					placeholder={JSON.stringify(defaultValue, null, 4)}
+					placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
 					bind:value={rawValue}
 				/>
-			{:else if type == 'string' && enum_}
+			{:else if inputCat == 'enum'}
 				<select {disabled} class="px-6" bind:value>
-					{#each enum_ as e}
+					{#each enum_ ?? [] as e}
 						<option>{e}</option>
 					{/each}
 				</select>
-			{:else if type == 'string' && format == 'date-time'}
+			{:else if inputCat == 'date'}
 				<input class="inline-block" type="datetime-local" bind:value />
-			{:else if type == 'string' && contentEncoding == 'base64'}
+			{:else if inputCat == 'base64'}
 				<input
 					type="file"
 					class="my-6"
 					on:change={(x) => fileChanged(x, (val) => (value = val))}
 					multiple={false}
 				/>
-			{:else if type == 'string' && format?.startsWith('resource')}
+			{:else if inputCat == 'resource-string'}
 				<ResourcePicker
 					bind:value
 					resourceType={format.split('-').length > 1
 						? format.substring('resource-'.length)
 						: undefined}
 				/>
-			{:else}
+			{:else if inputCat == 'string'}
 				<textarea
 					{disabled}
 					style="height: {minHeight}; max-height: {maxHeight}"
 					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}
+					placeholder={defaultValue ?? ''}
 					bind:value
+					on:input={() => dispatch('input', { rawValue: value, isRaw: false })}
 				/>
 			{/if}
 			{#if !required}
@@ -269,9 +274,7 @@ $: {
 						{disabled}
 						class="default-button-secondary items-center leading-4 py-0 my-px px-1 float-right"
 						on:click={() => (value = undefined)}
-						>Reset<Tooltip class="pl-1" position={'above'} direction={'left'}
-							>Reset to default value
-						</Tooltip></button
+						>Reset<Tooltip>Reset to default value</Tooltip></button
 					>
 				</div>
 			{/if}

package/components/ArgInput.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type InputCat } from '../utils';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -9,7 +10,7 @@ declare const __propDef: {
         contentEncoding?: string | undefined;
         type?: string | undefined;
         required?: boolean | undefined;
-        pattern: undefined | string;
+        pattern?: undefined | string;
         valid?: boolean | undefined;
         minRows?: number | undefined;
         maxRows?: number | undefined;
@@ -21,9 +22,13 @@ declare const __propDef: {
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
+        numberAsString?: boolean | undefined;
         evalValueToRaw?: (() => void) | undefined;
+        inputCat?: InputCat | undefined;
     };
     events: {
+        input: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/AutosizedTextarea.svelte

@@ -1,11 +1,9 @@
-<script>"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.maxRows = exports.minRows = exports.placeholder = exports.value = void 0;
-exports.placeholder = '';
-exports.minRows = 1;
-exports.maxRows = 20;
-$: minHeight = `${1 + exports.minRows * 1.2}em`;
-$: maxHeight = exports.maxRows ? `${1 + exports.maxRows * 1.2}em` : `auto`;
+<script>export let value;
+export let placeholder = '';
+export let minRows = 1;
+export let maxRows = 20;
+$: minHeight = `${1 + minRows * 1.2}em`;
+$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 </script>
 
 <div class="container">