windmill-components 1.22.0 → 1.28.2

package/components/AppConnect.svelte

@@ -3,38 +3,57 @@ const apiTokenApps = {
     airtable: {
         img: 'airtable_connect.png',
         instructions: 'Click on the top-right avatar -> Account -> Api'
+    },
+    discord_webhook: {
+        img: 'discord_webhook.png',
+        instructions: 'Server Settings -> Integration -> Webhooks',
+        key: 'webhook_url'
+    },
+    toggl: {
+        img: 'toggl_connect.png',
+        instructions: 'Go to https://track.toggl.com/profile -> API Token'
     }
 };
 </script>
 
-<script>import IconedResourceType from './IconedResourceType.svelte';
-import PageHeader from './PageHeader.svelte';
-import { workspaceStore, userStore, oauthStore } from '../stores';
+<script>import { oauthStore, userStore, workspaceStore } from '../stores';
 import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import IconedResourceType from './IconedResourceType.svelte';
+import PageHeader from './PageHeader.svelte';
 import { OauthService, ResourceService, VariableService } from '../gen';
-import { createEventDispatcher, onMount } from 'svelte';
-import Modal from './Modal.svelte';
+import { page } from '$app/stores';
+import { sendUserToast, truncateRev } from '../utils';
+import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Path from './Path.svelte';
+import Modal from './Modal.svelte';
 import Password from './Password.svelte';
-import { sendUserToast, truncateRev } from '../utils';
+import Path from './Path.svelte';
 let manual = false;
 let value = '';
 let valueToken;
 let connects = {};
 let connectsManual = [];
+let key = 'token';
+$: key = apiTokenApps[resource_type]?.key ?? 'token';
 let scopes = [];
+let extra_params = [];
 let path;
 let modal;
 let resource_type = '';
 let step = 1;
 let no_back = false;
 let pathError = '';
