windmill-components 1.85.0 → 1.87.0

package/dist/components/ScriptEditor.svelte

@@ -0,0 +1,216 @@
+<script>import { CompletedJob, Job, JobService } from '../gen';
+import { userStore, workspaceStore } from '../stores';
+import { emptySchema, scriptLangToEditorLang } from '../utils';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
+import Editor from './Editor.svelte';
+import { inferArgs } from '../infer';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import SchemaForm from './SchemaForm.svelte';
+import LogPanel from './scriptEditor/LogPanel.svelte';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte';
+import TestJobLoader from './TestJobLoader.svelte';
+import { onMount } from 'svelte';
+import { Button, Kbd } from './common';
+import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
+import WindmillIcon from './icons/WindmillIcon.svelte';
+// Exported
+export let schema = emptySchema();
+export let code;
+export let path;
+export let lang;
+export let kind = undefined;
+export let initialArgs = {};
+export let fixedOverflowWidgets = true;
+export let noSyncFromGithub = false;
+export let editor = undefined;
+let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+let width = 1200;
+let testJobLoader;
+// Test args input
+let args = initialArgs;
+let isValid = true;
+// Test
+let testIsLoading = false;
+let testJob;
+let pastPreviews = [];
+let lastSave;
+let validCode = true;
+$: lastSave = localStorage.getItem(path ?? 'last_save');
+function onKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
+        event.preventDefault();
+        runTest();
+    }
+}
+function runTest() {
+    testJobLoader.runPreview(path, code, lang, args);
+}
+async function loadPastTests() {
+    pastPreviews = await JobService.listCompletedJobs({
+        workspace: $workspaceStore,
+        jobKinds: 'preview',
+        createdBy: $userStore?.username,
+        scriptPathExact: path
+    });
+}
+export async function inferSchema(code, nlang) {
+    schema = schema ?? emptySchema();
+    let isDefault = [];
+    Object.entries(args).forEach(([k, v]) => {
+        if (schema.properties[k].default == v) {
+            isDefault.push(k);
+        }
+    });
+    try {
+        await inferArgs(nlang ?? lang, code, schema);
+        validCode = true;
+    }
+    catch (e) {
+        validCode = false;
+    }
+    schema = schema;
+    isDefault
+        .filter((key) => schema.properties[key] != undefined)
+        .forEach((key) => (args[key] = schema.properties[key].default));
+    for (const key of Object.keys(args)) {
+        if (schema.properties[key] == undefined) {
+            delete args[key];
+        }
+    }
+}
+onMount(() => {
+    inferSchema(code);
+    loadPastTests();
+});
+function asKind(str) {
+    return str;
+}
+</script>
+
+<TestJobLoader
+	on:done={loadPastTests}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+/>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
+	<div class="flex justify-between space-x-2">
+		<EditorBar
+			{validCode}
+			iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
+			{editor}
+			{lang}
+			{websocketAlive}
+			kind={asKind(kind)}
+		/>
+		{#if !noSyncFromGithub}
+			<div class="py-1">
+				<Button
+					target="_blank"
+					href="https://github.com/windmill-labs/windmill/tree/main/cli"
+					color="light"
+					size="xs"
+					btnClasses="mr-1 hidden md:block"
+					startIcon={{
+						icon: faGithub
+					}}
+				>
+					Sync from Github
+				</Button>
+			</div>
+		{/if}
+	</div>
+</div>
+<SplitPanesWrapper>
+	<Splitpanes class="!overflow-visible">
+		<Pane size={60} minSize={10} class="!overflow-visible">
+			<div class="pl-2 h-full !overflow-visible">
+				{#key lang}
+					<Editor
+						{path}
+						bind:code
+						bind:websocketAlive
+						bind:this={editor}
+						on:change={(e) => {
+							inferSchema(e.detail)
+						}}
+						cmdEnterAction={async () => {
+							await inferSchema(code)
+							runTest()
+						}}
+						formatAction={async () => {
+							await inferSchema(code)
+							try {
+								localStorage.setItem(path ?? 'last_save', code)
+							} catch (e) {
+								console.error('Could not save last_save to local storage', e)
+							}
+							lastSave = code
+						}}
+						class="flex flex-1 h-full !overflow-visible"
+						lang={scriptLangToEditorLang(lang)}
+						automaticLayout={true}
+						{fixedOverflowWidgets}
+					/>
+				{/key}
+			</div>
+		</Pane>
+		<Pane size={40} minSize={10}>
+			<div class="flex flex-col h-full">
+				<div class="px-2 w-full border-b py-1">
+					{#if testIsLoading}
+						<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
+							<WindmillIcon
+								white={true}
+								class="mr-2 text-white"
+								height="20px"
+								width="20px"
+								spin="fast"
+							/>
+							Cancel
+						</Button>
+					{:else}
+						<Button
+							on:click={runTest}
+							btnClasses="w-full"
+							size="xs"
+							startIcon={{
+								icon: faPlay,
+								classes: 'animate-none'
+							}}
+						>
+							{#if testIsLoading}
+								Running
+							{:else}
+								Test <Kbd class="ml-4 text-5xs -my-0.5">Ctrl+Enter</Kbd>
+							{/if}
+						</Button>
+					{/if}
+				</div>
+				<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
+					<Pane size={33}>
+						<div class="px-2">
+							<div class="break-words relative font-sans">
+								<SchemaForm compact {schema} bind:args bind:isValid />
+							</div>
+						</div>
+					</Pane>
+					<Pane size={67}>
+						<LogPanel
+							{path}
+							{lang}
+							previewJob={testJob}
+							{pastPreviews}
+							previewIsLoading={testIsLoading}
+							bind:lastSave
+						/>
+					</Pane>
+				</Splitpanes>
+			</div>
+		</Pane>
+	</Splitpanes>
+</SplitPanesWrapper>

package/dist/components/ScriptEditor.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+import Editor from './Editor.svelte';
+import type { Preview } from '../gen/models/Preview';
+declare const __propDef: {
+    props: {
+        schema?: Schema | undefined;
+        code: string;
+        path: string | undefined;
+        lang: Preview.language;
+        kind?: string | undefined;
+        initialArgs?: Record<string, any> | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
+        noSyncFromGithub?: boolean | undefined;
+        editor?: Editor | undefined;
+        inferSchema?: ((code: string, nlang?: 'go' | 'bash' | 'python3' | 'deno') => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptEditorProps = typeof __propDef.props;
+export type ScriptEditorEvents = typeof __propDef.events;
+export type ScriptEditorSlots = typeof __propDef.slots;
+export default class ScriptEditor extends SvelteComponentTyped<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
+    get inferSchema(): (code: string, nlang?: "deno" | "python3" | "go" | "bash" | undefined) => Promise<void>;
+}
+export {};

package/dist/components/ScriptSchema.svelte

@@ -0,0 +1,27 @@
+<script>import SchemaForm from './SchemaForm.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
+import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+export let schema;
+export function setSchema(newSchema) {
+    schema = newSchema;
+}
+</script>
+
+<div class="w-full">
+	<Tabs selected="ui">
+		<Tab value="ui">Arguments</Tab>
+		<Tab value="jsonschema">JSON Schema</Tab>
+		<svelte:fragment slot="content">
+			<TabContent value="ui">
+				<div class="mt-4" />
+				<SchemaForm {schema} editableSchema={true} />
+			</TabContent>
+			<TabContent value="jsonschema">
+				<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
+</div>

package/dist/components/ScriptSchema.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        setSchema?: ((newSchema: Schema) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptSchemaProps = typeof __propDef.props;
+export type ScriptSchemaEvents = typeof __propDef.events;
+export type ScriptSchemaSlots = typeof __propDef.slots;
+export default class ScriptSchema extends SvelteComponentTyped<ScriptSchemaProps, ScriptSchemaEvents, ScriptSchemaSlots> {
+    get setSchema(): (newSchema: Schema) => void;
+}
+export {};

package/dist/components/ShareModal.svelte

@@ -0,0 +1,157 @@
+<script>import TableCustom from './TableCustom.svelte';
+import { GranularAclService } from '../gen/services/GranularAclService';
+import { isOwner, sendUserToast } from '../utils';
+import { GroupService, UserService } from '../gen';
+import { createEventDispatcher } from 'svelte';
+import AutoComplete from 'simple-svelte-autocomplete';
+import { userStore, workspaceStore } from '../stores';
+import { Alert, Button, Drawer, ToggleButton, ToggleButtonGroup } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
+let kind;
+let path = '';
+let ownerKind = 'user';
+let owner = '';
+let newOwner = '';
+let write = false;
+let acls = [];
+let groups = [];
+let usernames = [];
+let drawer;
+$: newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/');
+let own = false;
+export async function openDrawer(newPath, kind_l) {
+    path = newPath;
+    kind = kind_l;
+    loadAcls();
+    loadGroups();
+    loadUsernames();
+    loadOwner();
+    drawer.openDrawer();
+}
+async function loadOwner() {
+    own = isOwner(path, $userStore, $workspaceStore);
+}
+async function loadAcls() {
+    acls = Object.entries(await GranularAclService.getGranularAcls({ workspace: $workspaceStore, path, kind }));
+}
+async function loadGroups() {
+    groups = await GroupService.listGroupNames({ workspace: $workspaceStore });
+}
+async function loadUsernames() {
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
+}
+async function deleteAcl(owner) {
+    try {
+        await GranularAclService.removeGranularAcls({
+            workspace: $workspaceStore,
+            path,
+            kind,
+            requestBody: { owner }
+        });
+        loadAcls();
+        dispatch('change', { path, kind });
+    }
+    catch (err) {
+        sendUserToast(err.toString(), true);
+    }
+}
+async function addAcl(owner, write) {
+    await GranularAclService.addGranularAcls({
+        workspace: $workspaceStore,
+        path,
+        kind,
+        requestBody: { owner, write }
+    });
+    loadAcls();
+    dispatch('change', { path, kind });
+}
+</script>
+
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Share {path}" on:close={drawer.closeDrawer}>
+		<div class="flex flex-col gap-6">
+			<h1>{path}</h1>
+			<h2
+				>Extra Permissions ({acls?.length ?? 0}) &nbsp; <Tooltip
+					>Items already have default permissions. If belonging to an user or group, that group or
+					user owns it and can write to it as well as modify its permisions and move it. Folders
+					have read/write that apply to the whole folder and are additive to the items permissions.</Tooltip
+				></h2
+			>
+			{#if !own}
+				<Alert type="warning" title="Not owner"
+					>Since you do not own this item, you cannot modify its permission</Alert
+				>
+			{/if}
+			<div>
+				{#if own}
+					<div class="flex flex-row flex-wrap gap-2 items-center">
+						<div>
+							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
+								<ToggleButton position="left" value="user" size="xs">User</ToggleButton>
+								<ToggleButton position="right" value="group" size="xs">Group</ToggleButton>
+							</ToggleButtonGroup>
+						</div>
+						{#key ownerKind}
+							<AutoComplete
+								items={ownerKind === 'user' ? usernames : groups}
+								bind:selectedItem={owner}
+							/>
+						{/key}
+						<Button size="sm" on:click={() => addAcl(newOwner, write)}>Add permission</Button>
+					</div>
+				{/if}
+				<TableCustom>
+					<tr slot="header-row">
+						<th>owner</th>
+						<th />
+						<th />
+					</tr>
+					<tbody slot="body">
+						{#each acls as [owner, write]}
+							<tr>
+								<td>{owner}</td>
+								<td
+									>{#if own}
+										<div>
+											<ToggleButtonGroup
+												selected={write ? 'writer' : 'viewer'}
+												on:selected={async (e) => {
+													const role = e.detail
+													if (role == 'writer') {
+														await addAcl(owner, true)
+													} else {
+														await addAcl(owner, false)
+													}
+													loadAcls()
+												}}
+											>
+												<ToggleButton position="left" value="viewer" size="xs">Viewer</ToggleButton>
+												<ToggleButton position="right" value="writer" size="xs">Writer</ToggleButton
+												>
+											</ToggleButtonGroup>
+										</div>
+									{:else}{write}{/if}</td
+								>
+								<td>
+									{#if own}
+										<Button
+											variant="border"
+											color="red"
+											size="xs"
+											on:click={() => deleteAcl(owner)}
+										>
+											Delete
+										</Button>
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</TableCustom>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/dist/components/SharedBadge.svelte

@@ -0,0 +1,62 @@
+<script>import { userStore } from '../stores';
+import { Users } from 'lucide-svelte';
+import Badge from './common/badge/Badge.svelte';
+import Popover from './Popover.svelte';
+export let extraPerms = {};
+export let canWrite;
+let kind = undefined;
+let reason = '';
+$: {
+    if ($userStore?.is_admin || $userStore?.is_super_admin) {
+        kind = undefined;
+    }
+    else {
+        let username = $userStore?.username ?? '';
+        let pgroups = $userStore?.pgroups ?? [];
+        let pusername = `u/${username}`;
+        let extraPermsKeys = Object.keys(extraPerms);
+        if (pusername in extraPermsKeys) {
+            if (extraPerms[pusername]) {
+                kind = 'write';
+            }
+            else {
+                kind = 'read';
+            }
+            reason = 'This item was shared to you personally';
+        }
+        else {
+            let writeGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
+            if (writeGroup) {
+                kind = 'write';
+                reason = `This item was write shared to the group ${writeGroup} which you are a member of`;
+            }
+            else {
+                let readGroup = pgroups.find((x) => extraPermsKeys.includes(x));
+                if (readGroup) {
+                    kind = 'read';
+                    reason = `This item was read-only shared to the group ${readGroup} which you are a member of`;
+                }
+                else {
+                    kind = undefined;
+                }
+            }
+        }
+        if (kind == 'read' && canWrite) {
+            kind = undefined;
+        }
+        if (kind == undefined && !canWrite) {
+            kind = 'read';
+            reason = '';
+        }
+    }
+}
+</script>
+
+{#if kind === 'read' || kind === 'write'}
+	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
+		<Popover notClickable>
+			<Users size={12} />
+			<span slot="text">{kind == 'read' ? 'Shared & read-only' : 'Read & Write'} {reason}</span>
+		</Popover>
+	</Badge>
+{/if}

package/dist/components/SimpleEditor.svelte

@@ -0,0 +1,176 @@
+<script>import { browser } from '$app/environment';
+import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
+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/yaml/yaml.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
+import 'monaco-editor/esm/vs/language/json/monaco.contribution';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import libStdContent from '../es5.d.ts.txt?raw';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
+meditor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+meditor.setTheme('myTheme');
+languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
+});
+languages.json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    allowComments: false,
+    schemas: [],
+    enableSchemaRequest: true
+});
+let divEl = null;
+let editor;
+let model;
+export let lang;
+export let code = '';
+export let hash = createHash();
+export let cmdEnterAction = undefined;
+export let formatAction = undefined;
+export let automaticLayout = true;
+export let extraLib = '';
+export let shouldBindKey = true;
+export let autoHeight = false;
+export let fixedOverflowWidgets = true;
+const dispatch = createEventDispatcher();
+const uri = `file:///${hash}.${langToExt(lang)}`;
+buildWorkerDefinition('../../../workers', import.meta.url, false);
+export function getCode() {
+    return editor?.getValue() ?? '';
+}
+export function insertAtCursor(code) {
+    if (editor) {
+        editor.trigger('keyboard', 'type', { text: code });
+    }
+}
+export function setCode(ncode) {
+    code = ncode;
+    if (editor) {
+        editor.setValue(ncode);
+    }
+}
+export function format() {
+    if (editor) {
+        code = getCode();
+        editor.getAction('editor.action.formatDocument')?.run();
+        if (formatAction) {
+            formatAction();
+            code = getCode();
+        }
+    }
+}
+export function focus() {
+    editor?.focus();
+}
+let width = 0;
+async function loadMonaco() {
+    model = meditor.createModel(code, lang, mUri.parse(uri));
+    model.updateOptions(updateOptions);
+    let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
+    editor = meditor.create(divEl, {
+        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+        overflowWidgetsDomNode: widgets
+    });
+    let timeoutModel = undefined;
+    editor.onDidChangeModelContent((event) => {
+        timeoutModel && clearTimeout(timeoutModel);
+        timeoutModel = setTimeout(() => {
+            code = getCode();
+            dispatch('change', { code });
+        }, 200);
+    });
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
+            code = getCode();
+            shouldBindKey && format && format();
+        });
+    });
+    if (autoHeight) {
+        const updateHeight = () => {
+            const contentHeight = Math.min(1000, editor.getContentHeight());
+            if (divEl) {
+                divEl.style.height = `${contentHeight}px`;
+            }
+            try {
+                editor.layout({ width, height: contentHeight });
+            }
+            finally {
+            }
+        };
+        editor.onDidContentSizeChange(updateHeight);
+        updateHeight();
+    }
+    editor.onDidFocusEditorText(() => {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
+            code = getCode();
+            shouldBindKey && format && format();
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
+            code = getCode();
+            shouldBindKey && cmdEnterAction && cmdEnterAction();
+        });
+        dispatch('focus');
+    });
+    editor.onDidBlurEditorText(() => {
+        code = getCode();
+    });
+    if (lang == 'javascript') {
+        const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
+        if (extraLib != '') {
+            languages.typescript.javascriptDefaults.setExtraLibs([
+                {
+                    content: extraLib,
+                    filePath: 'windmill.d.ts'
+                },
+                stdLib
+            ]);
+        }
+        else {
+            languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+        }
+    }
+}
+onMount(() => {
+    if (browser) {
+        loadMonaco();
+    }
+});
+onDestroy(() => {
+    try {
+        model && model.dispose();
+        editor && editor.dispose();
+    }
+    catch (err) { }
+});
+</script>
+
+<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
+
+<style>
+	.editor {
+		border-radius: 0.5rem;
+		padding: 0px;
+}
+
+	.small-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 26vh;
+	}
+
+	.few-lines-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 100px;
+	}</style>