windmill-components 1.60.4 → 1.75.0

package/assets/app.css

@@ -23,6 +23,9 @@
 		display: none !important;
 	}
 
+	.svelte-select-list {
+		z-index: 1000 !important;
+	}
 	.nowrap pre code.hljs {
 		whitespace: normal !important;
 	}
@@ -47,12 +50,23 @@
 	.Template-editor span.mtk20 {
 		color: black !important;
 	}
+
+	::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(155, 155, 155, 0.5);
+		border: transparent;
+	}
 }
 
 @layer components {
 	/* Flow graph viewer -> Svelvet library internal class overwrite */
 	.Node {
 		display: flex !important;
-		cursor: pointer !important;
 	}
 }

package/common.d.ts

@@ -19,7 +19,7 @@ export interface SchemaProperty {
     };
 }
 export type Schema = {
-    $schema: string;
+    $schema: string | undefined;
     type: string;
     properties: {
         [name: string]: SchemaProperty;
@@ -31,4 +31,8 @@ export type Meta = {
     owner: string;
     name: string;
 };
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
+/** An inclusive range of integer numbers */
+export type IntRange<F extends number, T extends number> = F | Exclude<Enumerate<T>, Enumerate<F>> | T;
 export declare function pathToMeta(path: string): Meta;
+export {};

package/components/ApiConnectForm.svelte

@@ -1,8 +1,11 @@
-<script>import { ResourceService } from '../gen';
+<script>import { JobService, Preview, ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { emptySchema, emptyString } from '../utils';
+import { emptySchema, emptyString, sendUserToast } from '../utils';
+import { Loader2 } from 'lucide-svelte';
+import Button from './common/button/Button.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import Toggle from './Toggle.svelte';
 export let resource_type;
 export let args = {};
 export let password;
@@ -10,6 +13,8 @@ export let isValid = true;
 let schema = emptySchema();
 let notFound = false;
 async function loadSchema() {
+    rawCode = '{}';
+    viewJsonSchema = false;
     try {
         const rt = await ResourceService.getResourceType({
             workspace: $workspaceStore,
@@ -19,7 +24,6 @@ async function loadSchema() {
         notFound = false;
     }
     catch (e) {
-        rawCode = '{}';
         notFound = true;
     }
 }
@@ -40,17 +44,74 @@ function parseJson() {
 }
 let error = '';
 let rawCode = '';
+let viewJsonSchema = false;
+$: rawCode && parseJson();
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+let loading = false;
+async function testConnection() {
+    loading = true;
+    const job = await JobService.runScriptPreview({
+        workspace: $workspaceStore,
+        requestBody: {
+            language: 'deno',
+            content: `
+import { Client } from 'https://deno.land/x/postgres/mod.ts'
+export async function main(args: any) {
+	const client = new Client("postgres://" + args.user + ":" + args.password + "@" + args.host + ":" + args.port + "/" + args.dbname + "?sslmode=" + args.sslmode)
+	await client.connect()
+	return 'Connection successful'
+}
+				`,
+            args: {
+                args
+            }
+        }
+    });
+    await new Promise((r) => setTimeout(r, 3000));
+    loading = false;
+    const testResult = await JobService.getCompletedJob({
+        workspace: $workspaceStore,
+        id: job
+    });
+    if (testResult) {
+        sendUserToast(testResult.success ? testResult.result : testResult.result?.['error']?.['message'], !testResult.success);
+    }
+}
 </script>
 
-{#if notFound}
+{#if !notFound}
+	<div class="w-full flex gap-4 flex-row-reverse">
+		<Toggle
+			on:change={(e) => switchTab(e.detail)}
+			options={{
+				right: 'As JSON'
+			}}
+		/>
+		{#if resource_type == 'postgresql'}
+			<Button size="sm" on:click={testConnection}
+				>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
+			>
+		{/if}
+	</div>
+{:else}
 	<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}
+{#if notFound || viewJsonSchema}
 	{#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 />
+	<SchemaForm noDelete {password} isValid {schema} bind:args />
 {/if}

package/components/AppConnect.svelte

@@ -34,6 +34,14 @@ const apiTokenApps = {
     supabase: {
         img: '/supabase_connect.png',
         instructions: ['Go to the API Settings of your app to find the project URL and key']
+    },
+    square: {
+        img: '/square_connect.gif',
+        instructions: [
+            'Go to <a href="https://developer.squareup.com/apps" target="_blank" rel=”noopener noreferrer”>https://developer.squareup.com/apps</a>',
+            'In the left pane, choose Credentials',
+            'At the top of the page, choose Production mode for a production access token or Sandbox mode for a Sandbox access token.'
+        ]
     }
 };
 </script>
@@ -52,6 +60,7 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import ApiConnectForm from './ApiConnectForm.svelte';
 import SearchItems from './SearchItems.svelte';
 import autosize from 'svelte-autosize';
+import WhitelistIp from './WhitelistIp.svelte';
 export let newPageOAuth = false;
 let filter = '';
 let manual = false;
@@ -63,7 +72,7 @@ let args = {};
 $: key =
     apiTokenApps[resource_type]?.key ??
         (args != undefined
-            ? Object.keys(args).filter((x) => ['token', 'password', 'api_key'].includes(x))[0]
+            ? Object.keys(args).filter((x) => ['token', 'password', 'api_key', 'key'].includes(x))[0]
             : undefined);
 let scopes = [];
 let extra_params = [];
@@ -126,6 +135,7 @@ async function loadResources() {
 async function next() {
     if (step == 1 && manual) {
         step += 1;
+        args = {};
     }
     else if (step == 1 && !manual) {
         const url = new URL(`/api/oauth/connect/${resource_type}`, $page.url.origin);
@@ -220,6 +230,7 @@ $: disabled =
             args['token'] == '' &&
             args['password'] == '' &&
             args['api_key'] == '' &&
+            args['key'] == '' &&
             key != undefined) ||
         (step == 3 && pathError != '') ||
         !isValid;
@@ -355,12 +366,9 @@ let filteredConnectsManual = [];
 				bind:error={pathError}
 				bind:path
 				initialPath=""
-				namePlaceholder="my_{resource_type}"
+				namePlaceholder={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>
@@ -374,20 +382,28 @@ let filteredConnectsManual = [];
 					</ol>
 				</div>
 				{#if apiTokenApps[resource_type].img}
-					<div class="mt-4 w-full">
-						<img class="max-h-96 m-auto" alt="connect" src={apiTokenApps[resource_type].img} />
+					<div class="mt-4 w-full overflow-hidden">
+						<img class="m-auto  max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
 					</div>
 				{/if}
 			{/if}
+			{#if resource_type == 'postgresql' || resource_type == 'mysql' || resource_type == 'mongodb'}
+				<WhitelistIp />
+			{/if}
 
-			<h2 class="mt-8">Value</h2>
+			<h2 class="mt-4">Value</h2>
 			<div class="mt-4">
-				<ApiConnectForm password={key ?? ''} {resource_type} bind:args bind:isValid />
+				{#key resource_type}
+					<ApiConnectForm password={key ?? ''} {resource_type} bind:args bind:isValid />
+				{/key}
 			</div>
+
+			<h2 class="mt-4 mb-2">Description</h2>
+			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
 		{:else}
 			<Path
 				initialPath=""
-				namePlaceholder="my_{resource_type}"
+				namePlaceholder={resource_type}
 				bind:error={pathError}
 				bind:path
 				kind="resource"

package/components/ArgInput.svelte

@@ -141,7 +141,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
 		{/if}
 		{#if editableSchema}
-			<div class="my-1 text-xs border-solid border border-gray-400 rounded p-2">
+			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
 				<span
 					class="underline"
 					on:click={() => {

package/components/CliHelpBox.svelte

@@ -0,0 +1,49 @@
+<script>import { page } from '$app/stores';
+import { userWorkspaces, workspaceStore } from '../stores';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { slide } from 'svelte/transition';
+import InlineCodeCopy from './InlineCodeCopy.svelte';
+$: opened = false;
+$: workspace = $userWorkspaces.find((e) => e.id === $workspaceStore);
+$: workspaceName = workspace?.name;
+$: workspaceId = workspace?.id;
+$: url = `${$page.url.protocol}//${$page.url.hostname}/`;
+</script>
+
+<div class="text-sm mt-2 flex">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="underline mr-4"
+		on:click={() => {
+			opened = !opened
+		}}
+	>
+		CLI quick setup
+		<Icon class="ml-2" data={opened ? faChevronUp : faChevronDown} scale={0.7} />
+	</span>
+</div>
+
+{#if opened}
+	<div
+		transition:slide|local
+		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+		role="alert"
+		id="dynamic-input-help-box"
+	>
+		<ul class="pl-0 list-decimal list-inside">
+			<li
+				>Install the latest wmill CLI from deno.land: <InlineCodeCopy
+					content={'deno install --unstable -A https://deno.land/x/wmill/main.ts'}
+				/></li
+			>
+			<li
+				>Setup the wmill cli for this workspace & remote: <InlineCodeCopy
+					content={`wmill workspace add ${workspaceName} ${workspaceId} ${url}`}
+				/></li
+			>
+			<li>Follow the prompts in your terminal</li>
+			<li>Use the run command above!</li>
+		</ul>
+	</div>
+{/if}

package/components/CliHelpBox.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CliHelpBoxProps = typeof __propDef.props;
+export type CliHelpBoxEvents = typeof __propDef.events;
+export type CliHelpBoxSlots = typeof __propDef.slots;
+export default class CliHelpBox extends SvelteComponentTyped<CliHelpBoxProps, CliHelpBoxEvents, CliHelpBoxSlots> {
+}
+export {};

package/components/DisplayResult.svelte

@@ -1,13 +1,16 @@
 <script>import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
-import { truncate } from '../utils';
-import { Button } from './common';
+import { copyToClipboard, truncate } from '../utils';
+import { Button, Drawer, DrawerContent } from './common';
 import autosize from 'svelte-autosize';
+import { ClipboardCopy } from 'lucide-svelte';
 export let result;
+export let requireHtmlApproval = false;
 let resultKind;
 $: resultKind = inferResultKind(result);
 let forceJson = false;
+let enableHtml = false;
 function isRectangularArray(obj) {
     if (!Array.isArray(obj) || obj.length == 0) {
         return false;
@@ -35,9 +38,15 @@ function inferResultKind(result) {
             else if (keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b)) {
                 return 'table-col';
             }
+            else if (keys.length == 1 && keys[0] == 'html') {
+                return 'html';
+            }
             else if (keys.length == 1 && keys[0] == 'png') {
                 return 'png';
             }
+            else if (keys.length == 1 && keys[0] == 'svg') {
+                return 'svg';
+            }
             else if (keys.length == 1 && keys[0] == 'jpeg') {
                 return 'jpeg';
             }
@@ -47,6 +56,9 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'error') {
                 return 'error';
             }
+            else if (keys.length === 2 && keys.includes('file') && keys.includes('filename')) {
+                return 'filename';
+            }
             else if (keys.length == 3 &&
                 keys.includes('resume') &&
                 keys.includes('cancel') &&
@@ -59,16 +71,35 @@ function inferResultKind(result) {
     return 'json';
 }
 let payload = '';
+let jsonViewer;
 </script>
 
+<Drawer bind:this={jsonViewer} size="900px">
+	<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+				color="light"
+				size="xs"
+			>
+				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+			</Button>
+		</svelte:fragment>
+		<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+	</DrawerContent>
+</Drawer>
+
 <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&nbsp;<input type="checkbox" bind:checked={forceJson} /></div
+				as JSON&nbsp;<input class="windmillapp" 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
+				class="mb-2 min-w-[400px] text-sm text-gray-700 relative"
+				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
+				<div class="text-gray-500 text-sm  absolute top-0 right-2">
+					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>
+				</div></div
 			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 			>
@@ -104,6 +135,34 @@ let payload = '';
 					</tbody>
 				</TableCustom>
 			</div>
+		{:else if !forceJson && resultKind == 'html'}
+			<div class="h-full">
+				{#if !requireHtmlApproval || enableHtml}
+					{@html result.html}
+				{:else}
+					<div class="font-main text-sm">
+						<div class="flex flex-col">
+							<div class="bg-red-400 py-1 rounded-t text-white font-bold text-center">
+								Warning
+							</div>
+							<p
+								class="text-gray-600 mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
+								>Rendering HTML can expose you to <a
+									href="https://owasp.org/www-community/attacks/xss/"
+									target="_blank"
+									rel="noreferrer"
+									class="hover:underline">XSS attacks</a
+								>. Only enable it if you trust the author of the script.
+							</p>
+						</div>
+						<div class="center-center">
+							<Button size="sm" color="dark" on:click={() => (enableHtml = true)}>
+								Enable HTML rendering
+							</Button>
+						</div>
+					</div>
+				{/if}
+			</div>
 		{:else if !forceJson && resultKind == 'png'}
 			<div class="h-full"
 				><img alt="png rendered" class="w-auto h-full" src="data:image/png;base64,{result.png}" />
@@ -116,6 +175,11 @@ let payload = '';
 					src="data:image/jpeg;base64,{result.jpeg}"
 				/>
 			</div>
+		{:else if !forceJson && resultKind == 'svg'}
+			<div
+				><a download="windmill.svg" href="data:text/plain;base64,{btoa(result.svg)}">Download</a>
+			</div>
+			<div class="h-full overflow-auto">{@html result.svg} </div>
 		{:else if !forceJson && resultKind == 'gif'}
 			<div class="h-full"
 				><img alt="gif rendered" class="w-auto h-full" src="data:image/gif;base64,{result.gif}" />
@@ -126,8 +190,14 @@ let payload = '';
 					>Download</a
 				>
 			</div>
+		{:else if !forceJson && resultKind === 'filename'}
+			<div>
+				<a download={result.filename} href="data:application/octet-stream;base64,{result.file}">
+					Download
+				</a>
+			</div>
 		{:else if !forceJson && resultKind == 'error'}<div>
-				<span class="text-red-500 font-semibold text-sm"
+				<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
 					>{result.error.name}: {result.error.message}</span
 				>
 				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
@@ -157,10 +227,8 @@ let payload = '';
 					><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')}
-			/>
+		{: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>

package/components/DisplayResult.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         result: any;
+        requireHtmlApproval?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Editor.svelte

@@ -102,8 +102,16 @@ export function insertAtLine(code, line) {
 }
 export function setCode(ncode) {
     code = ncode;
-    if (editor) {
-        editor.setValue(ncode);
+    if (editor?.getModel()) {
+        // editor.setValue(ncode)
+        editor.pushUndoStop();
+        editor.executeEdits('set', [
+            {
+                range: editor.getModel().getFullModelRange(),
+                text: ncode
+            }
+        ]);
+        editor.pushUndoStop();
     }
 }
 export function format() {
@@ -246,8 +254,9 @@ export async function reloadWebsocket() {
             console.error(`connection to ${name} language server failed`);
         }
     }
+    const wsProtocol = $page.url.protocol == 'https:' ? 'wss' : 'ws';
     if (lang == 'typescript') {
-        await connectToLanguageServer(`wss://${$page.url.host}/ws/deno`, 'deno', {
+        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/deno`, 'deno', {
             certificateStores: null,
             enablePaths: [],
             config: null,
@@ -279,7 +288,7 @@ export async function reloadWebsocket() {
         });
     }
     else if (lang === 'python') {
-        await connectToLanguageServer(`wss://${$page.url.host}/ws/pyright`, 'pyright', {
+        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/pyright`, 'pyright', {
             executionEnvironments: [
                 {
                     root: '/tmp/pyright',
@@ -289,7 +298,7 @@ export async function reloadWebsocket() {
                 }
             ]
         });
-        connectToLanguageServer(`wss://${$page.url.host}/ws/black`, 'black', {
+        connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/black`, 'black', {
             formatters: {
                 black: {
                     command: 'black',
@@ -302,7 +311,7 @@ export async function reloadWebsocket() {
         });
     }
     else if (lang === 'go') {
-        connectToLanguageServer(`wss://${$page.url.host}/ws/go`, 'go', {
+        connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/go`, 'go', {
             'build.allowImplicitNetworkAccess': true
         });
     }
@@ -355,7 +364,8 @@ async function loadMonaco() {
     const model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
     editor = meditor.create(divEl, {
-        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
+        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+        tabSize: lang == 'python' ? 4 : 2
     });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {