windmill-components 1.13.0

package/components/Dropdown.svelte

@@ -0,0 +1,108 @@
+<script>import { clickOutside } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+let open = false;
+export let dropdownItems;
+export let name = undefined;
+// The dropdown is positioned versus its first relatively positioned partent
+// By default, the dropdown is positioned relative to its button
+// This can cause the dropdown to be hidden if it is in an overflow-hidden div.
+// In that case, set relative to false and control the dropdown positioning from the div
+export let relative = true;
+const dispatch = createEventDispatcher();
+function openMenu() {
+    open = true;
+}
+function handleClickOutsideMenu(event) {
+    open = false;
+}
+</script>
+
+<div
+	class="ml-3 {relative ? 'relative' : ''} {$$props.class}"
+	use:clickOutside
+	on:click_outside={handleClickOutsideMenu}
+>
+	<button
+		class="text-blue-500 text-right "
+		id="dropdown"
+		aria-expanded="false"
+		aria-haspopup="true"
+		on:click={openMenu}
+	>
+		{#if !name}
+			<Icon data={faEllipsisH} scale={1.2} />
+		{:else}
+			{name}
+		{/if}
+	</button>
+	<div
+		class="flex flex-col z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
+			? 'visible'
+			: 'hidden'}"
+		role="menu"
+		tabindex="-1"
+	>
+		{#if dropdownItems}
+			{#each dropdownItems as item, i}
+				{#if item.action}
+					<button
+						on:click={() => {
+							if (!item.disabled) {
+								open = false
+								item.action && item.action()
+								dispatch('click', { item: item?.eventName })
+							}
+						}}
+						class="block hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left{item.separatorTop
+							? 'border-t'
+							: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
+							? 'text-red-500'
+							: ''}"
+						role="menuitem"
+						tabindex="-1"
+						id="user-menu-item-{name}-{i}}"
+						disabled={item.disabled}
+						class:disabled={item.disabled}
+					>
+						{#if item.icon}
+							<Icon
+								data={item.icon}
+								scale={0.6}
+								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							/>
+						{/if}{item.displayName}
+					</button>
+				{:else if item.href}
+					<a
+						href={item.href}
+						on:click={() => {
+							if (!item.disabled) {
+								open = false
+							}
+						}}
+						class="block px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+						role="menuitem"
+						tabindex="-1"
+						id="user-menu-item-{name}-{i}}"
+						class:disabled={item.disabled}
+						>{#if item.icon}
+							<Icon
+								data={item.icon}
+								scale={0.6}
+								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							/>
+						{/if}{item.displayName}</a
+					>
+				{:else}
+					<span
+						class="block px-4 py-2 text-sm text-gray-700"
+						role="menuitem"
+						tabindex="-1"
+						id="user-menu-item-{name}-{i}}">{item.displayName}</span
+					>{/if}
+			{/each}
+		{/if}
+	</div>
+</div>

package/components/Editor.svelte

@@ -0,0 +1,370 @@
+<script>import { page } from '$app/stores';
+import { browser } from '$app/env';
+import { RequestType, toSocket, WebSocketMessageReader, WebSocketMessageWriter } from '@codingame/monaco-jsonrpc';
+import { onDestroy, onMount } from 'svelte';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import * as vscode from 'vscode';
+let divEl = null;
+let editor;
+export let deno = false;
+export let lang = deno ? 'typescript' : 'python';
+export let code;
+export let hash = (Math.random() + 1).toString(36).substring(2);
+export let cmdEnterAction = undefined;
+export let formatAction = undefined;
+export let automaticLayout = true;
+export let websocketAlive = { pyright: false, black: false, deno: false };
+let websockets = [];
+let uri = '';
+let disposeMethod;
+if (browser) {
+    // @ts-ignore
+    self.MonacoEnvironment = {
+        getWorker: function (_moduleId, label) {
+            if (label === 'json') {
+                return new jsonWorker();
+            }
+            else if (label === 'typescript' || label === 'javascript') {
+                return new tsWorker();
+            }
+            else {
+                return new editorWorker();
+            }
+        }
+    };
+}
+export function getCode() {
+    return editor?.getValue();
+}
+export function insertAtCursor(code) {
+    if (editor) {
+        editor.trigger('keyboard', 'type', { text: code });
+    }
+}
+export function insertAtBeginning(code) {
+    if (editor) {
+        const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 };
+        const op = { range: range, text: code, forceMoveMarkers: true };
+        editor.executeEdits('external', [op]);
+    }
+}
+export function setCode(ncode) {
+    if (editor) {
+        return editor.setValue(ncode);
+    }
+    else {
+        code = ncode;
+    }
+}
+function format() {
+    if (editor) {
+        editor.getAction('editor.action.formatDocument').run();
+        if (formatAction) {
+            formatAction();
+        }
+    }
+}
+export async function reloadWebsocket() {
+    closeWebsockets();
+    if (lang == 'python' || deno) {
+        // install Monaco language client services
+        const { MonacoLanguageClient } = await import('monaco-languageclient');
+        const { CloseAction, ErrorAction } = await import('vscode-languageclient');
+        function createLanguageClient(transports, name, initializationOptions) {
+            const client = new MonacoLanguageClient({
+                name: name,
+                clientOptions: {
+                    documentSelector: deno ? ['typescript'] : ['python'],
+                    errorHandler: {
+                        error: () => ({ action: ErrorAction.Shutdown }),
+                        closed: () => ({
+                            action: CloseAction.Restart
+                        })
+                    },
+                    markdown: {
+                        isTrusted: true
+                    },
+                    // workspaceFolder: { uri: Uri.parse(`/tmp/${name}`), name: 'tmp', index: 0 },
+                    initializationOptions,
+                    middleware: {
+                        workspace: {
+                            configuration: (params, token, configuration) => {
+                                return [
+                                    {
+                                        enable: true
+                                    }
+                                ];
+                            }
+                        }
+                    }
+                },
+                connectionProvider: {
+                    get: () => {
+                        return Promise.resolve(transports);
+                    }
+                }
+            });
+            return client;
+        }
+        async function connectToLanguageServer(url, name, options) {
+            try {
+                const webSocket = new WebSocket(url);
+                webSocket.onopen = () => {
+                    websockets.push(webSocket);
+                    const socket = toSocket(webSocket);
+                    const reader = new WebSocketMessageReader(socket);
+                    const writer = new WebSocketMessageWriter(socket);
+                    const languageClient = createLanguageClient({ reader, writer }, name, options);
+                    languageClient.start();
+                    socket.onClose((_code, _reason) => {
+                        websocketAlive[name] = false;
+                    });
+                    vscode.commands.registerCommand('deno.cache', (uris = []) => {
+                        languageClient.sendRequest(new RequestType('deno/cache'), {
+                            referrer: { uri },
+                            uris: uris.map((uri) => ({ uri }))
+                        });
+                    });
+                    websocketAlive[name] = true;
+                };
+            }
+            catch (err) {
+                console.error(`connection to ${name} language server failed`);
+            }
+        }
+        if (deno) {
+            await connectToLanguageServer(`wss://${$page.url.host}/ws/deno`, 'deno', {
+                certificateStores: null,
+                enablePaths: [],
+                config: null,
+                importMap: null,
+                internalDebug: false,
+                lint: false,
+                path: null,
+                tlsCertificate: null,
+                unsafelyIgnoreCertificateErrors: null,
+                unstable: false,
+                enable: true,
+                cache: null,
+                codeLens: {
+                    implementations: true,
+                    references: true
+                },
+                suggest: {
+                    autoImports: true,
+                    completeFunctionCalls: false,
+                    names: true,
+                    paths: true,
+                    imports: {
+                        autoDiscover: true,
+                        hosts: {
+                            'https://deno.land': true
+                        }
+                    }
+                }
+            });
+        }
+        else {
+            await connectToLanguageServer(`wss://${$page.url.host}/ws/pyright`, 'pyright', {
+                executionEnvironments: [
+                    {
+                        root: '/tmp/pyright',
+                        pythonVersion: '3.7',
+                        pythonPlatform: 'platform',
+                        extraPaths: []
+                    }
+                ]
+            });
+            connectToLanguageServer(`wss://${$page.url.host}/ws/black`, 'black', {
+                formatters: {
+                    black: {
+                        command: 'black',
+                        args: ['--quiet', '-']
+                    }
+                },
+                formatFiletypes: {
+                    python: 'black'
+                }
+            });
+        }
+    }
+}
+function closeWebsockets() {
+    for (const x of websockets) {
+        try {
+            x.close();
+        }
+        catch (err) {
+            console.log('error disposing websocket', err);
+        }
+    }
+    websockets = [];
+}
+async function loadMonaco() {
+    const monaco = await import('monaco-editor');
+    if (lang == 'python') {
+        monaco.languages.register({
+            id: 'python',
+            extensions: ['.py'],
+            aliases: ['python'],
+            mimetypes: ['application/text']
+        });
+    }
+    let path = 'unknown';
+    if (lang == 'python') {
+        path = `${hash}.py`;
+    }
+    else if (lang == 'json') {
+        path = `${hash}.json`;
+    }
+    else if (lang == 'javascript') {
+        path = `${hash}.js`;
+    }
+    else if (lang == 'typescript') {
+        path = `${hash}.ts`;
+    }
+    uri = `file:///${path}`;
+    const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    model.updateOptions({ tabSize: 4, insertSpaces: true });
+    editor = monaco.editor.create(divEl, {
+        model: model,
+        value: code,
+        language: lang,
+        automaticLayout,
+        readOnly: false,
+        autoDetectHighContrast: true,
+        //lineNumbers: 'off',
+        //lineDecorationsWidth: 0,
+        lineNumbersMinChars: 4,
+        lineNumbers: (ln) => '<span class="pr-4 text-gray-400">' + ln + '</span>',
+        folding: false,
+        scrollBeyondLastLine: false,
+        minimap: {
+            enabled: false
+        }
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+        format();
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+        if (cmdEnterAction) {
+            cmdEnterAction();
+        }
+    });
+    editor.onDidChangeModelContent((event) => {
+        code = getCode();
+    });
+    if (lang == 'json') {
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            allowComments: false,
+            schemas: [],
+            enableSchemaRequest: true
+        });
+    }
+    if (lang == 'typescript') {
+        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+            target: monaco.languages.typescript.ScriptTarget.Latest,
+            allowNonTsExtensions: true,
+            noLib: true
+        });
+        if (deno) {
+            monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+                noSemanticValidation: true,
+                noSuggestionDiagnostics: true,
+                noSyntaxValidation: true
+            });
+        }
+        else {
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(`
+/**
+ * get variable (including secret) at path
+ * @param {string} path - path of the variable (e.g: g/all/pretty_secret)
+ */
+export function variable(path: string): string;
+
+/**
+ * get resource at path
+ * @param {string} path - path of the resource (e.g: g/all/my_resource)
+ */
+export function resource(path: string): any;
+
+/**
+ * get result of step n.
+ * If n is negative, for instance -1, it is the step just before this one.
+ * Step 0 is flow input.
+ * @param {number} n - step number.
+ */
+export function step(n: number): any;
+
+/**
+ * flow input as an object
+ */
+export const flow_input: any;
+
+/**
+ * previous result as an object
+ */
+export const previous_result: any;
+
+/**
+ * static params of this same step
+ */
+export const params: any;
+				`, 'file:///node_modules/@types/windmill/index.d.ts');
+        }
+    }
+    if (lang == 'python' || deno) {
+        const { MonacoServices } = await import('monaco-languageclient');
+        MonacoServices.install(monaco);
+    }
+    reloadWebsocket();
+    return () => {
+        if (editor) {
+            try {
+                closeWebsockets();
+                editor.dispose();
+            }
+            catch (err) {
+                console.log('error disposing editor', err);
+            }
+        }
+    };
+}
+onMount(() => {
+    if (browser) {
+        loadMonaco().then((x) => (disposeMethod = x));
+    }
+});
+onDestroy(() => {
+    if (disposeMethod) {
+        disposeMethod();
+    }
+});
+</script>
+
+<!-- <button class="default-button px-6 max-h-8" type="button" on:click={format}>
+	Format (CtrlCmd + S)
+</button> -->
+
+<div bind:this={divEl} class={$$props.class} />
+
+<style>
+	.editor {
+		padding-left: 0px;
+		padding-right: 0px;
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 80vh;
+}
+
+	.small-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 26vh;
+	}
+
+	.few-lines-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 80px;
+	}</style>

