windmill-components 1.35.42 → 1.36.0

package/components/DisplayResult.svelte

@@ -4,6 +4,7 @@ import TableCustom from './TableCustom.svelte';
 import { truncate } from '../utils';
 export let result;
 let resultKind = inferResultKind(result);
+let forceJson = false;
 function isRectangularArray(obj) {
     if (!Array.isArray(obj) || obj.length == 0) {
         return false;
@@ -40,6 +41,9 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'file') {
                 return 'file';
             }
+            else if (keys.length == 1 && keys[0] == 'error') {
+                return 'error';
+            }
         }
         catch (err) { }
     }
@@ -47,74 +51,78 @@ function inferResultKind(result) {
 }
 </script>
 
-{#if result}
-	{#if typeof result == 'object' && Object.keys(result).length > 0}<div>
-			The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
-		</div>
-	{/if}
-	{#if resultKind == 'table-col'}
-		<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
-			{#each Object.keys(result) as col}
-				<div class="flex flex-col max-h-40 min-w-full overflow-auto">
-					<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
-						{col}
+<div class="inline-highlight">
+	{#if result}
+		{#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
+			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
+				class="mb-2 text-gray-700"
+				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b></div
+			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
+				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+			>
+				{#each Object.keys(result) as col}
+					<div class="flex flex-col max-h-40 min-w-full overflow-auto">
+						<div
+							class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md "
+						>
+							{col}
+						</div>
+						{#if Array.isArray(result[col])}
+							{#each result[col] as item}
+								<div class="px-12 text-left  whitespace-nowrap">
+									{typeof item === 'string' ? item : JSON.stringify(item)}
+								</div>
+							{/each}
+						{/if}
 					</div>
-					{#if Array.isArray(result[col])}
-						{#each result[col] as item}
-							<div class="px-12 text-left  whitespace-nowrap">
-								{typeof item === 'string' ? item : JSON.stringify(item)}
-							</div>
+				{/each}
+			</div>
+		{:else if !forceJson && resultKind == 'table-row'}<div
+				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+			>
+				<TableCustom>
+					<tbody slot="body">
+						{#each asListOfList(result) as row}
+							<tr>
+								{#each row as v}
+									<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
+								{/each}
+							</tr>
 						{/each}
-					{/if}
-				</div>
-			{/each}
-		</div>
-	{:else if resultKind == 'table-row'}<div
-			class="grid grid-flow-col-dense border border-gray-200 rounded-md "
-		>
-			<TableCustom>
-				<tbody slot="body">
-					{#each asListOfList(result) as row}
-						<tr>
-							{#each row as v}
-								<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
-							{/each}
-						</tr>
-					{/each}
-				</tbody>
-			</TableCustom>
-		</div>
-	{:else if resultKind == 'png'}
-		<div class="h-full">
-			Result is an image: <img
-				alt="png rendered"
-				class="w-auto h-full"
-				src="data:image/png;base64,{result.png}"
-			/>
-		</div>
-	{:else if resultKind == 'jpeg'}
-		<div class="h-full">
-			Result is an image: <img
-				alt="jpeg rendered"
-				class="w-auto h-full"
-				src="data:image/jpeg;base64,{result.jpeg}"
+					</tbody>
+				</TableCustom>
+			</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}" />
+			</div>
+		{:else if !forceJson && resultKind == 'jpeg'}
+			<div class="h-full"
+				><img
+					alt="jpeg rendered"
+					class="w-auto h-full"
+					src="data:image/jpeg;base64,{result.jpeg}"
+				/>
+			</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}" />
+			</div>
+		{:else if !forceJson && resultKind == 'file'}
+			<div
+				><a download="windmill.file" href="data:application/octet-stream;base64,{result.file}"
+					>Download</a
+				>
+			</div>
+		{:else if !forceJson && resultKind == 'error'}<div
+				><pre class="text-sm text-red-500">{result.error}</pre>
+			</div>
+		{:else}<Highlight
+				language={json}
+				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			/>
-		</div>
-	{:else if resultKind == 'gif'}
-		<div class="h-full">
-			Result is an image: <img
-				alt="gif rendered"
-				class="w-auto h-full"
-				src="data:image/gif;base64,{result.gif}"
-			/>
-		</div>
-	{:else if resultKind == 'file'}
-		<div>
-			Result is a file: <a
-				download="windmill.file"
-				href="data:application/octet-stream;base64,{result.file}">Download</a
-			>
-		</div>
-	{:else}<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		{/if}
 	{/if}
-{/if}
+</div>

package/components/Dropdown.svelte

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { Button } from './common';
 let open = false;
 export let dropdownItems;
 export let name = undefined;
@@ -20,15 +21,16 @@ function handleClickOutsideMenu(event) {
 </script>
 
 <div
-	class="ml-3 {relative ? 'relative' : ''} {$$props.class}"
+	class="ml-2 {relative ? 'relative' : ''} {$$props.class}"
 	use:clickOutside
 	on:click_outside={handleClickOutsideMenu}
 >
-	<button
-		class="text-blue-500 text-right "
-		id="dropdown"
+	<Button
+		color="light"
+		size="xs"
 		aria-expanded="false"
 		aria-haspopup="true"
+		btnClasses="!text-blue-500 bg-transparent"
 		on:click={openMenu}
 	>
 		{#if !name}
@@ -36,7 +38,7 @@ function handleClickOutsideMenu(event) {
 		{:else}
 			{name}
 		{/if}
-	</button>
+	</Button>
 	<div
 		class="flex flex-col z-50 origin-top-right absolute right-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'
@@ -48,10 +50,10 @@ function handleClickOutsideMenu(event) {
 			{#each dropdownItems as item, i}
 				{#if item.action}
 					<button
-						on:click={() => {
+						on:click={(event) => {
 							if (!item.disabled) {
 								open = false
-								item.action && item.action()
+								item.action && item.action(event)
 								dispatch('click', { item: item?.eventName })
 							}
 						}}

package/components/Editor.svelte

@@ -22,13 +22,18 @@ import getMessageServiceOverride from 'vscode/service-override/messages';
 import { StandaloneServices } from 'vscode/services';
 import { DENO_INIT_CODE_CLEAR, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
-StandaloneServices.initialize({
-    ...getMessageServiceOverride(document.body)
-});
+import { dirtyStore } from './common/confirmationModal/dirtyStore';
+try {
+    StandaloneServices.initialize({
+        ...getMessageServiceOverride(document.body)
+    });
+}
+catch (e) {
+    console.error(e);
+}
 let divEl = null;
 let editor;
-export let deno = false;
-export let lang = deno ? 'typescript' : 'python';
+export let lang;
 export let code = '';
 export let hash = randomHash();
 export let cmdEnterAction = undefined;
@@ -108,87 +113,87 @@ let command = undefined;
 let monacoServices = undefined;
 export async function reloadWebsocket() {
     await closeWebsockets();
-    if (lang == 'python' || deno) {
-        const { MonacoLanguageClient } = await import('monaco-languageclient');
-        const { CloseAction, ErrorAction } = await import('vscode-languageclient');
-        const { toSocket, WebSocketMessageReader, WebSocketMessageWriter } = await import('vscode-ws-jsonrpc');
-        const vscode = await import('vscode');
-        const { RequestType } = await import('vscode-jsonrpc');
-        // install Monaco language client services
-        const { MonacoServices } = await import('monaco-languageclient');
-        monacoServices = MonacoServices.install();
-        function createLanguageClient(transports, name, initializationOptions) {
-            const client = new MonacoLanguageClient({
-                name: name,
-                clientOptions: {
-                    documentSelector: deno ? ['typescript'] : ['python'],
-                    errorHandler: {
-                        error: () => ({ action: ErrorAction.Continue }),
-                        closed: () => ({
-                            action: CloseAction.Restart
-                        })
-                    },
-                    markdown: {
-                        isTrusted: true
-                    },
-                    // workspaceFolder: { uri: Uri.parse(`/tmp/${name}`), name: 'tmp', index: 0 },
-                    initializationOptions,
-                    middleware: {
-                        workspace: {
-                            configuration: (params, token, configuration) => {
-                                return [
-                                    {
-                                        enable: true
-                                    }
-                                ];
-                            }
-                        }
-                    }
+    const { MonacoLanguageClient } = await import('monaco-languageclient');
+    const { CloseAction, ErrorAction } = await import('vscode-languageclient');
+    const { toSocket, WebSocketMessageReader, WebSocketMessageWriter } = await import('vscode-ws-jsonrpc');
+    const vscode = await import('vscode');
+    const { RequestType } = await import('vscode-jsonrpc');
+    // install Monaco language client services
+    const { MonacoServices } = await import('monaco-languageclient');
+    monacoServices = MonacoServices.install();
+    function createLanguageClient(transports, name, initializationOptions) {
+        const client = new MonacoLanguageClient({
+            name: name,
+            clientOptions: {
+                documentSelector: [lang],
+                errorHandler: {
+                    error: () => ({ action: ErrorAction.Continue }),
+                    closed: () => ({
+                        action: CloseAction.Restart
+                    })
+                },
+                markdown: {
+                    isTrusted: true
                 },
-                connectionProvider: {
-                    get: () => {
-                        return Promise.resolve(transports);
+                // workspaceFolder: { uri: Uri.parse(`/tmp/${name}`), name: 'tmp', index: 0 },
+                initializationOptions,
+                middleware: {
+                    workspace: {
+                        configuration: (params, token, configuration) => {
+                            return [
+                                {
+                                    enable: true
+                                }
+                            ];
+                        }
                     }
                 }
-            });
-            return client;
-        }
-        async function connectToLanguageServer(url, name, options) {
-            try {
-                const webSocket = new WebSocket(url);
-                webSocket.onopen = async () => {
-                    const socket = toSocket(webSocket);
-                    const reader = new WebSocketMessageReader(socket);
-                    const writer = new WebSocketMessageWriter(socket);
-                    const languageClient = createLanguageClient({ reader, writer }, name, options);
-                    websockets.push([languageClient, webSocket]);
-                    reader.onClose(async () => {
-                        try {
-                            console.log('CLOSE');
-                            websocketAlive[name] = false;
-                            await languageClient.stop();
-                        }
-                        catch (err) {
-                            console.error(err);
-                        }
-                    });
-                    socket.onClose((_code, _reason) => {
-                        websocketAlive[name] = false;
-                    });
+            },
+            connectionProvider: {
+                get: () => {
+                    return Promise.resolve(transports);
+                }
+            }
+        });
+        return client;
+    }
+    async function connectToLanguageServer(url, name, options) {
+        try {
+            const webSocket = new WebSocket(url);
+            webSocket.onopen = async () => {
+                const socket = toSocket(webSocket);
+                const reader = new WebSocketMessageReader(socket);
+                const writer = new WebSocketMessageWriter(socket);
+                const languageClient = createLanguageClient({ reader, writer }, name, options);
+                websockets.push([languageClient, webSocket]);
+                reader.onClose(async () => {
                     try {
-                        console.log('started client');
-                        await languageClient.start();
+                        console.log('CLOSE');
+                        websocketAlive[name] = false;
+                        await languageClient.stop();
                     }
                     catch (err) {
-                        console.log('err at client');
                         console.error(err);
-                        throw new Error(err);
                     }
-                    lastWsAttempt = new Date();
-                    nbWsAttempt = 0;
-                    if (name == 'deno') {
-                        command && command.dispose();
-                        command = undefined;
+                });
+                socket.onClose((_code, _reason) => {
+                    websocketAlive[name] = false;
+                });
+                try {
+                    console.log('started client');
+                    await languageClient.start();
+                }
+                catch (err) {
+                    console.log('err at client');
+                    console.error(err);
+                    throw new Error(err);
+                }
+                lastWsAttempt = new Date();
+                nbWsAttempt = 0;
+                if (name == 'deno') {
+                    command && command.dispose();
+                    command = undefined;
+                    try {
                         command = vscode.commands.registerCommand('deno.cache', (uris = []) => {
                             languageClient.sendRequest(new RequestType('deno/cache'), {
                                 referrer: { uri },
@@ -196,90 +201,92 @@ export async function reloadWebsocket() {
                             });
                         });
                     }
-                    websocketAlive[name] = true;
-                };
-            }
-            catch (err) {
-                console.error(`connection to ${name} language server failed`);
-            }
-        }
-        if (deno) {
-            await connectToLanguageServer(`wss://${$page.url.host}/ws/deno`, 'deno', {
-                certificateStores: null,
-                enablePaths: [],
-                config: null,
-                importMap: null,
-                internalDebug: false,
-                lint: false,
-                path: null,
-                tlsCertificate: null,
-                unsafelyIgnoreCertificateErrors: null,
-                unstable: true,
-                enable: true,
-                cache: null,
-                codeLens: {
-                    implementations: true,
-                    references: true
-                },
-                suggest: {
-                    autoImports: true,
-                    completeFunctionCalls: false,
-                    names: true,
-                    paths: true,
-                    imports: {
-                        autoDiscover: true,
-                        hosts: {
-                            'https://deno.land': true
-                        }
+                    catch (err) {
+                        console.error(err);
                     }
                 }
-            });
+                websocketAlive[name] = true;
+            };
         }
-        else {
-            await connectToLanguageServer(`wss://${$page.url.host}/ws/pyright`, 'pyright', {
-                executionEnvironments: [
-                    {
-                        root: '/tmp/pyright',
-                        pythonVersion: '3.7',
-                        pythonPlatform: 'platform',
-                        extraPaths: []
-                    }
-                ]
-            });
-            connectToLanguageServer(`wss://${$page.url.host}/ws/black`, 'black', {
-                formatters: {
-                    black: {
-                        command: 'black',
-                        args: ['--quiet', '-']
-                    }
-                },
-                formatFiletypes: {
-                    python: 'black'
-                }
-            });
+        catch (err) {
+            console.error(`connection to ${name} language server failed`);
         }
-        websocketInterval && clearInterval(websocketInterval);
-        websocketInterval = setInterval(() => {
-            console.log(websocketInterval, document.visibilityState, new Date().getTime() - lastWsAttempt.getTime(), nbWsAttempt);
-            if (document.visibilityState == 'visible') {
-                if (!lastWsAttempt ||
-                    (new Date().getTime() - lastWsAttempt.getTime() > 60000 && nbWsAttempt < 2)) {
-                    if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
-                        console.log('reconnecting to language servers');
-                        lastWsAttempt = new Date();
-                        nbWsAttempt++;
-                        reloadWebsocket();
-                    }
-                    else {
-                        if (nbWsAttempt >= 2) {
-                            sendUserToast('Giving up on establishing smart assistant connection', true);
-                            clearInterval(websocketInterval);
-                        }
+    }
+    if (lang == 'typescript') {
+        await connectToLanguageServer(`wss://${$page.url.host}/ws/deno`, 'deno', {
+            certificateStores: null,
+            enablePaths: [],
+            config: null,
+            importMap: null,
+            internalDebug: false,
+            lint: false,
+            path: null,
+            tlsCertificate: null,
+            unsafelyIgnoreCertificateErrors: null,
+            unstable: true,
+            enable: true,
+            cache: null,
+            codeLens: {
+                implementations: true,
+                references: true
+            },
+            suggest: {
+                autoImports: true,
+                completeFunctionCalls: false,
+                names: true,
+                paths: true,
+                imports: {
+                    autoDiscover: true,
+                    hosts: {
+                        'https://deno.land': true
                     }
                 }
             }
-        }, 5000);
+        });
+    }
+    else if (lang === 'python') {
+        await connectToLanguageServer(`wss://${$page.url.host}/ws/pyright`, 'pyright', {
+            executionEnvironments: [
+                {
+                    root: '/tmp/pyright',
+                    pythonVersion: '3.7',
+                    pythonPlatform: 'platform',
+                    extraPaths: []
+                }
+            ]
+        });
+        connectToLanguageServer(`wss://${$page.url.host}/ws/black`, 'black', {
+            formatters: {
+                black: {
+                    command: 'black',
+                    args: ['--quiet', '-']
+                }
+            },
+            formatFiletypes: {
+                python: 'black'
+            }
+        });
     }
+    websocketInterval && clearInterval(websocketInterval);
+    websocketInterval = setInterval(() => {
+        if (document.visibilityState == 'visible') {
+            if (!lastWsAttempt ||
+                (new Date().getTime() - lastWsAttempt.getTime() > 60000 && nbWsAttempt < 2)) {
+                if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
+                    console.log('reconnecting to language servers');
+                    lastWsAttempt = new Date();
+                    nbWsAttempt++;
+                    reloadWebsocket();
+                }
+                else {
+                    if (nbWsAttempt >= 2) {
+                        sendUserToast('Giving up on establishing smart assistant connection', true);
+                        clearInterval(websocketInterval);
+                    }
+                }
+            }
+        }
+    }, 5000);
 }
 async function closeWebsockets() {
     command && command.dispose();
@@ -306,18 +313,9 @@ async function loadMonaco() {
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
     model.updateOptions(updateOptions);
     editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
-    if (shouldBindKey) {
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
-            format();
-        });
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-            if (cmdEnterAction) {
-                cmdEnterAction();
-            }
-        });
-    }
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
+        $dirtyStore = true;
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
@@ -326,21 +324,25 @@ async function loadMonaco() {
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
-        if (deno || lang == 'typescript') {
-            if (!websocketAlive.black &&
-                !websocketAlive.deno &&
-                !websocketAlive.pyright &&
-                !websocketInterval) {
-                reloadWebsocket();
-            }
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+            code = getCode();
+            shouldBindKey && format && format();
+        });
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+            code = getCode();
+            shouldBindKey && cmdEnterAction && cmdEnterAction();
+        });
+        if (!websocketAlive.black &&
+            !websocketAlive.deno &&
+            !websocketAlive.pyright &&
+            !websocketInterval) {
+            reloadWebsocket();
         }
     });
     editor.onDidBlurEditorText(() => {
         dispatch('blur');
     });
-    if (lang == 'python' || deno) {
-        reloadWebsocket();
-    }
+    reloadWebsocket();
     return () => {
         try {
             closeWebsockets();
@@ -351,6 +353,17 @@ async function loadMonaco() {
         }
     };
 }
+export function addAction(id, label, callback, keybindings = []) {
+    editor.addAction({
+        id,
+        label,
+        keybindings,
+        contextMenuGroupId: 'navigation',
+        run: function (editor) {
+            callback(editor);
+        }
+    });
+}
 onMount(() => {
     if (browser) {
         loadMonaco().then((x) => (disposeMethod = x));
@@ -362,10 +375,6 @@ onDestroy(() => {
 });
 </script>
 
-<!-- <button class="default-button px-6 max-h-8" type="button" on:click={format}>
-	Format (CtrlCmd + S)
-</button> -->
-
 <div bind:this={divEl} class={$$props.class} />
 
 <style>