windmill-components 1.472.1 → 1.472.2

package/package/autosize.js

@@ -0,0 +1,76 @@
+export const action = (node) => {
+    /* Constants */
+    const update = new Event('update');
+    /* Functions */
+    const init = () => {
+        addStyles();
+        observeElement();
+        addEventListeners();
+        setInitialHeight();
+    };
+    const dispatchUpdateEvent = () => {
+        node.dispatchEvent(update);
+    };
+    const setInitialHeight = () => {
+        let height = 0;
+        if (node.value) {
+            height = Math.max(node.scrollHeight ?? 0, 30) + 2;
+        }
+        else {
+            if (node.placeholder) {
+                node.value = node.placeholder;
+                height = Math.max(node.scrollHeight ?? 0, 30) + 2;
+                node.value = '';
+            }
+            else {
+                node.value = '|';
+                node.style.height = '0px';
+                height = Math.max(node.scrollHeight ?? 0, 30) + 2;
+                node.value = '';
+            }
+        }
+        node.style.height = height + 'px';
+    };
+    const setHeight = () => {
+        node.style.height = 'auto';
+        node.style.height = Math.max(node.scrollHeight ?? 0, 30) + 2 + 'px';
+    };
+    const addStyles = () => {
+        node.style.boxSizing = 'border-box';
+    };
+    const observeElement = () => {
+        let elementPrototype = Object.getPrototypeOf(node);
+        let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, 'value');
+        Object.defineProperty(node, 'value', {
+            get: function () {
+                return descriptor?.get?.apply(this, arguments);
+            },
+            set: function () {
+                descriptor?.set?.apply(this, arguments);
+                dispatchUpdateEvent();
+            }
+        });
+    };
+    const addEventListeners = () => {
+        node.addEventListener('input', (e) => {
+            dispatchUpdateEvent();
+        });
+        node.addEventListener('update', setHeight);
+    };
+    const removeEventListeners = () => {
+        node.removeEventListener('input', dispatchUpdateEvent);
+        node.removeEventListener('update', setHeight);
+    };
+    if (node.tagName.toLowerCase() !== 'textarea') {
+        throw new Error('svelte-textarea-auto-height can only be used on textarea elements.');
+    }
+    else {
+        init();
+        return {
+            destroy() {
+                removeEventListeners();
+            }
+        };
+    }
+};
+export default action;

package/package/base.d.ts

@@ -0,0 +1 @@
+export declare let base: string;

package/package/base.js

@@ -0,0 +1 @@
+export let base = import.meta.env.VITE_BASE_URL ?? '';

package/package/cloud.d.ts

@@ -0,0 +1 @@
+export declare function isCloudHosted(): boolean;

package/package/cloud.js

@@ -0,0 +1,4 @@
+import { BROWSER } from 'esm-env';
+export function isCloudHosted() {
+    return BROWSER && window.location.hostname == 'app.windmill.dev';
+}

package/package/common.d.ts

