windmill-components 1.87.0 → 1.89.0

package/package/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>

package/package/components/SimpleEditor.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponentTyped } from "svelte";
+import 'monaco-editor/esm/vs/editor/edcore.main';
+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';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        lang: string;
+        code?: string | undefined;
+        hash?: string | undefined;
+        cmdEnterAction?: (() => void) | undefined;
+        formatAction?: (() => void) | undefined;
+        automaticLayout?: boolean | undefined;
+        extraLib?: string | undefined;
+        shouldBindKey?: boolean | undefined;
+        autoHeight?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
+        getCode?: (() => string) | undefined;
+        insertAtCursor?: ((code: string) => void) | undefined;
+        setCode?: ((ncode: string) => void) | undefined;
+        format?: (() => void) | undefined;
+        focus?: (() => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SimpleEditorProps = typeof __propDef.props;
+export type SimpleEditorEvents = typeof __propDef.events;
+export type SimpleEditorSlots = typeof __propDef.slots;
+export default class SimpleEditor extends SvelteComponentTyped<SimpleEditorProps, SimpleEditorEvents, SimpleEditorSlots> {
+    get getCode(): () => string;
+    get insertAtCursor(): (code: string) => void;
+    get setCode(): (ncode: string) => void;
+    get format(): () => void;
+    get focus(): () => void;
+}
+export {};

package/package/components/Slider.svelte

@@ -0,0 +1,19 @@
+<script>import { ChevronDown, ChevronUp } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+import Button from './common/button/Button.svelte';
+import Tooltip from './Tooltip.svelte';
+export let text;
+export let tooltip = undefined;
+export let view = false;
+</script>
+
+<Button color="light" on:click={() => (view = !view)} variant="border"
+	>{text}
+	{#if tooltip}
+		<Tooltip wrapperClass="mx-1">{tooltip}</Tooltip>
+	{/if}
+	{#if !view}<ChevronDown />{:else}<ChevronUp />{/if}</Button
+>
+{#if view}
+	<div class="my-4 px-2" transition:slide|local><slot /></div>
+{/if}

package/package/components/Slider.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        tooltip?: string | undefined;
+        view?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};

package/package/components/Star.svelte

@@ -0,0 +1,49 @@
+<script>import { FavoriteService } from '../gen';
+import { starStore } from '../stores';
+import { sendUserToast } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { Star, StarOff } from 'lucide-svelte';
+export let path;
+export let kind;
+export let starred = false;
+export let workspace_id;
+let buttonHover = false;
+async function onClick() {
+    buttonHover = false;
+    if (starred) {
+        await FavoriteService.unstar({
+            workspace: workspace_id,
+            requestBody: { path, favorite_kind: kind }
+        });
+        sendUserToast('Unstarred');
+        $starStore = $starStore + 1;
+    }
+    else {
+        await FavoriteService.star({
+            workspace: workspace_id,
+            requestBody: { path, favorite_kind: kind }
+        });
+        sendUserToast('Marked as favorite, it will appear first');
+        $starStore = $starStore + 1;
+    }
+    dispatch('starred', !starred);
+}
+const dispatch = createEventDispatcher();
+</script>
+
+<button
+	on:click|preventDefault={onClick}
+	on:mouseenter={() => (buttonHover = true)}
+	on:mouseleave={() => (buttonHover = false)}
+	class="p-2"
+>
+	{#if starred}
+		{#if buttonHover}
+			<StarOff size={18} fill="currentcolor" />
+		{:else}
+			<Star size={18} fill="currentcolor" />
+		{/if}
+	{:else}
+		<Star size={18} fill={buttonHover ? 'currentcolor' : 'none'} />
+	{/if}
+</button>

package/package/components/Star.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+        kind: 'flow' | 'app' | 'script';
+        starred?: boolean | undefined;
+        workspace_id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StarProps = typeof __propDef.props;
+export type StarEvents = typeof __propDef.events;
+export type StarSlots = typeof __propDef.slots;
+export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
+}
+export {};

package/package/components/StringTypeNarrowing.svelte

@@ -0,0 +1,122 @@
+<script>import RadioButton from './RadioButton.svelte';
+import ResourceTypePicker from './ResourceTypePicker.svelte';
+import { Button } from './common';
+export let pattern;
+export let enum_;
+export let format;
+export let contentEncoding;
+let kind = computeKind();
+let patternStr = pattern ?? '';
+let resource;
+const FORMATS = [
+    'email',
+    'hostname',
+    'uri',
+    'uuid',
+    'ipv4',
+    'yaml',
+    'sql'
+    // 'time',
+    // 'date',
+    // 'duration',
+    // 'ipv6',
+    // 'jsonpointer'
+];
+$: format =
+    kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
+$: pattern = patternStr == '' ? undefined : patternStr;
+$: contentEncoding = kind == 'base64' ? 'base64' : undefined;
+function add() {
+    enum_ = enum_ ? enum_.concat('') : [''];
+}
+function remove(item) {
+    enum_ = (enum_ || []).filter((el) => el !== item);
+    if (enum_.length == 0) {
+        enum_ = undefined;
+    }
+}
+function computeKind() {
+    if (enum_ != undefined) {
+        return 'enum';
+    }
+    if (contentEncoding == 'base64') {
+        return 'base64';
+    }
+    if (pattern != undefined) {
+        return 'pattern';
+    }
+    if (format != undefined) {
+        if (format.startsWith('resource')) {
+            return 'resource';
+        }
+        return 'format';
+    }
+    return 'none';
+}
+</script>
+
+<RadioButton
+	label="Kind"
+	options={[
+		['None', 'none'],
+		['File (base64)', 'base64'],
+		['Enum', 'enum'],
+		['Format', 'format'],
+		['Pattern', 'pattern']
+	]}
+	bind:value={kind}
+/>
+<div class="my-2" />
+
+{#if kind == 'pattern'}
+	<label for="input" class="mb-2 text-gray-700 text-xs">
+		Pattern (Regex)
+		<div class="flex flex-row">
+			<input
+				id="input"
+				type="text"
+				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
+				bind:value={patternStr}
+			/>
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				btnClasses="mx-2 mb-1"
+				on:click={() => {
+					patternStr = ''
+				}}
+			>
+				clear
+			</Button>
+		</div>
+	</label>
+{:else if kind == 'enum'}
+	<label for="input" class="mb-2 text-gray-700 text-xs">
+		Enums
+		<div class="flex flex-col gap-1">
+			{#each enum_ || [] as e}
+				<div class="flex flex-row max-w-md">
+					<input id="input" type="text" bind:value={e} />
+					<Button size="sm" btnClasses="ml-6" on:click={() => remove(e)}>-</Button>
+				</div>
+			{/each}
+		</div>
+		<div class="flex flex-row my-1">
+			<Button size="sm" on:click={add}>+</Button>
+			<Button variant="border" size="sm" btnClasses="ml-2" on:click={() => (enum_ = undefined)}>
+				Clear
+			</Button>
+		</div>
+	</label>
+{:else if kind == 'resource'}
+	<div class="mt-1" />
+	<ResourceTypePicker bind:value={resource} />
+{:else if kind == 'format'}
+	<select class="mt-1" bind:value={format}>
+		<option value={undefined} />
+		{#each FORMATS as f}
+			<option value={f}>{f}</option>
+		{/each}
+	</select>
+{/if}

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        pattern: string | undefined;
+        enum_: string[] | undefined;
+        format: string | undefined;
+        contentEncoding: 'base64' | 'binary' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StringTypeNarrowingProps = typeof __propDef.props;
+export type StringTypeNarrowingEvents = typeof __propDef.events;
+export type StringTypeNarrowingSlots = typeof __propDef.slots;
+export default class StringTypeNarrowing extends SvelteComponentTyped<StringTypeNarrowingProps, StringTypeNarrowingEvents, StringTypeNarrowingSlots> {
+}
+export {};

package/package/components/SuperadminSettings.svelte

@@ -0,0 +1,116 @@
+<script>import { UserService, SettingsService, GlobalUserInfo } from '../gen';
+import TableCustom from './TableCustom.svelte';
+import PageHeader from './PageHeader.svelte';
+import InviteGlobalUser from './InviteGlobalUser.svelte';
+import { Badge, Drawer, DrawerContent } from './common';
+import { sendUserToast } from '../utils';
+import SearchItems from './SearchItems.svelte';
+import { page } from '$app/stores';
+import { goto } from '$app/navigation';
+let drawer;
+let filter = '';
+export function openDrawer() {
+    loadVersion();
+    listUsers();
+    drawer?.openDrawer?.();
+}
+export function toggleDrawer() {
+    drawer?.toggleDrawer?.();
+}
+export function closeDrawer() {
+    drawer?.closeDrawer();
+    const index = $page.url.href.lastIndexOf('#');
+    const href = $page.url.href;
+    const hashRemoved = index === -1 ? href : href.slice(0, index);
+    goto(hashRemoved);
+}
+let version;
+let users = [];
+let filteredUsers = [];
+async function loadVersion() {
+    version = await SettingsService.backendVersion();
+}
+async function listUsers() {
+    users = await UserService.listUsersAsSuperAdmin({ perPage: 100000 });
+}
+</script>
+
+<SearchItems
+	{filter}
+	items={users}
+	bind:filteredItems={filteredUsers}
+	f={(x) => x.email + ' ' + x.name + ' ' + x.company}
+/>
+
+<Drawer bind:this={drawer} on:open={listUsers} size="900px">
+	<DrawerContent overflow_y={false} title="Superadmin Settings" on:close={closeDrawer}>
+		<div class="flex flex-col h-full">
+			<div>
+				<div class="text-xs pt-1 text-gray-500 ">
+					Windmill {version}
+				</div>
+
+				<PageHeader title="All global users" primary={false} />
+
+				<div class="pb-1" />
+				<InviteGlobalUser on:new={listUsers} />
+				<div class="pb-1" />
+
+				<input placeholder="Search users" bind:value={filter} class="input mt-1" />
+			</div>
+			<div class="mt-2 overflow-auto">
+				<TableCustom>
+					<tr slot="header-row" class="sticky top-0 bg-white border-b">
+						<th>email</th>
+						<th>auth</th>
+						<th>name</th>
+						<th>company</th>
+						<th />
+						<th />
+					</tr>
+					<tbody slot="body" class="overflow-y-auto h-full max-h-full">
+						{#if filteredUsers && users}
+							{#each filteredUsers as { email, super_admin, login_type, name, company } (email)}
+								<tr class="border">
+									<td>{email}</td>
+									<td>{login_type}</td>
+									<td><span class="break-words">{name ?? ''}</span></td>
+									<td><span class="break-words">{company ?? ''}</span></td>
+									<td
+										>{#if super_admin}<Badge>Superadmin</Badge>{/if}</td
+									>
+									<td>
+										<div class="flex flex-row gap-x-1">
+											<button
+												class="text-blue-500"
+												on:click={async () => {
+													await UserService.globalUserUpdate({
+														email,
+														requestBody: {
+															is_super_admin: !super_admin
+														}
+													})
+													sendUserToast('User updated')
+													listUsers()
+												}}>{super_admin ? 'non-superadmin' : 'superadmin'}</button
+											>
+											|
+											<button
+												class="text-red-500"
+												on:click={async () => {
+													await UserService.globalUserDelete({ email })
+													sendUserToast(`User ${email} removed`)
+													listUsers()
+												}}>remove</button
+											>
+										</div>
+									</td>
+								</tr>
+							{/each}
+						{/if}
+					</tbody>
+				</TableCustom>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/SuperadminSettings.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: (() => void) | undefined;
+        toggleDrawer?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SuperadminSettingsProps = typeof __propDef.props;
+export type SuperadminSettingsEvents = typeof __propDef.events;
+export type SuperadminSettingsSlots = typeof __propDef.slots;
+export default class SuperadminSettings extends SvelteComponentTyped<SuperadminSettingsProps, SuperadminSettingsEvents, SuperadminSettingsSlots> {
+    get openDrawer(): () => void;
+    get toggleDrawer(): () => void;
+    get closeDrawer(): () => void;
+}
+export {};

package/package/components/TableCustom.svelte

@@ -0,0 +1,37 @@
+<script>import { createEventDispatcher } from 'svelte';
+export let paginated = false;
+export let currentPage = 1;
+export let showNext = true;
+const dispatch = createEventDispatcher();
+</script>
+
+<!-- A custom table 
+- the first slot should be a <tr>, containing th elements
+- the second slot should be a <tbody>, containing th elements
+-->
+<div class="flex flex-col {$$props.class} min-w-full">
+	<div class="inline-block min-w-full py-2 align-middle">
+		<table class="table-custom min-w-full table-auto divide-y divide-gray-300">
+			<thead>
+				<slot name="header-row" />
+			</thead>
+			<slot name="body" />
+		</table>
+	</div>
+	{#if paginated}
+		<div class="sticky flex flex-row-reverse text-gray-500 mb-6">
+			<button
+				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
+				on:click={() => dispatch('next')}
+			>
+				Next
+			</button>
+			<button
+				class="mx-2 drop-shadow-md {currentPage === 1 ? 'hidden' : ''}"
+				on:click={() => dispatch('previous')}
+			>
+				Previous
+			</button>
+		</div>
+	{/if}
+</div>

package/package/components/TableCustom.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        paginated?: boolean | undefined;
+        currentPage?: number | undefined;
+        showNext?: boolean | undefined;
+    };
+    events: {
+        next: CustomEvent<any>;
+        previous: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'header-row': {};
+        body: {};
+    };
+};
+export type TableCustomProps = typeof __propDef.props;
+export type TableCustomEvents = typeof __propDef.events;
+export type TableCustomSlots = typeof __propDef.slots;
+export default class TableCustom extends SvelteComponentTyped<TableCustomProps, TableCustomEvents, TableCustomSlots> {
+}
+export {};