windmill-components 1.55.1 → 1.55.2

package/components/TemplateEditor.svelte

@@ -0,0 +1,496 @@
+<script context="module">import * as monaco from 'monaco-editor';
+import libStdContent from '../es5.d.ts.txt?raw';
+monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
+});
+monaco.languages.register({ id: 'template' });
+export const conf = {
+    wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
+    comments: {
+        lineComment: '//',
+        blockComment: ['/*', '*/']
+    },
+    brackets: [
+        ['{', '}'],
+        ['[', ']'],
+        ['(', ')']
+    ],
+    onEnterRules: [],
+    autoClosingPairs: [
+        { open: '{', close: '}' },
+        { open: '[', close: ']' },
+        { open: '(', close: ')' },
+        { open: '"', close: '"', notIn: ['string'] },
+        { open: "'", close: "'", notIn: ['string', 'comment'] },
+        { open: '`', close: '`', notIn: ['string', 'comment'] }
+    ],
+    folding: {
+        markers: {
+            start: new RegExp('^\\s*//\\s*#?region\\b'),
+            end: new RegExp('^\\s*//\\s*#?endregion\\b')
+        }
+    }
+};
+export const language = {
+    // Set defaultToken to invalid to see what you do not tokenize yet
+    defaultToken: 'invalid',
+    tokenPostfix: '.ts',
+    keywords: [
+        // Should match the keys of textToKeywordObj in
+        // https://github.com/microsoft/TypeScript/blob/master/src/compiler/scanner.ts
+        'abstract',
+        'any',
+        'as',
+        'asserts',
+        'bigint',
+        'boolean',
+        'break',
+        'case',
+        'catch',
+        'class',
+        'continue',
+        'const',
+        'constructor',
+        'debugger',
+        'declare',
+        'default',
+        'delete',
+        'do',
+        'else',
+        'enum',
+        'export',
+        'extends',
+        'false',
+        'finally',
+        'for',
+        'from',
+        'function',
+        'get',
+        'if',
+        'implements',
+        'import',
+        'in',
+        'infer',
+        'instanceof',
+        'interface',
+        'is',
+        'keyof',
+        'let',
+        'module',
+        'namespace',
+        'never',
+        'new',
+        'null',
+        'number',
+        'object',
+        'out',
+        'package',
+        'private',
+        'protected',
+        'public',
+        'override',
+        'readonly',
+        'require',
+        'global',
+        'return',
+        'set',
+        'static',
+        'string',
+        'super',
+        'switch',
+        'symbol',
+        'this',
+        'throw',
+        'true',
+        'try',
+        'type',
+        'typeof',
+        'undefined',
+        'unique',
+        'unknown',
+        'var',
+        'void',
+        'while',
+        'with',
+        'yield',
+        'async',
+        'await',
+        'of'
+    ],
+    operators: [
+        '<=',
+        '>=',
+        '==',
+        '!=',
+        '===',
+        '!==',
+        '=>',
+        '+',
+        '-',
+        '**',
+        '*',
+        '/',
+        '%',
+        '++',
+        '--',
+        '<<',
+        '</',
+        '>>',
+        '>>>',
+        '&',
+        '|',
+        '^',
+        '!',
+        '~',
+        '&&',
+        '||',
+        '??',
+        '?',
+        ':',
+        '=',
+        '+=',
+        '-=',
+        '*=',
+        '**=',
+        '/=',
+        '%=',
+        '<<=',
+        '>>=',
+        '>>>=',
+        '&=',
+        '|=',
+        '^=',
+        '@'
+    ],
+    // we include these common regular expressions
+    symbols: /[=><!~?:&|+\-*\/\^%]+/,
+    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+    digits: /\d+(_+\d+)*/,
+    octaldigits: /[0-7]+(_+[0-7]+)*/,
+    binarydigits: /[0-1]+(_+[0-1]+)*/,
+    hexdigits: /[[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
+    regexpctl: /[(){}\[\]\$\^|\-*+?\.]/,
+    regexpesc: /\\(?:[bBdDfnrstvwWn0\\\/]|@regexpctl|c[A-Z]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4})/,
+    // The main tokenizer for our languages
+    tokenizer: {
+        root: [
+            [/\$\{/, { token: 'delimiter.bracket', next: '@bracketCounting' }],
+            [/[^\\`$]+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid']
+        ],
+        common: [
+            // identifiers and keywords
+            [
+                /[a-z_$][\w$]*/,
+                {
+                    cases: {
+                        '@keywords': 'keyword',
+                        '@default': 'identifier'
+                    }
+                }
+            ],
+            [/[A-Z][\w\$]*/, 'type.identifier'],
+            // [/[A-Z][\w\$]*/, 'identifier'],
+            // whitespace
+            { include: '@whitespace' },
+            // regular expression: ensure it is terminated before beginning (otherwise it is an opeator)
+            [
+                /\/(?=([^\\\/]|\\.)+\/([dgimsuy]*)(\s*)(\.|;|,|\)|\]|\}|$))/,
+                { token: 'regexp', bracket: '@open', next: '@regexp' }
+            ],
+            // delimiters and operators
+            [/[()\[\]]/, '@brackets'],
+            [/[<>](?!@symbols)/, '@brackets'],
+            [/!(?=([^=]|$))/, 'delimiter'],
+            [
+                /@symbols/,
+                {
+                    cases: {
+                        '@operators': 'delimiter',
+                        '@default': ''
+                    }
+                }
+            ],
+            // numbers
+            [/(@digits)[eE]([\-+]?(@digits))?/, 'number.float'],
+            [/(@digits)\.(@digits)([eE][\-+]?(@digits))?/, 'number.float'],
+            [/0[xX](@hexdigits)n?/, 'number.hex'],
+            [/0[oO]?(@octaldigits)n?/, 'number.octal'],
+            [/0[bB](@binarydigits)n?/, 'number.binary'],
+            [/(@digits)n?/, 'number'],
+            // delimiter: after number because of .\d floats
+            [/[;,.]/, 'delimiter'],
+            // strings
+            [/"([^"\\]|\\.)*$/, 'string.invalid'],
+            [/'([^'\\]|\\.)*$/, 'string.invalid'],
+            [/"/, 'string', '@string_double'],
+            [/'/, 'string', '@string_single'],
+            [/`/, 'string', '@string_backtick']
+        ],
+        whitespace: [
+            [/[ \t\r\n]+/, ''],
+            [/\/\*\*(?!\/)/, 'comment.doc', '@jsdoc'],
+            [/\/\*/, 'comment', '@comment'],
+            [/\/\/.*$/, 'comment']
+        ],
+        comment: [
+            [/[^\/*]+/, 'comment'],
+            [/\*\//, 'comment', '@pop'],
+            [/[\/*]/, 'comment']
+        ],
+        jsdoc: [
+            [/[^\/*]+/, 'comment.doc'],
+            [/\*\//, 'comment.doc', '@pop'],
+            [/[\/*]/, 'comment.doc']
+        ],
+        // We match regular expression quite precisely
+        regexp: [
+            [
+                /(\{)(\d+(?:,\d*)?)(\})/,
+                ['regexp.escape.control', 'regexp.escape.control', 'regexp.escape.control']
+            ],
+            [
+                /(\[)(\^?)(?=(?:[^\]\\\/]|\\.)+)/,
+                ['regexp.escape.control', { token: 'regexp.escape.control', next: '@regexrange' }]
+            ],
+            [/(\()(\?:|\?=|\?!)/, ['regexp.escape.control', 'regexp.escape.control']],
+            [/[()]/, 'regexp.escape.control'],
+            [/@regexpctl/, 'regexp.escape.control'],
+            [/[^\\\/]/, 'regexp'],
+            [/@regexpesc/, 'regexp.escape'],
+            [/\\\./, 'regexp.invalid'],
+            [
+                /(\/)([dgimsuy]*)/,
+                [{ token: 'regexp', bracket: '@close', next: '@pop' }, 'keyword.other']
+            ]
+        ],
+        regexrange: [
+            [/-/, 'regexp.escape.control'],
+            [/\^/, 'regexp.invalid'],
+            [/@regexpesc/, 'regexp.escape'],
+            [/[^\]]/, 'regexp'],
+            [
+                /\]/,
+                {
+                    token: 'regexp.escape.control',
+                    next: '@pop',
+                    bracket: '@close'
+                }
+            ]
+        ],
+        string_double: [
+            [/[^\\"]+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/"/, 'string', '@pop']
+        ],
+        string_single: [
+            [/[^\\']+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/'/, 'string', '@pop']
+        ],
+        string_backtick: [
+            [/\$\{/, { token: 'delimiter.bracket', next: '@bracketCounting' }],
+            [/[^\\`$]+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/`/, 'string', '@pop']
+        ],
+        bracketCounting: [
+            [/\{/, 'delimiter.bracket', '@bracketCounting'],
+            [/\}/, 'delimiter.bracket', '@pop'],
+            { include: 'common' }
+        ]
+    }
+};
+// Register a tokens provider for the language
+monaco.languages.registerTokensProviderFactory('template', {
+    create: () => language
+});
+monaco.languages.setLanguageConfiguration('template', conf);
+// monaco.languages.typescript.getTypeScriptWorker()
+// Register a completion item provider for the new language
+</script>
+
+<script>import { browser, dev } from '$app/env';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { convertKind, createDocumentationString, createHash, displayPartsToString, editorConfig, updateOptions } from '../editorUtils';
+let divEl = null;
+let editor;
+let model;
+export let code = '';
+export let hash = createHash();
+export let automaticLayout = true;
+export let extraLib = '';
+export let autoHeight = true;
+export let fixedOverflowWidgets = true;
+const lang = 'template';
+const dispatch = createEventDispatcher();
+const uri = `file:///${hash}.ts`;
+if (browser) {
+    if (dev) {
+        buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
+    }
+    else {
+        // @ts-ignore
+        self.MonacoEnvironment = {
+            getWorker: function (_moduleId, label) {
+                return new tsWorker();
+            }
+        };
+    }
+}
+export function getCode() {
+    return editor?.getValue() ?? '';
+}
+let cip;
+let extraModel;
+let width = 0;
+async function loadMonaco() {
+    model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    model.updateOptions(updateOptions);
+    editor = monaco.editor.create(divEl, {
+        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+        lineNumbers: 'off',
+        fontSize: 16,
+        suggestOnTriggerCharacters: true
+    });
+    const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
+    if (extraLib != '') {
+        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+            {
+                content: extraLib,
+                filePath: 'windmill.d.ts'
+            },
+            stdLib
+        ]);
+    }
+    else {
+        monaco.languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+    }
+    extraModel = monaco.editor.createModel('`' + model.getValue() + '`', 'javascript');
+    const worker = await monaco.languages.typescript.getJavaScriptWorker();
+    const client = await worker(extraModel.uri);
+    cip = monaco.languages.registerCompletionItemProvider('template', {
+        triggerCharacters: ['.'],
+        provideCompletionItems: async (model, position) => {
+            extraModel.setValue('`' + model.getValue() + '`');
+            const offset = model.getOffsetAt(position) + 1;
+            const info = await client.getCompletionsAtPosition(extraModel.uri.toString(), offset);
+            if (!info) {
+                return { suggestions: [] };
+            }
+            const wordInfo = model.getWordUntilPosition(position);
+            const wordRange = new monaco.Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn);
+            const suggestions = info.entries
+                .filter((x) => x.kind != 'keyword' && x.kind != 'var')
+                .map((entry) => {
+                let range = wordRange;
+                if (entry.replacementSpan) {
+                    const p1 = model.getPositionAt(entry.replacementSpan.start);
+                    const p2 = model.getPositionAt(entry.replacementSpan.start + entry.replacementSpan.length);
+                    range = new monaco.Range(p1.lineNumber, p1.column, p2.lineNumber, p2.column);
+                }
+                const tags = [];
+                if (entry.kindModifiers?.indexOf('deprecated') !== -1) {
+                    tags.push(monaco.languages.CompletionItemTag.Deprecated);
+                }
+                return {
+                    uri: model.uri,
+                    position: position,
+                    offset: offset,
+                    range: range,
+                    label: entry.name,
+                    insertText: entry.name,
+                    sortText: entry.sortText,
+                    kind: convertKind(entry.kind),
+                    tags
+                };
+            });
+            return { suggestions };
+        },
+        resolveCompletionItem: async (item, token) => {
+            extraModel.setValue('`' + model.getValue() + '`');
+            const myItem = item;
+            const position = myItem.position;
+            const offset = myItem.offset;
+            const details = await client.getCompletionEntryDetails(extraModel.uri.toString(), offset, myItem.label);
+            if (!details) {
+                return myItem;
+            }
+            return {
+                uri: model.uri,
+                position: position,
+                label: details.name,
+                kind: convertKind(details.kind),
+                detail: displayPartsToString(details.displayParts),
+                documentation: {
+                    value: createDocumentationString(details)
+                }
+            };
+        }
+    });
+    let timeoutModel = undefined;
+    editor.onDidChangeModelContent((event) => {
+        timeoutModel && clearTimeout(timeoutModel);
+        timeoutModel = setTimeout(() => {
+            code = getCode();
+            dispatch('change', { code });
+        }, 200);
+    });
+    if (autoHeight) {
+        let ignoreEvent = false;
+        const updateHeight = () => {
+            const contentHeight = Math.min(1000, editor.getContentHeight());
+            if (divEl) {
+                divEl.style.height = `${contentHeight}px`;
+            }
+            try {
+                ignoreEvent = true;
+                editor.layout({ width, height: contentHeight });
+            }
+            finally {
+                ignoreEvent = false;
+            }
+        };
+        editor.onDidContentSizeChange(updateHeight);
+        updateHeight();
+    }
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+    });
+    editor.onDidBlurEditorText(() => {
+        code = getCode();
+        dispatch('blur');
+    });
+}
+onMount(() => {
+    if (browser) {
+        loadMonaco();
+    }
+});
+onDestroy(() => {
+    try {
+        model && model.dispose();
+        editor && editor.dispose();
+        cip && cip.dispose();
+        extraModel && extraModel.dispose();
+    }
+    catch (err) { }
+});
+</script>
+
+<div bind:this={divEl} class="{$$props.class} editor templatable-editor" bind:clientWidth={width} />
+
+<style>
+	.editor {
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
+    border-radius: 0.5rem
+}</style>

package/components/TemplateEditor.svelte.d.ts

@@ -0,0 +1,25 @@
+export declare const conf: {
+    wordPattern: RegExp;
+    comments: {
+        lineComment: string;
+        blockComment: [string, string];
+    };
+    brackets: [string, string][];
+    onEnterRules: never[];
+    autoClosingPairs: ({
+        open: string;
+        close: string;
+        notIn?: undefined;
+    } | {
+        open: string;
+        close: string;
+        notIn: string[];
+    })[];
+    folding: {
+        markers: {
+            start: RegExp;
+            end: RegExp;
+        };
+    };
+};
+export declare const language: boolean;

package/components/TestJobLoader.svelte

@@ -94,7 +94,7 @@ async function loadTestJob(id) {
                 logOffset: job.logs?.length ?? 0
             });
             if (previewJobUpdates.new_logs) {
-                job.logs = (job.logs ?? '').concat(previewJobUpdates.new_logs);
+                job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
             }
             if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
                 job = await JobService.getJob({ workspace: workspace, id });

package/components/VariableEditor.svelte

@@ -124,7 +124,7 @@ let editor = undefined;
 							>
 						</div>
 					{/if}
-					<div class="mb-1 font-semibold text-gray-700">General</div>
+					<span class="font-semibold text-gray-700">Path</span>
 					<Path
 						disabled={!can_write}
 						bind:error={pathError}
@@ -136,6 +136,7 @@ let editor = undefined;
 				</div>
 				<div class="mt-4">
 					<Toggle bind:checked={variable.is_secret} options={{ right: 'Secret' }} />
+					<div class="mb-2" />
 					{#if variable.is_secret}
 						<Alert type="warning" title="Audit log for each access">
 							Every secret is encrypted at rest and in transit with a key specific to this

package/components/apps/CreateApp.svelte

@@ -17,7 +17,7 @@ async function createApp() {
     const appJson = {
         grid: [],
         title: 'New app',
-        inlineScripts: {}
+        unusedInlineScripts: []
     };
     const policy = {
         triggerables: {},

package/components/apps/components/buttons/AppButton.svelte

@@ -18,9 +18,9 @@ let size;
 let runnableComponent;
 </script>
 
-<InputValue input={configuration.label} bind:value={labelValue} />
-<InputValue input={configuration.color} bind:value={color} />
-<InputValue input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
 	bind:runnableComponent

package/components/apps/components/dataDisplay/AppBarChart.svelte

@@ -19,7 +19,8 @@ $: backgroundColor = {
 }[theme];
 const options = {
     responsive: true,
-    animation: false
+    animation: false,
+    maintainAspectRatio: false
 };
 $: data = {
     labels,
@@ -32,11 +33,11 @@ $: data = {
 };
 </script>
 
-<InputValue input={configuration.theme} bind:value={theme} />
-<InputValue input={configuration.labels} bind:value={labels} />
+<InputValue {id} input={configuration.theme} bind:value={theme} />
+<InputValue {id} input={configuration.labels} bind:value={labels} />
 
 <RunnableWrapper bind:componentInput {id} bind:result>
-	{#if data}
+	{#if result}
 		<Bar {data} {options} />
 	{/if}
 </RunnableWrapper>

package/components/apps/components/dataDisplay/AppPieChart.svelte

@@ -33,11 +33,11 @@ $: data = {
 };
 </script>
 
-<InputValue input={configuration.theme} bind:value={theme} />
-<InputValue input={configuration.labels} bind:value={labels} />
+<InputValue {id} input={configuration.theme} bind:value={theme} />
+<InputValue {id} input={configuration.labels} bind:value={labels} />
 
 <RunnableWrapper bind:componentInput {id} bind:result>
-	{#if data}
+	{#if result}
 		<Pie {data} {options} />
 	{/if}
 </RunnableWrapper>

package/components/apps/components/dateInputs/AppDateInput.svelte

@@ -0,0 +1,34 @@
+<script>import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let inputType;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let input;
+let labelValue = 'Title';
+let minValue = '';
+let maxValue = '';
+$: outputs = $worldStore?.outputsById[id];
+function handleInput() {
+    outputs?.result.set(input.value);
+}
+</script>
+
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.minDate} bind:value={minValue} />
+<InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
+
+<AlignWrapper {verticalAlignment}>
+	<input
+		type={inputType}
+		bind:this={input}
+		on:input={handleInput}
+		min={minValue}
+		max={maxValue}
+		placeholder="Type..."
+		class="h-full"
+	/>
+</AlignWrapper>

package/components/apps/components/dateInputs/AppDateInput.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        inputType: 'date' | 'time' | 'datetime-local';
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDateInputProps = typeof __propDef.props;
+export type AppDateInputEvents = typeof __propDef.events;
+export type AppDateInputSlots = typeof __propDef.slots;
+export default class AppDateInput extends SvelteComponentTyped<AppDateInputProps, AppDateInputEvents, AppDateInputSlots> {
+    get staticOutputs(): string[];
+}
+export {};