windmill-components 1.46.3 → 1.55.0

package/common.d.ts

@@ -1,6 +1,7 @@
-export declare type OwnerKind = 'group' | 'user';
-export declare type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
-export declare type SupportedLanguage = 'deno' | 'python3' | 'go' | 'bash';
+import type { Script } from "./gen";
+export type OwnerKind = 'group' | 'user';
+export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
+export type SupportedLanguage = Script.language;
 export interface SchemaProperty {
     type: string | undefined;
     description: string;
@@ -17,7 +18,7 @@ export interface SchemaProperty {
         [name: string]: SchemaProperty;
     };
 }
-export declare type Schema = {
+export type Schema = {
     $schema: string;
     type: string;
     properties: {
@@ -25,7 +26,7 @@ export declare type Schema = {
     };
     required: string[];
 };
-export declare type Meta = {
+export type Meta = {
     ownerKind: OwnerKind;
     owner: string;
     name: string;

package/components/ApiConnectForm.svelte

@@ -0,0 +1,56 @@
+<script>import { ResourceService } from '../gen';
+import { workspaceStore } from '../stores';
+import { emptySchema, emptyString } from '../utils';
+import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
+export let resource_type;
+export let args = {};
+export let password;
+export let isValid = true;
+let schema = emptySchema();
+let notFound = false;
+async function loadSchema() {
+    try {
+        const rt = await ResourceService.getResourceType({
+            workspace: $workspaceStore,
+            path: resource_type
+        });
+        schema = rt.schema;
+        notFound = false;
+    }
+    catch (e) {
+        rawCode = '{}';
+        notFound = true;
+    }
+}
+$: {
+    $workspaceStore && loadSchema();
+}
+$: notFound && rawCode && parseJson();
+function parseJson() {
+    try {
+        args = JSON.parse(rawCode);
+        error = '';
+        isValid = true;
+    }
+    catch (e) {
+        isValid = false;
+        error = e.message;
+    }
+}
+let error = '';
+let rawCode = '';
+</script>
+
+{#if notFound}
+	<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 !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 />
+{/if}

package/components/ApiConnectForm.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        resource_type: string;
+        args?: Record<string, any> | any;
+        password: string;
+        isValid?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ApiConnectFormProps = typeof __propDef.props;
+export type ApiConnectFormEvents = typeof __propDef.events;
+export type ApiConnectFormSlots = typeof __propDef.slots;
+export default class ApiConnectForm extends SvelteComponentTyped<ApiConnectFormProps, ApiConnectFormEvents, ApiConnectFormSlots> {
+}
+export {};

package/components/AppConnect.svelte

@@ -2,42 +2,69 @@
 const apiTokenApps = {
     airtable: {
         img: 'airtable_connect.png',
-        instructions: 'Click on the top-right avatar -> Account -> Api'
+        instructions: ['Click on the top-right avatar', 'Click on Account', 'Find "Api"']
     },
     discord_webhook: {
         img: 'discord_webhook.png',
-        instructions: 'Server Settings -> Integration -> Webhooks',
+        instructions: ['Click on Server Settings', 'Click on Integration', 'Find "Webhooks"'],
         key: 'webhook_url'
     },
     toggl: {
         img: 'toggl_connect.png',
-        instructions: 'Go to https://track.toggl.com/profile -> API Token'
+        instructions: [
+            'Go to <a href="https://track.toggl.com/profile" target="_blank" rel=”noopener noreferrer”>https://track.toggl.com/profile</a>',
+            'Find "API Token"'
+        ]
+    },
+    mailchimp: {
+        img: 'mailchimp_connect.png',
+        instructions: [
+            'Go to <a href="https://admin.mailchimp.com/account/api" target="_blank" rel=”noopener noreferrer”>https://admin.mailchimp.com/account/api</a>',
+            'Find "Your API Keys"'
+        ]
+    },
+    sendgrid: {
+        img: 'sendgrid_connect.png',
+        instructions: [
+            'Go to <a href="https://app.sendgrid.com/settings/api_keys" target="_blank" rel=”noopener noreferrer”>https://app.sendgrid.com/settings/api_keys</a>',
+            'Create an API key',
+            'Copy your key'
+        ]
     }
 };
 </script>
 
-<script>import { oauthStore, userStore, workspaceStore } from '../stores';
+<script>import { oauthStore, workspaceStore } from '../stores';
 import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import IconedResourceType from './IconedResourceType.svelte';
 import { OauthService, ResourceService, VariableService } from '../gen';
 import { page } from '$app/stores';
-import { sendUserToast, truncateRev } from '../utils';
+import { emptyString, sendUserToast, truncateRev } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Password from './Password.svelte';
 import Path from './Path.svelte';
-import { Alert, Button, Drawer } from './common';
+import { Button, Drawer, Skeleton } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
+import ApiConnectForm from './ApiConnectForm.svelte';
+import SearchItems from './SearchItems.svelte';
+import autosize from 'svelte-autosize';
+export let newPageOAuth = false;
+let filter = '';
 let manual = false;
 let value = '';
 let valueToken;
-let connects = {};
-let connectsManual = [];
-let key = 'token';
-$: key = apiTokenApps[resource_type]?.key ?? 'token';
+let connects = undefined;
+let connectsManual = undefined;
+let args = {};
+$: key =
+    apiTokenApps[resource_type]?.key ??
+        (args != undefined
+            ? Object.keys(args).filter((x) => ['token', 'password', 'api_key'].includes(x))[0]
+            : undefined);
 let scopes = [];
 let extra_params = [];
 let path;
+let description = '';
 let drawer;
 let resource_type = '';
 let step = 1;
@@ -46,15 +73,22 @@ let pathError = '';
 export async function open(rt) {
     step = 1;
     value = '';
+    description = '';
     no_back = false;
     resource_type = rt ?? '';
     await loadConnects();
-    const connect = connects[resource_type];
+    const connect = connects?.[resource_type];
     if (connect) {
         scopes = connect.scopes;
         extra_params = Object.entries(connect.extra_params ?? {});
     }
-    drawer.openDrawer();
+    else {
+        manual = true;
+        if (rt) {
+            next();
+        }
+    }
+    drawer.openDrawer?.();
 }
 export function openFromOauth(rt) {
     resource_type = rt;
@@ -64,19 +98,29 @@ export function openFromOauth(rt) {
     manual = false;
     step = 3;
     no_back = true;
-    drawer.openDrawer();
+    drawer.openDrawer?.();
 }
 async function loadConnects() {
     connects = await OauthService.listOAuthConnects();
 }
 async function loadResources() {
+    await loadConnects();
     const availableRts = await ResourceService.listResourceTypeNames({
         workspace: $workspaceStore
     });
-    connectsManual = Object.entries(apiTokenApps).filter(([key, _]) => availableRts.includes(key));
+    connectsManual = availableRts
+        .filter((x) => !Object.keys(connects ?? {}).includes(x))
+        .map((x) => [
+        x,
+        apiTokenApps[x] ?? {
+            instructions: '',
+            img: undefined,
+            key: undefined
+        }
+    ]);
 }
 async function next() {
-    if (step < 3 && manual) {
+    if (step == 1 && manual) {
         step += 1;
     }
     else if (step == 1 && !manual) {
@@ -85,7 +129,12 @@ async function next() {
         if (extra_params.length > 0) {
             extra_params.forEach(([key, value]) => url.searchParams.append(key, value));
         }
-        window.location.href = url.toString();
+        if (!newPageOAuth) {
+            window.location.href = url.toString();
+        }
+        else {
+            window.open(url.toString(), '_blank');
+        }
     }
     else {
         let exists = await VariableService.existsVariable({
@@ -103,44 +152,46 @@ 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?.expires_in != undefined) {
             account = Number(await OauthService.createAccount({
                 workspace: $workspaceStore,
                 requestBody: {
-                    refresh_token: valueToken.refresh_token,
+                    refresh_token: valueToken.refresh_token ?? '',
                     expires_in: valueToken.expires_in,
                     owner: path.split('/').slice(0, 2).join('/'),
                     client: resource_type
                 }
             }));
         }
-        const description = `${manual ? 'Token' : 'OAuth token'} for ${resource_type}`;
-        await VariableService.createVariable({
-            workspace: $workspaceStore,
-            requestBody: {
-                path,
-                value,
-                is_secret: true,
-                description,
-                is_oauth: !manual,
-                account: account
-            }
-        });
-        const resourceValue = {};
-        resourceValue[key] = `$var:${path}`;
+        const resourceValue = args;
+        if (!manual || key != undefined) {
+            await VariableService.createVariable({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path,
+                    value: manual ? args[key ?? ''] : value,
+                    is_secret: true,
+                    description: emptyString(description)
+                        ? `${manual ? 'Token' : 'OAuth token'} for ${resource_type}`
+                        : description,
+                    is_oauth: !manual,
+                    account: account
+                }
+            });
+            resourceValue[key ?? 'token'] = `$var:${path}`;
+        }
         await ResourceService.createResource({
             workspace: $workspaceStore,
             requestBody: {
                 resource_type,
                 path,
                 value: resourceValue,
-                description,
-                is_oauth: !manual
+                description
             }
         });
-        dispatch('refresh');
+        dispatch('refresh', path);
         sendUserToast(`App token set at resource and variable path: ${path}`);
-        drawer.closeDrawer();
+        drawer.closeDrawer?.();
     }
 }
 async function back() {
@@ -158,190 +209,202 @@ $: isGoogleSignin =
             resource_type == 'gsheets');
 $: disabled =
     (step == 1 && resource_type == '') ||
-        (step == 2 && value == '') ||
-        (step == 3 && pathError != '');
+        (step == 2 &&
+            value == '' &&
+            args &&
+            args['token'] == '' &&
+            args['password'] == '' &&
+            args['api_key'] == '' &&
+            key != undefined) ||
+        (step == 3 && pathError != '') ||
+        !isValid;
+let isValid = true;
+let filteredConnects = [];
+let filteredConnectsManual = [];
 </script>
 
+<SearchItems
+	{filter}
+	items={connects ? Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) : undefined}
+	bind:filteredItems={filteredConnects}
+	f={(x) => x[0]}
+/>
+<SearchItems
+	{filter}
+	items={connectsManual?.sort((a, b) => a[0].localeCompare(b[0]))}
+	bind:filteredItems={filteredConnectsManual}
+	f={(x) => x[0]}
+/>
+
 <Drawer
 	bind:this={drawer}
 	on:close={() => {
 		dispatch('close')
 	}}
 	on:open={() => {
-		loadConnects()
 		loadResources()
 	}}
+	size="800px"
 >
-	<DrawerContent title="Connect an API" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Connect an API or add a Resource" on:close={drawer.closeDrawer}>
 		{#if step == 1}
-			{#if resource_type && !connects[resource_type] && !connectsManual.find((x) => x[0] == resource_type)}
-				<Alert class="mb-4" type="error" title="Resource type not found">
-					The resource type "{resource_type}" seems to not have an OAuth API 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 API integration if relevant.
-				</Alert>
-			{/if}
-			<div class="mb-1 font-semibold text-gray-700">OAuth APIs</div>
-			<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).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
-					<Button
-						size="sm"
-						variant="border"
-						color={key === resource_type ? 'blue' : 'dark'}
-						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						on:click={() => {
-							manual = false
-							resource_type = key
-							scopes = values.scopes
-							extra_params = Object.entries(values.extra_params ?? {})
+			<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
+				<input
+					type="text"
+					placeholder="Search resource type"
+					bind:value={filter}
+					class="text-2xl grow"
+				/>
+			</div>
 
-							dispatch('click')
-						}}
-					>
-						<IconedResourceType name={key} after={true} width="20px" height="20px" />
-					</Button>
-				{/each}
+			<h2 class="mb-4">OAuth APIs</h2>
+			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+				{#if filteredConnects}
+					{#each filteredConnects as [key, values]}
+						<Button
+							size="sm"
+							variant="border"
+							color={key === resource_type ? 'blue' : 'dark'}
+							btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							on:click={() => {
+								manual = false
+								resource_type = key
+								scopes = values.scopes
+								extra_params = Object.entries(values.extra_params ?? {})
+							}}
+						>
+							<IconedResourceType name={key} after={true} width="20px" height="20px" />
+						</Button>
+					{/each}
+				{:else}
+					{#each new Array(3) as _}
+						<Skeleton layout={[[2]]} />
+					{/each}
+				{/if}
 			</div>
-			<div class="mb-1 font-semibold text-gray-700 mt-6">Scopes</div>
-			{#if !manual && resource_type != ''}
-				{#each scopes as v}
-					<div class="flex flex-row max-w-md mb-2">
-						<input type="text" bind:value={v} />
+			{#if manual == false && resource_type != ''}
+				<h3>Scopes</h3>
+				{#if !manual && resource_type != ''}
+					{#each scopes as v}
+						<div class="flex flex-row max-w-md mb-2">
+							<input type="text" bind:value={v} />
+							<Button
+								variant="border"
+								color="red"
+								size="xs"
+								btnClasses="mx-6"
+								on:click={() => {
+									scopes = scopes.filter((el) => el != v)
+								}}
+							>
+								<Icon data={faMinus} />
+							</Button>
+						</div>
+					{/each}
+					<div class="flex items-center mt-1">
 						<Button
 							variant="border"
-							color="red"
-							size="xs"
-							btnClasses="mx-6"
+							color="blue"
+							size="sm"
+							endIcon={{ icon: faPlus }}
 							on:click={() => {
-								scopes = scopes.filter((el) => el != v)
+								scopes = scopes.concat('')
 							}}
 						>
-							<Icon data={faMinus} />
+							Add item
 						</Button>
+						<span class="ml-2 text-sm text-gray-500">
+							({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
+						</span>
 					</div>
-				{/each}
-				<div class="flex items-center mt-1">
-					<Button
-						variant="border"
-						color="blue"
-						size="sm"
-						endIcon={{ icon: faPlus }}
-						on:click={() => {
-							scopes = scopes.concat('')
-						}}
-					>
-						Add item
-					</Button>
-					<span class="ml-2 text-sm text-gray-500">
-						({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
-					</span>
-				</div>
-			{:else}
-				<p class="italic text-sm">Pick an OAuth API and customize the scopes here</p>
+				{/if}
 			{/if}
-			<div class="mb-1 font-semibold text-gray-700 mt-6">Extra params</div>
-			{#if !manual && resource_type != ''}
-				{#each extra_params as [k, v]}
-					<div class="flex flex-row max-w-md mb-2">
-						<input type="text" bind:value={k} class="mr-2" />
-						<input type="text" bind:value={v} />
 
+			<h2 class="mt-8 mb-4">Non OAuth APIs & Resources</h2>
+			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+				{#if filteredConnectsManual}
+					{#each filteredConnectsManual as [key, instructions]}
 						<Button
+							size="sm"
 							variant="border"
-							color="red"
-							size="xs"
-							btnClasses="mx-6"
+							color={key === resource_type ? 'blue' : 'dark'}
+							btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 							on:click={() => {
-								extra_params = extra_params.filter((el) => el[0] != k)
+								manual = true
+								resource_type = key
+								next()
+								dispatch('click')
 							}}
 						>
-							<Icon data={faMinus} />
+							<IconedResourceType name={key} after={true} width="20px" height="20px" />
 						</Button>
-					</div>
-				{/each}
-				<div class="flex items-center mt-1">
-					<Button
-						variant="border"
-						color="blue"
-						size="sm"
-						endIcon={{ icon: faPlus }}
-						on:click={() => {
-							extra_params.push(['', ''])
-							extra_params = extra_params
-						}}
-					>
-						Add item
-					</Button>
-					<span class="ml-2 text-sm text-gray-500">
-						({(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''})
-					</span>
-				</div>
-			{:else}
-				<p class="italic text-sm">Pick an OAuth API and customize the extra parameters here</p>
-			{/if}
-			<div class="mb-1 font-semibold text-gray-700 mt-6">Non OAuth APIs</div>
-			<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
-						size="sm"
-						variant="border"
-						color={key === resource_type ? 'blue' : 'dark'}
-						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						on:click={() => {
-							manual = true
-							resource_type = key
-							dispatch('click')
-						}}
-					>
-						<IconedResourceType name={key} after={true} width="20px" height="20px" />
-					</Button>
-				{/each}
+					{/each}
+				{:else}
+					{#each new Array(9) as _}
+						<Skeleton layout={[[2]]} />
+					{/each}
+				{/if}
 			</div>
-		{:else if step == 2}
-			{#if manual}
-				<div class="mb-1 font-semibold text-gray-700 mt-6">Instructions</div>
-				<div>
-					{apiTokenApps[resource_type].instructions}
+		{:else if step == 2 && manual}
+			<Path
+				bind:error={pathError}
+				bind:path
+				initialPath=""
+				namePlaceholder="my_{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>
+				<div class="pl-10">
+					<ol class="list-decimal">
+						{#each apiTokenApps[resource_type].instructions as step}
+							<li>
+								{@html step}
+							</li>
+						{/each}
+					</ol>
 				</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}
+
+			<h2 class="mt-8">Value</h2>
+			<div class="mt-4">
+				<ApiConnectForm password={key ?? ''} {resource_type} bind:args bind:isValid />
+			</div>
 		{:else}
 			<Path
+				initialPath=""
+				namePlaceholder="my_{resource_type}"
 				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 api.
-				</li>
-			</ul>
+			{#if apiTokenApps[resource_type] || !manual}
+				<ul class="mt-10 bg-white">
+					<li>
+						1. A secret variable containing the {apiTokenApps[resource_type]?.key ?? 'token'}
+						<span class="font-bold">{truncateRev(value, 5, '*****')}</span>
+						will be stored a
+						<span class="font-mono whitespace-nowrap">{path}</span>.
+					</li>
+					<li class="mt-4">
+						2. The resource containing that token will be stored at the same path <span
+							class="font-mono whitespace-nowrap">{path}</span
+						>. The Variable and Resource will be "linked together", they will be deleted and renamed
+						together.
+					</li></ul
+				>
+			{/if}
 		{/if}
-		<div slot="submission" class="flex items-center gap-4">
+		<div slot="actions">
 			{#if step > 1 && !no_back}
 				<Button variant="border" on:click={back}>Back</Button>
 			{/if}
@@ -353,10 +416,10 @@ $: disabled =
 				<Button {disabled} on:click={next}>
 					{#if step == 1 && !manual}
 						Connect
-					{:else if step == 3}
-						Add resource
-					{:else}
+					{:else if step == 1 && manual}
 						Next
+					{:else}
+						Save
 					{/if}
 				</Button>
 			{/if}