windmill-components 1.383.8 → 1.389.1

package/package/components/SimpleEditor.svelte

@@ -1,23 +1,39 @@
 <script context="module">
 	let cssClassesLoaded = writable(false)
 	let tailwindClassesLoaded = writable(false)
+
+	import '@codingame/monaco-vscode-standalone-languages'
+	import '@codingame/monaco-vscode-standalone-json-language-features'
+	import '@codingame/monaco-vscode-standalone-css-language-features'
+	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+
+	languages.typescript.javascriptDefaults.setCompilerOptions({
+		target: languages.typescript.ScriptTarget.Latest,
+		allowNonTsExtensions: true,
+		noSemanticValidation: false,
+		noLib: true,
+		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+	})
+	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+		noSemanticValidation: false,
+		noSyntaxValidation: false,
+		noSuggestionDiagnostics: false,
+		diagnosticCodesToIgnore: [1108]
+	})
+	languages.json.jsonDefaults.setDiagnosticsOptions({
+		validate: true,
+		allowComments: false,
+		schemas: [],
+		enableSchemaRequest: true
+	})
 </script>
 
 <script>import { BROWSER } from 'esm-env';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor';
-// import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
-// import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
-// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
-// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
-// import 'monaco-editor/esm/vs/language/json/monaco.contribution'
-// import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
-// import 'monaco-editor/esm/vs/language/css/monaco.contribution'
 import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-css-language-features';
-// import '@codingame/monaco-vscode-standalone-yaml-language-features'
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
 import { allClasses } from './apps/editor/componentsPanel/cssUtils';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
@@ -26,8 +42,9 @@ import domContent from '../dom.d.ts.txt?raw';
 import { buildWorkerDefinition } from './build_workers';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
-import { tailwindClasses } from './apps/editor/componentsPanel/tailwindUtils';
 import { writable } from 'svelte/store';
+import { vimMode } from '../stores';
+import { initVim } from './monaco_keybindings';
 // import { createConfiguredEditor } from 'vscode/monaco'
 // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 let divEl = null;
@@ -46,15 +63,11 @@ export let fixedOverflowWidgets = true;
 export let small = false;
 export let domLib = false;
 export let autofocus = false;
+export let allowVim = false;
+export let tailwindClasses = [];
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
-buildWorkerDefinition();
-// monaco.languages.register({
-// 	id: 'json',
-// 	extensions: ['.json', '.jsonc'],
-// 	aliases: ['JSON', 'json'],
-// 	mimetypes: ['application/json']
-// })
+buildWorkerDefinition('../../../workers', import.meta.url);
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -115,28 +128,45 @@ let width = 0;
 let initialized = false;
 let disableTabCond;
 $: disableTabCond?.set(!code && !!suggestion);
