windmill-components 1.28.6 → 1.35.0

package/common.d.ts

@@ -12,6 +12,9 @@ export interface SchemaProperty {
         type?: 'string' | 'number' | 'bytes';
         contentEncoding?: 'base64';
     };
+    properties?: {
+        [name: string]: SchemaProperty;
+    };
 }
 export declare type Schema = {
     $schema: string;

package/components/AppConnect.svelte

@@ -149,6 +149,13 @@ async function back() {
     }
 }
 const dispatch = createEventDispatcher();
+$: isGoogleSignin =
+    step == 1 &&
+        (resource_type == 'google' ||
+            resource_type == 'gmail' ||
+            resource_type == 'gcal' ||
+            resource_type == 'gdrive' ||
+            resource_type == 'gsheets');
 </script>
 
 <Modal
@@ -161,20 +168,21 @@ const dispatch = createEventDispatcher();
 		loadResources()
 	}}
 >
-	<div slot="title">Connect an App</div>
+	<div slot="title">Connect an API</div>
 	<div slot="content">
 		{#if step == 1}
 			{#if resource_type && !connects[resource_type] && !connectsManual.find((x) => x[0] == resource_type)}
 				<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
-					<p class="font-bold">No app integration for {resource_type}</p>
+					<p class="font-bold">No API integration for {resource_type}</p>
 					<p>
-						The resource type "{resource_type}" seems to not have an app integration. You can still
-						create this resource manually by closing this modal and pressing: "Add a resource". You
-						can also contribute to windmill and add it as an app integration if relevant.
+						The resource type "{resource_type}" seems to not have an OAuth API integration. You can
+						still create this resource manually by closing this modal and pressing: "Add a
+						resource". You can also contribute to windmill and add it as an API integration if
+						relevant.
 					</p>
 				</div>
 			{/if}
-			<PageHeader title="OAuth apps" />
+			<PageHeader title="OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
 					<button
@@ -213,11 +221,11 @@ const dispatch = createEventDispatcher();
 				><span class="ml-2">{(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''}</span
 				>
 			{:else}
-				<p class="italic text-sm">Pick an OAuth app and customize the scopes here</p>
+				<p class="italic text-sm">Pick an OAuth API and customize the scopes here</p>
 			{/if}
 			<PageHeader title="Extra Params" primary={false} />
 			{#if !manual && resource_type != ''}
-				{#each extra_params as [k, v], i}
+				{#each extra_params as [k, v]}
 					<div class="flex flex-row max-w-md">
 						<input type="text" bind:value={k} />
 						<input type="text" bind:value={v} />
@@ -240,9 +248,9 @@ const dispatch = createEventDispatcher();
 					>{(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''}</span
 				>
 			{:else}
-				<p class="italic text-sm">Pick an OAuth app and customize the extra parameters here</p>
+				<p class="italic text-sm">Pick an OAuth API and customize the extra parameters here</p>
 			{/if}
-			<PageHeader title="Non OAuth apps" />
+			<PageHeader title="Non OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each connectsManual as [key, instructions]}
 					<button
@@ -297,7 +305,7 @@ const dispatch = createEventDispatcher();
 					<span class="font-mono">`$var:${path}`</span>). You can refer to this resource anywhere
 					this token is required. A script can use the resource type
 					<span class="font-mono">{resource_type}</span> as a type parameter to restrict the kind of
-					tokens it accepts to this app.
+					tokens it accepts to this api.
 				</li>
 			</ul>
 		{/if}
@@ -307,13 +315,21 @@ const dispatch = createEventDispatcher();
 			<button class="default-button px-4 py-2 font-semibold" on:click={back}>Back</button>
 		{/if}
 		<button
-			class="default-button px-4 py-2 font-semibold"
+			class={isGoogleSignin ? '' : 'default-button px-4 py-2 font-semibold'}
 			class:default-button-disabled={(step == 1 && resource_type == '') ||
 				(step == 2 && value == '') ||
 				(step == 3 && pathError != '')}
 			on:click={next}
 		>
-			{step == 3 ? 'Connect' : 'Next'}
+			{#if isGoogleSignin}
+				<img src="/google_signin.png" alt="Google sign-in" />
+			{:else if step == 1 && !manual}
+				Connect
+			{:else if step == 3}
+				Add resource
+			{:else}
+				Next
+			{/if}
 		</button>
 	</div>
 </Modal>

package/components/ArgInput.svelte

@@ -10,6 +10,7 @@ import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
+import SchemaForm from './SchemaForm.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -27,6 +28,7 @@ export let disabled = false;
 export let editableSchema = false;
 export let itemsType = undefined;
 export let displayHeader = true;
+export let properties = undefined;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: minHeight = `${1 + minRows * 1.2}em`;
@@ -55,10 +57,10 @@ $: {
     defaultValue && recomputeRowSize(JSON.stringify(defaultValue, null, 4));
 }
 function recomputeRowSize(str) {
-    if (str.length > 50) {
-        minRows = 3;
+    if (type == 'string') {
+        minRows = str.split('\n').length;
     }
-    if (type != 'string') {
+    else if (type != 'string') {
         minRows = Math.max(minRows, Math.min(str.split(/\r\n|\r|\n/).length + 1, maxRows));
     }
 }
@@ -244,16 +246,25 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />
 			{:else if inputCat == 'object'}
-				<textarea
-					{disabled}
-					style="min-height: {minHeight}; max-height: {maxHeight}"
-					on:input={async () => recomputeRowSize(rawValue ?? '')}
-					class="col-span-10 {valid
-						? ''
-						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-					placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
-					bind:value={rawValue}
-				/>
+				{#if properties && Object.keys(properties).length > 0}
+					<div class="p-4 pl-8 border rounded w-full">
+						<SchemaForm
+							schema={{ properties, $schema: '', required: [], type: 'object' }}
+							bind:args={value}
+						/>
+					</div>
+				{:else}
+					<textarea
+						{disabled}
+						style="min-height: {minHeight}; max-height: {maxHeight}"
+						on:input={async () => recomputeRowSize(rawValue ?? '')}
+						class="col-span-10 {valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
+						bind:value={rawValue}
+					/>
+				{/if}
 			{:else if inputCat == 'enum'}
 				<select {disabled} class="px-6" bind:value>
 					{#each enum_ ?? [] as e}
@@ -270,7 +281,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:this={editor}
 						lang="sql"
 						bind:code={value}
-						class="two-lines-editor"
+						class="few-lines-editor"
+						on:change={async () => {
+							dispatch('input', { rawValue: value, isRaw: false })
+						}}
 					/>
 				</div>
 			{:else if inputCat == 'base64'}

package/components/ArgInput.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type InputCat } from '../utils';
 import Editor from './Editor.svelte';
+import type { SchemaProperty } from '../common';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -23,6 +24,9 @@ declare const __propDef: {
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
+        properties?: {
+            [name: string]: SchemaProperty;
+        } | undefined;
         editor?: Editor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         inputCat?: InputCat | undefined;

package/components/CenteredPage.svelte

@@ -1,5 +1,5 @@
-<div class="max-w-screen-lg flex grow w-full h-full xl:-ml-20">
-	<div class="grow w-full h-full mt-4">
+<div class="py-6">
+	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
 		<slot />
 	</div>
 </div>

package/components/DisplayResult.svelte

@@ -49,7 +49,7 @@ function inferResultKind(result) {
 
 {#if result}
 	{#if typeof result == 'object' && Object.keys(result).length > 0}<div>
-			The result keys are: <b>{Object.keys(result).join(', ')}</b>
+			The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 		</div>
 	{/if}
 	{#if resultKind == 'table-col'}
@@ -74,10 +74,10 @@ function inferResultKind(result) {
 		>
 			<TableCustom>
 				<tbody slot="body">
-					{#each asListOfList(Object.values(result)[0]) as row}
+					{#each asListOfList(result) as row}
 						<tr>
 							{#each row as v}
-								<td>{truncate(v, 200) ?? ''}</td>
+								<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
 							{/each}
 						</tr>
 					{/each}

package/components/Editor.svelte

@@ -1,32 +1,24 @@
 <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.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
 });
-monaco.languages.register({
-    id: 'sql',
-    extensions: ['.sql'],
-    aliases: ['SQL'],
-    mimetypes: ['application/text']
+monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
 });
-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: () => { }
+monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: true,
+    noSuggestionDiagnostics: true,
+    noSyntaxValidation: true
+});
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    allowComments: false,
+    schemas: [],
+    enableSchemaRequest: true
 });
 </script>
 
@@ -36,10 +28,11 @@ 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 { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import getMessageServiceOverride from 'vscode/service-override/messages';
+import { StandaloneServices } from 'vscode/services';
+import { DENO_INIT_CODE_CLEAR, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 StandaloneServices.initialize({
     ...getMessageServiceOverride(document.body)
 });
@@ -55,6 +48,7 @@ export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false };
 export let extraLib = '';
 export let extraLibPath = '';
+export let shouldBindKey = true;
 let websockets = [];
 let websocketInterval;
 let lastWsAttempt = new Date();
@@ -84,7 +78,7 @@ if (browser) {
     }
 }
 export function getCode() {
-    return editor?.getValue();
+    return editor?.getValue() ?? '';
 }
 export function insertAtCursor(code) {
     if (editor) {
@@ -115,21 +109,35 @@ export function insertAtBeginning(code) {
     }
 }
 export function setCode(ncode) {
+    code = ncode;
     if (editor) {
-        return editor.setValue(ncode);
-    }
-    else {
-        code = ncode;
+        editor.setValue(ncode);
     }
 }
 function format() {
     if (editor) {
+        code = getCode();
         editor.getAction('editor.action.formatDocument').run();
         if (formatAction) {
             formatAction();
         }
     }
 }
+export async function clearContent() {
+    if (editor) {
+        if (lang == 'typescript') {
+            setCode(DENO_INIT_CODE_CLEAR);
+        }
+        else if (lang == 'python') {
+            setCode(PYTHON_INIT_CODE_CLEAR);
+        }
+        else {
+            setCode('');
+        }
+    }
+}
+let command = undefined;
+let monacoServices = undefined;
 export async function reloadWebsocket() {
     await closeWebsockets();
     if (lang == 'python' || deno) {
@@ -138,8 +146,9 @@ export async function reloadWebsocket() {
         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.install();
+        monacoServices = MonacoServices.install();
         function createLanguageClient(transports, name, initializationOptions) {
             const client = new MonacoLanguageClient({
                 name: name,
@@ -199,24 +208,24 @@ export async function reloadWebsocket() {
                         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') {
-                        vscode.commands.getCommands().then((v) => {
-                            if (!v.includes('deno.cache')) {
-                                vscode.commands.registerCommand('deno.cache', (uris = []) => {
-                                    languageClient.sendRequest(new RequestType('deno/cache'), {
-                                        referrer: { uri },
-                                        uris: uris.map((uri) => ({ uri }))
-                                    });
-                                });
-                            }
+                        command && command.dispose();
+                        command = undefined;
+                        command = vscode.commands.registerCommand('deno.cache', (uris = []) => {
+                            languageClient.sendRequest(new RequestType('deno/cache'), {
+                                referrer: { uri },
+                                uris: uris.map((uri) => ({ uri }))
+                            });
                         });
                     }
                     websocketAlive[name] = true;
@@ -283,9 +292,10 @@ export async function reloadWebsocket() {
         }
         websocketInterval && clearInterval(websocketInterval);
         websocketInterval = setInterval(() => {
+            console.log(websocketInterval, document.visibilityState, new Date().getTime() - lastWsAttempt.getTime(), nbWsAttempt);
             if (document.visibilityState == 'visible') {
                 if (!lastWsAttempt ||
-                    (lastWsAttempt.getTime() - new Date().getTime() > 60000 && nbWsAttempt < 2)) {
+                    (new Date().getTime() - lastWsAttempt.getTime() > 60000 && nbWsAttempt < 2)) {
                     if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
                         console.log('reconnecting to language servers');
                         lastWsAttempt = new Date();
@@ -304,12 +314,20 @@ export async function reloadWebsocket() {
     }
 }
 async function closeWebsockets() {
+    command && command.dispose();
+    command = undefined;
+    monacoServices && monacoServices.dispose();
+    monacoServices = undefined;
     for (const x of websockets) {
         try {
             await x[0].stop();
             x[1].close();
         }
         catch (err) {
+            try {
+                x[1].close();
+            }
+            catch (err) { }
             console.log('error disposing websocket', err);
         }
     }
@@ -340,74 +358,56 @@ async function loadMonaco() {
             enabled: true
         }
     });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
-        format();
-    });
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-        if (cmdEnterAction) {
-            cmdEnterAction();
-        }
-    });
+    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) => {
-        code = getCode();
+        timeoutModel && clearTimeout(timeoutModel);
+        timeoutModel = setTimeout(() => {
+            code = getCode();
+        }, 500);
         dispatch('change');
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
+        if (deno || lang == 'typescript') {
+            if (!websocketAlive.black &&
+                !websocketAlive.deno &&
+                !websocketAlive.pyright &&
+                !websocketInterval) {
+                reloadWebsocket();
+            }
+        }
     });
     editor.onDidBlurEditorText(() => {
         dispatch('blur');
     });
-    if (lang == 'sql') {
-        monaco.languages.register;
-    }
-    else if (lang == 'json') {
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            allowComments: false,
-            schemas: [],
-            enableSchemaRequest: true
-        });
-    }
-    else if (lang == 'javascript' || lang == 'typescript') {
-        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-            target: monaco.languages.typescript.ScriptTarget.Latest,
-            allowNonTsExtensions: true,
-            noLib: 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
-                });
-            }
-        }
-        if (lang == 'javascript') {
-            if (extraLib != '' && extraLibPath != '') {
-                monaco.languages.typescript.javascriptDefaults.addExtraLib(extraLib, extraLibPath);
+    if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {
+        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+            {
+                content: extraLib,
+                filePath: extraLibPath
             }
-        }
+        ]);
     }
     if (lang == 'python' || deno) {
-        // install Monaco language client services
         reloadWebsocket();
     }
     return () => {
-        if (editor) {
-            try {
-                closeWebsockets();
-                editor.dispose();
-            }
-            catch (err) {
-                console.log('error disposing editor', err);
-            }
+        try {
+            closeWebsockets();
+            editor && editor.dispose();
+        }
+        catch (err) {
+            console.log('error disposing editor', err);
         }
     };
 }

package/components/Editor.svelte.d.ts

@@ -16,10 +16,12 @@ declare const __propDef: {
         } | undefined;
         extraLib?: string | undefined;
         extraLibPath?: string | undefined;
+        shouldBindKey?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
+        clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
     };
     events: {
@@ -39,6 +41,7 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get insertAtCursor(): (code: string) => void;
     get insertAtBeginning(): (code: string) => void;
     get setCode(): (ncode: string) => void;
+    get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
 }
 export {};