windmill-components 1.83.4 → 1.85.0

package/components/AppConnect.svelte

@@ -339,7 +339,7 @@ let filteredConnectsManual = [];
 			<h2 class="mt-8 mb-4">Non OAuth APIs & Resources</h2>
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#if filteredConnectsManual}
-					{#each filteredConnectsManual as [key, instructions]}
+					{#each filteredConnectsManual as [key, _]}
 						<Button
 							size="sm"
 							variant="border"
@@ -383,7 +383,7 @@ let filteredConnectsManual = [];
 				</div>
 				{#if apiTokenApps[resource_type].img}
 					<div class="mt-4 w-full overflow-hidden">
-						<img class="m-auto  max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
+						<img class="m-auto max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
 					</div>
 				{/if}
 			{/if}

package/components/ArgInfo.svelte

@@ -1,12 +1,10 @@
-<script>import { truncate } from '../utils';
-import Tooltip from './Tooltip.svelte';
-import json from 'svelte-highlight/languages/json';
-import { Highlight } from 'svelte-highlight';
-import { ResourceService } from '../gen';
+<script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import Drawer from './common/drawer/Drawer.svelte';
+import { truncate } from '../utils';
 import { DrawerContent } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import Tooltip from './Tooltip.svelte';
 export let value;
 let jsonViewer;
 let jsonViewerContent;

package/components/ArgInput.svelte

@@ -1,23 +1,23 @@
-<script>import { faChevronDown, faChevronUp, faDollarSign, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { faChevronDown, faChevronUp, faDollarSign, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { Badge, Button } from './common';
+import { X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
+import autosize from 'svelte-autosize';
 import Icon from 'svelte-awesome';
+import { fade } from 'svelte/transition';
+import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import { Badge, Button } from './common';
 import FieldHeader from './FieldHeader.svelte';
+import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
+import Password from './Password.svelte';
+import Range from './Range.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
-import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
-import autosize from 'svelte-autosize';
+import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Toggle from './Toggle.svelte';
-import Password from './Password.svelte';
-import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
-import Range from './Range.svelte';
-import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
-import { fade } from 'svelte/transition';
-import { X } from 'lucide-svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -28,7 +28,6 @@ export let type = undefined;
 export let required = false;
 export let pattern = undefined;
 export let valid = required ? false : true;
-export let maxRows = 10;
 export let enum_ = undefined;
 export let disabled = false;
 export let editableSchema = false;
@@ -45,7 +44,6 @@ export let noMargin = false;
 export let extra = {};
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
-$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 $: validateInput(pattern, value);
 let error = '';
 let el = undefined;
@@ -143,6 +141,7 @@ let redraw = 0;
 let itemsLimit = 50;
 </script>
 
+<!-- svelte-ignore a11y-autofocus -->
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
@@ -150,6 +149,7 @@ let itemsLimit = 50;
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
 					class="underline"
 					on:click={() => {

package/components/ArgInput.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SchemaProperty } from '../common';
+import type ItemPicker from './ItemPicker.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
-import type ItemPicker from './ItemPicker.svelte';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -15,7 +15,6 @@ declare const __propDef: {
         required?: boolean | undefined;
         pattern?: undefined | string;
         valid?: boolean | undefined;
-        maxRows?: number | undefined;
         enum_?: string[] | undefined;
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;

package/components/CronInput.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script>import { ScheduleService } from '../gen';
-import { displayDate, emptyString, formatCron, sendUserToast } from '../utils';
+import { displayDate, emptyString, formatCron } from '../utils';
 import CollapseLink from './CollapseLink.svelte';
 export let validCRON = true;
 let preview = [];

package/components/DisplayResult.svelte

@@ -82,19 +82,17 @@ let jsonViewer;
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				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 min-w-[360px] text-sm text-gray-700 relative"
+				class="mb-2 min-w-[300px] 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">
+				<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 "
+				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">
-						<div
-							class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md "
-						>
+						<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md">
 							{col}
 						</div>
 						{#if Array.isArray(result[col])}
@@ -108,7 +106,7 @@ let jsonViewer;
 				{/each}
 			</div>
 		{:else if !forceJson && resultKind == 'table-row'}<div
-				class="grid grid-flow-col-dense border border-gray-200 "
+				class="grid grid-flow-col-dense border border-gray-200"
 			>
 				<TableCustom>
 					<tbody slot="body">

package/components/Dropdown.svelte

@@ -39,8 +39,8 @@ const dispatch = createEventDispatcher();
 							dispatch('click', { item: item?.eventName })
 						}
 					}}
-					class="block w-full  whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
-					 px-4 py-2 text-sm text-gray-700 text-left 
+					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					 px-4 py-2 text-sm text-gray-700 text-left
 					 {item.disabled ? 'bg-gray-200' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
@@ -64,7 +64,7 @@ const dispatch = createEventDispatcher();
 				<a
 					href={item.href}
 					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
-					class="block w-full px-4 font-semibold text-left  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					class="block w-full px-4 font-semibold text-left py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
@@ -81,9 +81,10 @@ const dispatch = createEventDispatcher();
 					{item.displayName}
 				</a>
 			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
 					class:bg-gray-50={item.disabled}
-					class="block  text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class="block text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"

package/components/Editor.svelte

@@ -1,8 +1,10 @@
-<script context="module">import getMessageServiceOverride from 'vscode/service-override/messages';
+<script context="module">import getDialogServiceOverride from 'vscode/service-override/dialogs';
+import getNotificationServiceOverride from 'vscode/service-override/notifications';
 import { StandaloneServices } from 'vscode/services';
 try {
     StandaloneServices?.initialize({
-        ...getMessageServiceOverride(document.body)
+        ...getNotificationServiceOverride(document.body),
+        ...getDialogServiceOverride()
     });
 }
 catch (e) {
@@ -10,14 +12,12 @@ catch (e) {
 }
 </script>
 
-<script>import { browser, dev } from '$app/environment';
+<script>import { browser } from '$app/environment';
 import { page } from '$app/stores';
 import { sendUserToast } from '../utils';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
+import { editor as meditor, KeyCode, KeyMod, languages, Uri as mUri } from 'monaco-editor';
 languages.typescript.typescriptDefaults.setCompilerOptions({
     target: languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
@@ -39,8 +39,8 @@ meditor.defineTheme('myTheme', {
     }
 });
 meditor.setTheme('myTheme');
-import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 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';
 let divEl = null;
 let editor;
@@ -60,24 +60,7 @@ let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
 const uri = `file:///tmp/monaco/${hash}.${langToExt(lang)}`;
-if (browser) {
-    if (dev) {
-        buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
-    }
-    else {
-        // @ts-ignore
-        self.MonacoEnvironment = {
-            getWorker: function (_moduleId, label) {
-                if (label === 'typescript' || label === 'javascript') {
-                    return new tsWorker();
-                }
-                else {
-                    return new editorWorker();
-                }
-            }
-        };
-    }
-}
+buildWorkerDefinition('../../../workers', import.meta.url, false);
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -151,7 +134,7 @@ export async function reloadWebsocket() {
     // install Monaco language client services
     const { MonacoServices } = await import('monaco-languageclient');
     monacoServices = MonacoServices.install();
-    function createLanguageClient(transports, name, initializationOptions) {
+    function createLanguageClient(transports, name, initializationOptions, middlewareOptions) {
         const client = new MonacoLanguageClient({
             name: name,
             clientOptions: {
@@ -168,13 +151,10 @@ export async function reloadWebsocket() {
                 initializationOptions,
                 middleware: {
                     workspace: {
-                        configuration: (params, token, configuration) => {
-                            return [
-                                {
-                                    enable: true
-                                }
-                            ];
-                        }
+                        configuration: middlewareOptions ??
+                            ((params, token, next) => {
+                                return [{ enabled: true }];
+                            })
                     }
                 }
             },
@@ -186,14 +166,17 @@ export async function reloadWebsocket() {
         });
         return client;
     }
-    async function connectToLanguageServer(url, name, options) {
+    async function connectToLanguageServer(url, name, initOptions, middlewareOptions) {
         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);
+                const languageClient = createLanguageClient({ reader, writer }, name, initOptions, middlewareOptions);
+                if (middlewareOptions != undefined) {
+                    languageClient.registerConfigurationFeatures();
+                }
                 websockets.push([languageClient, webSocket]);
                 // HACK ALERT: for some reasons, the client need to be restarted to take into account the 'go get <dep>' command
                 // the only way I could figure out to listen for this event is this. I'm sure there is a better way to do this
@@ -285,18 +268,33 @@ export async function reloadWebsocket() {
                     }
                 }
             }
-        });
+        }, undefined);
     }
     else if (lang === 'python') {
-        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/pyright`, 'pyright', {
-            executionEnvironments: [
-                {
-                    root: '/tmp/pyright',
-                    pythonVersion: '3.7',
-                    pythonPlatform: 'platform',
-                    extraPaths: []
-                }
-            ]
+        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/pyright`, 'pyright', {}, (params, token, next) => {
+            if (params.items.find((x) => x.section === 'python')) {
+                return [
+                    {
+                        analysis: {
+                            useLibraryCodeForTypes: true,
+                            autoImportCompletions: true,
+                            diagnosticSeverityOverrides: { reportMissingImports: 'none' },
+                            typeCheckingMode: 'basic'
+                        }
+                    }
+                ];
+            }
+            if (params.items.find((x) => x.section === 'python.analysis')) {
+                return [
+                    {
+                        useLibraryCodeForTypes: true,
+                        autoImportCompletions: true,
+                        diagnosticSeverityOverrides: { reportMissingImports: 'none' },
+                        typeCheckingMode: 'basic'
+                    }
+                ];
+            }
+            return next(params, token);
         });
         connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/black`, 'black', {
             formatters: {
@@ -308,12 +306,12 @@ export async function reloadWebsocket() {
             formatFiletypes: {
                 python: 'black'
             }
-        });
+        }, undefined);
     }
     else if (lang === 'go') {
         connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/go`, 'go', {
             'build.allowImplicitNetworkAccess': true
-        });
+        }, undefined);
     }
     websocketInterval && clearInterval(websocketInterval);
     websocketInterval = setInterval(() => {
@@ -360,11 +358,13 @@ async function closeWebsockets() {
     websockets = [];
     websocketInterval && clearInterval(websocketInterval);
 }
+let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
 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),
+        overflowWidgetsDomNode: widgets,
         tabSize: lang == 'python' ? 4 : 2
     });
     let timeoutModel = undefined;

package/components/EditorBar.svelte

@@ -56,6 +56,7 @@ async function onScriptPick(e) {
     codeViewer?.openDrawer?.();
     codeObj = await getScriptByPath(e.detail.path ?? '');
 }
+let version = __pkg__.version;
 </script>
 
 <Drawer bind:this={scriptPicker} size="900px">
@@ -113,7 +114,7 @@ async function onScriptPick(e) {
 		if (lang == 'deno') {
 			if (!editor.getCode().includes('import * as wmill from')) {
 				editor.insertAtBeginning(
-					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
+					`import * as wmill from 'https://deno.land/x/windmill@v${version}/mod.ts'\n`
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
@@ -160,7 +161,7 @@ async function onScriptPick(e) {
 		if (lang == 'deno') {
 			if (!editor.getCode().includes('import * as wmill from')) {
 				editor.insertAtBeginning(
-					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
+					`import * as wmill from 'https://deno.land/x/windmill@v${version}/mod.ts'\n`
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
@@ -210,7 +211,13 @@ async function onScriptPick(e) {
 			{validCode ? 'Valid' : 'Invalid'}
 		</Badge>
 		<div class="flex items-center divide-x">
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="pr-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="pr-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					color="light"
 					btnClasses="!font-medium !h-full"
@@ -222,11 +229,15 @@ async function onScriptPick(e) {
 				>
 					+Context Var
 				</Button>
-				<svelte:fragment slot="text">
-					Add context variable
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add context variable</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					color="light"
 					btnClasses="!font-medium !h-full"
@@ -238,11 +249,15 @@ async function onScriptPick(e) {
 				>
 					+Variable
 				</Button>
-				<svelte:fragment slot="text">
-					Add variable
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add variable</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -254,11 +269,15 @@ async function onScriptPick(e) {
 				>
 					+Resource
 				</Button>
-				<svelte:fragment slot="text">
-					Add resource
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add resource</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -270,11 +289,15 @@ async function onScriptPick(e) {
 				>
 					Reset
 				</Button>
-				<svelte:fragment slot="text">
-					Reset
-				</svelte:fragment>
+				<svelte:fragment slot="text">Reset</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -297,11 +320,15 @@ async function onScriptPick(e) {
 						{/if}
 					</span>
 				</Button>
-				<svelte:fragment slot="text">
-					Reload assistant
-				</svelte:fragment>
+				<svelte:fragment slot="text">Reload assistant</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium"
 					size="xs"
@@ -319,7 +346,13 @@ async function onScriptPick(e) {
 			</Popover>
 		</div>
 	</div>
-	<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+	<Popover
+		notClickable
+		placement="bottom"
+		disapperTimoout={0}
+		class="px-1"
+		disablePopup={!iconOnly}
+	>
 		<Button
 			btnClasses="!font-medium"
 			size="xs"
@@ -331,9 +364,7 @@ async function onScriptPick(e) {
 		>
 			Script
 		</Button>
-		<svelte:fragment slot="text">
-			Script
-		</svelte:fragment>
+		<svelte:fragment slot="text">Script</svelte:fragment>
 	</Popover>
 </div>