@@ -0,0 +1,101 @@
+import type { Script } from './gen';
+export type OwnerKind = 'group' | 'user' | 'folder';
+export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
+export type SupportedLanguage = Script['language'];
+export interface PropertyDisplayInfo {
+    property: SchemaProperty;
+    name: string;
+    isRequired: boolean;
+    path: string[];
+    index: number;
+    propertiesNumber: number;
+}
+export type EnumType = string[] | undefined;
+export interface SchemaProperty {
+    type: string | undefined;
+    description?: string;
+    pattern?: string;
+    default?: any;
+    enum?: EnumType;
+    contentEncoding?: 'base64' | 'binary';
+    format?: string;
+    items?: {
+        type?: 'string' | 'number' | 'bytes' | 'object' | 'resource';
+        contentEncoding?: 'base64';
+        enum?: string[];
+        resourceType?: string;
+        properties?: {
+            [name: string]: SchemaProperty;
+        };
+    };
+    min?: number;
+    max?: number;
+    currency?: string;
+    currencyLocale?: string;
+    multiselect?: boolean;
+    customErrorMessage?: string;
+    properties?: {
+        [name: string]: SchemaProperty;
+    };
+    required?: string[];
+    showExpr?: string;
+    password?: boolean;
+    order?: string[];
+    nullable?: boolean;
+    dateFormat?: string;
+    title?: string;
+    placeholder?: string;
+    oneOf?: SchemaProperty[];
+    originalType?: string;
+}
+export interface ModalSchemaProperty {
+    selectedType?: string;
+    description: string;
+    name: string;
+    required: boolean;
+    min?: number;
+    max?: number;
+    currency?: string;
+    currencyLocale?: string;
+    multiselect?: boolean;
+    format?: string;
+    pattern?: string;
+    enum_?: EnumType;
+    default?: any;
+    items?: {
+        type?: 'string' | 'number';
+        enum?: string[];
+    };
+    contentEncoding?: 'base64' | 'binary';
+    schema?: Schema;
+    customErrorMessage?: string;
+    showExpr?: string;
+    password?: boolean;
+    nullable?: boolean;
+    dateFormat?: string;
+    title?: string;
+    placeholder?: string;
+    oneOf?: SchemaProperty[];
+}
+export declare function modalToSchema(schema: ModalSchemaProperty): SchemaProperty;
+export type Schema = {
+    $schema: string | undefined;
+    type: string;
+    properties: {
+        [name: string]: SchemaProperty;
+    };
+    order?: string[];
+    required: string[];
+};
+export declare function mergeSchema(schema: Schema | Record<string, any>, enum_payload?: Record<string, any>): Schema | Record<string, any>;
+export type Meta = {
+    ownerKind: OwnerKind;
+    owner: string;
+    name: string;
+};
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
+/** An inclusive range of integer numbers */
+export type IntRange<F extends number, T extends number> = F | Exclude<Enumerate<T>, Enumerate<F>> | T;
+export declare function pathToMeta(path: string, hideUser: boolean): Meta;
+export declare function prettyLanguage(lang: string): string;
+export {};

package/package/common.js

@@ -0,0 +1,74 @@
+export function modalToSchema(schema) {
+    return {
+        type: schema.selectedType,
+        description: schema.description,
+        pattern: schema.pattern,
+        default: schema.default,
+        enum: schema.enum_,
+        items: schema.items,
+        contentEncoding: schema.contentEncoding,
+        format: schema.format,
+        customErrorMessage: schema.customErrorMessage,
+        properties: schema.schema?.properties,
+        required: schema.schema?.required,
+        min: schema.min,
+        max: schema.max,
+        currency: schema.currency,
+        currencyLocale: schema.currencyLocale,
+        multiselect: schema.multiselect,
+        showExpr: schema.showExpr,
+        password: schema.password,
+        nullable: schema.nullable,
+        dateFormat: schema.dateFormat,
+        title: schema.title,
+        placeholder: schema.placeholder,
+        oneOf: schema.oneOf
+    };
+}
+export function mergeSchema(schema, enum_payload = {}) {
+    if (!schema.properties || !enum_payload) {
+        return schema;
+    }
+    let new_schema = JSON.parse(JSON.stringify(schema));
+    for (let [key, value] of Object.entries(new_schema.properties ?? {})) {
+        if (enum_payload[key]) {
+            value.enum = enum_payload[key];
+            value['disableCreate'] = true;
+        }
+    }
+    return new_schema;
+}
+export function pathToMeta(path, hideUser) {
+    const splitted = path.split('/');
+    let ownerKind;
+    if (splitted[0] == 'g') {
+        ownerKind = 'group';
+    }
+    else if (splitted[0] == 'f') {
+        ownerKind = 'folder';
+    }
+    else if (splitted[0] == 'u') {
+        ownerKind = 'user';
+    }
+    else {
+        console.error('Not recognized owner:' + splitted[0]);
+        return {
+            ownerKind: hideUser ? 'folder' : 'user',
+            owner: '',
+            name: ''
+        };
+    }
+    return {
+        ownerKind,
+        owner: splitted[1],
+        name: splitted.slice(2).join('/')
+    };
+}
+export function prettyLanguage(lang) {
+    switch (lang) {
+        case 'nativets':
+            return 'Native TypeScript';
+        default:
+            return lang.charAt(0).toUpperCase() + lang.slice(1);
+    }
+}

