windmill-components 1.122.0 → 1.138.2

package/package/components/Editor.svelte

@@ -8,26 +8,13 @@ import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
 import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
 import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
 import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
 import { MonacoLanguageClient, initServices } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
 import { MonacoBinding } from 'y-monaco';
-languages.typescript.typescriptDefaults.setModeConfiguration({
-    completionItems: false,
-    definitions: false,
-    hovers: false
-});
-meditor.defineTheme('myTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-        'editorLineNumber.foreground': '#999',
-        'editorGutter.background': '#F9FAFB'
-    }
-});
-meditor.setTheme('myTheme');
+import { dbSchema } from '../stores';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
@@ -37,6 +24,7 @@ import { UserService } from '../gen';
 let divEl = null;
 let editor;
 export let lang;
+export let deno;
 export let code = '';
 export let cmdEnterAction = undefined;
 export let formatAction = undefined;
@@ -55,6 +43,13 @@ export let path = undefined;
 export let yContent = undefined;
 export let awareness = undefined;
 export let folding = false;
+$: {
+    languages.typescript.typescriptDefaults.setModeConfiguration({
+        completionItems: !deno,
+        definitions: !deno,
+        hovers: !deno
+    });
+}
 const rHash = randomHash();
 $: filePath = computePath(path);
 function computePath(path) {
@@ -75,8 +70,9 @@ let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
 const uri = lang == 'typescript'
-    ? `file:///${filePath}.${langToExt(lang)}`
+    ? `file:///${filePath ?? rHash}.${langToExt(lang)}`
     : `file:///tmp/monaco/${randomHash()}.${langToExt(lang)}`;
+console.log('uri', uri);
 buildWorkerDefinition('../../../workers', import.meta.url, false);
 export function getCode() {
     return editor?.getValue() ?? '';
@@ -100,6 +96,31 @@ export function insertAtLine(code, line) {
         editor.executeEdits('external', [op]);
     }
 }
+export function getSelectedLines() {
+    if (editor) {
+        const selection = editor.getSelection();
+        if (selection) {
+            const range = {
+                startLineNumber: selection.startLineNumber,
+                startColumn: 1,
+                endLineNumber: selection.endLineNumber + 1,
+                endColumn: 1
+            };
+            return editor.getModel()?.getValueInRange(range);
+        }
+    }
+}
+export function onDidChangeCursorSelection(f) {
+    if (editor) {
+        return editor.onDidChangeCursorSelection(f);
+    }
+}
+export function show() {
+    divEl?.classList.remove('hidden');
+}
+export function hide() {
+    divEl?.classList.add('hidden');
+}
 export function setCode(ncode, noHistory = false) {
     code = ncode;
     if (noHistory) {
@@ -147,6 +168,90 @@ export async function clearContent() {
     }
 }
 let command = undefined;
+let dbSchemaCompletor = undefined;
+$: $dbSchema && addDBSchemaCompletions();
+$: !$dbSchema && dbSchemaCompletor && dbSchemaCompletor.dispose();
+function addDBSchemaCompletions() {
+    if (dbSchemaCompletor) {
+        dbSchemaCompletor.dispose();
+    }
+    dbSchemaCompletor = languages.registerCompletionItemProvider('sql', {
+        triggerCharacters: ['.', ' ', '('],
+        provideCompletionItems: function (model, position) {
+            const textUntilPosition = model.getValueInRange({
+                startLineNumber: 1,
+                startColumn: 1,
+                endLineNumber: position.lineNumber,
+                endColumn: position.column
+            });
+            const word = model.getWordUntilPosition(position);
+            const range = {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: word.startColumn,
+                endColumn: word.endColumn
+            };
+            if (!$dbSchema) {
+                return { suggestions: [] };
+            }
+            let suggestions = [];
+            const noneMatch = textUntilPosition.match(/(?:add|create table)\s/i);
+            if (noneMatch) {
+                return {
+                    suggestions
+                };
+            }
+            for (const schemaKey in $dbSchema) {
+                suggestions.push({
+                    label: schemaKey,
+                    detail: 'schema',
+                    kind: languages.CompletionItemKind.Function,
+                    insertText: schemaKey,
+                    range: range,
+                    sortText: 'z'
+                });
+                for (const tableKey in $dbSchema[schemaKey]) {
+                    suggestions.push({
+                        label: tableKey,
+                        detail: `table (${schemaKey})`,
+                        kind: languages.CompletionItemKind.Function,
+                        insertText: tableKey,
+                        range: range,
+                        sortText: 'y'
+                    });
+                    const noColsMatch = textUntilPosition.match(/(?:from|insert into|update|table)\s(?![\s\S]*(\b(where|order by|group by|values|set|column)\b|\())/i);
+                    if (!noColsMatch) {
+                        for (const columnKey in $dbSchema[schemaKey][tableKey]) {
+                            suggestions.push({
+                                label: columnKey,
+                                detail: `${$dbSchema[schemaKey][tableKey][columnKey]['type']} (${schemaKey}.${tableKey})`,
+                                kind: languages.CompletionItemKind.Function,
+                                insertText: columnKey,
+                                range: range,
+                                sortText: 'x'
+                            });
+                        }
+                    }
+                    if (textUntilPosition.match(new RegExp(`${tableKey}.$`, 'i'))) {
+                        suggestions = suggestions.filter((x) => x.detail?.includes(`(${schemaKey}.${tableKey})`));
+                        return {
+                            suggestions
+                        };
+                    }
+                }
+                if (textUntilPosition.match(new RegExp(`${schemaKey}.$`, 'i'))) {
+                    suggestions = suggestions.filter((x) => x.detail === `table (${schemaKey})`);
+                    return {
+                        suggestions
+                    };
+                }
+            }
+            return {
+                suggestions
+            };
+        }
+    });
+}
 const outputChannel = {
     name: 'Language Server Client',
     appendLine: (msg) => {
@@ -297,7 +402,7 @@ export async function reloadWebsocket() {
     const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws';
     const hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
     let encodedImportMap = '';
-    if (lang == 'typescript') {
+    if (lang == 'typescript' && deno) {
         if (filePath && filePath.split('/').length > 2) {
             let expiration = new Date();
             expiration.setHours(expiration.getHours() + 2);
@@ -435,6 +540,9 @@ export async function reloadWebsocket() {
             }
         }, undefined);
     }
+    else {
+        closeWebsockets();
+    }
     websocketInterval && clearInterval(websocketInterval);
     websocketInterval = setInterval(() => {
         if (document.visibilityState == 'visible') {

package/package/components/Editor.svelte.d.ts

@@ -5,12 +5,14 @@ import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
 import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
 import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
 import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
 import type { Text } from 'yjs';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go' | 'shell';
+        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql';
+        deno: boolean;
         code?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;
@@ -33,6 +35,10 @@ declare const __propDef: {
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;
         insertAtLine?: ((code: string, line: number) => void) | undefined;
+        getSelectedLines?: (() => string | undefined) | undefined;
+        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor/esm/vs/editor/editor.api").IDisposable | undefined) | undefined;
+        show?: (() => void) | undefined;
+        hide?: (() => void) | undefined;
         setCode?: ((ncode: string, noHistory?: boolean) => void) | undefined;
         format?: (() => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
@@ -55,6 +61,10 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get insertAtCursor(): (code: string) => void;
     get insertAtBeginning(): (code: string) => void;
     get insertAtLine(): (code: string, line: number) => void;
+    get getSelectedLines(): () => string | undefined;
+    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor/esm/vs/editor/editor.api").IDisposable | undefined;
+    get show(): () => void;
+    get hide(): () => void;
     get setCode(): (ncode: string, noHistory?: boolean) => void;
     get format(): () => void;
     get clearContent(): () => Promise<void>;

package/package/components/EditorBar.svelte

@@ -18,27 +18,39 @@ import Skeleton from './common/skeleton/Skeleton.svelte';
 import { SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS } from '../consts';
 import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
-import { getScriptByPath } from '../scripts';
+import { getScriptByPath, scriptLangToEditorLang } from '../scripts';
 import Toggle from './Toggle.svelte';
 import { Link, Users } from 'lucide-svelte';
-import { capitalize } from '../utils';
+import { capitalize, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
+import { ScriptGen } from './codeGen';
+import { initialCode } from '../script_helpers';
 export let lang;
 export let editor;
 export let websocketAlive;
 export let iconOnly = false;
 export let validCode = true;
 export let kind = 'script';
+export let template = 'script';
 export let collabMode = false;
 export let collabLive = false;
 export let collabUsers = [];
 export let scriptPath = undefined;
+export let diffEditor = undefined;
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
 let resourceTypePicker;
 let variableEditor;
 let resourceEditor;
+let showContextVarPicker = false;
+let showVarPicker = false;
+let showResourcePicker = false;
+let showResourceTypePicker = false;
+$: showContextVarPicker = ['python3', 'bash', 'go', 'deno', 'bun'].includes(lang);
+$: showVarPicker = ['python3', 'bash', 'go', 'deno', 'bun'].includes(lang);
+$: showResourcePicker = ['python3', 'bash', 'go', 'deno', 'bun'].includes(lang);
+$: showResourceTypePicker = scriptLangToEditorLang(lang) === 'typescript' || lang === 'python3';
 let codeViewer;
 let codeObj = undefined;
 function addEditorActions() {
@@ -72,6 +84,9 @@ function compile(schema) {
     function rec(x, root = false) {
         let res = '{\n';
         const entries = Object.entries(x);
+        if (entries.length == 0) {
+            return 'any';
+        }
         let i = 0;
         for (let [name, prop] of entries) {
             if (prop.type == 'object') {
@@ -92,10 +107,51 @@ function compile(schema) {
                 res += ',\n';
             }
         }
+        if (!root) {
+            res += '\n}';
+        }
         return res;
     }
     return rec(schema.properties, true);
 }
+function pythonCompile(schema) {
+    let res = '';
+    const entries = Object.entries(schema.properties);
+    if (entries.length === 0) {
+        return 'dict';
+    }
+    let i = 0;
+    for (let [name, prop] of entries) {
+        let typ = 'dict';
+        if (prop.type === 'array') {
+            typ = 'list';
+        }
+        else if (prop.type === 'string') {
+            typ = 'str';
+        }
+        else if (prop.type === 'number') {
+            typ = 'float';
+        }
+        else if (prop.type === 'integer') {
+            typ = 'int';
+        }
+        else if (prop.type === 'boolean') {
+            typ = 'bool';
+        }
+        res += `${name}: ${typ}`;
+        i++;
+        if (i < entries.length) {
+            res += '\n';
+        }
+    }
+    return res;
+}
+function clearContent() {
+    if (editor) {
+        const resetCode = initialCode(lang, kind, template);
+        editor.setCode(resetCode);
+    }
+}
 let historyBrowserDrawerOpen = false;
 </script>
 
@@ -130,13 +186,14 @@ let historyBrowserDrawerOpen = false;
 		{/if}
 	</DrawerContent>
 </Drawer>
-
 <ItemPicker
 	bind:this={contextualVariablePicker}
 	pickCallback={(path, name) => {
 		if (!editor) return
 		if (lang == 'deno') {
 			editor.insertAtCursor(`Deno.env.get('${name}')`)
+		} else if (lang === 'bun') {
+			editor.insertAtCursor(`Bun.env["${name}"]`)
 		} else if (lang == 'python3') {
 			if (!editor.getCode().includes('import os')) {
 				editor.insertAtBeginning('import os\n')
@@ -171,6 +228,18 @@ let historyBrowserDrawerOpen = false;
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
+		} else if (lang === 'bun') {
+			const code = editor.getCode()
+			if (!code.includes('import { setClient, getVariable } from "windmill-client@0.3.15')) {
+				editor.insertAtBeginning(
+					`import { setClient, getVariable } from "windmill-client@0.3.15"\n`
+				)
+			}
+			if (!code.includes('setClient()')) {
+				editor.insertAtCursor(`setClient()\n(await getVariable('${path}'))`)
+			} else {
+				editor.insertAtCursor(`(await getVariable('${path}'))`)
+			}
 		} else if (lang == 'python3') {
 			if (!editor.getCode().includes('import wmill')) {
 				editor.insertAtBeginning('import wmill\n')
@@ -221,6 +290,18 @@ let historyBrowserDrawerOpen = false;
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
+		} else if (lang === 'bun') {
+			const code = editor.getCode()
+			if (!code.includes('import { setClient, getResource } from "windmill-client@0.3.15')) {
+				editor.insertAtBeginning(
+					`import { setClient, getResource } from "windmill-client@0.3.15"\n`
+				)
+			}
+			if (!code.includes('setClient()')) {
+				editor.insertAtCursor(`setClient()\n(await getResource('${path}'))`)
+			} else {
+				editor.insertAtCursor(`(await getResource('${path}'))`)
+			}
 		} else if (lang == 'python3') {
 			if (!editor.getCode().includes('import wmill')) {
 				editor.insertAtBeginning('import wmill\n')
@@ -260,24 +341,29 @@ let historyBrowserDrawerOpen = false;
 	</div>
 </ItemPicker>
 
-{#if lang == 'deno'}
+{#if showResourceTypePicker}
 	<ItemPicker
 		bind:this={resourceTypePicker}
 		pickCallback={async (_, name) => {
 			if (!editor) return
-			const toCamel = (s) => {
-				return s.replace(/([-_][a-z])/gi, ($1) => {
-					return $1.toUpperCase().replace('-', '').replace('_', '')
-				})
-			}
 			const resourceType = await ResourceService.getResourceType({
 				workspace: $workspaceStore ?? 'NO_W',
 				path: name
 			})
 
-			const tsSchema = compile(resourceType.schema)
-			console.log(tsSchema)
-			editor.insertAtCursor(`type ${toCamel(capitalize(name))} = ${tsSchema}\n`)
+			if (lang == 'python3') {
+				const pySchema = pythonCompile(resourceType.schema)
+
+				editor.insertAtCursor(`class ${name}(TypedDict):\n${pySchema}\n`)
+				const code = editor.getCode()
+				if (!code.includes('from typing import TypedDict')) {
+					editor.insertAtBeginning('from typing import TypedDict\n')
+				}
+			} else {
+				const tsSchema = compile(resourceType.schema)
+				console.log(tsSchema)
+				editor.insertAtCursor(`type ${toCamel(capitalize(name))} = ${tsSchema}\n`)
+			}
 			sendUserToast(`${name} inserted at cursor`)
 		}}
 		tooltip="Resources Types are the schemas associated with a Resource. They define the structure of the data that is returned from a Resource."
@@ -298,49 +384,54 @@ let historyBrowserDrawerOpen = false;
 			class="rounded-full w-2 h-2 mx-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
 		/>
 		<div class="flex items-center">
-			<Button
-				title="Add context variable"
-				color="light"
-				btnClasses="!font-medium text-gray-600"
-				on:click={contextualVariablePicker.openDrawer}
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faDollarSign }}
-				{iconOnly}
-			>
-				+Context Var
-			</Button>
-
-			<Button
-				title="Add variable"
-				color="light"
-				btnClasses="!font-medium text-gray-600"
-				on:click={variablePicker.openDrawer}
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faDollarSign }}
-				{iconOnly}
-			>
-				+Variable
-			</Button>
+			{#if showContextVarPicker}
+				<Button
+					title="Add context variable"
+					color="light"
+					btnClasses="!font-medium text-scondary"
+					on:click={contextualVariablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Context Var
+				</Button>
+			{/if}
+			{#if showVarPicker}
+				<Button
+					title="Add variable"
+					color="light"
+					btnClasses="!font-medium text-scondary"
+					on:click={variablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Variable
+				</Button>
+			{/if}
 
-			<Button
-				title="Add resource"
-				btnClasses="!font-medium text-gray-600"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={resourcePicker.openDrawer}
-				{iconOnly}
-				startIcon={{ icon: faCube }}
-			>
-				+Resource
-			</Button>
+			{#if showResourcePicker}
+				<Button
+					title="Add resource"
+					btnClasses="!font-medium text-scondary"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={resourcePicker.openDrawer}
+					{iconOnly}
+					startIcon={{ icon: faCube }}
+				>
+					+Resource
+				</Button>
+			{/if}
 
-			{#if lang == 'deno'}
+			{#if showResourceTypePicker}
 				<Button
 					title="Add resource"
-					btnClasses="!font-medium text-gray-600"
+					btnClasses="!font-medium text-scondary"
 					size="xs"
 					spacingSize="md"
 					color="light"
@@ -354,11 +445,11 @@ let historyBrowserDrawerOpen = false;
 
 			<Button
 				title="Reset Content"
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"
-				on:click={editor?.clearContent}
+				on:click={clearContent}
 				{iconOnly}
 				startIcon={{ icon: faRotateLeft }}
 			>
@@ -366,7 +457,7 @@ let historyBrowserDrawerOpen = false;
 			</Button>
 
 			<Button
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -424,6 +515,8 @@ let historyBrowserDrawerOpen = false;
 				</div>
 			{/if}
 
+			<ScriptGen {editor} {diffEditor} {lang} {iconOnly} />
+
 			<!-- <Popover
 				notClickable
 				placement="bottom"
@@ -454,7 +547,7 @@ let historyBrowserDrawerOpen = false;
 	<div class="flex flex-row items-center gap-2">
 		{#if scriptPath}
 			<Button
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -468,7 +561,7 @@ let historyBrowserDrawerOpen = false;
 		{/if}
 		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
 			<Button
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"

package/package/components/EditorBar.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 export declare const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
 import type Editor from './Editor.svelte';
+import type { SupportedLanguage } from '../common';
+import type DiffEditor from './DiffEditor.svelte';
 declare const __propDef: {
     props: {
-        lang: 'python3' | 'deno' | 'go' | 'bash';
+        lang: SupportedLanguage;
         editor: Editor | undefined;
         websocketAlive: {
             pyright: boolean;
@@ -16,12 +18,14 @@ declare const __propDef: {
         iconOnly?: boolean | undefined;
         validCode?: boolean | undefined;
         kind?: "script" | "trigger" | "approval" | undefined;
+        template?: "script" | "mysql" | "pgsql" | "docker" | "powershell" | undefined;
         collabMode?: boolean | undefined;
         collabLive?: boolean | undefined;
         collabUsers?: {
             name: string;
         }[] | undefined;
         scriptPath?: string | undefined;
+        diffEditor?: DiffEditor | undefined;
     };
     events: {
         toggleCollabMode: CustomEvent<any>;