windmill-components 1.85.0 → 1.87.0

package/components/ScriptEditor.svelte

@@ -1,215 +0,0 @@
-<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;
-let websocketAlive = { pyright: false, black: false, deno: false, go: false };
-let width = 1200;
-// Internal state
-let editor;
-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
-    });
-}
-async function inferSchema(code) {
-    schema = schema ?? emptySchema();
-    let isDefault = [];
-    Object.entries(args).forEach(([k, v]) => {
-        if (schema.properties[k].default == v) {
-            isDefault.push(k);
-        }
-    });
-    try {
-        await inferArgs(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();
-});
-</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}
-		/>
-		{#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"
-				on:mouseleave={() => {
-					inferSchema(code)
-				}}
-			>
-				<Editor
-					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}
-				/>
-			</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="animate-[spin_5s_linear_infinite] mr-2 text-white"
-								height="20px"
-								width="20px"
-							/>
-							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/components/ScriptEditor.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Schema } from '../common';
-import type { Preview } from '../gen/models/Preview';
-declare const __propDef: {
-    props: {
-        schema?: Schema | undefined;
-        code: string;
-        path: string | undefined;
-        lang: Preview.language;
-        kind?: 'script' | 'trigger' | 'approval' | undefined;
-        initialArgs?: Record<string, any> | undefined;
-        fixedOverflowWidgets?: boolean | undefined;
-        noSyncFromGithub?: boolean | 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> {
-}
-export {};

package/components/ScriptSchema.svelte

@@ -1,46 +0,0 @@
-<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';
-import { Alert } from './common';
-import autosize from 'svelte-autosize';
-export let schema;
-export let description;
-export function setSchema(newSchema) {
-    schema = newSchema;
-}
-</script>
-
-<div class="w-full">
-	<h1 class="my-4">Advanced</h1>
-
-	<Tabs selected="ui">
-		<Tab value="ui">Description & Arguments refinement</Tab>
-		<Tab value="jsonschema">JSON Schema</Tab>
-		<svelte:fragment slot="content">
-			<TabContent value="ui">
-				<h2 class="border-b pb-1 mt-6 mb-4">Description</h2>
-				<textarea
-					use:autosize
-					bind:value={description}
-					placeholder="Edit description"
-					class="text-sm"
-				/>
-
-				<h2 class="border-b pb-1 mb-4 mt-8">Arguments</h2>
-				<Alert type="info" title="Synchronized with main signature">
-					Argument names, being required or not, and default values are derived from the main
-					signature of step 2 and cannot be edited directly. Change the main signature to edit them.
-				</Alert>
-				<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/components/ScriptSchema.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Schema } from '../common';
-declare const __propDef: {
-    props: {
-        schema: Schema;
-        description: string | undefined;
-        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/components/ShareModal.svelte

@@ -1,157 +0,0 @@
-<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();
-    await loadOwner();
-    drawer.openDrawer();
-}
-async function loadOwner() {
-    own = await 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/components/SharedBadge.svelte

@@ -1,57 +0,0 @@
-<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 = '';
-$: {
-    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/components/SimpleEditor.svelte

@@ -1,170 +0,0 @@
-<script>import { browser } from '$app/environment';
-import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
-import { editor as meditor, KeyCode, KeyMod, languages, Uri as mUri } from 'monaco-editor';
-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>