windmill-components 1.60.3 → 1.83.1

package/components/DisplayResult.svelte

@@ -1,13 +1,17 @@
 <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';
+import Portal from 'svelte-portal';
 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 +39,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 +57,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 +72,20 @@ function inferResultKind(result) {
     return 'json';
 }
 let payload = '';
+let jsonViewer;
 </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&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-[360px] 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 +121,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 +161,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 +176,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,12 +213,27 @@ 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>
+		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
 	{/if}
 </div>
+
+<Portal>
+	<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>
+</Portal>

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

@@ -1,19 +1,29 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { MoreHorizontal } from 'lucide-svelte';
+import { MoreVertical } from 'lucide-svelte';
 import { Button, Menu } from './common';
 import { goto } from '$app/navigation';
+import { twMerge } from 'tailwind-merge';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
-export let btnClasses = '!text-blue-500 bg-transparent';
+export let btnClasses = '';
+$: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses);
 const dispatch = createEventDispatcher();
 </script>
 
 <Menu {placement} let:close>
-	<Button nonCaptureEvent color="light" size="xs" {btnClasses} {...$$restProps} slot="trigger">
+	<Button
+		nonCaptureEvent
+		color="dark"
+		variant="border"
+		size="xs"
+		btnClasses={buttonClass}
+		{...$$restProps}
+		slot="trigger"
+	>
 		{#if !$$slots.default}
-			<MoreHorizontal size={20} />
+			<MoreVertical size={20} />
 		{:else}
 			<slot />
 		{/if}

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) => {
@@ -384,9 +394,6 @@ async function loadMonaco() {
             reloadWebsocket();
         }
     });