package/package/components/AddUser.svelte

@@ -0,0 +1,120 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { globalEmailInvite, superadmin, workspaceStore } from '../stores';
+import { SettingService, UserService, WorkspaceService } from '../gen';
+import { Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
+import { sendUserToast } from '../toast';
+import { isCloudHosted } from '../cloud';
+import { goto } from '../navigation';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import { UserPlus } from 'lucide-svelte';
+const dispatch = createEventDispatcher();
+let email;
+let username;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        addUser();
+    }
+}
+let automateUsernameCreation = false;
+async function getAutomateUsernameCreationSetting() {
+    automateUsernameCreation =
+        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+}
+getAutomateUsernameCreationSetting();
+async function addUser() {
+    await WorkspaceService.addUser({
+        workspace: $workspaceStore,
+        requestBody: {
+            email,
+            username: automateUsernameCreation ? undefined : username,
+            is_admin: selected == 'admin',
+            operator: selected == 'operator'
+        }
+    });
+    sendUserToast(`Added ${email}`);
+    if (!(await UserService.existsEmail({ email }))) {
+        let isSuperadmin = $superadmin;
+        if (!isCloudHosted()) {
+            const emailCopy = email;
+            sendUserToast(`User ${email} is not registered yet on the instance. ${!isSuperadmin
+                ? `If not using SSO, ask an administrator to add ${email} to the instance`
+                : ''}`, true, isSuperadmin
+                ? [
+                    {
+                        label: 'Add user to the instance',
+                        callback: () => {
+                            $globalEmailInvite = emailCopy;
+                            goto('#superadmin-settings');
+                        }
+                    }
+                ]
+                : []);
+        }
+    }
+    dispatch('new');
+}
+let selected = 'developer';
+</script>
+
+<Popover placement="bottom-end">
+	<svelte:fragment slot="trigger">
+		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
+			Add new user
+		</Button>
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="flex flex-col w-72 p-4">
+			<span class="text-sm mb-2 leading-6 font-semibold">Add a new user</span>
+
+			<span class="text-xs mb-1 leading-6">Email</span>
+			<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+
+			{#if !automateUsernameCreation}
+				<span class="text-xs mb-1 pt-2 leading-6">Username</span>
+				<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
+			{/if}
+
+			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
+			<ToggleButtonGroup bind:selected class="mb-4" let:item>
+				<ToggleButton
+					value="operator"
+					label="Operator"
+					tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+					{item}
+				/>
+				<ToggleButton
+					value="developer"
+					label="Developer"
+					tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+					{item}
+				/>
+				<ToggleButton
+					value="admin"
+					label="Admin"
+					tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+					{item}
+				/>
+			</ToggleButtonGroup>
+			<Button
+				variant="contained"
+				color="blue"
+				size="sm"
+				on:click={() => {
+					addUser().then(() => {
+						// @ts-ignore
+						email = undefined
+						// @ts-ignore
+						username = undefined
+					})
+				}}
+				disabled={email === undefined || (!automateUsernameCreation && username === undefined)}
+			>
+				Add
+			</Button>
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/AddUser.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        new: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddUserProps = typeof __propDef.props;
+export type AddUserEvents = typeof __propDef.events;
+export type AddUserSlots = typeof __propDef.slots;
+export default class AddUser extends SvelteComponent<AddUserProps, AddUserEvents, AddUserSlots> {
+}
+export {};

package/package/components/AllFlowLogs.svelte

@@ -0,0 +1,31 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import JobLogs from './JobLogs.svelte';
+import { workspaceStore } from '../stores';
+import { base } from '../base';
+export let states;
+</script>
+
+<div class="flex flex-col">
+	{#if states != undefined}
+		{#each Object.entries($states ?? {}) as [id, status] (id)}
+			<div class="pb-12"
+				><h1 class="mb-2">Step {id}</h1>
+				{#each Object.entries(status.byJob ?? {}) as jobS}
+					{@const job = jobS[0]}
+					<div>
+						<a
+							class="text-xs"
+							rel="noreferrer"
+							target="_blank"
+							href="{base}/run/{job}?workspace={$workspaceStore}"
+						>
+							{job}
+						</a><JobLogs jobId={job} /></div
+					>
+				{/each}
+			</div>
+		{/each}
+	{:else}
+		<Loader2 size={14} class="animate-spin " />
+	{/if}
+</div>

package/package/components/AllFlowLogs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { DurationStatus } from './graph';
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        states: Writable<Record<string, DurationStatus>> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AllFlowLogsProps = typeof __propDef.props;
+export type AllFlowLogsEvents = typeof __propDef.events;
+export type AllFlowLogsSlots = typeof __propDef.slots;
+export default class AllFlowLogs extends SvelteComponent<AllFlowLogsProps, AllFlowLogsEvents, AllFlowLogsSlots> {
+}
+export {};

package/package/components/ApiConnectForm.svelte

@@ -0,0 +1,224 @@
+<script>import { OauthService } from '../gen';
+import { workspaceStore } from '../stores';
+import { base } from '../base';
+import { emptySchema, emptyString } from '../utils';
+import SchemaForm from './SchemaForm.svelte';
+import Toggle from './Toggle.svelte';
+import TestConnection from './TestConnection.svelte';
+import SupabaseIcon from './icons/SupabaseIcon.svelte';
+import Popover from './meltComponents/Popover.svelte';
+import Button from './common/button/Button.svelte';
+import { Loader2 } from 'lucide-svelte';
+export let resourceType;
+export let resourceTypeInfo;
+export let args = {};
+export let linkedSecret = undefined;
+export let isValid = true;
+export let linkedSecretCandidates = undefined;
+let schema = emptySchema();
+let notFound = false;
+let supabaseWizard = false;
+async function isSupabaseAvailable() {
+    try {
+        supabaseWizard =
+            ((await OauthService.listOauthConnects()) ?? {})['supabase_wizard'] != undefined;
+    }
+    catch (error) { }
+}
+async function loadSchema() {
+    if (!resourceTypeInfo)
+        return;
+    rawCode = '{}';
+    viewJsonSchema = false;
+    try {
+        schema = resourceTypeInfo.schema;
+        schema.order = schema.order ?? Object.keys(schema.properties).sort();
+        notFound = false;
+    }
+    catch (e) {
+        notFound = true;
+    }
+}
+$: $workspaceStore && loadSchema();
+$: notFound && rawCode && parseJson();
+function parseJson() {
+    try {
+        args = JSON.parse(rawCode);
+        error = '';
+        isValid = true;
+    }
+    catch (e) {
+        isValid = false;
+        error = e.message;
+    }
+}
+let error = '';
+let rawCode = '';
+let viewJsonSchema = false;
+$: rawCode && parseJson();
+$: textFileContent && parseTextFileContent();
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+        if (resourceTypeInfo?.format_extension) {
+            textFileContent = args.content;
+        }
+    }
+}
+$: resourceType == 'postgresql' && isSupabaseAvailable();
+let connectionString = '';
+let validConnectionString = true;
+function parseConnectionString(close) {
+    const regex = /postgres(?:ql)?:\/\/(?<user>[^:@]+)(?::(?<password>[^@]+))?@(?<host>[^:\/?]+)(?::(?<port>\d+))?\/(?<dbname>[^\?]+)?(?:\?.*sslmode=(?<sslmode>[^&]+))?/;
+    const match = connectionString.match(regex);
+    if (match) {
+        validConnectionString = true;
+        const { user, password, host, port, dbname, sslmode } = match.groups;
+        rawCode = JSON.stringify({
+            ...args,
+            user,
+            password: password || args?.password,
+            host,
+            port: (port ? Number(port) : undefined) || args?.port,
+            dbname: dbname || args?.dbname,
+            sslmode: sslmode || args?.sslmode
+        }, null, 2);
+        rawCodeEditor?.setCode(rawCode);
+        close(null);
+    }
+    else {
+        validConnectionString = false;
+    }
+}
+let rawCodeEditor = undefined;
+let textFileContent;
+function parseTextFileContent() {
+    args = {
+        content: textFileContent
+    };
+}
+</script>
+
+{#if !notFound}
+	<div class="w-full flex gap-4 flex-row-reverse items-center">
+		<Toggle
+			on:change={(e) => switchTab(e.detail)}
+			options={{
+				right: 'As JSON'
+			}}
+		/>
+		<TestConnection {resourceType} {args} />
+		{#if resourceType == 'postgresql'}
+			<Popover
+				floatingConfig={{
+					placement: 'bottom'
+				}}
+			>
+				<svelte:fragment slot="trigger">
+					<Button
+						spacingSize="sm"
+						size="xs"
+						btnClasses="h-8"
+						color="light"
+						variant="border"
+						nonCaptureEvent
+					>
+						From connection string
+					</Button>
+				</svelte:fragment>
+				<svelte:fragment slot="content" let:close>
+					<div class="block text-primary p-4">
+						<div class="w-[550px] flex flex-col items-start gap-1">
+							<div class="flex flex-row gap-1 w-full">
+								<input
+									type="text"
+									bind:value={connectionString}
+									placeholder="postgres://user:password@host:5432/dbname?sslmode=disable"
+								/>
+								<Button
+									size="xs"
+									color="blue"
+									buttonType="button"
+									on:click={() => {
+										parseConnectionString(close)
+									}}
+									disabled={connectionString.length <= 0}
+								>
+									Apply
+								</Button>
+							</div>
+							{#if !validConnectionString}
+								<p class="text-red-500 text-xs">Could not parse connection string</p>
+							{/if}
+						</div>
+					</div>
+				</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if resourceType == 'postgresql' && supabaseWizard}
+			<a
+				target="_blank"
+				href="{base}/api/oauth/connect/supabase_wizard"
+				class="border rounded-lg flex flex-row gap-2 items-center text-xs px-3 py-1.5 h-8 bg-[#F1F3F5] hover:bg-[#E6E8EB] dark:bg-[#1C1C1C] dark:hover:bg-black"
+			>
+				<SupabaseIcon height="16px" width="16px" />
+				<div class="text-[#11181C] dark:text-[#EDEDED] font-semibold">Connect Supabase</div>
+			</a>
+		{/if}
+	</div>
+{:else}
+	<p class="italic text-tertiary text-xs mb-4"
+		>No corresponding resource type found in your workspace for {resourceType}. Define the value in
+		JSON directly</p
+	>
+{/if}
+{#if notFound || viewJsonSchema}
+	{#if !emptyString(error)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
+			>{error}</span
+		>{:else}<div class="py-2" />{/if}
+	<div class="h-full w-full border p-1 rounded">
+		{#await import('./SimpleEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:this={rawCodeEditor}
+				autoHeight
+				lang="json"
+				bind:code={rawCode}
+				fixedOverflowWidgets={false}
+			/>
+		{/await}
+	</div>
+{:else if resourceTypeInfo?.format_extension}
+	<h5 class="mt-4 inline-flex items-center gap-4">
+		File content ({resourceTypeInfo.format_extension})
+	</h5>
+	<div class="py-2" />
+	<div class="h-full w-full border p-1 rounded">
+		{#await import('./SimpleEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:this={rawCodeEditor}
+				autoHeight
+				lang={resourceTypeInfo.format_extension}
+				bind:code={textFileContent}
+				fixedOverflowWidgets={false}
+			/>
+		{/await}
+	</div>
+{:else}
+	<SchemaForm
+		onlyMaskPassword
+		noDelete
+		{linkedSecretCandidates}
+		bind:linkedSecret
+		isValid
+		{schema}
+		bind:args
+	/>
+{/if}