windmill-components 1.21.0 → 1.28.1

package/components/CronInput.svelte

@@ -0,0 +1,84 @@
+<script context="module">
+	export const OFFSET = new Date().getTimezoneOffset()
+</script>
+
+<script>import { ScheduleService } from '../gen';
+import { displayDate, formatCron, sendUserToast } from '../utils';
+import CollapseLink from './CollapseLink.svelte';
+export let validCRON = true;
+let preview = [];
+let cronError = '';
+export let schedule = '0 0 12 * *';
+let limit = 3;
+$: handleScheduleInput(schedule);
+async function handleScheduleInput(input) {
+    try {
+        preview = await ScheduleService.previewSchedule({
+            requestBody: { schedule: formatCron(input), offset: OFFSET }
+        });
+        cronError = '';
+        validCRON = true;
+    }
+    catch (err) {
+        if (err.status == 400 && err.body.includes('cron')) {
+            cronError = `Invalid cron expression`;
+            validCRON = false;
+        }
+        else {
+            sendUserToast(`Cannot preview: ${err}`, true);
+            validCRON = false;
+        }
+    }
+}
+</script>
+
+<div class="text-purple-500 text-2xs grow">{cronError}</div>
+<div class="flex flex-row items-end max-w-5xl">
+	<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
+	<input
+		class="inline-block"
+		type="text"
+		id="cron-schedule"
+		name="cron-schedule"
+		bind:value={schedule}
+	/>
+</div>
+<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28">
+	<button
+		on:click={() => {
+			schedule = '0 */15 * * *'
+			cronError = ''
+		}}>every 15 min</button
+	>
+	<button
+		on:click={() => {
+			schedule = '0 0 * * * *'
+			cronError = ''
+		}}>every hour</button
+	>
+	<button
+		on:click={() => {
+			schedule = '0 0 8 * * *'
+			cronError = ''
+		}}>once a day at 8AM</button
+	>
+</div>
+
+<CollapseLink text="preview next runs" open={true}>
+	{#if preview && preview.length > 0}
+		<div class="text-sm text-gray-700 border p-2 rounded-md">
+			<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>
+				{/each}
+				<li class="text-sm mx-2">...</li>
+				{#if limit != 10}
+					<button class="underline text-gray-400" on:click={() => (limit = 10)}>Load more</button>
+				{:else}
+					<button class="underline text-gray-400" on:click={() => (limit = 3)}>Load less</button>
+				{/if}
+			</ul>
+		</div>
+	{/if}
+</CollapseLink>

package/components/CronInput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+export declare const OFFSET: number;
+declare const __propDef: {
+    props: {
+        validCRON?: boolean | undefined;
+        schedule?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CronInputProps = typeof __propDef.props;
+export declare type CronInputEvents = typeof __propDef.events;
+export declare type CronInputSlots = typeof __propDef.slots;
+export default class CronInput extends SvelteComponentTyped<CronInputProps, CronInputEvents, CronInputSlots> {
+}
+export {};

package/components/DisplayResult.svelte

@@ -1,7 +1,7 @@
 <script>import { Highlight } from 'svelte-highlight';
-import github from 'svelte-highlight/styles/github';
 import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
+import { truncate } from '../utils';
 export let result;
 let resultKind = inferResultKind(result);
 function isArray(obj) {
@@ -37,6 +37,9 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'png') {
                 return 'png';
             }
+            else if (keys.length == 1 && keys[0] == 'jpeg') {
+                return 'jpeg';
+            }
             else if (keys.length == 1 && keys[0] == 'file') {
                 return 'file';
             }
@@ -47,9 +50,6 @@ function inferResultKind(result) {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
 {#if result}
 	{#if Object.keys(result).length > 0}<div>
 			The result keys are: <b>{Object.keys(result).join(', ')}</b>
@@ -58,13 +58,13 @@ function inferResultKind(result) {
 	{#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  min-w-full">
+				<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">
+							<div class="px-12 text-left  whitespace-nowrap">
 								{typeof item === 'string' ? item : JSON.stringify(item)}
 							</div>
 						{/each}
@@ -80,7 +80,7 @@ function inferResultKind(result) {
 					{#each asListOfList(Object.values(result)[0]) as row}
 						<tr>
 							{#each row as v}
-								<td>{v ?? ''}</td>
+								<td>{truncate(v, 200) ?? ''}</td>
 							{/each}
 						</tr>
 					{/each}
@@ -95,6 +95,22 @@ function inferResultKind(result) {
 				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}"
+			/>
+		</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

package/components/Editor.svelte

@@ -1,11 +1,48 @@
+<script context="module">import * as monaco from 'monaco-editor';
+import { language as sql } from 'monaco-editor/esm/vs/basic-languages/sql/sql';
+monaco.languages.register({
+    id: 'python',
+    extensions: ['.py'],
+    aliases: ['python'],
+    mimetypes: ['application/text']
+});
+monaco.languages.register({
+    id: 'sql',
+    extensions: ['.sql'],
+    aliases: ['SQL'],
+    mimetypes: ['application/text']
+});
+monaco.languages.registerInlineCompletionsProvider('sql', {
+    provideInlineCompletions: (a, b, c, d) => {
+        const w = a.getWordUntilPosition(b).word.toLowerCase();
+        return {
+            items: w.length > 0
+                ? ['SELECT', 'FROM', 'WHILE', 'AND', 'OR', 'DELETE', 'UPDATE', 'SET', 'WHEN', 'LIMIT']
+                    .concat(sql.keywords)
+                    .filter((x) => x.toLowerCase().startsWith(w))
+                    .map((x) => ({
+                    text: x + ' '
+                }))
+                : []
+        };
+    },
+    freeInlineCompletions: () => { }
+});
+</script>
+
 <script>import { browser, dev } from '$app/env';
 import { page } from '$app/stores';
-import { buildExtraLib } from '../utils';
+import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { StandaloneServices } from 'vscode/services';
+import getMessageServiceOverride from 'vscode/service-override/messages';
+StandaloneServices.initialize({
+    ...getMessageServiceOverride(document.body)
+});
 let divEl = null;
 let editor;
 export let deno = false;
@@ -16,12 +53,15 @@ export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false };
-export let extraLib = lang == 'typescript' && !deno ? buildExtraLib() : '';
-export let extraLibPath = 'file:///node_modules/@types/windmill/index.d.ts';
+export let extraLib = '';
+export let extraLibPath = '';
 let websockets = [];
-let uri = '';
+let websocketInterval;
+let lastWsAttempt = new Date();
+let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
+const uri = `file:///${hash}.${langToExt(lang)}`;
 if (browser) {
     if (dev) {
         buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
@@ -51,6 +91,22 @@ export function insertAtCursor(code) {
         editor.trigger('keyboard', 'type', { text: code });
     }
 }
+function langToExt(lang) {
+    switch (lang) {
+        case 'typescript':
+            return 'ts';
+        case 'python':
+            return 'py';
+        case 'javascript':
+            return 'js';
+        case 'json':
+            return 'json';
+        case 'sql':
+            return 'sql';
+        default:
+            return 'unknown';
+    }
+}
 export function insertAtBeginning(code) {
     if (editor) {
         const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 };
@@ -75,14 +131,15 @@ function format() {
     }
 }
 export async function reloadWebsocket() {
-    closeWebsockets();
+    await closeWebsockets();
     if (lang == 'python' || deno) {
-        // install Monaco language client services
         const { MonacoLanguageClient } = await import('monaco-languageclient');
         const { CloseAction, ErrorAction } = await import('vscode-languageclient');
-        const vscode = await import('vscode');
         const { toSocket, WebSocketMessageReader, WebSocketMessageWriter } = await import('vscode-ws-jsonrpc');
+        const vscode = await import('vscode');
         const { RequestType } = await import('vscode-jsonrpc');
+        const { MonacoServices } = await import('monaco-languageclient');
+        MonacoServices.install();
         function createLanguageClient(transports, name, initializationOptions) {
             const client = new MonacoLanguageClient({
                 name: name,
@@ -91,7 +148,7 @@ export async function reloadWebsocket() {
                     errorHandler: {
                         error: () => ({ action: ErrorAction.Continue }),
                         closed: () => ({
-                            action: CloseAction.DoNotRestart
+                            action: CloseAction.Restart
                         })
                     },
                     markdown: {
@@ -123,21 +180,14 @@ export async function reloadWebsocket() {
             try {
                 const webSocket = new WebSocket(url);
                 webSocket.onopen = () => {
-                    websockets.push(webSocket);
                     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]);
                     languageClient.start();
-                    socket.onClose((_code, _reason) => {
-                        websocketAlive[name] = false;
-                        try {
-                            languageClient.stop();
-                        }
-                        catch (err) {
-                            console.error(err);
-                        }
-                    });
+                    lastWsAttempt = new Date();
+                    nbWsAttempt = 0;
                     if (name == 'deno') {
                         vscode.commands.getCommands().then((v) => {
                             if (!v.includes('deno.cache')) {
@@ -150,6 +200,18 @@ export async function reloadWebsocket() {
                             }
                         });
                     }
+                    reader.onClose(() => {
+                        try {
+                            console.log('CLOSE');
+                            languageClient.stop();
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    });
+                    socket.onClose((_code, _reason) => {
+                        websocketAlive[name] = false;
+                    });
                     websocketAlive[name] = true;
                 };
             }
@@ -168,7 +230,7 @@ export async function reloadWebsocket() {
                 path: null,
                 tlsCertificate: null,
                 unsafelyIgnoreCertificateErrors: null,
-                unstable: false,
+                unstable: true,
                 enable: true,
                 cache: null,
                 codeLens: {
@@ -212,51 +274,51 @@ export async function reloadWebsocket() {
                 }
             });
         }
+        websocketInterval && clearInterval(websocketInterval);
+        websocketInterval = setInterval(() => {
+            if (document.visibilityState == 'visible') {
+                if (!lastWsAttempt ||
+                    (lastWsAttempt.getTime() - new Date().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);
     }
 }
-function closeWebsockets() {
+async function closeWebsockets() {
     for (const x of websockets) {
         try {
-            x.close();
+            await x[0].stop();
+            x[1].close();
         }
         catch (err) {
             console.log('error disposing websocket', err);
         }
     }
     websockets = [];
+    websocketInterval && clearInterval(websocketInterval);
 }
 async function loadMonaco() {
-    const monaco = await import('monaco-editor');
-    if (lang == 'python') {
-        monaco.languages.register({
-            id: 'python',
-            extensions: ['.py'],
-            aliases: ['python'],
-            mimetypes: ['application/text']
-        });
-    }
-    let path = 'unknown';
-    if (lang == 'python') {
-        path = `${hash}.py`;
-    }
-    else if (lang == 'json') {
-        path = `${hash}.json`;
-    }
-    else if (lang == 'javascript') {
-        path = `${hash}.js`;
-    }
-    else if (lang == 'typescript') {
-        path = `${hash}.ts`;
-    }
-    uri = `file:///${path}`;
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
-    model.updateOptions({ tabSize: 4, insertSpaces: true });
+    model.updateOptions({ tabSize: 2, insertSpaces: true });
     editor = monaco.editor.create(divEl, {
         model: model,
         value: code,
         language: lang,
         automaticLayout,
         readOnly: false,
+        fixedOverflowWidgets: true,
         autoDetectHighContrast: true,
         //lineNumbers: 'off',
         //lineDecorationsWidth: 0,
@@ -286,7 +348,16 @@ async function loadMonaco() {
         code = getCode();
         dispatch('change');
     });
-    if (lang == 'json') {
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+    });
+    editor.onDidBlurEditorText(() => {
+        dispatch('blur');
+    });
+    if (lang == 'sql') {
+        monaco.languages.register;
+    }
+    else if (lang == 'json') {
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
             validate: true,
             allowComments: false,
@@ -294,28 +365,36 @@ async function loadMonaco() {
             enableSchemaRequest: true
         });
     }
-    if (lang == 'typescript') {
-        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    else if (lang == 'javascript' || lang == 'typescript') {
+        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
             target: monaco.languages.typescript.ScriptTarget.Latest,
             allowNonTsExtensions: true,
             noLib: true
         });
-        if (deno) {
-            monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-                noSemanticValidation: true,
-                noSuggestionDiagnostics: true,
-                noSyntaxValidation: true
+        if (lang == 'typescript') {
+            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+                target: monaco.languages.typescript.ScriptTarget.Latest,
+                allowNonTsExtensions: true,
+                noLib: true
             });
+            if (deno) {
+                monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+                    noSemanticValidation: true,
+                    noSuggestionDiagnostics: true,
+                    noSyntaxValidation: true
+                });
+            }
         }
-        else {
-            monaco.languages.typescript.typescriptDefaults.addExtraLib(extraLib, extraLibPath);
+        if (lang == 'javascript') {
+            if (extraLib != '' && extraLibPath != '') {
+                monaco.languages.typescript.javascriptDefaults.addExtraLib(extraLib, extraLibPath);
+            }
         }
     }
     if (lang == 'python' || deno) {
-        const { MonacoServices } = await import('monaco-languageclient');
-        MonacoServices.install();
+        // install Monaco language client services
+        reloadWebsocket();
     }
-    reloadWebsocket();
     return () => {
         if (editor) {
             try {
@@ -334,9 +413,8 @@ onMount(() => {
     }
 });
 onDestroy(() => {
-    if (disposeMethod) {
-        disposeMethod();
-    }
+    disposeMethod && disposeMethod();
+    websocketInterval && clearInterval(websocketInterval);
 });
 </script>
 
@@ -362,4 +440,9 @@ onDestroy(() => {
 	.few-lines-editor {
 		/* stylelint-disable-next-line unit-allowed-list */
 		height: 80px;
+	}
+
+	.two-lines-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 40px;
 	}</style>

package/components/Editor.svelte.d.ts

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