package/components/FieldHeader.svelte

@@ -0,0 +1,21 @@
+<script>import Required from './Required.svelte';
+export let label;
+export let format = '';
+export let contentEncoding = '';
+export let type = undefined;
+export let required = false;
+export let itemsType = undefined;
+</script>
+
+<h3>
+	<span class="font-semibold">
+		{label}<Required {required} />
+	</span>
+	<span class="text-sm italic text-indigo-800"
+		>({type ?? 'any'}{contentEncoding && contentEncoding != ''
+			? `, encoding: ${contentEncoding}`
+			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
+			? ` of ${itemsType?.type}s`
+			: ''})</span
+	>
+</h3>

package/components/FlowBuilder.svelte

@@ -0,0 +1,202 @@
+<script>import { FlowService } from '../../gen';
+import { sendUserToast } from '../../utils';
+import { page } from '$app/stores';
+import { goto } from '$app/navigation';
+import Path from './Path.svelte';
+import SvelteMarkdown from 'svelte-markdown';
+import { workspaceStore } from '../../stores';
+import ScriptSchema from './ScriptSchema.svelte';
+import Required from './Required.svelte';
+import FlowEditor from './FlowEditor.svelte';
+export let flow;
+export let initialPath = '';
+$: step = Number($page.url.searchParams.get('step')) || 1;
+async function saveFlow() {
+    try {
+        if (initialPath == '') {
+            await FlowService.createFlow({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema
+                }
+            });
+        }
+        else {
+            await FlowService.updateFlow({
+                workspace: $workspaceStore,
+                path: initialPath,
+                requestBody: {
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema
+                }
+            });
+        }
+        sendUserToast(`Success! flow saved at ${flow.path}`);
+        goto(`/flows/get/${flow.path}`);
+    }
+    catch (error) {
+        if (error.status === 400) {
+            sendUserToast(error.body, true);
+        }
+        else {
+            sendUserToast(`Ooops.Something bad happened: ${error}`, true);
+            console.error(error);
+        }
+    }
+}
+async function inferSchema() {
+    //await inferArgs(flow.content, flow.schema);
+}
+async function changeStep(step) {
+    goto(`?step=${step}`);
+}
+$: {
+    $page.url.searchParams.set('state', btoa(JSON.stringify(flow)));
+    history.replaceState({}, '', $page.url);
+}
+</script>
+
+<div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
+	<!-- Nav between steps-->
+	<div class="flex flex-col w-full">
+		<div class="justify-between flex flex-row drop-shadow-sm w-full">
+			<div class="wizard-nav flex flex-row w-full">
+				<button
+					class="{step === 1
+						? 'default-button-disabled text-gray-700'
+						: 'default-button-secondary'} min-w-max ml-2"
+					on:click={() => {
+						changeStep(1)
+					}}>Step 1: Metadata</button
+				>
+				<button
+					class="{step === 2
+						? 'default-button-disabled text-gray-700'
+						: 'default-button-secondary'} min-w-max ml-2"
+					on:click={() => {
+						changeStep(2)
+					}}>Step 2: Flow</button
+				>
+				<button
+					class="{step === 3
+						? 'default-button-disabled text-gray-700'
+						: 'default-button-secondary'} min-w-max ml-2"
+					on:click={() => {
+						changeStep(3)
+					}}>Step 3: UI customisation</button
+				>
+			</div>
+			<div class="flex flex-row-reverse ml-2">
+				{#if step != 3}
+					<button
+						disabled={step == 1 &&
+							(flow.path == undefined || flow.path == '' || flow.path.split('/')[2] == '')}
+						class="default-button px-6 max-h-8"
+						on:click={() => {
+							changeStep(step + 1)
+						}}>Next</button
+					>
+					{#if step == 2}
+						<button class="default-button-secondary px-6 max-h-8 mr-2" on:click={saveFlow}
+							>Save</button
+						>
+					{/if}
+				{:else}
+					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
+				{/if}
+			</div>
+		</div>
+		<div class="flex flex-row-reverse">
+			<span class="my-1 text-sm text-gray-500 italic">
+				{#if initialPath && initialPath != flow.path} {initialPath} &rightarrow; {/if}
+				{flow.path}
+			</span>
+		</div>
+	</div>
+
+	<!-- metadata -->
+	{#if step === 1}
+		<div class="grid grid-cols-1 gap-6 max-w-7xl">
+			<Path bind:path={flow.path} {initialPath} namePlaceholder="example/my/flow">
+				<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+					Flow permissions depend on their path. Select the group <span class="font-mono">all</span>
+					to share your flow, and <span class="font-mono">user</span> to keep it private.
+					<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+				</div>
+			</Path>
+			<h3 class="text-gray-700 pb-1 border-b">Metadata</h3>
+
+			<label class="block ">
+				<span class="text-gray-700">Summary <Required required={false} /></span>
+				<textarea
+					bind:value={flow.summary}
+					class="
+					mt-1
+					block
+					w-full
+					rounded-md
+					border-gray-300
+					shadow-sm
+					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
+					"
+					placeholder="A very short summary of the flow displayed when the flow is listed"
+					rows="1"
+				/>
+			</label>
+			<label class="block ">
+				<span class="text-gray-700"
+					>Description<Required required={false} detail="accept markdown formatting" />
+					<textarea
+						bind:value={flow.description}
+						class="
+					mt-1
+					block
+					w-full
+					rounded-md
+					border-gray-300
+					shadow-sm
+					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
+					"
+						placeholder="A description to help users understand what this flow does and how to use it."
+						rows="3"
+					/>
+				</span></label
+			>
+
+			<div>
+				<h3 class="text-gray-700 ">Description rendered</h3>
+				<div
+					class="prose mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
+					style="max-height: 200px;"
+				>
+					<SvelteMarkdown source={flow.description ?? ''} />
+				</div>
+			</div>
+		</div>
+	{:else if step === 2}
+		<FlowEditor bind:flow />
+	{:else if step === 3}
+		<ScriptSchema
+			synchronizedHeader={false}
+			bind:summary={flow.summary}
+			bind:description={flow.description}
+			bind:schema={flow.schema}
+		/>
+	{/if}
+</div>
+
+<style>
+	/* .wizard-nav {
+		@apply w-1/2 sm:w-1/4;
+	} */
+
+	.wizard-nav button {
+		max-height: 30px;
+	}</style>