windmill-components 1.103.2 → 1.109.2

package/package/components/AppConnect.svelte

@@ -267,7 +267,9 @@ let filteredConnectsManual = [];
 	}}
 	size="800px"
 >
-	<DrawerContent title="Connect an API or add a Resource" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Connect an API or add a Resource" on:close={drawer.closeDrawer}
+	tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
+	documentationLink="https://docs.windmill.dev/docs/integrations/integrations_on_windmill">
 		{#if step == 1}
 			<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
 				<input
@@ -326,6 +328,7 @@ let filteredConnectsManual = [];
 						<Button
 							variant="border"
 							color="blue"
+							hover="yo"
 							size="sm"
 							endIcon={{ icon: faPlus }}
 							on:click={() => {

package/package/components/ArgInput.svelte

@@ -1,6 +1,6 @@
-<script>import { faChevronDown, faChevronUp, faDollarSign, faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { faChevronDown, faChevronUp, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { X } from 'lucide-svelte';
+import { DollarSign, Pen, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import autosize from 'svelte-autosize';
 import Icon from 'svelte-awesome';
@@ -46,34 +46,40 @@ export let minW = true;
 export let prettifyHeader = false;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
-$: validateInput(pattern, value);
 let error = '';
 let el = undefined;
 export let editor = undefined;
+let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let rawValue = undefined;
-$: {
-    if (rawValue) {
-        try {
-            value = JSON.parse(rawValue);
-            error = '';
+function computeDefaultValue(nvalue, inputCat, defaultValue) {
+    if (value == undefined || value == null) {
+        value = defaultValue;
+        if (defaultValue === undefined || defaultValue === null) {
+            if (inputCat === 'string') {
+                value = '';
+            }
+            else if (inputCat == 'enum') {
+                value = enum_?.[0];
+            }
+            else if (inputCat == 'boolean') {
+                value = false;
+            }
+            else if (inputCat == 'list') {
+                value = [];
+            }
         }
-        catch (err) {
-            error = err.toString();
+        else if (inputCat === 'object') {
+            evalValueToRaw();
         }
     }
 }
-$: {
-    error = '';
-    if (inputCat === 'object') {
-        evalValueToRaw();
-        validateInput(pattern, value);
-    }
-}
-export function evalValueToRaw() {
-    if (value) {
-        rawValue = JSON.stringify(value, null, 2);
-    }
+computeDefaultValue();
+$: computeDefaultValue(value, inputCat, defaultValue);
+function evalValueToRaw() {
+    rawValue = inputCat === 'object' ? JSON.stringify(value, null, 2) : undefined;
 }
+evalValueToRaw();
 function fileChanged(e, cb) {
     let t = e.target;
     if (t && 'files' in t && t.files.length > 0) {
@@ -125,28 +131,10 @@ function onKeyDown(e) {
     }
     e.stopPropagation();
 }
-$: {
-    if (value == undefined || value == null) {
-        value = defaultValue;
-        if (defaultValue === undefined || defaultValue === null) {
-            if (inputCat === 'string') {
-                value = '';
-            }
-            else if (inputCat == 'enum') {
-                value = enum_?.[0];
-            }
-            else if (inputCat == 'boolean') {
-                value = false;
-            }
-            else if (inputCat == 'list') {
-                value = [];
-            }
-        }
-    }
-}
-$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let redraw = 0;
 let itemsLimit = 50;
+let customValue = false;
+$: validateInput(pattern, value);
 </script>
 
 <!-- svelte-ignore a11y-autofocus -->
@@ -338,18 +326,45 @@ let itemsLimit = 50;
 					/>
 				{/if}
 			{:else if inputCat == 'enum'}
-				<select
-					on:focus={(e) => {
-						dispatch('focus')
-					}}
-					{disabled}
-					class="px-6"
-					bind:value
-				>
-					{#each enum_ ?? [] as e}
-						<option>{e}</option>
-					{/each}
-				</select>
+				<div class="flex flex-row w-full gap-1">
+					{#if !customValue}
+						<select
+							on:focus={(e) => {
+								dispatch('focus')
+							}}
+							{disabled}
+							class="px-6"
+							bind:value
+						>
+							{#each enum_ ?? [] as e}
+								<option>{e}</option>
+							{/each}
+						</select>
+					{:else}
+						<input
+							{autofocus}
+							on:focus
+							type="text"
+							class={valid
+								? ''
+								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+							placeholder={defaultValue ?? ''}
+							bind:value
+						/>
+					{/if}
+
+					{#if !disabled}
+						<button
+							class="min-w-min !px-2 items-center text-gray-800 bg-gray-100 border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
+							on:click={() => {
+								customValue = !customValue
+							}}
+							title="Custom Value"
+						>
+							<Pen size={14} />
+						</button>
+					{/if}
+				</div>
 			{:else if inputCat == 'date'}
 				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
 			{:else if inputCat == 'sql' || inputCat == 'yaml'}
@@ -381,7 +396,7 @@ let itemsLimit = 50;
 				/>
 			{:else if inputCat == 'string'}
 				<div class="flex flex-col w-full">
-					<div class="flex flex-row w-full items- justify-between">
+					<div class="flex flex-row w-full items-center justify-between relative">
 						{#if password}
 							<Password {disabled} bind:password={value} />
 						{:else}
@@ -396,26 +411,24 @@ let itemsLimit = 50;
 								on:keydown={onKeyDown}
 								type="text"
 								{disabled}
-								class="col-span-10 {valid
+								class="w-full {valid
 									? ''
 									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 								placeholder={defaultValue ?? ''}
 								bind:value
 							/>
 							{#if itemPicker}
-								<div class="ml-1 relative">
-									<!-- svelte-ignore a11y-click-events-have-key-events -->
-									<div
-										class="min-w-min min-h-[34px] items-center leading-4 px-3 text-blue-500 cursor-pointer border border-blue-500 rounded center-center"
-										on:click={() => {
-											pickForField = label
-											itemPicker?.openDrawer?.()
-										}}
-										title="Use Variable"
-									>
-										<Icon data={faDollarSign} />
-									</div>
-								</div>
+								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<button
+									class="absolute right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-gray-100 border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
+									on:click={() => {
+										pickForField = label
+										itemPicker?.openDrawer?.()
+									}}
+									title="Insert a Variable"
+								>
+									<DollarSign size={14} />
+								</button>
 							{/if}
 						{/if}
 					</div>

package/package/components/ArgInput.svelte.d.ts

@@ -37,7 +37,6 @@ declare const __propDef: {
         minW?: boolean | undefined;
         prettifyHeader?: boolean | undefined;
         editor?: SimpleEditor | undefined;
-        evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;
     };
     events: {
@@ -53,7 +52,6 @@ export type ArgInputProps = typeof __propDef.props;
 export type ArgInputEvents = typeof __propDef.events;
 export type ArgInputSlots = typeof __propDef.slots;
 export default class ArgInput extends SvelteComponentTyped<ArgInputProps, ArgInputEvents, ArgInputSlots> {
-    get evalValueToRaw(): () => void;
     get focus(): () => void;
 }
 export {};

package/package/components/Awareness.svelte

@@ -0,0 +1,17 @@
+<script>import { awarenessStore, userStore } from '../stores';
+import { BROWSER } from 'esm-env';
+let url = BROWSER ? window.location.pathname : '';
+</script>
+
+<div class="isolate flex -space-x-1 overflow-hidden w-20">
+	{#each Object.entries($awarenessStore ?? {}).filter(([a, b]) => b == url && a != $userStore?.username) as [user, _]}
+		<span
+			class="inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
+			title={user}
+		>
+			<span class="text-sm font-medium leading-none text-white"
+				>{user.substring(0, 2).toLocaleUpperCase()}</span
+			>
+		</span>
+	{/each}
+</div>

package/package/components/Awareness.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AwarenessProps = typeof __propDef.props;
+export type AwarenessEvents = typeof __propDef.events;
+export type AwarenessSlots = typeof __propDef.slots;
+export default class Awareness extends SvelteComponentTyped<AwarenessProps, AwarenessEvents, AwarenessSlots> {
+}
+export {};

package/package/components/CliHelpBox.svelte

@@ -1,13 +1,10 @@
 <script>import { page } from '$app/stores';
-import { userWorkspaces, workspaceStore } from '../stores';
+import { workspaceStore } from '../stores';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { slide } from 'svelte/transition';
 import InlineCodeCopy from './InlineCodeCopy.svelte';
 $: opened = false;
-$: workspace = $userWorkspaces.find((e) => e.id === $workspaceStore);
-$: workspaceName = workspace?.name;
-$: workspaceId = workspace?.id;
 $: url = `${$page.url.protocol}//${$page.url.hostname}/`;
 </script>
 
@@ -39,7 +36,7 @@ $: url = `${$page.url.protocol}//${$page.url.hostname}/`;
 			>
 			<li
 				>Setup the wmill cli for this workspace & remote: <InlineCodeCopy
-					content={`wmill workspace add ${workspaceName} ${workspaceId} ${url}`}
+					content={`wmill workspace add ${$workspaceStore} ${$workspaceStore} ${url}`}
 				/></li
 			>
 			<li>Follow the prompts in your terminal</li>

package/package/components/Editor.svelte

@@ -12,6 +12,7 @@ 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,
@@ -50,20 +51,31 @@ export let websocketAlive = {
 };
 export let shouldBindKey = true;
 export let fixedOverflowWidgets = true;
-export let path = randomHash();
-if (path == '' || path == undefined || path.startsWith('/')) {
-    path = randomHash();
+export let path = undefined;
+export let yContent = undefined;
+export let awareness = undefined;
+export let folding = false;
+const rHash = randomHash();
+$: filePath = computePath(path);
+function computePath(path) {
+    if (path == '' || path == undefined || path.startsWith('/')) {
+        return rHash;
+    }
+    else {
+        return path;
+    }
 }
 let initialPath = path;
 $: path != initialPath && lang == 'typescript' && handlePathChange();
 let websockets = [];
+let languageClients = [];
 let websocketInterval;
 let lastWsAttempt = new Date();
 let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
 const uri = lang == 'typescript'
-    ? `file:///${path}.${langToExt(lang)}`
+    ? `file:///${filePath}.${langToExt(lang)}`
     : `file:///tmp/monaco/${randomHash()}.${langToExt(lang)}`;
 buildWorkerDefinition('../../../workers', import.meta.url, false);
 export function getCode() {
@@ -165,6 +177,9 @@ export async function reloadWebsocket() {
     }
     catch (e) {
         console.log('initServices failed', e.message);
+        if (e.message != 'Lifecycle cannot go backwards') {
+            return;
+        }
     }
     function createLanguageClient(transports, name, initializationOptions, middlewareOptions) {
         const client = new MonacoLanguageClient({
@@ -209,6 +224,7 @@ export async function reloadWebsocket() {
     async function connectToLanguageServer(url, name, initOptions, middlewareOptions) {
         try {
             const webSocket = new WebSocket(url);
+            websockets.push(webSocket);
             webSocket.onopen = async () => {
                 const socket = toSocket(webSocket);
                 const reader = new WebSocketMessageReader(socket);
@@ -217,7 +233,7 @@ export async function reloadWebsocket() {
                 // if (middlewareOptions != undefined) {
                 // 	languageClient.registerNotUsedFeatures()
                 // }
-                websockets.push([languageClient, webSocket]);
+                languageClients.push(languageClient);
                 // 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
                 if (name == 'go') {
@@ -282,7 +298,7 @@ export async function reloadWebsocket() {
     const hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
     let encodedImportMap = '';
     if (lang == 'typescript') {
-        if (path && path.split('/').length > 2) {
+        if (filePath && filePath.split('/').length > 2) {
             let expiration = new Date();
             expiration.setHours(expiration.getHours() + 2);
             const token = await UserService.createToken({
@@ -294,7 +310,7 @@ export async function reloadWebsocket() {
                     'file:///': root + '/'
                 }
             };
-            let path_splitted = path.split('/');
+            let path_splitted = filePath.split('/');
             for (let c = 0; c < path_splitted.length; c++) {
                 let key = 'file://./';
                 for (let i = 0; i < c; i++) {
@@ -445,35 +461,45 @@ export async function reloadWebsocket() {
 }
 let pathTimeout = undefined;
 function handlePathChange() {
+    console.log('path changed, reloading language server', initialPath, path);
     initialPath = path;
     pathTimeout && clearTimeout(pathTimeout);
-    pathTimeout = setTimeout(reloadWebsocket, 3000);
+    pathTimeout = setTimeout(reloadWebsocket, 1000);
 }
 async function closeWebsockets() {
     command && command.dispose();
     command = undefined;
+    console.debug(`disposing ${websockets.length} language clients and closing websockets`);
+    for (const x of languageClients) {
+        try {
+            await x.dispose();
+        }
+        catch (err) {
+            console.debug('error disposing language client', err);
+        }
+    }
+    languageClients = [];
     for (const x of websockets) {
         try {
-            await x[0].dispose();
-            x[1].close();
+            await x.close();
         }
         catch (err) {
-            console.log('error disposing language client, closing websocket', err);
-            try {
-                x[1].close();
-            }
-            catch (err) {
-                console.log('error disposing websocket, closin', err);
-            }
+            console.debug('error closing websocket', err);
         }
     }
-    console.log('disposed language client and closed websocket');
+    console.debug('done closing websockets');
     websockets = [];
     websocketInterval && clearInterval(websocketInterval);
 }
 let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
+let model;
+let monacoBinding = undefined;
+// @ts-ignore
+$: if (yContent && awareness && model && editor) {
+    monacoBinding && monacoBinding.destroy();
+    monacoBinding = new MonacoBinding(yContent, model, new Set([editor]), awareness);
+}
 async function loadMonaco() {
-    let model;
     try {
         model = meditor.createModel(code, lang, mUri.parse(uri));
     }
@@ -489,15 +515,19 @@ async function loadMonaco() {
     editor = meditor.create(divEl, {
         ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
         overflowWidgetsDomNode: widgets,
-        tabSize: lang == 'python' ? 4 : 2
+        tabSize: lang == 'python' ? 4 : 2,
+        folding
     });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
-            code = getCode();
-            dispatch('change', code);
+            let ncode = getCode();
+            if (ncode != '') {
+                code = ncode;
+                dispatch('change', code);
+            }
         }, 500);
     });
     editor.onDidFocusEditorText(() => {
@@ -517,11 +547,13 @@ async function loadMonaco() {
             !websocketAlive.shellcheck &&
             !websocketAlive.go &&
             !websocketInterval) {
+            console.log('reconnecting to language servers on focus');
             reloadWebsocket();
         }
     });
     reloadWebsocket();
     return () => {
+        console.log('disposing editor');
         try {
             closeWebsockets();
             model?.dispose();
@@ -557,11 +589,30 @@ onDestroy(() => {
 
 <div bind:this={divEl} class="{$$props.class} editor" />
 
-<style>
-	.editor {
-    border-radius: 0.375rem;
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(249 250 251 / var(--tw-border-opacity));
-    padding: 0px
-}</style>
+<style global>
+	:global(.editor) {
+		border-radius: 0.375rem;
+		border-width: 1px;
+		--tw-border-opacity: 1;
+		border-color: rgb(249 250 251 / var(--tw-border-opacity));
+		padding: 0px;
+}
+	:global(.yRemoteSelection) {
+		background-color: rgb(250, 129, 0, 0.5);
+	}
+	:global(.yRemoteSelectionHead) {
+		position: absolute;
+		border-left: orange solid 2px;
+		border-top: orange solid 2px;
+		border-bottom: orange solid 2px;
+		height: 100%;
+		box-sizing: border-box;
+	}
+	:global(.yRemoteSelectionHead::after) {
+		position: absolute;
+		content: ' ';
+		border: 3px solid orange;
+		border-radius: 4px;
+		left: -4px;
+		top: -5px;
+	}</style>

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

@@ -6,6 +6,7 @@ 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/language/typescript/monaco.contribution';
+import type { Text } from 'yjs';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -25,6 +26,9 @@ declare const __propDef: {
         shouldBindKey?: boolean | undefined;
         fixedOverflowWidgets?: boolean | undefined;
         path?: string | undefined;
+        yContent?: Text | undefined;
+        awareness?: any | undefined;
+        folding?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;