windmill-components 1.87.0 → 1.89.0

package/package/components/NumberTypeNarrowing.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        min: number | undefined;
+        max: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberTypeNarrowingProps = typeof __propDef.props;
+export type NumberTypeNarrowingEvents = typeof __propDef.events;
+export type NumberTypeNarrowingSlots = typeof __propDef.slots;
+export default class NumberTypeNarrowing extends SvelteComponentTyped<NumberTypeNarrowingProps, NumberTypeNarrowingEvents, NumberTypeNarrowingSlots> {
+}
+export {};

package/package/components/ObjectResourceInput.svelte

@@ -0,0 +1,36 @@
+<script>import ResourcePicker from './ResourcePicker.svelte';
+export let format;
+export let value;
+function isString(value) {
+    return typeof value === 'string' || value instanceof String;
+}
+let path = '';
+function resourceToValue() {
+    if (path) {
+        value = `$res:${path}`;
+    }
+    else {
+        value = undefined;
+    }
+}
+function isResource() {
+    return isString(value) && value.length >= '$res:'.length;
+}
+function valueToPath() {
+    if (isResource()) {
+        path = value.substr('$res:'.length);
+    }
+}
+$: value && valueToPath();
+</script>
+
+<div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
+	<ResourcePicker
+		on:change={(e) => {
+			path = e.detail
+			resourceToValue()
+		}}
+		bind:value={path}
+		resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
+	/>
+</div>

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        format: string;
+        value: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ObjectResourceInputProps = typeof __propDef.props;
+export type ObjectResourceInputEvents = typeof __propDef.events;
+export type ObjectResourceInputSlots = typeof __propDef.slots;
+export default class ObjectResourceInput extends SvelteComponentTyped<ObjectResourceInputProps, ObjectResourceInputEvents, ObjectResourceInputSlots> {
+}
+export {};

package/package/components/ObjectTypeNarrowing.svelte

@@ -0,0 +1,10 @@
+<script>import ResourceTypePicker from './ResourceTypePicker.svelte';
+export let format;
+let resource = format?.startsWith('resource-')
+    ? format.substring('resource-'.length)
+    : undefined;
+$: format = resource != undefined ? `resource-${resource}` : undefined;
+</script>
+
+<div class="mt-2" />
+<ResourceTypePicker bind:value={resource} nonePickable={true} />

package/package/components/ObjectTypeNarrowing.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        format: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ObjectTypeNarrowingProps = typeof __propDef.props;
+export type ObjectTypeNarrowingEvents = typeof __propDef.events;
+export type ObjectTypeNarrowingSlots = typeof __propDef.slots;
+export default class ObjectTypeNarrowing extends SvelteComponentTyped<ObjectTypeNarrowingProps, ObjectTypeNarrowingEvents, ObjectTypeNarrowingSlots> {
+}
+export {};

package/package/components/PageHeader.svelte

