windmill-components 1.13.27 → 1.22.42

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/ArgInput.svelte

@@ -7,6 +7,8 @@ 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;
@@ -15,7 +17,7 @@ export let format = '';
 export let contentEncoding = '';
 export let type = undefined;
 export let required = false;
-export let pattern;
+export let pattern = undefined;
 export let valid = required ? false : true;
 export let minRows = 1;
 export let maxRows = 10;
@@ -24,12 +26,14 @@ 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 {
@@ -41,8 +45,9 @@ $: {
     }
 }
 $: {
-    if (!type || type == 'object' || (type == 'array' && itemsType?.type == undefined)) {
+    if (inputCat === 'object') {
         evalValueToRaw();
+        validateInput(pattern, value);
     }
     if (defaultValue) {
         let stringified = JSON.stringify(defaultValue, null, 4);
@@ -55,7 +60,9 @@ $: {
     }
 }
 export function evalValueToRaw() {
-    rawValue = JSON.stringify(value, null, 4);
+    if (value) {
+        rawValue = JSON.stringify(value, null, 4);
+    }
 }
 function fileChanged(e, cb) {
     let t = e.target;
@@ -71,7 +78,7 @@ function fileChanged(e, cb) {
     }
 }
 function validateInput(pattern, v) {
-    if (required && v == undefined) {
+    if (required && (v == undefined || v == null)) {
         error = 'This field is required';
         valid = false;
     }
@@ -100,6 +107,7 @@ $: {
         value = defaultValue;
     }
 }
+export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 
 <div class="flex flex-col w-full">
@@ -156,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"
@@ -178,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"
@@ -213,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}
@@ -264,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/Button.svelte

@@ -49,32 +49,41 @@ const dispatch = createEventDispatcher();
 </button>
 
 <style>
-	.delete, .archive {
+	.delete, 
+	.archive {
     background-color: transparent
 }
-.delete:hover, .archive:hover {
+.delete:hover, 
+	.archive:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(220 38 38 / var(--tw-bg-opacity))
 }
-	.delete, .archive {
+	.delete, 
+	.archive {
     font-weight: 400;
     --tw-text-opacity: 1;
     color: rgb(220 38 38 / var(--tw-text-opacity))
 }
-	.delete:hover, .archive:hover {
+	.delete:hover, 
+	.archive:hover {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))
 }
-	.delete, .archive {
+	.delete, 
+	.archive {
     border-radius: 0.25rem;
     --tw-border-opacity: 1;
     border-color: rgb(220 38 38 / var(--tw-border-opacity))
 }
-	.delete:hover, .archive:hover {
+	.delete:hover, 
+	.archive:hover {
     border-color: transparent
 }
 
-	.edit:hover, .play:hover, .list:hover, .share:hover {
+	.edit:hover, 
+	.play:hover, 
+	.list:hover, 
+	.share:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(59 130 246 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;

package/components/CenteredModal.svelte

@@ -0,0 +1,30 @@
+<script>import { SettingsService } from '../gen';
+export let subtitle = undefined;
+export let title = 'Welcome to Windmill (beta)';
+let version = '';
+SettingsService.backendVersion().then((x) => {
+    version = x;
+});
+</script>
+
+<div class="flex justify-center min-h-screen bg-gray-50 pt-10">
+	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto">
+		<h1 class="justify-center text-center font-medium pb-2 text-gray-700">
+			{title}
+		</h1>
+		{#if subtitle}
+			<p class="justify-center text-center font-medium pb-2 text-gray-700 text-xs">
+				{subtitle}
+			</p>
+		{/if}
+		<div class="border rounded-md py-12 px-16 shadow-md bg-white">
+			<slot />
+		</div>
+
+		<!-- empty row to make the form a little bit above vertical centering-->
+		<div class="py-12" />
+	</div>
+	<div class="absolute top-0 right-0 text-2xs text-gray-500 italic px-3 py-1">
+		windmill.dev backend v. <span class="font-mono">{version}</span>
+	</div>
+</div>

package/components/CenteredModal.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        subtitle?: string | undefined;
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CenteredModalProps = typeof __propDef.props;
+export declare type CenteredModalEvents = typeof __propDef.events;
+export declare type CenteredModalSlots = typeof __propDef.slots;
+export default class CenteredModal extends SvelteComponentTyped<CenteredModalProps, CenteredModalEvents, CenteredModalSlots> {
+}
+export {};