windmill-components 1.383.9 → 1.389.1

package/package/assets/app.css

@@ -28,7 +28,7 @@
 
 	@font-face {
 		font-family: 'Inter';
-		src: url('/Inter-Variable.ttf');
+		src: url('/Inter-Variable.woff2') format('woff2');
 		font-weight: 100 900;
 		font-display: swap;
 	}
@@ -120,3 +120,27 @@ svelte-virtual-list-contents > * + * {
 	@apply bg-surface;
 	@apply disabled:placeholder:text-gray-200 disabled:placeholder:dark:text-gray-500 disabled:text-gray-200 disabled:dark:text-gray-500 disabled:border-gray-200 disabled:dark:border-gray-600;
 }
+
+.nonmain-editor .cursor.monaco-mouse-cursor-text {
+	width: 1px !important;
+}
+
+.bg-locked {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(128, 128, 128, 0.2),
+		rgba(128, 128, 128, 0.2) 10px,
+		rgba(192, 192, 192, 0.2) 10px,
+		rgba(192, 192, 192, 0.2) 20px
+	);
+}
+
+.bg-locked-hover {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(255, 99, 71, 0.2),
+		rgba(255, 99, 71, 0.2) 10px,
+		rgba(255, 69, 58, 0.2),
+		rgba(255, 69, 58, 0.2) 20px
+	);
+}

package/package/components/ArgInput.svelte

@@ -366,7 +366,8 @@ $: shouldDispatchChanges && debounced(value);
 														/>
 													{:else if itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)}
 														<ObjectResourceInput
-															bind:value={v}
+															value={v ? `$res:${v}` : undefined}
+															bind:path={v}
 															format={'resource-' + itemsType?.resourceType}
 															defaultValue={undefined}
 														/>

package/package/components/ChangeInstanceUsername.svelte

@@ -1,52 +1,9 @@
-<script>import { SettingService, UserService } from '../gen';
-import { Button, Popup } from './common';
-import { sendUserToast } from '../toast';
-import Alert from './common/alert/Alert.svelte';
+<script>import { Button, Popup } from './common';
 import { autoPlacement } from '@floating-ui/core';
-import { createEventDispatcher } from 'svelte';
+import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte';
 export let email;
 export let username;
 export let isConflict = false;
-let loading = false;
-let usernameInfo = undefined;
-function handleKeyUp(event) {
-    const key = event.key;
-    if (key === 'Enter') {
-        event.preventDefault();
-        renameUser();
-    }
-}
-async function getUsernameInfo() {
-    usernameInfo = await UserService.globalUsernameInfo({
-        email
-    });
-    if (isConflict) {
-        username = usernameInfo.username;
-    }
-}
-getUsernameInfo();
-const dispatch = createEventDispatcher();
-async function renameUser() {
-    loading = true;
-    try {
-        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
-        if (!automateUsernameCreation) {
-            sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
-            return;
-        }
-        await UserService.globalUserRename({
-            email,
-            requestBody: {
-                new_username: username
-            }
-        });
-        sendUserToast(`Renamed user ${email} to ${username}`);
-        dispatch('renamed');
-    }
-    finally {
-        loading = false;
-    }
-}
 </script>
 
 <Popup
