windmill-components 1.89.1 → 1.103.0

package/package/components/Editor.svelte

@@ -1,21 +1,7 @@
-<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({
-        ...getNotificationServiceOverride(document.body),
-        ...getDialogServiceOverride()
-    });
-}
-catch (e) {
-    console.error(e);
-}
-</script>
-
-<script>import { browser } from '$app/environment';
-import { page } from '$app/stores';
-import { sendUserToast } from '../utils';
+<script>import { BROWSER } from 'esm-env';
+import { sendUserToast } from '../toast';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import * as vscode from 'vscode';
 import 'monaco-editor/esm/vs/editor/edcore.main';
 import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor/esm/vs/editor/editor.api';
 import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
@@ -23,10 +9,9 @@ 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 { MonacoLanguageClient, MonacoServices } from 'monaco-languageclient';
+import { MonacoLanguageClient, initServices } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
-import * as vscode from 'vscode';
 languages.typescript.typescriptDefaults.setModeConfiguration({
     completionItems: false,
     definitions: false,
@@ -55,7 +40,14 @@ export let code = '';
 export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
-export let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+export let websocketAlive = {
+    pyright: false,
+    black: false,
+    ruff: false,
+    deno: false,
+    go: false,
+    shellcheck: false
+};
 export let shouldBindKey = true;
 export let fixedOverflowWidgets = true;
 export let path = randomHash();
@@ -63,17 +55,17 @@ if (path == '' || path == undefined || path.startsWith('/')) {
     path = randomHash();
 }
 let initialPath = path;
-$: path != initialPath && handlePathChange();
+$: path != initialPath && lang == 'typescript' && handlePathChange();
 let websockets = [];
 let websocketInterval;
 let lastWsAttempt = new Date();
 let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
-const uri = lang == 'go' ? `file:///tmp/monaco/${randomHash()}.go` : `file:///${path}.${langToExt(lang)}`;
-// if (lang != 'typescript') {
+const uri = lang == 'typescript'
+    ? `file:///${path}.${langToExt(lang)}`
+    : `file:///tmp/monaco/${randomHash()}.${langToExt(lang)}`;
 buildWorkerDefinition('../../../workers', import.meta.url, false);
-// }
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -118,7 +110,9 @@ export function setCode(ncode, noHistory = false) {
 export function format() {
     if (editor) {
         code = getCode();
-        editor?.getAction('editor.action.formatDocument')?.run();
+        if (lang != 'shell') {
+            editor?.getAction('editor.action.formatDocument')?.run();
+        }
         if (formatAction) {
             formatAction();
         }
@@ -141,14 +135,42 @@ export async function clearContent() {
     }
 }
 let command = undefined;
-let monacoServices = undefined;
+const outputChannel = {
+    name: 'Language Server Client',
+    appendLine: (msg) => {
+        console.log(msg);
+    },
+    append: (msg) => {
+        console.log(msg);
+    },
+    clear: () => { },
+    replace: () => { },
+    show: () => { },
+    hide: () => { },
+    dispose: () => { }
+};
 export async function reloadWebsocket() {
+    console.log('reloadWebsocket');
     await closeWebsockets();
-    monacoServices = MonacoServices.install();
+    try {
+        await initServices({
+            enableThemeService: false,
+            enableModelEditorService: true,
+            enableNotificationService: false,
+            modelEditorServiceConfig: {
+                useDefaultFunction: true
+            },
+            debugLogging: false
+        });
+    }
+    catch (e) {
+        console.log('initServices failed', e.message);
+    }
     function createLanguageClient(transports, name, initializationOptions, middlewareOptions) {
         const client = new MonacoLanguageClient({
             name: name,
             clientOptions: {
+                outputChannel,
                 documentSelector: [lang],
                 errorHandler: {
                     error: () => ({ action: ErrorAction.Continue }),
@@ -159,6 +181,13 @@ export async function reloadWebsocket() {
                 markdown: {
                     isTrusted: true
                 },
+                workspaceFolder: name != 'deno'
+                    ? {
+                        uri: vscode.Uri.parse(uri),
+                        name: 'windmill',
+                        index: 0
+                    }
+                    : undefined,
                 initializationOptions,
                 middleware: {
                     workspace: {
@@ -249,7 +278,8 @@ export async function reloadWebsocket() {
             console.error(`connection to ${name} language server failed`);
         }
     }
-    const wsProtocol = $page.url.protocol == 'https:' ? 'wss' : 'ws';
+    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 (path && path.split('/').length > 2) {
@@ -258,13 +288,7 @@ export async function reloadWebsocket() {
             const token = await UserService.createToken({
                 requestBody: { label: 'Ephemeral lsp token', expiration: expiration.toISOString() }
             });
-            let root = $page.url.protocol +
-                '//' +
-                $page.url.host +
-                '/api/scripts_u/tokened_raw/' +
-                $workspaceStore +
-                '/' +
-                token;
+            let root = hostname + '/api/scripts_u/tokened_raw/' + $workspaceStore + '/' + token;
             const importMap = {
                 imports: {
                     'file:///': root + '/'
@@ -282,7 +306,7 @@ export async function reloadWebsocket() {
             }
             encodedImportMap = 'data:text/plain;base64,' + btoa(JSON.stringify(importMap));
         }
-        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/deno`, 'deno', {
+        await connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/deno`, 'deno', {
             certificateStores: null,
             enablePaths: [],
             config: null,
@@ -320,7 +344,7 @@ export async function reloadWebsocket() {
         });
     }
     else if (lang === 'python') {
-        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/pyright`, 'pyright', {}, (params, token, next) => {
+        await connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/pyright`, 'pyright', {}, (params, token, next) => {
             if (params.items.find((x) => x.section === 'python')) {
                 return [
                     {
@@ -345,7 +369,8 @@ export async function reloadWebsocket() {
             }
             return next(params, token);
         });
-        connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/black`, 'black', {
+        connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/ruff`, 'ruff', {}, undefined);
+        connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/diagnostic`, 'black', {
             formatters: {
                 black: {
                     command: 'black',
@@ -358,10 +383,42 @@ export async function reloadWebsocket() {
         }, undefined);
     }
     else if (lang === 'go') {
-        connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/go`, 'go', {
+        connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/go`, 'go', {
             'build.allowImplicitNetworkAccess': true
         }, undefined);
     }
+    else if (lang === 'shell') {
+        connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/diagnostic`, 'shellcheck', {
+            linters: {
+                shellcheck: {
+                    command: 'shellcheck',
+                    debounce: 100,
+                    args: ['--format=gcc', '-'],
+                    offsetLine: 0,
+                    offsetColumn: 0,
+                    sourceName: 'shellcheck',
+                    formatLines: 1,
+                    formatPattern: [
+                        '^[^:]+:(\\d+):(\\d+):\\s+([^:]+):\\s+(.*)$',
+                        {
+                            line: 1,
+                            column: 2,
+                            message: 4,
+                            security: 3
+                        }
+                    ],
+                    securities: {
+                        error: 'error',
+                        warning: 'warning',
+                        note: 'info'
+                    }
+                }
+            },
+            filetypes: {
+                shell: 'shellcheck'
+            }
+        }, undefined);
+    }
     websocketInterval && clearInterval(websocketInterval);
     websocketInterval = setInterval(() => {
         if (document.visibilityState == 'visible') {
@@ -395,27 +452,39 @@ function handlePathChange() {
 async function closeWebsockets() {
     command && command.dispose();
     command = undefined;
-    monacoServices && monacoServices.dispose();
-    monacoServices = undefined;
     for (const x of websockets) {
         try {
-            await x[0].stop();
+            await x[0].dispose();
             x[1].close();
         }
         catch (err) {
+            console.log('error disposing language client, closing websocket', err);
             try {
                 x[1].close();
             }
-            catch (err) { }
-            console.log('error disposing websocket', err);
+            catch (err) {
+                console.log('error disposing websocket, closin', err);
+            }
         }
     }
+    console.log('disposed language client and closed websocket');
     websockets = [];
     websocketInterval && clearInterval(websocketInterval);
 }
 let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
 async function loadMonaco() {
-    const model = meditor.createModel(code, lang, mUri.parse(uri));
+    let model;
+    try {
+        model = meditor.createModel(code, lang, mUri.parse(uri));
+    }
+    catch (err) {
+        console.log('model already existed', err);
+        const nmodel = meditor.getModel(mUri.parse(uri));
+        if (!nmodel) {
+            throw err;
+        }
+        model = nmodel;
+    }
     model.updateOptions(lang == 'python' ? { tabSize: 4, insertSpaces: true } : updateOptions);
     editor = meditor.create(divEl, {
         ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
@@ -444,6 +513,8 @@ async function loadMonaco() {
         if (!websocketAlive.black &&
             !websocketAlive.deno &&
             !websocketAlive.pyright &&
+            !websocketAlive.ruff &&
+            !websocketAlive.shellcheck &&
             !websocketAlive.go &&
             !websocketInterval) {
             reloadWebsocket();
@@ -453,8 +524,9 @@ async function loadMonaco() {
     return () => {
         try {
             closeWebsockets();
-            model.dispose();
+            model?.dispose();
             editor && editor.dispose();
+            console.log('disposed editor');
         }
         catch (err) {
             console.log('error disposing editor', err);
@@ -473,7 +545,7 @@ export function addAction(id, label, callback, keybindings = []) {
     });
 }
 onMount(() => {
-    if (browser) {
+    if (BROWSER) {
         loadMonaco().then((x) => (disposeMethod = x));
     }
 });

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

@@ -17,8 +17,10 @@ declare const __propDef: {
         websocketAlive?: {
             pyright: boolean;
             black: boolean;
+            ruff: boolean;
             deno: boolean;
             go: boolean;
+            shellcheck: boolean;
         } | undefined;
         shouldBindKey?: boolean | undefined;
         fixedOverflowWidgets?: boolean | undefined;

package/package/components/EditorBar.svelte

@@ -2,8 +2,7 @@
 </script>
 
 <script>import { ResourceService, VariableService } from '../gen';
-import { getModifierKey, getScriptByPath, sendUserToast } from '../utils';
-import { faBroom, faCube, faDollarSign, faEye, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { faCube, faDollarSign, faEye, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -17,8 +16,9 @@ import PickHubScript from './flows/pickers/PickHubScript.svelte';
 import ToggleHubWorkspace from './ToggleHubWorkspace.svelte';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import Popover from './Popover.svelte';
-import Kbd from './common/kbd/Kbd.svelte';
 import { SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS } from '../consts';
+import { sendUserToast } from '../toast';
+import { getScriptByPath } from '../scripts';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -105,6 +105,9 @@ let version = __pkg__.version;
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
+	tooltip="Contextual Variables are variables whose values are contextual to the Script
+	execution. They are are automatically set by Windmill."
+	documentationLink="https://docs.windmill.dev/docs/core_concepts/variables_and_secrets#contextual-variables"
 	itemName="Contextual Variable"
 	extraField="name"
 	loadItems={loadContextualVariables}
@@ -138,6 +141,8 @@ let version = __pkg__.version;
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
+	tooltip="Variables are dynamic values that have a key associated to them and can be retrieved during the execution of a Script or Flow."
+	documentationLink="https://docs.windmill.dev/docs/core_concepts/variables_and_secrets"
 	itemName="Variable"
 	extraField="path"
 	loadItems={loadVariables}
@@ -186,6 +191,8 @@ let version = __pkg__.version;
 		}
 		sendUserToast(`${path} inserted at cursor`)
 	}}
+	tooltip="Resources represent connections to third party systems. Resources are a good way to define a connection to a frequently used third party system such as a database."
+	documentationLink="https://docs.windmill.dev/docs/core_concepts/resources_and_types"
 	itemName="Resource"
 	buttons={{ 'Edit/View': (x) => resourceEditor.initEdit(x) }}
 	extraField="description"
@@ -320,13 +327,16 @@ let version = __pkg__.version;
 							(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
 						{:else if lang == 'python3'}
 							(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
-							<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
+							<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>
+							<span class={websocketAlive.ruff ? 'green' : 'text-red-700'}>Ruff</span>)
+						{:else if lang == 'bash'}
+							(<span class={websocketAlive.shellcheck ? 'green' : 'text-red-700'}>Shellcheck</span>)
 						{/if}
 					</span>
 				</Button>
 				<svelte:fragment slot="text">Reload assistant</svelte:fragment>
 			</Popover>
-			<Popover
+			<!-- <Popover
 				notClickable
 				placement="bottom"
 				disappearTimeout={0}
@@ -349,7 +359,7 @@ let version = __pkg__.version;
 						S
 					</Kbd>
 				</svelte:fragment>
-			</Popover>
+			</Popover> -->
 		</div>
 	</div>
 	<Popover

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

@@ -8,8 +8,10 @@ declare const __propDef: {
         websocketAlive: {
             pyright: boolean;
             black: boolean;
+            ruff: boolean;
             deno: boolean;
             go: boolean;
+            shellcheck: boolean;
         };
         iconOnly?: boolean | undefined;
         validCode?: boolean | undefined;

package/package/components/FieldHeader.svelte

@@ -1,26 +1,37 @@
-<script>import Required from './Required.svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import Required from './Required.svelte';
+import { capitalize } from '../utils';
 export let label;
 export let format = '';
 export let contentEncoding = '';
 export let type = undefined;
 export let required = false;
+export let displayType = true;
+export let labelClass = '';
+export let prettify = false;
 </script>
 
 <div class="inline-flex flex-row items-center truncated">
-	<span class="font-semibold">
-		{label}
+	<span class={twMerge('font-semibold', labelClass)}>
+		{#if prettify}
+			{label.replace(/_/g, ' ').split(' ').map(capitalize).join(' ')}
+		{:else}
+			{label}
+		{/if}
 	</span>
 	<Required {required} class="!ml-0" />
 
-	{#if format && format != ''}
-		<span class="text-sm italic ml-1 text-indigo-800">
-			({format})
-		</span>
-	{:else}
-		<span class="text-sm italic ml-1 text-indigo-800">
-			({type ?? 'any'}{contentEncoding && contentEncoding != ''
-				? `, encoding: ${contentEncoding}`
-				: ''})</span
-		>
+	{#if displayType}
+		{#if format && format != ''}
+			<span class="text-sm italic ml-1 text-indigo-800">
+				({format})
+			</span>
+		{:else}
+			<span class="text-sm italic ml-1 text-indigo-800">
+				({type ?? 'any'}{contentEncoding && contentEncoding != ''
+					? `, encoding: ${contentEncoding}`
+					: ''})
+			</span>
+		{/if}
 	{/if}
 </div>

package/package/components/FieldHeader.svelte.d.ts

@@ -6,6 +6,9 @@ declare const __propDef: {
         contentEncoding?: string | undefined;
         type?: string | undefined;
         required?: boolean | undefined;
+        displayType?: boolean | undefined;
+        labelClass?: string | undefined;
+        prettify?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowBuilder.svelte

@@ -1,13 +1,13 @@
-<script>import { goto } from '$app/navigation';
-import { FlowService, ScheduleService } from '../gen';
+<script>import { FlowService, ScheduleService, DraftService } from '../gen';
 import { initHistory, redo, undo } from '../history';
 import { userStore, workspaceStore } from '../stores';
-import { encodeState, formatCron, loadHubScripts, sendUserToast } from '../utils';
+import { encodeState, formatCron } from '../utils';
+import { sendUserToast } from '../toast';
 import { faCalendarAlt, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Badge, Button, UndoRedo } from './common';
+import { Badge, Button, Kbd, UndoRedo } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import FlowEditor from './flows/FlowEditor.svelte';
 import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
@@ -17,12 +17,15 @@ import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { loadFlowSchedule } from './flows/scheduleUtils';
 import { cleanInputs } from './flows/utils';
 import { Pen } from 'lucide-svelte';
+import { loadHubScripts } from '../scripts';
+import { createEventDispatcher } from 'svelte';
 export let initialPath = '';
 export let selectedId;
 export let initialArgs = {};
 export let loading = false;
 export let flowStore;
 export let flowStateStore;
+const dispatch = createEventDispatcher();
 async function createSchedule(path) {
     const { cron, timezone, args, enabled } = $scheduleStore;
     try {
@@ -44,7 +47,42 @@ async function createSchedule(path) {
     }
 }
 let loadingSave = false;
-async function saveFlow(leave) {
+let loadingDraft = false;
+async function saveDraft() {
+    loadingDraft = true;
+    try {
+        const flow = cleanInputs($flowStore);
+        $dirtyStore = false;
+        localStorage.removeItem('flow');
+        if (initialPath == '') {
+            await FlowService.createFlow({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema,
+                    draft_only: true
+                }
+            });
+        }
+        await DraftService.createDraft({
+            workspace: $workspaceStore,
+            requestBody: { path: initialPath == '' ? flow.path : initialPath, typ: 'flow', value: flow }
+        });
+        if (initialPath == '') {
+            $dirtyStore = false;
+            dispatch('saveInitial');
+        }
+        sendUserToast('Saved as draft');
+    }
+    catch (error) {
+        sendUserToast(`Error while saving the flow as a draft: ${error.body || error.message}`, true);
+    }
+    loadingDraft = false;
+}
+async function saveFlow() {
     loadingSave = true;
     try {
         const flow = cleanInputs($flowStore);
@@ -112,13 +150,8 @@ async function saveFlow(leave) {
             }
         }
         loadingSave = false;
-        if (leave) {
-            goto(`/flows/get/${$flowStore.path}?workspace=${$workspaceStore}`);
-        }
-        else if (initialPath !== $flowStore.path) {
-            initialPath = $flowStore.path;
-            goto(`/flows/edit/${$flowStore.path}?workspace=${$workspaceStore}`);
-        }
+        $dirtyStore = false;
+        dispatch('deploy');
     }
     catch (err) {
         sendUserToast(`The flow could not be saved: ${err.body}`, true);
@@ -128,10 +161,10 @@ async function saveFlow(leave) {
 let timeout = undefined;
 $: {
     if ($flowStore || $selectedIdStore) {
-        saveDraft();
+        saveSessionDraft();
     }
 }
-function saveDraft() {
+function saveSessionDraft() {
     timeout && clearTimeout(timeout);
     timeout = setTimeout(() => {
         try {
@@ -146,6 +179,9 @@ function saveDraft() {
     }, 500);
 }
 const selectedIdStore = writable(selectedId ?? 'settings-metadata');
+export function getSelectedId() {
+    return $selectedIdStore;
+}
 const scheduleStore = writable({
     args: {},
     cron: '',
@@ -169,7 +205,9 @@ setContext('FlowEditorContext', {
     history,
     flowStateStore,
     flowStore,
-    testStepStore
+    testStepStore,
+    saveDraft,
+    initialPath
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -210,7 +248,7 @@ function onKeyDown(event) {
             break;
         case 's':
             if (event.ctrlKey || event.metaKey) {
-                saveFlow(false);
+                saveDraft();
                 event.preventDefault();
             }
             break;
@@ -243,8 +281,8 @@ function generateIds() {
 }
 const dropdownItems = [
     {
-        label: 'Save and exit',
-        onClick: () => saveFlow(true)
+        label: 'Exit & see details',
+        onClick: () => dispatch('details')
     }
 ];
 if (initialPath != '') {
@@ -333,24 +371,29 @@ if (initialPath != '') {
 				<FlowImportExportMenu />
 
 				<FlowPreviewButtons />
-				<div class="center-center">
-					<Button
-						title="Ctrl/Cmd + S"
-						loading={loadingSave}
-						size="xs"
-						startIcon={{ icon: faSave }}
-						on:click={() => saveFlow(false)}
-						{dropdownItems}
-					>
-						Save
-					</Button>
-				</div>
+				<Button
+					loading={loadingDraft}
+					size="xs"
+					startIcon={{ icon: faSave }}
+					on:click={() => saveDraft()}
+				>
+					Save draft&nbsp;<Kbd small>Ctrl</Kbd><Kbd small>S</Kbd>
+				</Button>
+				<Button
+					loading={loadingSave}
+					size="xs"
+					startIcon={{ icon: faSave }}
+					on:click={() => saveFlow()}
+					dropdownItems={initialPath != '' ? dropdownItems : undefined}
+				>
+					Deploy
+				</Button>
 			</div>
 		</div>
 
 		<!-- metadata -->
 		{#if $flowStateStore}
-			<FlowEditor {initialPath} {loading} />
+			<FlowEditor {loading} />
 		{:else}
 			<CenteredPage>Loading...</CenteredPage>
 		{/if}