windmill-components 1.60.4 → 1.75.0

package/components/TemplateEditor.svelte.d.ts

@@ -1 +1,205 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        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;
+                };
+            };
+        } | undefined;
+        language?: {
+            defaultToken: string;
+            tokenPostfix: string;
+            keywords: string[];
+            operators: string[];
+            symbols: RegExp;
+            escapes: RegExp;
+            digits: RegExp;
+            octaldigits: RegExp;
+            binarydigits: RegExp;
+            hexdigits: RegExp;
+            regexpctl: RegExp;
+            regexpesc: RegExp;
+            tokenizer: {
+                root: ((string | RegExp)[] | (RegExp | {
+                    token: string;
+                    next: string;
+                })[])[];
+                common: ((string | RegExp)[] | (RegExp | {
+                    cases: {
+                        '@keywords': string;
+                        '@default': string;
+                    };
+                })[] | {
+                    include: string;
+                } | (RegExp | {
+                    token: string;
+                    bracket: string;
+                    next: string;
+                })[] | (RegExp | {
+                    cases: {
+                        '@operators': string;
+                        '@default': string;
+                    };
+                })[])[];
+                whitespace: (string | RegExp)[][];
+                comment: (string | RegExp)[][];
+                jsdoc: (string | RegExp)[][];
+                regexp: ((string | RegExp)[] | (RegExp | (string | {
+                    token: string;
+                    next: string;
+                })[])[] | (RegExp | (string | {
+                    token: string;
+                    bracket: string;
+                    next: string;
+                })[])[])[];
+                regexrange: ((string | RegExp)[] | (RegExp | {
+                    token: string;
+                    next: string;
+                    bracket: string;
+                })[])[];
+                string_double: (string | RegExp)[][];
+                string_single: (string | RegExp)[][];
+                string_backtick: ((string | RegExp)[] | (RegExp | {
+                    token: string;
+                    next: string;
+                })[])[];
+                bracketCounting: ((string | RegExp)[] | {
+                    include: string;
+                })[];
+            };
+        } | undefined;
+        code?: string | undefined;
+        hash?: string | undefined;
+        automaticLayout?: boolean | undefined;
+        extraLib?: string | undefined;
+        autoHeight?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
+        fontSize?: number | undefined;
+        insertAtCursor?: ((code: string) => void) | undefined;
+        setCode?: ((ncode: string) => void) | undefined;
+        getCode?: (() => string) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TemplateEditorProps = typeof __propDef.props;
+export type TemplateEditorEvents = typeof __propDef.events;
+export type TemplateEditorSlots = typeof __propDef.slots;
+export default class TemplateEditor extends SvelteComponentTyped<TemplateEditorProps, TemplateEditorEvents, TemplateEditorSlots> {
+    get 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;
+            };
+        };
+    };
+    get language(): {
+        defaultToken: string;
+        tokenPostfix: string;
+        keywords: string[];
+        operators: string[];
+        symbols: RegExp;
+        escapes: RegExp;
+        digits: RegExp;
+        octaldigits: RegExp;
+        binarydigits: RegExp;
+        hexdigits: RegExp;
+        regexpctl: RegExp;
+        regexpesc: RegExp;
+        tokenizer: {
+            root: ((string | RegExp)[] | (RegExp | {
+                token: string;
+                next: string;
+            })[])[];
+            common: ((string | RegExp)[] | (RegExp | {
+                cases: {
+                    '@keywords': string;
+                    '@default': string;
+                };
+            })[] | {
+                include: string;
+            } | (RegExp | {
+                token: string;
+                bracket: string;
+                next: string;
+            })[] | (RegExp | {
+                cases: {
+                    '@operators': string;
+                    '@default': string;
+                };
+            })[])[];
+            whitespace: (string | RegExp)[][];
+            comment: (string | RegExp)[][];
+            jsdoc: (string | RegExp)[][];
+            regexp: ((string | RegExp)[] | (RegExp | (string | {
+                token: string;
+                next: string;
+            })[])[] | (RegExp | (string | {
+                token: string;
+                bracket: string;
+                next: string;
+            })[])[])[];
+            regexrange: ((string | RegExp)[] | (RegExp | {
+                token: string;
+                next: string;
+                bracket: string;
+            })[])[];
+            string_double: (string | RegExp)[][];
+            string_single: (string | RegExp)[][];
+            string_backtick: ((string | RegExp)[] | (RegExp | {
+                token: string;
+                next: string;
+            })[])[];
+            bracketCounting: ((string | RegExp)[] | {
+                include: string;
+            })[];
+        };
+    };
+    get insertAtCursor(): (code: string) => void;
+    get setCode(): (ncode: string) => void;
+    get getCode(): () => string;
+}
 export {};