-    editor.onDidBlurEditorText(() => {
-        dispatch('blur');
-    });
     reloadWebsocket();
     return () => {
         try {

package/components/Editor.svelte.d.ts

@@ -30,7 +30,6 @@ declare const __propDef: {
     events: {
         change: CustomEvent<any>;
         focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/EditorBar.svelte

@@ -16,6 +16,8 @@ import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte'
 import PickHubScript from './flows/pickers/PickHubScript.svelte';
 import ToggleHubWorkspace from './ToggleHubWorkspace.svelte';
 import Skeleton from './common/skeleton/Skeleton.svelte';
+import Popover from './Popover.svelte';
+import Kbd from './common/kbd/Kbd.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -202,121 +204,137 @@ async function onScriptPick(e) {
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
-<div class="flex flex-row justify-between items-center overflow-hidden w-full px-1">
-	<div class="flex flex-row divide-x items-center">
-		<div class="mx-2">
-			{#if validCode}
-				<Badge color="green">Inputs</Badge>
-			{:else}
-				<Badge color="red">Inputs</Badge>
-			{/if}
-		</div>
-		<div>
-			<Button
-				color="light"
-				btnClasses="mr-1 !font-medium"
-				on:click={contextualVariablePicker.openDrawer}
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faDollarSign }}
-				{iconOnly}
-			>
-				+Context Var
-			</Button>
-		</div>
-		<div>
-			<Button
-				color="light"
-				btnClasses="mx-1 !font-medium"
-				on:click={variablePicker.openDrawer}
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faDollarSign }}
-				{iconOnly}
-			>
-				+Variable
-			</Button>
-		</div>
-		<div>
-			<Button
-				btnClasses="mx-1 !font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={resourcePicker.openDrawer}
-				{iconOnly}
-				startIcon={{ icon: faCube }}
-			>
-				+Resource
-			</Button>
-		</div>
-		<div>
-			<Button
-				btnClasses="mx-1 !font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={editor.clearContent}
-				{iconOnly}
-				startIcon={{ icon: faRotateLeft }}
-			>
-				Reset
-			</Button>
-		</div>
-		<div>
-			<Button
-				btnClasses="!font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={editor.reloadWebsocket}
-				startIcon={{ icon: faRotate }}
-			>
-				{#if !iconOnly}
-					Assistant
-				{/if}
-				<span class="ml-1 -my-1">
-					{#if lang == 'deno'}
-						(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
-					{:else if lang == 'go'}
-						(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
-					{:else if lang == 'python3'}
-						(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
-						<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
+<div class="flex justify-between items-center overflow-y-auto w-full p-1">
+	<div class="flex items-center">
+		<Badge color={validCode ? 'green' : 'red'} class="min-w-[60px] mr-3">
+			{validCode ? 'Valid' : 'Invalid'}
+		</Badge>
+		<div class="flex items-center divide-x">
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="pr-1" disablePopup={!iconOnly}>
+				<Button
+					color="light"
+					btnClasses="!font-medium !h-full"
+					on:click={contextualVariablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Context Var
+				</Button>
+				<svelte:fragment slot="text">
+					Add context variable
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					color="light"
+					btnClasses="!font-medium !h-full"
+					on:click={variablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Variable
+				</Button>
+				<svelte:fragment slot="text">
+					Add variable
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={resourcePicker.openDrawer}
+					{iconOnly}
+					startIcon={{ icon: faCube }}
+				>
+					+Resource
+				</Button>
+				<svelte:fragment slot="text">
+					Add resource
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor.clearContent}
+					{iconOnly}
+					startIcon={{ icon: faRotateLeft }}
+				>
+					Reset
+				</Button>
+				<svelte:fragment slot="text">
+					Reset
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor.reloadWebsocket}
+					startIcon={{ icon: faRotate }}
+				>
+					{#if !iconOnly}
+						Assistant
 					{/if}
-				</span>
-			</Button></div
-		>
-		<div>
-			<Button
-				btnClasses="!font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={editor.format}
-				startIcon={{ icon: faBroom }}
-			>
-				{#if !iconOnly}
+					<span class="ml-1 -my-1">
+						{#if lang == 'deno'}
+							(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
+						{:else if lang == 'go'}
+							(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
+						{:else if lang == 'python3'}
+							(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+							<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
+						{/if}
+					</span>
+				</Button>
+				<svelte:fragment slot="text">
+					Reload assistant
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor.format}
+					{iconOnly}
+					startIcon={{ icon: faBroom }}
+				>
 					Format (Ctrl+S)
-				{/if}
-			</Button></div
-		>
-	</div>
-	<div class="py-1">
-		<div>
-			<Button
-				btnClasses="mx-1 !font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={scriptPicker.openDrawer}
-				{iconOnly}
-				startIcon={{ icon: faEye }}
-			>
-				Script
-			</Button>
+				</Button>
+				<svelte:fragment slot="text">
+					Format <Kbd class="!text-gray-800">Ctrl</Kbd> + <Kbd class="!text-gray-800">S</Kbd>
+				</svelte:fragment>
+			</Popover>
 		</div>
 	</div>
+	<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+		<Button
+			btnClasses="!font-medium"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={scriptPicker.openDrawer}
+			{iconOnly}
+			startIcon={{ icon: faEye }}
+		>
+			Script
+		</Button>
+		<svelte:fragment slot="text">
+			Script
+		</svelte:fragment>
+	</Popover>
 </div>
 
 <style>

package/components/FieldHeader.svelte

@@ -4,20 +4,23 @@ export let format = '';
 export let contentEncoding = '';
 export let type = undefined;
 export let required = false;
-export let itemsType = undefined;
 </script>
 
-<div class="inline-flex flex-row items-center">
+<div class="inline-flex flex-row items-center truncated">
 	<span class="font-semibold">
 		{label}
 	</span>
 	<Required {required} class="!ml-0" />
 
-	<span class="text-sm italic ml-1 text-indigo-800">
-		({type ?? 'any'}{contentEncoding && contentEncoding != ''
-			? `, encoding: ${contentEncoding}`
-			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
-			? ` of ${itemsType?.type}s`
-			: ''})</span
-	>
+	{#if format && format != ''}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({format})
+		</span>
+	{:else}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({type ?? 'any'}{contentEncoding && contentEncoding != ''
+				? `, encoding: ${contentEncoding}`
+				: ''})</span
+		>
+	{/if}
 </div>

package/components/FieldHeader.svelte.d.ts

@@ -6,10 +6,6 @@ declare const __propDef: {
         contentEncoding?: string | undefined;
         type?: string | undefined;
         required?: boolean | undefined;
-        itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
-            contentEncoding?: "base64" | undefined;
-        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;