+let statusDiv = null;
+let vimDisposable = undefined;
+$: allowVim && editor && $vimMode && statusDiv && onVimMode();
+$: !$vimMode && vimDisposable && onVimDisable();
+function onVimDisable() {
+    vimDisposable?.dispose();
+}
+function onVimMode() {
+    if (editor && statusDiv) {
+        vimDisposable = initVim(editor, statusDiv, () => {
+            console.log('vim save not possible for simple editor');
+        });
+    }
+}
 async function loadMonaco() {
     await initializeVscode();
     initialized = true;
-    // languages.typescript.javascriptDefaults.setCompilerOptions({
-    // 	target: languages.typescript.ScriptTarget.Latest,
-    // 	allowNonTsExtensions: true,
-    // 	noSemanticValidation: false,
-    // 	noLib: true,
-    // 	moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    // })
-    // languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-    // 	noSemanticValidation: false,
-    // 	noSyntaxValidation: false,
-    // 	noSuggestionDiagnostics: false,
-    // 	diagnosticCodesToIgnore: [1108]
-    // })
-    // languages.json.jsonDefaults.setDiagnosticsOptions({
-    // 	validate: true,
-    // 	allowComments: false,
-    // 	schemas: [],
-    // 	enableSchemaRequest: true
-    // })
+    // if (lang === 'javascript') {
+    // 	languages.typescript.javascriptDefaults.setCompilerOptions({
+    // 		target: languages.typescript.ScriptTarget.Latest,
+    // 		allowNonTsExtensions: true,
+    // 		noSemanticValidation: false,
+    // 		noLib: true,
+    // 		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+    // 	})
+    // 	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+    // 		noSemanticValidation: false,
+    // 		noSyntaxValidation: false,
+    // 		noSuggestionDiagnostics: false,
+    // 		diagnosticCodesToIgnore: [1108]
+    // 	})
+    // } else if (lang === 'json') {
+    // 	languages.json.jsonDefaults.setDiagnosticsOptions({
+    // 		validate: true,
+    // 		allowComments: false,
+    // 		schemas: [],
+    // 		enableSchemaRequest: true
+    // 	})
+    // }
     try {
         model = meditor.createModel(code, lang, mUri.parse(uri));
     }
@@ -308,6 +338,7 @@ onMount(async () => {
 $: mounted && extraLib && initialized && loadExtraLib();
 onDestroy(() => {
     try {
+        vimDisposable?.dispose();
         model && model.dispose();
         editor && editor.dispose();
     }
@@ -325,7 +356,14 @@ onDestroy(() => {
 		{suggestion}
 	</div>
 {/if}
-<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
+<div
+	bind:this={divEl}
+	class="{$$props.class ?? ''} editor simple-editor {!allowVim ? 'nonmain-editor' : ''}"
+	bind:clientWidth={width}
+/>
+{#if allowVim && $vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{/if}
 
 <style>
 	.editor {

package/package/components/SimpleEditor.svelte.d.ts

@@ -1,5 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { editor as meditor } from 'monaco-editor';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import '@codingame/monaco-vscode-standalone-css-language-features';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import { editor as meditor, type IDisposable } from 'monaco-editor';
 import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-css-language-features';
@@ -20,13 +24,15 @@ declare const __propDef: {
         small?: boolean | undefined;
         domLib?: boolean | undefined;
         autofocus?: boolean | undefined;
+        allowVim?: boolean | undefined;
+        tailwindClasses?: string[] | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
         format?: (() => void) | undefined;
         focus?: (() => void) | undefined;
         getSelectedLines?: (() => string | undefined) | undefined;
-        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined) | undefined;
+        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined) | undefined;
         show?: (() => void) | undefined;
         hide?: (() => void) | undefined;
         setSuggestion?: ((value: string) => void) | undefined;
@@ -50,7 +56,7 @@ export default class SimpleEditor extends SvelteComponent<SimpleEditorProps, Sim
     get format(): () => void;
     get focus(): () => void;
     get getSelectedLines(): () => string | undefined;
-    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined;
+    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined;
     get show(): () => void;
     get hide(): () => void;
     get setSuggestion(): (value: string) => void;

package/package/components/Summary.svelte

@@ -1,5 +1,6 @@
 <script>import { Pen } from 'lucide-svelte';
 export let value;
+export let disabled = false;
 function blur(e) {
     e.key === 'Enter' && e?.target?.blur();
 }
@@ -13,51 +14,52 @@ function blur(e) {
 			placeholder="Untitled"
 			class="windmillapp app-title text-sm w-full font-semibold"
 			bind:value
+			{disabled}
 			on:keydown={blur}
 		/>
-		<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
+		{#if !disabled}
+			<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
+		{/if}
 	</div>
 </div>
 
 <style global>
 	:global(.app-title) {
-		display: block;
-		width: 100%;
-		border-radius: 0.25rem;
-		border-width: 0px;
-		padding: 0.25rem;
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		font-weight: 600
+		display: block !important;
+		width: 100% !important;
+		border-radius: 0.25rem !important;
+		border-width: 0px !important;
+		padding: 0.25rem !important;
+		padding-left: 0.5rem !important;
+		padding-right: 0.5rem !important;
+		font-size: 0.875rem !important;
+		line-height: 1.25rem !important;
+		font-weight: 600 !important
 }
 
 	:global(.app-title:hover) {
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-		--tw-ring-opacity: 1;
-		--tw-ring-color: rgb(234 238 244 / var(--tw-ring-opacity));
-		--tw-ring-offset-width: 0px
+		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+		--tw-ring-opacity: 1 !important;
+		--tw-ring-color: rgb(234 238 244 / var(--tw-ring-opacity)) !important;
+		--tw-ring-offset-width: 0px !important
 }
 
 	:global(.app-title:focus) {
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-		--tw-ring-opacity: 1;
-		--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-		--tw-ring-offset-width: 0px;
+		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+		--tw-ring-opacity: 1 !important;
+		--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)) !important;
+		--tw-ring-offset-width: 0px !important;
 		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }
 
 	:global(.dark) :global(.app-title) {
-		--tw-border-opacity: 1;
-		border-color: rgb(75 85 99 / var(--tw-border-opacity));
-		--tw-bg-opacity: 1;
-		background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-		--tw-text-opacity: 1;
-		color: rgb(var(--color-text-secondary) / var(--tw-text-opacity))
+		--tw-border-opacity: 1 !important;
+		border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important;
+		--tw-text-opacity: 1 !important;
+		color: rgb(var(--color-text-secondary) / var(--tw-text-opacity)) !important
 }
 
 	:global(.dark) :global(.app-title:focus) {
@@ -66,9 +68,9 @@ function blur(e) {
 }
 
 	:global(.dark) :global(.app-title:hover) {
-		--tw-ring-opacity: 1;
-		--tw-ring-color: rgb(54 77 110 / var(--tw-ring-opacity))
+		--tw-ring-opacity: 1 !important;
+		--tw-ring-color: rgb(54 77 110 / var(--tw-ring-opacity)) !important
 }
 	:global(.app-title:focus) + :global(.pen-icon) {
-		display: none
+		display: none !important
 }</style>

package/package/components/Summary.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value: string;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/SuperadminSettings.svelte

@@ -21,6 +21,7 @@ import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svel
 import ChangeInstanceUsername from './ChangeInstanceUsername.svelte';
 import Tooltip from './Tooltip.svelte';
 import { isCloudHosted } from '../cloud';
+import InstanceNameEditor from './InstanceNameEditor.svelte';
 let drawer;
 let filter = '';
 export function openDrawer() {
@@ -63,6 +64,21 @@ async function enableAutomateUsernameCreationSetting() {
     sendUserToast('Automatic username creation enabled');
     listUsers();
 }
+async function updateName(name, email) {
+    try {
+        await UserService.globalUserUpdate({
+            email,
+            requestBody: {
+                name
+            }
+        });
+        sendUserToast('User updated');
+        listUsers();
+    }
+    catch (e) {
+        sendUserToast('Error updating user', true);
+    }
+}
 </script>
 
 <SearchItems
@@ -213,15 +229,18 @@ async function enableAutomateUsernameCreationSetting() {
 														</td>
 														<td>
 															<div class="flex flex-row gap-x-1 justify-end">
-																{#if automateUsernameCreation && username}
-																	<ChangeInstanceUsername
-																		{username}
-																		{email}
-																		on:renamed={() => {
-																			listUsers()
-																		}}
-																	/>
-																{/if}
+																<InstanceNameEditor
+																	value={name}
+																	{username}
+																	{email}
+																	on:save={(e) => {
+																		updateName(e.detail, email)
+																	}}
+																	on:renamed={() => {
+																		listUsers()
+																	}}
+																	{automateUsernameCreation}
+																/>
 																<Button
 																	color="light"
 																	variant="contained"
@@ -230,7 +249,6 @@ async function enableAutomateUsernameCreationSetting() {
 																	btnClasses="text-red-500"
 																	on:click={() => {
 																		deleteConfirmedCallback = async () => {
-																			console.log(email)
 																			await UserService.globalUserDelete({ email })
 																			sendUserToast(`User ${email} removed`)
 																			listUsers()

package/package/components/TemplateEditor.svelte

@@ -536,7 +536,7 @@ onDestroy(() => {
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class ?? ''} border template rounded min-h-4 mx-0.5 overflow-clip"
+	class="{$$props.class ?? ''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip"
 	bind:clientWidth={width}
 />
 

package/package/components/TestJobLoader.svelte.d.ts

@@ -51,7 +51,7 @@ export default class TestJobLoader extends SvelteComponent<TestJobLoaderProps, T
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get getLogs(): () => Promise<void>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;

package/package/components/VimMode.svelte

@@ -0,0 +1,16 @@
+<script>import { VIM_MODE_SETTING_NAME, vimMode } from '../stores';
+import { storeLocalSetting } from '../utils';
+import Toggle from './Toggle.svelte';
+function storeSetting() {
+    storeLocalSetting(VIM_MODE_SETTING_NAME, $vimMode.toString());
+}
+</script>
+
+<Toggle
+	size="xs"
+	bind:checked={$vimMode}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'vim mode' }}
+/>

package/package/components/VimMode.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VimModeProps = typeof __propDef.props;
+export type VimModeEvents = typeof __propDef.events;
+export type VimModeSlots = typeof __propDef.slots;
+export default class VimMode extends SvelteComponent<VimModeProps, VimModeEvents, VimModeSlots> {
+}
+export {};

package/package/components/WorkerTagPicker.svelte

@@ -15,7 +15,7 @@ async function loadWorkerGroups() {
 
 <div class="flex gap-2 items-center">
 	<div class="max-w-sm grow">
-		{#if workerTags}
+		{#if $workerTags}
 			{#if $workerTags?.length ?? 0 > 0}
 				<select
 					value={tag}
@@ -32,6 +32,9 @@ async function loadWorkerGroups() {
 					{:else}
 						<option value="" disabled selected>Worker Group Tag</option>
 					{/if}
+					{#if tag && tag != '' && !($workerTags ?? []).includes(tag)}
+						<option value={tag} selected>{tag}</option>
+					{/if}
 					{#each $workerTags ?? [] as tag (tag)}
 						<option value={tag}>{tag}</option>
 					{/each}