-export function open() {
+export async function open(rt) {
     step = 1;
     value = '';
-    resource_type = '';
     no_back = false;
+    resource_type = rt ?? '';
+    await loadConnects();
+    const connect = connects[resource_type];
+    if (connect) {
+        scopes = connect.scopes;
+        extra_params = Object.entries(connect.extra_params ?? {});
+    }
     modal.openModal();
 }
 export function openFromOauth(rt) {
@@ -61,7 +80,12 @@ async function next() {
         step += 1;
     }
     else if (step == 1 && !manual) {
-        window.location.href = `/api/oauth/connect/${resource_type}?scopes=${scopes.join('+')}`;
+        const url = new URL(`/api/oauth/connect/${resource_type}`, $page.url.origin);
+        url.searchParams.append('scopes', scopes.join('+'));
+        if (extra_params.length > 0) {
+            extra_params.forEach(([key, value]) => url.searchParams.append(key, value));
+        }
+        window.location.href = url.toString();
     }
     else {
         let exists = await VariableService.existsVariable({
@@ -79,7 +103,7 @@ async function next() {
             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) {
+        if (valueToken?.refresh_token != undefined && valueToken?.expires_in != undefined) {
             account = Number(await OauthService.createAccount({
                 workspace: $workspaceStore,
                 requestBody: {
@@ -90,25 +114,28 @@ async function next() {
                 }
             }));
         }
+        const description = `${manual ? 'Token' : 'OAuth token'} for ${resource_type}`;
         await VariableService.createVariable({
             workspace: $workspaceStore,
             requestBody: {
                 path,
                 value,
                 is_secret: true,
-                description: `OAuth token for ${resource_type}`,
-                is_oauth: true,
+                description,
+                is_oauth: !manual,
                 account: account
             }
         });
+        const resourceValue = {};
+        resourceValue[key] = `$var:${path}`;
         await ResourceService.createResource({
             workspace: $workspaceStore,
             requestBody: {
                 resource_type,
                 path,
-                value: { token: `$var:${path}` },
-                description: `OAuth token for ${resource_type}`,
-                is_oauth: true
+                value: resourceValue,
+                description,
+                is_oauth: !manual
             }
         });
         dispatch('refresh');
@@ -122,14 +149,6 @@ async function back() {
     }
 }
 const dispatch = createEventDispatcher();
-$: {
-    if ($workspaceStore) {
-        loadResources();
-    }
-}
-onMount(() => {
-    loadConnects();
-});
 </script>
 
 <Modal
@@ -137,19 +156,35 @@ onMount(() => {
 	on:close={() => {
 		dispatch('close')
 	}}
+	on:open={() => {
+		loadConnects()
+		loadResources()
+	}}
 >
-	<div slot="title">Connect an app</div>
+	<div slot="title">Connect an App</div>
 	<div slot="content">
 		{#if step == 1}
+			{#if resource_type && !connects[resource_type] && !connectsManual.find((x) => x[0] == resource_type)}
+				<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
+					<p class="font-bold">No app integration for {resource_type}</p>
+					<p>
+						The resource type "{resource_type}" seems to not have an app integration. You can still
+						create this resource manually by closing this modal and pressing: "Add a resource". You
+						can also contribute to windmill and add it as an app integration if relevant.
+					</p>
+				</div>
+			{/if}
 			<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]}
+				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) 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
+							scopes = values.scopes
+							extra_params = Object.entries(values.extra_params ?? {})
+
 							dispatch('click')
 						}}
 					>
@@ -175,11 +210,39 @@ onMount(() => {
 					on:click={() => {
 						scopes = scopes.concat('')
 					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
-				><span class="ml-2">{(scopes ?? []).length} item(s)</span>
+				><span class="ml-2">{(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''}</span
+				>
+			{:else}
+				<p class="italic text-sm">Pick an OAuth app and customize the scopes here</p>
+			{/if}
+			<PageHeader title="Extra Params" primary={false} />
+			{#if !manual && resource_type != ''}
+				{#each extra_params as [k, v], i}
+					<div class="flex flex-row max-w-md">
+						<input type="text" bind:value={k} />
+						<input type="text" bind:value={v} />
+
+						<button
+							class="default-button-secondary mx-6"
+							on:click={() => {
+								extra_params = extra_params.filter((el) => el[0] != k)
+							}}><Icon data={faMinus} class="mb-1" /></button
+						>
+					</div>
+				{/each}
+				<button
+					class="default-button-secondary mt-1"
+					on:click={() => {
+						extra_params.push(['', ''])
+						extra_params = extra_params
+					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
+				><span class="ml-2"
+					>{(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''}</span
+				>
 			{:else}
-				<p class="italic text-sm">Pick an oauth app and customize the scopes here</p>
+				<p class="italic text-sm">Pick an OAuth app and customize the extra parameters here</p>
 			{/if}
-			<PageHeader title="API token apps" />
+			<PageHeader title="Non OAuth 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
@@ -256,23 +319,6 @@ onMount(() => {
 </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;

package/components/AppConnect.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        open?: (() => void) | undefined;
+        open?: ((rt?: string) => Promise<void>) | undefined;
         openFromOauth?: ((rt: string) => void) | undefined;
     };
     events: {
@@ -16,7 +16,7 @@ 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 open(): (rt?: string | undefined) => Promise<void>;
     get openFromOauth(): (rt: string) => void;
 }
 export {};

package/components/ArgInfo.svelte

@@ -2,7 +2,6 @@
 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';
@@ -18,10 +17,6 @@ async function getResource(path) {
 let asJson = JSON.stringify(value, null, 4);
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <Modal bind:this={resourceViewer}>
 	<div slot="title">{resource.path}</div>
 	<div slot="content">

package/components/ArgInput.svelte

@@ -1,20 +1,21 @@
-<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';
+<script>import { slide } from 'svelte/transition';
+import { faArrowRotateLeft, faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { setInputCat as computeInputCat } from '../utils';
+import { Button, Tooltip } from 'flowbite-svelte';
+import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import ResourcePicker from './ResourcePicker.svelte';
-import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
-import ObjectResourceInput from './ObjectResourceInput.svelte';
+import Editor from './Editor.svelte';
 import FieldHeader from './FieldHeader.svelte';
-import { createEventDispatcher } from 'svelte';
-import { setInputCat as computeInputCat } from '../utils';
+import ObjectResourceInput from './ObjectResourceInput.svelte';
+import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
 export let description = '';
 export let format = '';
-export let contentEncoding = '';
+export let contentEncoding = undefined;
 export let type = undefined;
 export let required = false;
 export let pattern = undefined;
@@ -26,13 +27,13 @@ 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 = '';
+export let editor = undefined;
 let rawValue = undefined;
 $: {
     if (rawValue) {
@@ -107,7 +108,8 @@ $: {
         value = defaultValue;
     }
 }
-export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+export let inputCat = 'string';
+$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 
 <div class="flex flex-col w-full">
@@ -122,20 +124,18 @@ export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, cont
 					on:click={() => {
 						seeEditable = !seeEditable
 					}}
-					>Customize argument<Icon
-						class="ml-2"
-						data={seeEditable ? faChevronUp : faChevronDown}
-						scale={0.7}
-					/></span
 				>
+					Customize argument
+					<Icon class="ml-2" data={seeEditable ? faChevronUp : faChevronDown} scale={0.7} />
+				</span>
 
 				{#if seeEditable}
 					<div transition:slide class="mt-2">
-						<label class="text-gray-700"
-							>Description
+						<label class="text-gray-700">
+							Description
 							<textarea rows="1" bind:value={description} placeholder="Edit description" />
 							{#if type == 'string' && !contentEncoding && format != 'date-time'}
-								<StringTypeNarrowing bind:format bind:pattern bind:enum_ />
+								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
 							{:else if type == 'array'}
@@ -163,8 +163,8 @@ export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, cont
 				{error === '' ? '...' : error}
 			</div>
 		</div>
-		<div class="container">
-			{#if inputCat == 'number' && !numberAsString}
+		<div class="flex space-x-1">
+			{#if inputCat == 'number'}
 				<input
 					{disabled}
 					type="number"
@@ -188,40 +188,52 @@ export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, cont
 					<span>&nbsp; Not set</span>
 				{/if}
 			{:else if inputCat == 'list'}
-				{#each value ?? [] as v}
-					<div class="flex flex-row max-w-md">
-						{#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) => (v = val))}
-								multiple={false}
-							/>
-						{:else}
-							<input type="text" bind:value={v} />
-						{/if}
-						<button
-							class="default-button-secondary mx-6"
-							on:click={() => {
-								value = value.filter((el) => el != v)
-								if (value.length == 0) {
-									value = undefined
-								}
-							}}><Icon data={faMinus} class="mb-1" /></button
-						>
+				<div>
+					<div>
+						{#each value ?? [] as v}
+							<div class="flex flex-row max-w-md mt-1">
+								{#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) => (v = val))}
+										multiple={false}
+									/>
+								{:else}
+									<input type="text" bind:value={v} />
+								{/if}
+								<button
+									class="default-button-secondary mx-6"
+									on:click={() => {
+										value = value.filter((el) => el != v)
+										if (value.length == 0) {
+											value = undefined
+										}
+									}}
+								>
+									<Icon data={faMinus} class="mb-1" />
+								</button>
+							</div>
+						{/each}
 					</div>
-				{/each}
-				<button
-					class="default-button-secondary mt-1"
-					on:click={() => {
-						if (value == undefined) {
-							value = []
-						}
-						value = value.concat('')
-					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
-				><span class="ml-2">{(value ?? []).length} item(s)</span>
+					<button
+						class="default-button-secondary mt-1"
+						on:click={() => {
+							if (value == undefined) {
+								value = []
+							}
+							value = value.concat('')
+						}}
+					>
+						<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 />
 			{:else if inputCat == 'object'}
@@ -242,6 +254,17 @@ export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, cont
 				</select>
 			{:else if inputCat == 'date'}
 				<input class="inline-block" type="datetime-local" bind:value />
+			{:else if inputCat == 'sql'}
+				<div class="border rounded mb-4 w-full border-gray-700">
+					<Editor
+						on:focus={() => dispatch('focus')}
+						on:blur={() => dispatch('blur')}
+						bind:this={editor}
+						lang="sql"
+						bind:code={value}
+						class="two-lines-editor"
+					/>
+				</div>
 			{:else if inputCat == 'base64'}
 				<input
 					type="file"
@@ -258,6 +281,8 @@ export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, cont
 				/>
 			{:else if inputCat == 'string'}
 				<textarea
+					on:focus={() => dispatch('focus')}
+					on:blur={() => dispatch('blur')}
 					{disabled}
 					style="height: {minHeight}; max-height: {maxHeight}"
 					class="col-span-10 {valid
@@ -268,18 +293,20 @@ export let inputCat = computeInputCat(type, format, itemsType?.type, enum_, cont
 					on:input={() => dispatch('input', { rawValue: value, isRaw: false })}
 				/>
 			{/if}
-			{#if !required}
-				<div class="flex flex-row-reverse">
-					<button
-						{disabled}
-						class="default-button-secondary items-center leading-4 py-0 my-px px-1 float-right"
+			{#if !required && inputCat != 'resource-object'}
+				<Tooltip placement="bottom" content="Reset to default value">
+					<Button
 						on:click={() => (value = undefined)}
-						>Reset<Tooltip>Reset to default value</Tooltip></button
+						{disabled}
+						color="alternative"
+						size="sm"
+						class="h-8"
 					>
-				</div>
+						<Icon data={faArrowRotateLeft} />
+					</Button>
+				</Tooltip>
 			{/if}
+			<slot name="actions" />
 		</div>
 	</div>
 </div>
-
-<style></style>

package/components/ArgInput.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import { type InputCat } from '../utils';
+import Editor from './Editor.svelte';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -7,7 +8,7 @@ declare const __propDef: {
         defaultValue?: any;
         description?: string | undefined;
         format?: string | undefined;
-        contentEncoding?: string | undefined;
+        contentEncoding?: 'base64' | 'binary' | undefined;
         type?: string | undefined;
         required?: boolean | undefined;
         pattern?: undefined | string;
@@ -22,16 +23,20 @@ declare const __propDef: {
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
-        numberAsString?: boolean | undefined;
+        editor?: Editor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         inputCat?: InputCat | undefined;
     };
     events: {
         input: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        actions: {};
+    };
 };
 export declare type ArgInputProps = typeof __propDef.props;
 export declare type ArgInputEvents = typeof __propDef.events;

package/components/Button.svelte

@@ -56,13 +56,13 @@ const dispatch = createEventDispatcher();
 .delete:hover, 
 	.archive:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(220 38 38 / var(--tw-bg-opacity))
+    background-color: rgb(224 36 36 / var(--tw-bg-opacity))
 }
 	.delete, 
 	.archive {
     font-weight: 400;
     --tw-text-opacity: 1;
-    color: rgb(220 38 38 / var(--tw-text-opacity))
+    color: rgb(224 36 36 / var(--tw-text-opacity))
 }
 	.delete:hover, 
 	.archive:hover {
@@ -73,7 +73,7 @@ const dispatch = createEventDispatcher();
 	.archive {
     border-radius: 0.25rem;
     --tw-border-opacity: 1;
-    border-color: rgb(220 38 38 / var(--tw-border-opacity))
+    border-color: rgb(224 36 36 / var(--tw-border-opacity))
 }
 	.delete:hover, 
 	.archive:hover {
@@ -85,7 +85,7 @@ const dispatch = createEventDispatcher();
 	.list:hover, 
 	.share:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    background-color: rgb(63 131 248 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))
 }</style>

package/components/CenteredPage.svelte

@@ -1,5 +1,5 @@
 <div class="max-w-screen-lg flex grow w-full h-full xl:-ml-20">
-	<div class="grow w-full h-full">
+	<div class="grow w-full h-full mt-4">
 		<slot />
 	</div>
 </div>

package/components/CollapseLink.svelte

@@ -0,0 +1,12 @@
+<script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+export let open = false;
+export let text;
+</script>
+
+<button class="text-gray-600 underline" on:click={() => (open = !open)}>
+	{text}&nbsp;<Icon data={open ? faChevronUp : faChevronDown} scale={0.5} />
+</button>
+{#if open}
+	<div><slot /></div>
+{/if}

package/components/CollapseLink.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        text: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CollapseLinkProps = typeof __propDef.props;
+export declare type CollapseLinkEvents = typeof __propDef.events;
+export declare type CollapseLinkSlots = typeof __propDef.slots;
+export default class CollapseLink extends SvelteComponentTyped<CollapseLinkProps, CollapseLinkEvents, CollapseLinkSlots> {
+}
+export {};