@@ -0,0 +1,29 @@
+<script>import Tooltip from './Tooltip.svelte';
+export let title;
+export let tooltip = '';
+export let primary = true;
+</script>
+
+<div class="flex flex-row flex-wrap justify-between mt-4 mb-2 min-h-[48px]">
+	{#if primary}
+		<span class="flex items-center space-x-2 mb-2">
+			<h1>{title}</h1>
+			{#if tooltip}
+				<Tooltip scale={0.9}>{tooltip}</Tooltip>
+			{/if}
+		</span>
+	{:else}
+		<span class="flex items-center space-x-2">
+			<h2>{title}</h2>
+			{#if tooltip}
+				<Tooltip>{tooltip}</Tooltip>
+			{/if}
+		</span>
+	{/if}
+
+	{#if $$slots.default}
+		<div class="my-2">
+			<slot />
+		</div>
+	{/if}
+</div>

package/package/components/PageHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        tooltip?: string | undefined;
+        primary?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PageHeaderProps = typeof __propDef.props;
+export type PageHeaderEvents = typeof __propDef.events;
+export type PageHeaderSlots = typeof __propDef.slots;
+export default class PageHeader extends SvelteComponentTyped<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
+}
+export {};

package/package/components/Password.svelte

@@ -0,0 +1,45 @@
+<script>// @ts-nocheck
+import { onMount } from 'svelte';
+export let password;
+export let placeholder = '******';
+export let disabled = false;
+onMount(() => {
+    const passwordToggle = document.querySelector('.js-password-toggle');
+    if (passwordToggle) {
+        passwordToggle.addEventListener('change', function () {
+            const password = document.querySelector('.js-password'), passwordLabel = document.querySelector('.js-password-label');
+            if (password.type === 'password') {
+                password.type = 'text';
+                passwordLabel.innerHTML = 'hide';
+            }
+            else {
+                password.type = 'password';
+                passwordLabel.innerHTML = 'show';
+            }
+            password.focus();
+        });
+    }
+    else {
+        throw Error('Password component is undefined');
+    }
+});
+</script>
+
+<div class="relative w-full">
+	<div class="absolute inset-y-0 right-0 flex items-center px-2">
+		<input class="hidden js-password-toggle" id="toggle" type="checkbox" />
+		<label
+			class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label"
+			for="toggle">show</label
+		>
+	</div>
+	<input
+		class="block w-full py-2 px-2 border rounded-md border-gray-300 shadow-sm; focus:ring focus:ring-indigo-100 focus:ring-opacity-50 text-sm js-password h-12"
+		id="password"
+		type="password"
+		bind:value={password}
+		autocomplete="off"
+		{placeholder}
+		{disabled}
+	/>
+</div>

package/package/components/Password.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        password: string;
+        placeholder?: string | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PasswordProps = typeof __propDef.props;
+export type PasswordEvents = typeof __propDef.events;
+export type PasswordSlots = typeof __propDef.slots;
+export default class Password extends SvelteComponentTyped<PasswordProps, PasswordEvents, PasswordSlots> {
+}
+export {};

package/package/components/Path.svelte

@@ -0,0 +1,373 @@
+<script context="module">"use strict";
+const lastMetaUsed = writable(undefined);
+</script>
+
+<script>import { pathToMeta } from '../common';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
+import { superadmin, userStore, workspaceStore } from '../stores';
+import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import { Icon } from 'svelte-awesome';
+import { writable } from 'svelte/store';
+import { Button, Drawer, DrawerContent } from './common';
+import Badge from './common/badge/Badge.svelte';
+import ToggleButton from './common/toggleButton/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton/ToggleButtonGroup.svelte';
+import FolderEditor from './FolderEditor.svelte';
+import { random_adj } from './random_positive_adjetive';
+import Required from './Required.svelte';
+import Tooltip from './Tooltip.svelte';
+let meta = undefined;
+export let namePlaceholder = '';
+export let initialPath;
+export let path = '';
+export let error = '';
+export let disabled = false;
+export let checkInitialPathExistence = false;
+export let kind;
+let inputP = undefined;
+const dispatch = createEventDispatcher();
+let folders = [];
+$: meta && onMetaChange();
+function onMetaChange() {
+    if (meta) {
+        path = metaToPath(meta);
+        validate(meta, path, kind);
+        $lastMetaUsed = {
+            ...meta,
+            name: ''
+        };
+    }
+}
+function metaToPath(meta) {
+    return [meta.ownerKind?.charAt(0) ?? '', meta.owner, meta.name].join('/');
+}
+export function focus() {
+    inputP?.focus();
+}
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        dispatch('enter');
+    }
+}
+export async function reset() {
+    if (path == '' || path == 'u//') {
+        if ($lastMetaUsed == undefined) {
+            meta = {
+                ownerKind: 'user',
+                name: random_adj() + '_' + namePlaceholder,
+                owner: ''
+            };
+            meta.owner = $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9]/g, '');
+        }
+        else {
+            meta = { ...$lastMetaUsed, name: random_adj() + '_' + namePlaceholder };
+        }
+        let newMeta = { ...meta };
+        while (await pathExists(metaToPath(newMeta), kind)) {
+            disabled = true;
+            error = 'finding an available name...';
+            newMeta.name = random_adj() + '_' + namePlaceholder;
+        }
+        error = '';
+        disabled = false;
+        meta = newMeta;
+        path = metaToPath(meta);
+    }
+    else {
+        meta = pathToMeta(path);
+    }
+}
+async function loadFolders() {
+    let initialFolders = [];
+    let initialFolder = '';
+    if (initialPath?.split('/')?.[0] == 'f') {
+        initialFolder = initialPath?.split('/')?.[1];
+        initialFolders.push({ name: initialFolder, write: true });
+    }
+    folders = initialFolders.concat((await FolderService.listFolderNames({
+        workspace: $workspaceStore
+    }))
+        .filter((x) => x != initialFolder)
+        .map((x) => ({
+        name: x,
+        write: ($userStore?.folders?.includes(x) == true ?? false) ||
+            ($userStore?.is_admin ?? false) ||
+            ($userStore?.is_super_admin ?? false)
+    })));
+}
+async function validate(meta, path, kind) {
+    error = '';
+    validateName(meta) && validatePath(path, kind);
+}
+let validateTimeout = undefined;
+async function validatePath(path, kind) {
+    if (validateTimeout) {
+        clearTimeout(validateTimeout);
+    }
+    validateTimeout = setTimeout(async () => {
+        if ((path == '' || checkInitialPathExistence || path != initialPath) &&
+            (await pathExists(path, kind))) {
+            error = 'path already used';
+        }
+        else if (meta && validateName(meta)) {
+            error = '';
+        }
+        validateTimeout = undefined;
+    }, 500);
+}
+async function pathExists(path, kind) {
+    if (kind == 'flow') {
+        return await FlowService.existsFlowByPath({ workspace: $workspaceStore, path: path });
+    }
+    else if (kind == 'script') {
+        return await ScriptService.existsScriptByPath({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
+    else if (kind == 'resource') {
+        return await ResourceService.existsResource({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
+    else if (kind == 'variable') {
+        return await VariableService.existsVariable({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
+    else if (kind == 'schedule') {
+        return await ScheduleService.existsSchedule({ workspace: $workspaceStore, path: path });
+    }
+    else if (kind == 'app') {
+        return await AppService.existsApp({ workspace: $workspaceStore, path: path });
+    }
+    else {
+        return false;
+    }
+}
+function validateName(meta) {
+    if (meta.name == undefined || meta.name == '') {
+        error = 'Choose a name';
+        return false;
+    }
+    else if (!/^[\w-]+(\/[\w-]+)*$/.test(meta.name)) {
+        error = 'This name is not valid';
+        return false;
+    }
+    else if (meta.owner == '' && meta.ownerKind == 'folder') {
+        error = 'Folder need to be chosen';
+        return false;
+    }
+    else if (meta.owner == '' && meta.ownerKind == 'group') {
+        error = 'Group need to be chosen';
+        return false;
+    }
+    else {
+        return true;
+    }
+}
+$: {
+    if ($workspaceStore && $userStore) {
+        loadFolders();
+        initPath();
+    }
+}
+function initPath() {
+    if (path != undefined && path != '') {
+        meta = pathToMeta(path);
+        return;
+    }
+    if (initialPath == undefined || initialPath == '') {
+        reset();
+    }
+    else {
+        meta = pathToMeta(initialPath);
+        onMetaChange();
+        path = initialPath;
+    }
+}
+let newFolder;
+let viewFolder;
+let newFolderName;
+let folderCreated = undefined;
+async function addFolder() {
+    await FolderService.createFolder({
+        workspace: $workspaceStore ?? '',
+        requestBody: { name: newFolderName }
+    });
+    folderCreated = newFolderName;
+    $userStore?.folders?.push(newFolderName);
+    loadFolders();
+    if (meta) {
+        meta.owner = newFolderName;
+    }
+}
+</script>
+
+<Drawer bind:this={newFolder}>
+	<DrawerContent
+		title="New Folder"
+		on:close={() => {
+			newFolder.closeDrawer()
+			folderCreated = undefined
+		}}
+	>
+		{#if !folderCreated}
+			<div class="flex flex-row">
+				<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
+				<Button
+					size="md"
+					startIcon={{ icon: faPlus }}
+					disabled={!newFolderName}
+					on:click={addFolder}
+				>
+					New&nbsp;folder
+				</Button>
+			</div>
+		{:else}
+			<FolderEditor name={folderCreated} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={viewFolder}>
+	<DrawerContent title="Folder {meta?.owner}" on:close={viewFolder.closeDrawer}>
+		<FolderEditor name={meta?.owner ?? ''} />
+	</DrawerContent>
+</Drawer>
+
+<div>
+	<div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 pb-0 mb-1">
+		{#if meta != undefined}
+			<div class="flex gap-4 shrink">
+				<!-- svelte-ignore a11y-label-has-associated-control -->
+				<label class="block">
+					<span class="text-gray-700 text-sm whitespace-nowrap">Owner</span>
+
+					<ToggleButtonGroup
+						class="mt-0.5"
+						bind:selected={meta.ownerKind}
+						on:selected={(e) => {
+							const kind = e.detail
+							if (meta) {
+								if (kind === 'folder') {
+									meta.owner = $userStore?.folders?.[0] ?? ''
+								} else if (kind === 'group') {
+									meta.owner = 'all'
+								} else {
+									meta.owner = $userStore?.username?.split('@')[0] ?? ''
+								}
+							}
+						}}
+					>
+						<ToggleButton light size="xs" value="user" position="left">User</ToggleButton>
+						<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
+						<ToggleButton light size="xs" value="folder" position="right">Folder</ToggleButton>
+					</ToggleButtonGroup>
+				</label>
+				{#if meta.ownerKind === 'user'}
+					<label class="block shrink min-w-0">
+						<span class="text-gray-700 text-sm">User</span>
+						<input
+							class="!w-36"
+							type="text"
+							bind:value={meta.owner}
+							placeholder={$userStore?.username ?? ''}
+							disabled={!($superadmin || ($userStore?.is_admin ?? false))}
+						/>
+					</label>
+				{:else if meta.ownerKind === 'folder'}
+					<label class="block grow w-48">
+						<span class="text-gray-700 text-sm"
+							>Folder <Tooltip
+								>Read and write permissions are given to groups and users at the folder level and
+								shared by all items inside the folder.</Tooltip
+							></span
+						>
+
+						<div class="flex flex-row items-center gap-1 w-full">
+							<select class="grow w-full" {disabled} bind:value={meta.owner}>
+								{#each folders as { name, write }}
+									<option disabled={!write}>{name}{write ? '' : ' (read-only)'}</option>
+								{/each}
+							</select>
+							<Button
+								title="View folder"
+								btnClasses="!p-1.5"
+								variant="border"
+								size="xs"
+								on:click={viewFolder.openDrawer}
+							>
+								<Icon scale={0.8} data={faEye} /></Button
+							>
+							<Button
+								title="New folder"
+								btnClasses="!p-1.5"
+								variant="border"
+								size="xs"
+								{disabled}
+								on:click={newFolder.openDrawer}
+							>
+								<Icon scale={0.8} data={faPlus} /></Button
+							></div
+						>
+					</label>
+				{/if}
+			</div>
+			<label class="block grow w-full max-w-md">
+				<span class="text-gray-700 text-sm">
+					Name
+					<Required required={true} />
+				</span>
+				<!-- svelte-ignore a11y-autofocus -->
+				<input
+					{disabled}
+					type="text"
+					id="path"
+					autofocus
+					bind:this={inputP}
+					autocomplete="off"
+					on:keyup={handleKeyUp}
+					bind:value={meta.name}
+					placeholder={namePlaceholder}
+					class={error === ''
+						? ''
+						: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+				/>
+			</label>
+		{/if}
+	</div>
+
+	<div class="flex flex-col w-full mt-4">
+		<div class="flex justify-start w-full">
+			<Badge
+				color="gray"
+				class="center-center !bg-gray-300 !text-gray-600 !w-[70px] !h-[24px] rounded-r-none"
+			>
+				Full path
+			</Badge>
+			<input
+				type="text"
+				readonly
+				value={path}
+				size={path?.length || 50}
+				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+				on:focus={({ currentTarget }) => {
+					currentTarget.select()
+				}}
+			/>
+			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+		</div>
+		<div class="text-red-600 text-2xs">{error}</div>
+	</div>
+</div>
+
+<style>
+	input:disabled {
+		background: rgba(200, 200, 200, 0.267);
+	}</style>

package/package/components/Path.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        namePlaceholder?: string | undefined;
+        initialPath: string;
+        path?: string | undefined;
+        error?: string | undefined;
+        disabled?: boolean | undefined;
+        checkInitialPathExistence?: boolean | undefined;
+        kind: "flow" | "script" | "resource" | "app" | "schedule" | "variable";
+        focus?: (() => void) | undefined;
+        reset?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        enter: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PathProps = typeof __propDef.props;
+export type PathEvents = typeof __propDef.events;
+export type PathSlots = typeof __propDef.slots;
+export default class Path extends SvelteComponentTyped<PathProps, PathEvents, PathSlots> {
+    get focus(): () => void;
+    get reset(): () => Promise<void>;
+}
+export {};

package/package/components/Popover.model.d.ts

@@ -0,0 +1,4 @@
+declare const SIDE: readonly ["auto", "top", "bottom", "left", "right"];
+declare const ALIGN: readonly ["start", "end"];
+export type PopoverPlacement = `${typeof SIDE[number]}` | `${typeof SIDE[number]}-${typeof ALIGN[number]}`;
+export {};

package/package/components/Popover.model.js

@@ -0,0 +1,3 @@
+const SIDE = ['auto', 'top', 'bottom', 'left', 'right'];
+const ALIGN = ['start', 'end'];
+export {};

package/package/components/Popover.svelte

@@ -0,0 +1,53 @@
+<script>import { createPopperActions } from 'svelte-popperjs';
+export let placement = 'auto';
+export let notClickable = false;
+export let popupClass = '';
+export let disablePopup = false;
+export let disappearTimeout = 100;
+const [popperRef, popperContent] = createPopperActions({ placement });
+const popperOptions = {
+    placement: 'bottom-end',
+    strategy: 'fixed',
+    modifiers: [
+        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'arrow',
+            options: {
+                padding: 10
+            }
+        }
+    ]
+};
+let showTooltip = false;
+let timeout;
+function open() {
+    clearTimeout(timeout);
+    showTooltip = true;
+}
+function close() {
+    timeout = setTimeout(() => (showTooltip = false), disappearTimeout);
+}
+</script>
+
+{#if notClickable}
+	<span use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
+		<slot />
+	</span>
+{:else}
+	<button use:popperRef on:mouseenter={open} on:mouseleave={close} on:click class={$$props.class}>
+		<slot />
+	</button>
+{/if}
+{#if showTooltip && !disablePopup}
+	<div
+		use:popperContent={popperOptions}
+		on:mouseenter={open}
+		on:mouseleave={close}
+		class="z-50 py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800
+		whitespace-normal text-left {popupClass}"
+	>
+		<div class="max-w-sm">
+			<slot name="text" />
+		</div>
+	</div>
+{/if}