@@ -65,67 +22,11 @@ async function renameUser() {
 			>{isConflict ? 'Fix username conflict' : 'Change username'}</Button
 		>
 	</svelte:fragment>
-	<div class="flex flex-col max-w-2xl p-2">
-		<span class="text-sm mb-2 leading-6 font-semibold"
-			>{isConflict ? 'Fix username conflict' : 'Change username'}</span
-		>
-
-		<span class="text-xs mb-1 leading-6"
-			>{isConflict ? 'Auto-generated instance username' : 'New username'}</span
-		>
-		<input
-			type="text"
-			class="mb-4"
-			on:keyup={handleKeyUp}
-			bind:value={username}
-			disabled={isConflict}
-		/>
-
-		{#if isConflict}
-			<Alert title="Username conflict" class="mb-4">
-				Users are required to have an instance-wide username that is shared across all workspaces.
-				However, this user has different usernames in different workspaces.
-
-				{#if usernameInfo?.workspace_usernames && usernameInfo.workspace_usernames.filter((w) => w.username !== username).length > 0}
-					<br />
-					<br />
-					Workspaces requiring username modification: {usernameInfo.workspace_usernames
-						.filter((w) => w.username !== username)
-						.map((wu) => `${wu.workspace_id} (${wu.username})`)
-						.join(', ')}
-				{/if}
-			</Alert>
-		{/if}
-
-		{#if !isConflict && usernameInfo?.workspace_usernames && usernameInfo.workspace_usernames.filter((w) => w.username !== username).length > 0}
-			<Alert title="Concerned workspaces" class="mb-4">
-				{usernameInfo.workspace_usernames
-					.filter((w) => w.username !== username)
-					.map((wu) => `${wu.workspace_id}`)
-					.join(', ')}
-			</Alert>
-		{/if}
-
-		<Alert type="warning" title="Manual action required" class="mb-4">
-			This operation does not handle references in scripts, workflows and applications to scripts in
-			the workspace, and references in resources to variables. You will have to handle those
-			manually.
-			<br />
-		</Alert>
-
-		<Button
-			variant="contained"
-			color="blue"
-			size="xs"
-			on:click={() => {
-				renameUser().then(() => {
-					close(null)
-				})
-			}}
-			disabled={email === undefined || !username}
-			{loading}
-		>
-			Confirm username change
-		</Button>
-	</div>
+	<ChangeInstanceUsernameInner
+		{email}
+		{username}
+		{isConflict}
+		on:close={() => close(null)}
+		on:renamed
+	/>
 </Popup>

package/package/components/ChangeInstanceUsernameInner.svelte

@@ -0,0 +1,112 @@
+<script>import { SettingService, UserService } from '../gen';
+import { Button } from './common';
+import { sendUserToast } from '../toast';
+import Alert from './common/alert/Alert.svelte';
+import { createEventDispatcher } from 'svelte';
+export let email;
+export let username;
+export let isConflict = false;
+let loading = false;
+let usernameInfo = undefined;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        renameUser();
+    }
+}
+async function getUsernameInfo() {
+    usernameInfo = await UserService.globalUsernameInfo({
+        email
+    });
+    if (isConflict) {
+        username = usernameInfo.username;
+    }
+}
+getUsernameInfo();
+const dispatch = createEventDispatcher();
+async function renameUser() {
+    loading = true;
+    try {
+        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        if (!automateUsernameCreation) {
+            sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
+            return;
+        }
+        await UserService.globalUserRename({
+            email,
+            requestBody: {
+                new_username: username
+            }
+        });
+        sendUserToast(`Renamed user ${email} to ${username}`);
+        dispatch('renamed');
+    }
+    finally {
+        loading = false;
+    }
+}
+</script>
+
+<div class="flex flex-col max-w-2xl p-2">
+	<span class="text-sm mb-2 leading-6 font-semibold"
+		>{isConflict ? 'Fix username conflict' : 'Change username'}</span
+	>
+
+	<span class="text-xs mb-1 leading-6"
+		>{isConflict ? 'Auto-generated instance username' : 'New username'}</span
+	>
+	<input
+		type="text"
+		class="mb-4"
+		on:keyup={handleKeyUp}
+		bind:value={username}
+		disabled={isConflict}
+	/>
+
+	{#if isConflict}
+		<Alert title="Username conflict" class="mb-4">
+			Users are required to have an instance-wide username that is shared across all workspaces.
+			However, this user has different usernames in different workspaces.
+
+			{#if usernameInfo?.workspace_usernames && usernameInfo.workspace_usernames.filter((w) => w.username !== username).length > 0}
+				<br />
+				<br />
+				Workspaces requiring username modification: {usernameInfo.workspace_usernames
+					.filter((w) => w.username !== username)
+					.map((wu) => `${wu.workspace_id} (${wu.username})`)
+					.join(', ')}
+			{/if}
+		</Alert>
+	{/if}
+
+	{#if !isConflict && usernameInfo?.workspace_usernames && usernameInfo.workspace_usernames.filter((w) => w.username !== username).length > 0}
+		<Alert title="Concerned workspaces" class="mb-4">
+			{usernameInfo.workspace_usernames
+				.filter((w) => w.username !== username)
+				.map((wu) => `${wu.workspace_id}`)
+				.join(', ')}
+		</Alert>
+	{/if}
+
+	<Alert type="warning" title="Manual action required" class="mb-4">
+		This operation does not handle references in scripts, workflows and applications to scripts in
+		the workspace, and references in resources to variables. You will have to handle those manually.
+		<br />
+	</Alert>
+
+	<Button
+		variant="contained"
+		color="blue"
+		size="xs"
+		on:click={() => {
+			renameUser().then(() => {
+				dispatch('close')
+			})
+		}}
+		disabled={email === undefined || !username}
+		{loading}
+	>
+		Confirm username change
+	</Button>
+</div>

package/package/components/ChangeInstanceUsernameInner.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        email: string;
+        username: string;
+        isConflict?: boolean | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+        renamed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChangeInstanceUsernameInnerProps = typeof __propDef.props;
+export type ChangeInstanceUsernameInnerEvents = typeof __propDef.events;
+export type ChangeInstanceUsernameInnerSlots = typeof __propDef.slots;
+export default class ChangeInstanceUsernameInner extends SvelteComponent<ChangeInstanceUsernameInnerProps, ChangeInstanceUsernameInnerEvents, ChangeInstanceUsernameInnerSlots> {
+}
+export {};

package/package/components/DiffDrawer.svelte

@@ -1,6 +1,5 @@
 <script>import { Alert, Button, Drawer, DrawerContent } from './common';
 import { Loader2 } from 'lucide-svelte';
-import DiffEditor from './DiffEditor.svelte';
 import { scriptLangToEditorLang } from '../scripts';
 import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
@@ -157,26 +156,34 @@ $: updateContentType(data, diffType);
 						<div class="flex-1">
 							{#key diffType}
 								{#if contentType === 'content'}
-									<DiffEditor
-										open={true}
-										automaticLayout
-										class="h-full"
-										defaultLang={lang}
-										defaultModifiedLang={data.current.lang}
-										defaultOriginal={content}
-										defaultModified={data.current.content}
-										readOnly
-									/>
+									{#await import('./DiffEditor.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											open={true}
+											automaticLayout
+											class="h-full"
+											defaultLang={lang}
+											defaultModifiedLang={data.current.lang}
+											defaultOriginal={content}
+											defaultModified={data.current.content}
+											readOnly
+										/>
+									{/await}
 								{:else if contentType === 'metadata'}
-									<DiffEditor
-										open={true}
-										automaticLayout
-										class="h-full"
-										defaultLang="yaml"
-										defaultOriginal={metadata}
-										defaultModified={data.current.metadata}
-										readOnly
-									/>
+									{#await import('./DiffEditor.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											open={true}
+											automaticLayout
+											class="h-full"
+											defaultLang="yaml"
+											defaultOriginal={metadata}
+											defaultModified={data.current.metadata}
+											readOnly
+										/>
+									{/await}
 								{/if}
 							{/key}
 						</div>

package/package/components/DiffEditor.svelte

@@ -99,5 +99,9 @@ onMount(() => {
 
 {#if open}
 	<EditorTheme />
-	<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />
+	<div
+		bind:this={diffDivEl}
+		class="{$$props.class} editor nonmain-editor"
+		bind:clientWidth={editorWidth}
+	/>
 {/if}

package/package/components/DisplayResult.svelte

@@ -555,15 +555,26 @@ let seeS3PreviewFileFromList = '';
 								</button>
 							{/if}
 						</div>
-						{#if typeof result?.s3 == 'string' && (result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv'))}
-							{#key result.s3}
-								<ParqetTableRenderer
-									disable_download={result?.disable_download}
-									{workspaceId}
-									s3resource={result?.s3}
-									storage={result?.storage}
-								/>
-							{/key}
+						{#if typeof result?.s3 === 'string'}
+							{#if result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv')}
+								{#key result.s3}
+									<ParqetTableRenderer
+										disable_download={result?.disable_download}
+										{workspaceId}
+										s3resource={result?.s3}
+										storage={result?.storage}
+									/>
+								{/key}
+							{:else if result?.s3?.endsWith('.png') || result?.s3?.endsWith('.jpeg') || result?.s3?.endsWith('.jpg') || result?.s3?.endsWith('.webp')}
+								<div class="h-full mt-2">
+									<img
+										alt="preview rendered"
+										class="w-auto h-full"
+										src={`/api/w/${workspaceId}/job_helpers/load_image_preview?file_key=${result.s3}` +
+											(result.storage ? `&storage=${result.storage}` : '')}
+									/>
+								</div>
+							{/if}
 						{/if}
 					</div>
 				{:else if !forceJson && resultKind == 's3object-list'}
@@ -612,6 +623,25 @@ let seeS3PreviewFileFromList = '';
 											>open table preview <ArrowDownFromLine />
 										</button>
 									{/if}
+								{:else if s3object?.s3?.endsWith('.png') || s3object?.s3?.endsWith('.jpeg') || s3object?.s3?.endsWith('.jpg') || s3object?.s3?.endsWith('.webp')}
+									{#if seeS3PreviewFileFromList == s3object?.s3}
+										<div class="h-full mt-2">
+											<img
+												alt="preview rendered"
+												class="w-auto h-full"
+												src={`/api/w/${workspaceId}/job_helpers/load_image_preview?file_key=${s3object.s3}` +
+													(s3object.storage ? `&storage=${s3object.storage}` : '')}
+											/>
+										</div>
+									{:else}
+										<button
+											class="text-secondary whitespace-nowrap flex gap-2 items-center"
+											on:click={() => {
+												seeS3PreviewFileFromList = s3object?.s3
+											}}
+											>open image preview <ArrowDownFromLine />
+										</button>
+									{/if}
 								{/if}
 							{/each}
 						</div>

package/package/components/DropdownV2.svelte

@@ -1,12 +1,11 @@
 <script>import { MoreVertical } from 'lucide-svelte';
 import Menu from './common/menu/MenuV2.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
-import { twMerge } from 'tailwind-merge';
+import DropdownV2Inner from './DropdownV2Inner.svelte';
 export let items = [];
 export let justifyEnd = true;
-function computeItems() {
+async function computeItems() {
     if (typeof items === 'function') {
-        return (items() ?? []).filter((item) => !item.hide);
+        return ((await items()) ?? []).filter((item) => !item.hide);
     }
     else {
         return items.filter((item) => !item.hide);
@@ -26,26 +25,5 @@ function computeItems() {
 		{/if}
 	</div>
 
-	<div class="flex flex-col">
-		{#each computeItems() ?? [] as item}
-			<MenuItem
-				on:click={(e) => item?.action?.(e)}
-				href={item?.href}
-				disabled={item?.disabled}
-				class={twMerge(
-					'px-4 py-2 text-primary hover:bg-surface-hover hover:text-primary cursor-pointer text-xs transition-all',
-					'flex flex-row gap-2 items-center',
-					item?.disabled && 'text-gray-400 cursor-not-allowed',
-					item?.type === 'delete' &&
-						!item?.disabled &&
-						'text-red-500 hover:bg-red-100 hover:text-red-500'
-				)}
-			>
-				{#if item.icon}
-					<svelte:component this={item.icon} size={14} />
-				{/if}
-				{item.displayName}
-			</MenuItem>
-		{/each}
-	</div>
+	<DropdownV2Inner items={computeItems} />
 </Menu>

package/package/components/DropdownV2.svelte.d.ts

@@ -17,7 +17,15 @@ declare const __propDef: {
             disabled?: boolean | undefined;
             type?: "action" | "delete" | undefined;
             hide?: boolean | undefined;
-        }[]) | undefined;
+        }[]) | (() => Promise<{
+            displayName: string;
+            action?: ((e: CustomEvent<any>) => void) | undefined;
+            icon?: any;
+            href?: string | undefined;
+            disabled?: boolean | undefined;
+            type?: "action" | "delete" | undefined;
+            hide?: boolean | undefined;
+        }[]>) | undefined;
         justifyEnd?: boolean | undefined;
     };
     events: {

package/package/components/DropdownV2Inner.svelte

@@ -0,0 +1,42 @@
+<script>import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let items = [];
+let computedItems = undefined;
+async function computeItems() {
+    if (typeof items === 'function') {
+        computedItems = ((await items()) ?? []).filter((item) => !item.hide);
+    }
+    else {
+        computedItems = items.filter((item) => !item.hide);
+    }
+}
+computeItems();
+</script>
+
+{#if computedItems}
+	<div class="flex flex-col">
+		{#each computedItems ?? [] as item}
+			<MenuItem
+				on:click={(e) => item?.action?.(e)}
+				href={item?.href}
+				disabled={item?.disabled}
+				class={twMerge(
+					'px-4 py-2 text-primary hover:bg-surface-hover hover:text-primary cursor-pointer text-xs transition-all',
+					'flex flex-row gap-2 items-center',
+					item?.disabled && 'text-gray-400 cursor-not-allowed',
+					item?.type === 'delete' &&
+						!item?.disabled &&
+						'text-red-500 hover:bg-red-100 hover:text-red-500'
+				)}
+			>
+				{#if item.icon}
+					<svelte:component this={item.icon} size={14} />
+				{/if}
+				{item.displayName}
+			</MenuItem>
+		{/each}
+	</div>
+{:else}
+	<Loader2 class="animate-spin mx-auto p-4" size={24} />
+{/if}

package/package/components/DropdownV2Inner.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        items?: {
+            displayName: string;
+            action?: ((e: CustomEvent<any>) => void) | undefined;
+            icon?: any;
+            href?: string | undefined;
+            disabled?: boolean | undefined;
+            type?: "action" | "delete" | undefined;
+            hide?: boolean | undefined;
+        }[] | (() => {
+            displayName: string;
+            action?: ((e: CustomEvent<any>) => void) | undefined;
+            icon?: any;
+            href?: string | undefined;
+            disabled?: boolean | undefined;
+            type?: "action" | "delete" | undefined;
+            hide?: boolean | undefined;
+        }[]) | (() => Promise<{
+            displayName: string;
+            action?: ((e: CustomEvent<any>) => void) | undefined;
+            icon?: any;
+            href?: string | undefined;
+            disabled?: boolean | undefined;
+            type?: "action" | "delete" | undefined;
+            hide?: boolean | undefined;
+        }[]>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DropdownV2InnerProps = typeof __propDef.props;
+export type DropdownV2InnerEvents = typeof __propDef.events;
+export type DropdownV2InnerSlots = typeof __propDef.slots;
+export default class DropdownV2Inner extends SvelteComponent<DropdownV2InnerProps, DropdownV2InnerEvents, DropdownV2InnerSlots> {
+}
+export {};

package/package/components/Editor.svelte

@@ -3,7 +3,6 @@
 <script context="module">
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
-
 	import processStdContent from '../process.d.ts.txt?raw'
 	import windmillFetchContent from '../windmill_fetch.d.ts.txt?raw'
 
@@ -115,7 +114,7 @@ import { MonacoLanguageClient } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
 import { MonacoBinding } from 'y-monaco';
-import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave } from '../stores';
+import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode } from '../stores';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { buildWorkerDefinition } from './build_workers';
 import { workspaceStore } from '../stores';
@@ -128,7 +127,8 @@ import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'mona
 import EditorTheme from './EditorTheme.svelte';
 import { BIGQUERY_TYPES, MSSQL_TYPES, MYSQL_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
 import { setupTypeAcquisition } from '../ata/index';
-import { initWasm, parseDeps } from '../infer';
+import { initWasmTs, parseDeps } from '../infer';
+import { initVim } from './monaco_keybindings';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = null;
 let editor = null;
@@ -856,6 +856,21 @@ $: if (yContent && awareness && model && editor) {
 }
 let initialized = false;
 let ata = undefined;
+let statusDiv = null;
+function saveDraft() {
+    dispatch('saveDraft', code);
+}
+let vimDisposable = undefined;
+$: editor && $vimMode && statusDiv && onVimMode();
+$: !$vimMode && vimDisposable && onVimDisable();
+function onVimDisable() {
+    vimDisposable?.dispose();
+}
+function onVimMode() {
+    if (editor && statusDiv) {
+        vimDisposable = initVim(editor, statusDiv, saveDraft);
+    }
+}
 async function loadMonaco() {
     try {
         console.log("Loading Monaco's language client");
@@ -888,6 +903,7 @@ async function loadMonaco() {
         tabSize: lang == 'python' ? 4 : 2,
         folding
     });
+    // updateEditorKeybindingsMode(editor, 'vim', undefined)
     let timeoutModel = undefined;
     let ataModel = undefined;
     editor?.onDidChangeModelContent((event) => {
@@ -939,6 +955,7 @@ async function loadMonaco() {
         ata = undefined;
         try {
             closeWebsockets();
+            vimDisposable?.dispose();
             model?.dispose();
             editor && editor.dispose();
             console.log('disposed editor');
@@ -1009,7 +1026,7 @@ async function setTypescriptExtraLibs() {
                     }
                 }
             };
-            await initWasm();
+            await initWasmTs();
             const root = await genRoot(hostname);
             console.log('SETUP TYPE ACQUISITION', { root, path });
             ata = setupTypeAcquisition({
@@ -1082,6 +1099,9 @@ async function genRoot(hostname) {
 
 <EditorTheme />
 <div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}" />
+{#if $vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{/if}
 
 <style global>
 	:global(.editor) {