windmill-components 1.52.0 → 1.55.0

package/components/ApiConnectForm.svelte

@@ -1,21 +1,56 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { emptySchema } from '../utils';
+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() {
-    const rt = await ResourceService.getResourceType({
-        workspace: $workspaceStore,
-        path: resource_type
-    });
-    schema = rt.schema;
+    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>
 
-<SchemaForm {password} isValid {schema} bind:args />
+{#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

@@ -2,8 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         resource_type: string;
-        args?: Record<string, any> | undefined;
+        args?: Record<string, any> | any;
         password: string;
+        isValid?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/AppConnect.svelte

@@ -47,6 +47,7 @@ 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;
@@ -83,6 +84,9 @@ export async function open(rt) {
     }
     else {
         manual = true;
+        if (rt) {
+            next();
+        }
     }
     drawer.openDrawer?.();
 }
@@ -148,11 +152,11 @@ 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
@@ -207,11 +211,14 @@ $: disabled =
     (step == 1 && resource_type == '') ||
         (step == 2 &&
             value == '' &&
+            args &&
             args['token'] == '' &&
             args['password'] == '' &&
             args['api_key'] == '' &&
             key != undefined) ||
-        (step == 3 && pathError != '');
+        (step == 3 && pathError != '') ||
+        !isValid;
+let isValid = true;
 let filteredConnects = [];
 let filteredConnectsManual = [];
 </script>
@@ -237,8 +244,9 @@ let filteredConnectsManual = [];
 	on:open={() => {
 		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}
 			<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
 				<input
@@ -249,7 +257,7 @@ let filteredConnectsManual = [];
 				/>
 			</div>
 
-			<h2 class="mb-2">OAuth APIs</h2>
+			<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]}
@@ -312,7 +320,7 @@ let filteredConnectsManual = [];
 				{/if}
 			{/if}
 
-			<h2 class="mt-8 mb-2">Non OAuth APIs</h2>
+			<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]}
@@ -347,11 +355,10 @@ let filteredConnectsManual = [];
 			/>
 			<h2 class="mt-4 mb-2">Description</h2>
 
-			<input type="text" bind:value={description} />
+			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
 
