windmill-components 1.87.0 → 1.89.0

package/package/assets/app.css

@@ -0,0 +1,72 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	@font-face {
+		font-family: 'Inter';
+		src: url('/Inter-Variable.ttf');
+		font-weight: 100 900;
+		font-display: swap;
+	}
+
+	.splitpanes--vertical > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.splitpanes--horizontal > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.monaco-workbench > .notifications-toasts.visible {
+		display: none !important;
+	}
+
+	.svelte-select-list {
+		z-index: 1000 !important;
+	}
+	.nowrap pre code.hljs {
+		whitespace: normal !important;
+	}
+
+	pre code.hljs {
+		overflow: visible !important;
+	}
+
+	svelte-virtual-list-row {
+		overflow: visible !important;
+	}
+
+	svelte-virtual-list-contents > * + * {
+		border-top-width: 1px !important;
+		border-bottom-width: 0px !important;
+	}
+
+	.monaco-editor textarea:focus {
+		box-shadow: none !important;
+	}
+
+	.Template-editor span.mtk20 {
+		color: black !important;
+	}
+
+	::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(155, 155, 155, 0.5);
+		border: transparent;
+	}
+}
+
+@layer components {
+	/* Flow graph viewer -> Svelvet library internal class overwrite */
+	.Node {
+		display: flex !important;
+	}
+}

package/package/common.d.ts

@@ -0,0 +1,38 @@
+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 SchemaProperty {
+    type: string | undefined;
+    description: string;
+    pattern?: string;
+    default?: any;
+    enum?: string[];
+    contentEncoding?: 'base64' | 'binary';
+    format?: string;
+    items?: {
+        type?: 'string' | 'number' | 'bytes' | 'object';
+        contentEncoding?: 'base64';
+    };
+    properties?: {
+        [name: string]: SchemaProperty;
+    };
+}
+export type Schema = {
+    $schema: string | undefined;
+    type: string;
+    properties: {
+        [name: string]: SchemaProperty;
+    };
+    required: string[];
+};
+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): Meta;
+export {};

package/package/common.js

@@ -0,0 +1,26 @@
+export function pathToMeta(path) {
+    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: 'user',
+            owner: '',
+            name: ''
+        };
+    }
+    return {
+        ownerKind,
+        owner: splitted[1],
+        name: splitted.slice(2).join('/')
+    };
+}

package/package/components/AddUser.svelte

@@ -0,0 +1,66 @@
+<script>import { sendUserToast } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { workspaceStore } from '../stores';
+import { WorkspaceService } from '../gen';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
+let email;
+let username;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        addUser();
+    }
+}
+async function addUser() {
+    await WorkspaceService.addUser({
+        workspace: $workspaceStore,
+        requestBody: {
+            email,
+            username,
+            is_admin: selected == 'admin',
+            operator: selected == 'operator'
+        }
+    });
+    sendUserToast(`Added ${email}`);
+    dispatch('new');
+}
+let selected = 'author';
+</script>
+
+<div class="flex flex-row">
+	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} class="mr-4" />
+	<input
+		type="text"
+		on:keyup={handleKeyUp}
+		placeholder="username"
+		bind:value={username}
+		class="mr-4"
+	/>
+	<ToggleButtonGroup bind:selected>
+		<ToggleButton position="left" value="operator" size="sm"
+			>Operator <Tooltip
+				>An operator can only execute and view scripts/flows/apps from your workspace, and only
+				those that he has visibility on</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="center" value="author" size="sm"
+			>Author <Tooltip
+				>An Author can execute and view scripts/flows/apps, but he can also create new ones</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="right" value="admin" size="sm">Admin</ToggleButton>
+	</ToggleButtonGroup>
+	<Button
+		variant="contained"
+		color="blue"
+		size="sm"
+		btnClasses="!ml-8"
+		on:click={addUser}
+		disabled={email === undefined}
+	>
+		Add
+	</Button>
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } 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 SvelteComponentTyped<AddUserProps, AddUserEvents, AddUserSlots> {
+}
+export {};

package/package/components/ApiConnectForm.svelte

@@ -0,0 +1,117 @@
+<script>import { JobService, Preview, ResourceService } from '../gen';
+import { workspaceStore } from '../stores';
+import { emptySchema, emptyString, sendUserToast } from '../utils';
+import { Loader2 } from 'lucide-svelte';
+import Button from './common/button/Button.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
+import Toggle from './Toggle.svelte';
+export let resource_type;
+export let args = {};
+export let password;
+export let isValid = true;
+let schema = emptySchema();
+let notFound = false;
+async function loadSchema() {
+    rawCode = '{}';
+    viewJsonSchema = false;
+    try {
+        const rt = await ResourceService.getResourceType({
+            workspace: $workspaceStore,
+            path: resource_type
+        });
+        schema = rt.schema;
+        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();
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+let loading = false;
+async function testConnection() {
+    loading = true;
+    const job = await JobService.runScriptPreview({
+        workspace: $workspaceStore,
+        requestBody: {
+            language: 'deno',
+            content: `
+import { Client } from 'https://deno.land/x/postgres/mod.ts'
+export async function main(args: any) {
+	const client = new Client("postgres://" + args.user + ":" + args.password + "@" + args.host + ":" + args.port + "/" + args.dbname + "?sslmode=" + args.sslmode)
+	await client.connect()
+	return 'Connection successful'
+}
+				`,
+            args: {
+                args
+            }
+        }
+    });
+    await new Promise((r) => setTimeout(r, 3000));
+    loading = false;
+    const testResult = await JobService.getCompletedJob({
+        workspace: $workspaceStore,
+        id: job
+    });
+    if (testResult) {
+        sendUserToast(testResult.success ? testResult.result : testResult.result?.['error']?.['message'], !testResult.success);
+    }
+}
+</script>
+
+{#if !notFound}
+	<div class="w-full flex gap-4 flex-row-reverse">
+		<Toggle
+			on:change={(e) => switchTab(e.detail)}
+			options={{
+				right: 'As JSON'
+			}}
+		/>
+		{#if resource_type == 'postgresql'}
+			<Button size="sm" on:click={testConnection}
+				>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
+			>
+		{/if}
+	</div>
+{:else}
+	<p class="italic text-gray-500 text-xs mb-4"
+		>No corresponding resource type found in your workspace for {resource_type}. 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}
+	<SimpleEditor autoHeight lang="json" bind:code={rawCode} fixedOverflowWidgets={false} />
+{:else}
+	<SchemaForm noDelete {password} isValid {schema} bind:args />
+{/if}

package/package/components/ApiConnectForm.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        resource_type: string;
+        args?: Record<string, any> | any;
+        password: string;
+        isValid?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ApiConnectFormProps = typeof __propDef.props;
+export type ApiConnectFormEvents = typeof __propDef.events;
+export type ApiConnectFormSlots = typeof __propDef.slots;
+export default class ApiConnectForm extends SvelteComponentTyped<ApiConnectFormProps, ApiConnectFormEvents, ApiConnectFormSlots> {
+}
+export {};