package/components/TestJobLoader.svelte

@@ -80,11 +80,9 @@ export async function cancelJob() {
             console.error(err);
         }
     }
-    console.debug('cancelled');
 }
 export async function clearCurrentJob() {
     if (currentId) {
-        console.debug('clear');
         job = undefined;
         await cancelJob();
     }
@@ -115,6 +113,9 @@ async function loadTestJob(id) {
                 if (previewJobUpdates.new_logs) {
                     job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
                 }
+                if (previewJobUpdates.mem_peak) {
+                    job.mem_peak = previewJobUpdates.mem_peak;
+                }
                 if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
                     job = await JobService.getJob({ workspace: workspace, id });
                 }
@@ -148,16 +149,15 @@ async function loadTestJob(id) {
 }
 async function syncer(id) {
     if (currentId != id) {
-        console.debug('stop');
         return;
     }
     syncIteration++;
     await loadTestJob(id);
     let nextIteration = 50;
-    if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
+    if (syncIteration > ITERATIONS_BEFORE_SLOW_REFRESH) {
         nextIteration = 500;
     }
-    else if (syncIteration == ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
+    else if (syncIteration > ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
         nextIteration = 2000;
     }
     setTimeout(() => syncer(id), nextIteration);

package/components/Toggle.svelte

@@ -1,8 +1,10 @@
-<script>import { classNames } from '../utils';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 export let options = {};
 export let checked = false;
 export let disabled = false;
+export let textClass = '';
+export let textStyle = '';
 export let size = 'sm';
 const id = (Math.random() + 1).toString(36).substring(10);
 const dispatch = createEventDispatcher();
@@ -17,7 +19,13 @@ const dispatch = createEventDispatcher();
 	>
 		{#if Boolean(options?.left)}
 			<span
-				class="mr-2 text-sm font-medium duration-200 {disabled ? 'text-gray-600' : 'text-gray-900'}"
+				class={twMerge(
+					'ml-2 font-medium duration-200',
+					disabled ? 'text-gray-500' : 'text-gray-900',
+					size === 'xs' ? 'text-xs' : 'text-sm',
+					textClass
+				)}
+				style={textStyle}
 			>
 				{options?.left}
 			</span>
@@ -46,9 +54,13 @@ const dispatch = createEventDispatcher();
 		</div>
 		{#if Boolean(options?.right)}
 			<span
-				class="ml-2 text-sm font-medium duration-200
-				{disabled ? 'text-gray-500' : 'text-gray-900'} 
-				{size === 'xs' ? 'text-xs' : 'text-sm'}"
+				class={twMerge(
+					'ml-2 font-medium duration-200',
+					disabled ? 'text-gray-500' : 'text-gray-900',
+					size === 'xs' ? 'text-xs' : 'text-sm',
+					textClass
+				)}
+				style={textStyle}
 			>
 				{options?.right}
 			</span>

package/components/Toggle.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         } | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        textClass?: string | undefined;
+        textStyle?: string | undefined;
         size?: "xs" | "sm" | undefined;
     };
     events: {

package/components/Tooltip.svelte

@@ -10,7 +10,7 @@ export let placement = undefined;
 <Popover notClickable {placement} class={wrapperClass}>
 	<Icon
 		class="{light
-			? 'text-gray-300'
+			? 'text-gray-400'
 			: ' text-gray-500'} font-thin inline-block align-middle w-4 {$$props.class}"
 		data={faInfoCircle}
 		{scale}

package/components/UserSettings.svelte

@@ -1,6 +1,6 @@
 <script>import { usersWorkspaceStore } from '../stores';
 import { UserService, SettingsService } from '../gen';
-import { displayDate, sendUserToast, getToday, copyToClipboard, truncate } from '../utils';
+import { displayDate, sendUserToast, copyToClipboard } from '../utils';
 import { faClipboard, faPlus } from '@fortawesome/free-solid-svg-icons';
 import TableCustom from './TableCustom.svelte';
 import { Button } from './common';
@@ -16,6 +16,8 @@ let displayCreateToken = false;
 let login_type = 'none';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { page } from '$app/stores';
+import { goto } from '$app/navigation';
 let drawer;
 export function openDrawer() {
     loadVersion();
@@ -26,6 +28,14 @@ export function openDrawer() {
 export function toggleDrawer() {
     drawer?.toggleDrawer();
 }
+export function closeDrawer() {
+    drawer?.closeDrawer();
+    const index = $page.url.href.lastIndexOf('#');
+    if (index === -1)
+        return;
+    const hashRemoved = $page.url.href.slice(0, index);
+    goto(hashRemoved);
+}
 async function setPassword() {
     if (newPassword) {
         await UserService.setPassword({
@@ -69,7 +79,7 @@ async function deleteToken(tokenPrefix) {
 </script>
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title="User Settings" on:close={drawer.toggleDrawer}>
+	<DrawerContent title="User Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
 				<div class="text-xs pt-1 pb-2 text-gray-500 ">
@@ -150,7 +160,7 @@ async function deleteToken(tokenPrefix) {
 					>
 						<div>
 							Added token: <button on:click={() => copyToClipboard(newToken ?? '')} class="inline"
-								>{truncate(newToken ?? '', 10, '****')} <Icon data={faClipboard} />
+								>{newToken} <Icon data={faClipboard} />
 							</button>
 						</div>
 						<div class="pt-1 text-xs ml-2">

package/components/UserSettings.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         openDrawer?: (() => void) | undefined;
         toggleDrawer?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,5 +16,6 @@ export type UserSettingsSlots = typeof __propDef.slots;
 export default class UserSettings extends SvelteComponentTyped<UserSettingsProps, UserSettingsEvents, UserSettingsSlots> {
     get openDrawer(): () => void;
     get toggleDrawer(): () => void;
+    get closeDrawer(): () => void;
 }
 export {};

package/components/VariableEditor.svelte

@@ -131,7 +131,7 @@ let editor = undefined;
 						bind:error={pathError}
 						bind:path
 						{initialPath}
-						namePlaceholder="my_variable"
+						namePlaceholder="variable"
 						kind="variable"
 					/>
 				</div>

package/components/WhitelistIp.svelte

@@ -0,0 +1,23 @@
+<script>import { WorkerService } from '../gen';
+import { Alert } from './common';
+let ips = undefined;
+WorkerService.listWorkers({}).then((workers) => {
+    ips = [
+        ...new Set(workers
+            .filter((worker) => {
+            const date = new Date().getTime() - 300 * 60;
+            const ping_at = new Date(worker.ping_at).getTime();
+            return worker.ip != 'unretrievable IP' && ping_at > date;
+        })
+            .map((worker) => worker.ip))
+    ];
+});
+</script>
+
+{#if ips}
+	<div class="mt-2" />
+	<Alert size="xs" type="info" title="IPs to whitelist">
+		<span class="text-gray-600">If necessary, the workers IPs to whitelist are:</span>
+		{ips.join(', ')}
+	</Alert>
+{/if}

package/components/WhitelistIp.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WhitelistIpProps = typeof __propDef.props;
+export type WhitelistIpEvents = typeof __propDef.events;
+export type WhitelistIpSlots = typeof __propDef.slots;
+export default class WhitelistIp extends SvelteComponentTyped<WhitelistIpProps, WhitelistIpEvents, WhitelistIpSlots> {
+}
+export {};

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

@@ -1,9 +1,11 @@
 <script>import { Button } from '../../../common';
-import { Loader2 } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { loadIcon } from '../icon';
+import { twMerge } from 'tailwind-merge';
+import { goto } from '$app/navigation';
 export let id;
 export let componentInput;
 export let configuration;
@@ -12,16 +14,40 @@ export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
+export let preclickAction = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents, worldStore } = getContext('AppEditorContext');
+const { runnableComponents, worldStore, app } = getContext('AppViewerContext');
 let labelValue;
 let color;
 let size;
 let runnableComponent;
 let disabled = undefined;
+let fillContainer = undefined;
+let gotoUrl = undefined;
+let gotoNewTab = undefined;
 let isLoading = false;
 let ownClick = false;
+let triggerOnAppLoad = false;
+let beforeIcon = undefined;
+let afterIcon = undefined;
+let beforeIconComponent;
+let afterIconComponent;
+$: beforeIcon && handleBeforeIcon();
+$: afterIcon && handleAfterIcon();
+async function handleBeforeIcon() {
+    if (beforeIcon) {
+        beforeIconComponent = await loadIcon(beforeIcon);
+    }
+}
+async function handleAfterIcon() {
+    if (afterIcon) {
+        afterIconComponent = await loadIcon(afterIcon);
+    }
+}
 $: outputs = $worldStore?.outputsById[id];
+$: triggerOnAppLoad && runnableComponent?.runComponent();
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
@@ -38,54 +64,90 @@ let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
+async function handleClick(event) {
+    event?.stopPropagation();
+    event?.preventDefault();
+    if (preclickAction) {
+        await preclickAction();
+    }
+    ownClick = true;
+    if (!runnableComponent) {
+        if (gotoUrl) {
+            if (gotoNewTab) {
+                window.open(gotoUrl, '_blank');
+            }
+            else {
+                goto(gotoUrl);
+            }
+        }
+    }
+    else {
+        await runnableComponent?.runComponent();
+    }
+    if (recomputeIds) {
+        await Promise.all(recomputeIds.map((id) => $runnableComponents?.[id]?.()));
+    }
+}
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.goto} bind:value={gotoUrl} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.beforeIcon} bind:value={beforeIcon} />
+<InputValue {id} input={configuration.afterIcon} bind:value={afterIcon} />
+<InputValue {id} input={configuration.triggerOnAppLoad} bind:value={triggerOnAppLoad} />
+
 <InputValue
-	row={extraQueryParams['row']}
 	{id}
 	input={configuration.disabled}
 	bind:value={disabled}
 	bind:error={errors.disabled}
 />
+<InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />
+<InputValue {id} input={configuration.gotoNewTab} bind:value={gotoNewTab} />
 
 <RunnableWrapper
 	flexWrap
 	bind:runnableComponent
-	bind:componentInput
+	{componentInput}
 	{id}
 	{extraQueryParams}
 	autoRefresh={false}
+	goto={gotoUrl}
+	{gotoNewTab}
+	{render}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		{#if errorsMessage}
 			<div class="text-red-500 text-xs">{errorsMessage}</div>
 		{/if}
 		<Button
+			btnClasses={twMerge(
+				$app.css?.['buttoncomponent']?.['button']?.class,
+				customCss?.button.class,
+				fillContainer ? 'w-full h-full' : ''
+			)}
+			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button.style].join(';')}
 			{disabled}
 			on:pointerdown={(e) => {
 				e?.stopPropagation()
 				window.dispatchEvent(new Event('pointerup'))
 			}}
-			on:click={(e) => {
-				e?.stopPropagation()
-				e?.preventDefault()
-				ownClick = true
-				runnableComponent?.runComponent()
-
-				if (recomputeIds) {
-					recomputeIds.forEach((id) => {
-						$runnableComponents[id]?.()
-					})
-				}
-			}}
+			on:click={handleClick}
 			{size}
 			{color}
 			{loading}
 		>
-			{labelValue}
+			<span class="truncate inline-flex gap-2 items-center">
+				{#if beforeIcon && beforeIconComponent}
+					<svelte:component this={beforeIconComponent} size={14} />
+				{/if}
+				<div>{labelValue}</div>
+				{#if afterIcon && afterIconComponent}
+					<svelte:component this={afterIconComponent} size={14} />
+				{/if}
+			</span>
 		</Button>
 	</AlignWrapper>
 </RunnableWrapper>

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
@@ -10,6 +11,9 @@ declare const __propDef: {
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         noWFull?: boolean | undefined;
+        preclickAction?: (() => Promise<void>) | undefined;
+        customCss?: ComponentCustomCSS<'button'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/{form → buttons}/AppForm.svelte

@@ -2,6 +2,7 @@
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
@@ -11,15 +12,19 @@ export let configuration;
 export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents, worldStore } = getContext('AppEditorContext');
+const { app, runnableComponents, worldStore, stateId } = getContext('AppViewerContext');
 let labelValue = 'Default label';
 let color;
 let size;
 let runnableComponent;
+let goto = undefined;
 let isLoading = false;
 $: noInputs =
-    componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
+    $stateId != undefined &&
+        (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
 $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
@@ -29,25 +34,31 @@ $: outputs?.loading.subscribe({
         isLoading = value;
     }
 });
+$: css = concatCustomCss($app.css?.formcomponent, customCss);
 </script>
 
+<InputValue {id} input={configuration.goto} bind:value={goto} />
 <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
-	defaultUserInput
-	noMinH
+	{render}
 	bind:runnableComponent
-	bind:componentInput
+	{componentInput}
 	{id}
+	{goto}
 	{extraQueryParams}
 	autoRefresh={false}
 	forceSchemaDisplay={true}
 	runnableClass="!block"
+	runnableStyle={css?.container.style}
 >
 	<AlignWrapper {horizontalAlignment}>
-		<div class="flex flex-col gap-2 px-4 w-full">
+		<div
+			class="flex flex-col gap-2 px-4 w-full {css?.container?.class ?? ''}"
+			style={css?.container?.style ?? ''}
+		>
 			<div>
 				{#if noInputs}
 					<div class="text-gray-600 italic text-sm my-4">
@@ -65,7 +76,8 @@ $: outputs?.loading.subscribe({
 				{#if !noInputs}
 					<Button
 						loading={isLoading}
-						btnClasses="my-1"
+						btnClasses="my-1 {css?.button?.class ?? ''}"
+						style={css?.button?.style ?? ''}
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
 							window.dispatchEvent(new Event('pointerup'))