-			<h2 class="mt-4">Value</h2>
 			{#if apiTokenApps[resource_type]}
-				<div class="mb-1 font-semibold text-gray-700 mt-6">Instructions</div>
+				<h2 class="mt-4 mb-2">Instructions</h2>
 				<div class="pl-10">
 					<ol class="list-decimal">
 						{#each apiTokenApps[resource_type].instructions as step}
@@ -368,8 +375,9 @@ let filteredConnectsManual = [];
 				{/if}
 			{/if}
 
+			<h2 class="mt-8">Value</h2>
 			<div class="mt-4">
-				<ApiConnectForm password={key ?? ''} {resource_type} bind:args />
+				<ApiConnectForm password={key ?? ''} {resource_type} bind:args bind:isValid />
 			</div>
 		{:else}
 			<Path
@@ -396,7 +404,7 @@ let filteredConnectsManual = [];
 				>
 			{/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}

package/components/ArgInfo.svelte

@@ -20,8 +20,12 @@ async function getResource(path) {
 </script>
 
 <Drawer bind:this={jsonViewer} size="800px">
-	<DrawerContent title="See JSON" on:close={jsonViewer.toggleDrawer}>
-		<Highlight language={json} code={JSON.stringify(jsonViewerContent, null, 4)} />
+	<DrawerContent title="Argument Details" on:close={jsonViewer.toggleDrawer}>
+		{#if isString(jsonViewerContent)}
+			<pre>{jsonViewerContent}</pre>
+		{:else}
+			<ObjectViewer pureViewer json={jsonViewerContent} />
+		{/if}
 	</DrawerContent>
 </Drawer>
 

package/components/ArgInput.svelte

@@ -11,6 +11,7 @@ import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import autosize from 'svelte-autosize';
+import * as autosizeLib from 'autosize';
 import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
 export let label = '';
@@ -36,6 +37,7 @@ export let password = false;
 export let pickForField = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
+export let noMargin = false;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
@@ -82,6 +84,10 @@ function fileChanged(e, cb) {
 }
 export function focus() {
     el?.focus();
+    if (el) {
+        el.style.height = '5px';
+        el.style.height = el.scrollHeight + 50 + 'px';
+    }
 }
 function validateInput(pattern, v) {
     if (required && (v == undefined || v == null || v === '')) {
@@ -259,7 +265,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					</span>
 				</div>
 			{:else if inputCat == 'resource-object'}
-				<ObjectResourceInput {compact} {format} bind:value />
+				<ObjectResourceInput {format} bind:value />
 			{:else if inputCat == 'object'}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
@@ -366,7 +372,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					</div>
 					{#if variableEditor}
 						<div class="text-sm text-gray-600">
-							{#if value?.startsWith('$var:')}
+							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
 								Linked to variable <button
 									class="text-blue-500 underline"
 									on:click={() => variableEditor?.editVariable?.(value.slice(5))}
@@ -400,7 +406,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					{error}
 				{/if}
 			</div>
-		{:else}
+		{:else if !noMargin}
 			<div class="mb-2" />
 		{/if}
 	</div>

package/components/ArgInput.svelte.d.ts

@@ -34,6 +34,7 @@ declare const __propDef: {
         pickForField?: string | undefined;
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
+        noMargin?: boolean | undefined;
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;

package/components/CenteredPage.svelte

@@ -1,4 +1,4 @@
-<div class="pb-6 h-fit-content">
+<div class="pb-8 h-fit-content">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 h-fit-content">
 		<slot />
 	</div>

package/components/CenteredPage.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  CenteredPageProps */
 /** @typedef {typeof __propDef.events}  CenteredPageEvents */
 /** @typedef {typeof __propDef.slots}  CenteredPageSlots */
-export default class CenteredPage extends SvelteComponentTyped<{}, {
+export default class CenteredPage extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -12,7 +14,9 @@ export type CenteredPageEvents = typeof __propDef.events;
 export type CenteredPageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/CronInput.svelte

@@ -74,7 +74,7 @@ async function handleScheduleInput(input) {
 			<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
 			<ul class="list-disc mx-12">
 				{#each preview.slice(0, limit) as p}
-					<li class="mx-2 text-gray-700 text-sm">{displayDate(p)}</li>
+					<li class="mx-2 text-gray-700 text-sm">{displayDate(p, true)}</li>
 				{/each}
 				<li class="text-sm mx-2">...</li>
 				{#if limit != 10}

package/components/DisplayResult.svelte

@@ -2,8 +2,11 @@
 import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
 import { truncate } from '../utils';
+import { Button } from './common';
+import autosize from 'svelte-autosize';
 export let result;
-let resultKind = inferResultKind(result);
+let resultKind;
+$: resultKind = inferResultKind(result);
 let forceJson = false;
 function isRectangularArray(obj) {
     if (!Array.isArray(obj) || obj.length == 0) {
@@ -44,18 +47,25 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'error' && typeof result['error'] == 'string') {
                 return 'error';
             }
+            else if (keys.length == 3 &&
+                keys.includes('resume') &&
+                keys.includes('cancel') &&
+                keys.includes('approvalPage')) {
+                return 'approval';
+            }
         }
         catch (err) { }
     }
     return 'json';
 }
+let payload = '';
 </script>
 
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
-				as JSON <input type="checkbox" bind:checked={forceJson} /></div
+				as JSON&nbsp;<input type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
 				class="mb-2 text-sm text-gray-700"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b></div
@@ -119,10 +129,37 @@ function inferResultKind(result) {
 		{:else if !forceJson && resultKind == 'error'}<div
 				><pre class="text-sm text-red-500 whitespace-pre-wrap">{result.error}</pre>
 			</div>
+		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-1 mx-4">
+				<Button
+					color="green"
+					variant="border"
+					on:click={() =>
+						fetch(result['resume'], {
+							method: 'POST',
+							body: JSON.stringify(payload),
+							headers: { 'Content-Type': 'application/json' }
+						})}
+				>
+					Resume</Button
+				>
+				<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}>Cancel</Button
+				>
+				<div>
+					<h3>Payload</h3>
+					<div class="border border-black">
+						<input type="text" bind:value={payload} use:autosize />
+					</div>
+				</div>
+				<div class="center-center"
+					><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a></div
+				>
+			</div>
 		{:else}<Highlight
 				language={json}
 				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			/>
 		{/if}
+	{:else}
+		<div class="text-gray-500 text-sm">No result</div>
 	{/if}
 </div>

package/components/Dropdown.svelte

@@ -1,113 +1,86 @@
-<script>import { clickOutside } from '../utils';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
-import { Button } from './common';
-let open = false;
+import { Button, Menu } from './common';
 export let dropdownItems;
 export let name = undefined;
-// The dropdown is positioned versus its first relatively positioned partent
-// By default, the dropdown is positioned relative to its button
-// This can cause the dropdown to be hidden if it is in an overflow-hidden div.
-// In that case, set relative to false and control the dropdown positioning from the div
-export let relative = true;
-export let left = true;
+export let placement = 'bottom-start';
 const dispatch = createEventDispatcher();
-function toggle() {
-    open = !open;
-}
-function handleClickOutsideMenu(event) {
-    open = false;
-}
 </script>
 
-<div
-	class="{relative ? 'relative' : ''} {$$props.class}"
-	use:clickOutside
-	on:click_outside={handleClickOutsideMenu}
->
-	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" on:click={toggle}>
+<Menu {placement} let:close>
+	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" slot="trigger">
 		{#if !$$slots.default}
 			<Icon data={faEllipsisH} scale={1.2} />
 		{:else}
 			<slot />
 		{/if}
 	</Button>
-	<div
-		class="flex flex-col z-50 origin-top-right absolute {left
-			? 'right-0'
-			: 'left-0'} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
-			? 'visible'
-			: 'hidden'}"
-		role="menu"
-		tabindex="-1"
-	>
-		{#if dropdownItems}
-			{#each dropdownItems as item, i}
-				{#if item.action}
-					<button
-						on:click={(event) => {
-							if (!item.disabled) {
-								event.preventDefault()
-								open = false
-								item.action && item.action(event)
-								dispatch('click', { item: item?.eventName })
-							}
-						}}
-						class="block hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left{item.separatorTop
-							? 'border-t'
-							: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
-							? 'text-red-500'
-							: ''}"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-						disabled={item.disabled}
-						class:disabled={item.disabled}
-					>
-						{#if item.icon}
-							<Icon
-								data={item.icon}
-								scale={0.6}
-								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
-							/>
-						{/if}
-						{item.displayName}
-					</button>
-				{:else if item.href}
-					<a
-						href={item.href}
-						on:click={() => {
-							if (!item.disabled) {
-								open = false
-							}
-						}}
-						class="block px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-						class:disabled={item.disabled}
-					>
-						{#if item.icon}
-							<Icon
-								data={item.icon}
-								scale={0.6}
-								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
-							/>
-						{/if}
-						{item.displayName}
-					</a>
-				{:else}
-					<span
-						class="block px-4 py-2 text-sm text-gray-700"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-					>
-						{item.displayName}
-					</span>
-				{/if}
-			{/each}
-		{/if}
-	</div>
-</div>
+	{#if dropdownItems}
+		{#each dropdownItems as item, i}
+			{#if item.action}
+				<button
+					on:click={(event) => {
+						if (!item.disabled) {
+							event.preventDefault()
+							close()
+							item.action && item.action(event)
+							dispatch('click', { item: item?.eventName })
+						}
+					}}
+					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left {item.separatorTop
+						? 'border-t'
+						: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
+						? 'text-red-500'
+						: ''}"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+					disabled={item.disabled}
+					class:disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</button>
+			{:else if item.href}
+				<a
+					href={item.href}
+					on:click={() => {
+						if (!item.disabled) {
+							close()
+						}
+					}}
+					class="block w-full px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+					class:disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</a>
+			{:else}
+				<span
+					class="block  px-4 py-2 text-sm text-gray-700"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+				>
+					{item.displayName}
+				</span>
+			{/if}
+		{/each}
+	{/if}
+</Menu>

package/components/Dropdown.svelte.d.ts

@@ -2,11 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { DropdownItem } from '../utils';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         dropdownItems: DropdownItem[];
         name?: string | undefined;
-        relative?: boolean | undefined;
-        left?: boolean | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/Editor.svelte

@@ -9,6 +9,16 @@ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSuggestionDiagnostics: true,
     noSyntaxValidation: true
 });
+monaco.editor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+monaco.editor.setTheme('myTheme');
 </script>
 
 <script>import { browser, dev } from '$app/env';
@@ -409,12 +419,13 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={divEl} class={$$props.class} />
+<div bind:this={divEl} class="{$$props.class} editor" />
 
 <style>
 	.editor {
-		padding-left: 0px;
-		padding-right: 0px;
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh
+    border-radius: 0.375rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+    padding: 0px
 }</style>