windmill-components 1.87.0 → 1.89.1

package/package/components/ScriptPicker.svelte

@@ -0,0 +1,113 @@
+<script>import { ScriptService, FlowService, Script } from '../gen';
+import { hubScripts, workspaceStore } from '../stores';
+import { createEventDispatcher } from 'svelte';
+import Select from 'svelte-select';
+import { getScriptByPath } from '../utils';
+import RadioButton from './RadioButton.svelte';
+import { Button, Drawer, DrawerContent } from './common';
+import HighlightCode from './HighlightCode.svelte';
+import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
+export let initialPath = undefined;
+export let scriptPath = undefined;
+export let allowFlow = false;
+export let allowHub = false;
+export let itemKind = allowHub ? 'hub' : 'script';
+export let kind = Script.kind.SCRIPT;
+export let disabled = false;
+let items = [];
+let drawerViewer;
+let drawerFlowViewer;
+let code = '';
+let lang;
+let options = [['Script', 'script']];
+allowHub && options.unshift(['Hub', 'hub']);
+allowFlow && options.push(['Flow', 'flow']);
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    if (itemKind == 'flow') {
+        items = (await FlowService.listFlows({ workspace: $workspaceStore })).map((flow) => ({
+            value: flow.path,
+            label: `${flow.path}${flow.summary ? ` | ${flow.summary}` : ''}`
+        }));
+    }
+    else if (itemKind == 'script') {
+        items = (await ScriptService.listScripts({ workspace: $workspaceStore, kind })).map((script) => ({
+            value: script.path,
+            label: `${script.path}${script.summary ? ` | ${script.summary}` : ''}`
+        }));
+    }
+    else {
+        items =
+            $hubScripts?.map((x) => ({
+                value: x.path,
+                label: `${x.path}${x.summary ? ` | ${x.summary}` : ''}`
+            })) ?? [];
+    }
+}
+$: itemKind && $workspaceStore && loadItems();
+</script>
+
+<Drawer bind:this={drawerViewer} size="900px">
+	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>
+		<HighlightCode {code} language={lang} />
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={drawerFlowViewer} size="900px">
+	<DrawerContent title="Flow {scriptPath}" on:close={drawerFlowViewer.closeDrawer}>
+		<FlowPathViewer path={scriptPath ?? ''} />
+	</DrawerContent>
+</Drawer>
+
+<div class="flex flex-row  items-center gap-4 w-full">
+	{#if options.length > 1}
+		<div class="w-80 mt-1">
+			<RadioButton {disabled} bind:value={itemKind} {options} />
+		</div>
+	{/if}
+
+	{#if disabled}
+		<input type="text" value={scriptPath} disabled />
+	{:else}
+		<Select
+			value={items.find((x) => x.value == initialPath)}
+			class="grow"
+			on:change={() => {
+				dispatch('select', { path: scriptPath })
+			}}
+			bind:justValue={scriptPath}
+			{items}
+			placeholder="Pick a {itemKind}"
+			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		/>
+	{/if}
+
+	{#if scriptPath !== undefined && scriptPath !== ''}
+		{#if itemKind == 'flow'}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					drawerFlowViewer.openDrawer()
+				}}
+			>
+				Show flow
+			</Button>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					const { language, content } = await getScriptByPath(scriptPath ?? '')
+					code = content
+					lang = language
+					drawerViewer.openDrawer()
+				}}
+			>
+				Show code
+			</Button>
+		{/if}
+	{/if}
+</div>

package/package/components/ScriptPicker.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { Script } from '../gen';
+declare const __propDef: {
+    props: {
+        initialPath?: string | undefined;
+        scriptPath?: string | undefined;
+        allowFlow?: boolean | undefined;
+        allowHub?: boolean | undefined;
+        itemKind?: "flow" | "script" | "hub" | undefined;
+        kind?: Script.kind | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptPickerProps = typeof __propDef.props;
+export type ScriptPickerEvents = typeof __propDef.events;
+export type ScriptPickerSlots = typeof __propDef.slots;
+export default class ScriptPicker extends SvelteComponentTyped<ScriptPickerProps, ScriptPickerEvents, ScriptPickerSlots> {
+}
+export {};

package/package/components/ScriptSchema.svelte

@@ -0,0 +1,27 @@
+<script>import SchemaForm from './SchemaForm.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
+import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+export let schema;
+export function setSchema(newSchema) {
+    schema = newSchema;
+}
+</script>
+
+<div class="w-full">
+	<Tabs selected="ui">
+		<Tab value="ui">Arguments</Tab>
+		<Tab value="jsonschema">JSON Schema</Tab>
+		<svelte:fragment slot="content">
+			<TabContent value="ui">
+				<div class="mt-4" />
+				<SchemaForm {schema} editableSchema={true} />
+			</TabContent>
+			<TabContent value="jsonschema">
+				<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
+</div>

package/package/components/ScriptSchema.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        setSchema?: ((newSchema: Schema) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptSchemaProps = typeof __propDef.props;
+export type ScriptSchemaEvents = typeof __propDef.events;
+export type ScriptSchemaSlots = typeof __propDef.slots;
+export default class ScriptSchema extends SvelteComponentTyped<ScriptSchemaProps, ScriptSchemaEvents, ScriptSchemaSlots> {
+    get setSchema(): (newSchema: Schema) => void;
+}
+export {};

package/package/components/SearchItems.svelte

@@ -0,0 +1,29 @@
+<script>import uFuzzy from '@leeoniya/ufuzzy';
+export let filter = '';
+export let items;
+export let f;
+export let filteredItems;
+export let opts = {};
+let uf = new uFuzzy(opts);
+$: plaintextItems = items?.map((item) => f(item)) ?? [];
+$: plaintextItems && filter != undefined && setTimeout(() => filterItems(), 0);
+function filterItems() {
+    if (items == undefined || filter.length == 0) {
+        filteredItems = items;
+        return;
+    }
+    // pre-filter
+    let idxs = uf.filter(plaintextItems, filter) ?? [];
+    let info = uf.info(idxs, plaintextItems, filter);
+    let order = uf.sort(info, plaintextItems, filter);
+    let result = [];
+    for (let i = 0; i < order.length; i++) {
+        let infoIdx = order[i];
+        result.push({
+            ...items[info.idx[infoIdx]],
+            marked: uFuzzy.highlight(plaintextItems[info.idx[infoIdx]], info.ranges[infoIdx])
+        });
+    }
+    filteredItems = result;
+}
+</script>

package/package/components/SearchItems.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import uFuzzy from '@leeoniya/ufuzzy';
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+        items: any[] | undefined;
+        f: (item: any) => string;
+        filteredItems: (any & {
+            marked: string;
+        })[] | undefined;
+        opts?: uFuzzy.Options | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SearchItemsProps = typeof __propDef.props;
+export type SearchItemsEvents = typeof __propDef.events;
+export type SearchItemsSlots = typeof __propDef.slots;
+export default class SearchItems extends SvelteComponentTyped<SearchItemsProps, SearchItemsEvents, SearchItemsSlots> {
+}
+export {};

package/package/components/SettingSection.svelte

@@ -0,0 +1,44 @@
+<script>import { ChevronDown } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+import Tooltip from './Tooltip.svelte';
+export let title;
+export let tooltip = '';
+export let element = 'h2';
+export let accordion = false;
+let showContent = !accordion;
+</script>
+
+<div class="border-b [&:has(button:hover)]:border-gray-400 duration-200 pb-1 mt-8 mb-2">
+	{#if accordion}
+		<button
+			class="flex w-full justify-start items-center"
+			on:click={() => (showContent = !showContent)}
+		>
+			<span class="rounded-full hover:bg-gray-100 focus:bg-gray-100 p-1 mr-1">
+				<ChevronDown size={22} class="rotate-0 duration-300 {showContent ? '!-rotate-180' : ''}" />
+			</span>
+			<svelte:element this={element}>
+				{title}
+				{#if tooltip}
+					<Tooltip scale={0.9} class="mb-0.5">
+						{tooltip}
+					</Tooltip>
+				{/if}
+			</svelte:element>
+		</button>
+	{:else}
+		<svelte:element this={element}>
+			{title}
+			{#if tooltip}
+				<Tooltip scale={0.9} class="mb-0.5">
+					{tooltip}
+				</Tooltip>
+			{/if}
+		</svelte:element>
+	{/if}
+</div>
+{#if showContent}
+	<div transition:slide|local={{ duration: 300 }}>
+		<slot />
+	</div>
+{/if}

package/package/components/SettingSection.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        tooltip?: string | undefined;
+        element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        accordion?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SettingSectionProps = typeof __propDef.props;
+export type SettingSectionEvents = typeof __propDef.events;
+export type SettingSectionSlots = typeof __propDef.slots;
+export default class SettingSection extends SvelteComponentTyped<SettingSectionProps, SettingSectionEvents, SettingSectionSlots> {
+}
+export {};

package/package/components/ShareModal.svelte

@@ -0,0 +1,157 @@
+<script>import TableCustom from './TableCustom.svelte';
+import { GranularAclService } from '../gen/services/GranularAclService';
+import { isOwner, sendUserToast } from '../utils';
+import { GroupService, UserService } from '../gen';
+import { createEventDispatcher } from 'svelte';
+import AutoComplete from 'simple-svelte-autocomplete';
+import { userStore, workspaceStore } from '../stores';
+import { Alert, Button, Drawer, ToggleButton, ToggleButtonGroup } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
+let kind;
+let path = '';
+let ownerKind = 'user';
+let owner = '';
+let newOwner = '';
+let write = false;
+let acls = [];
+let groups = [];
+let usernames = [];
+let drawer;
+$: newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/');
+let own = false;
+export async function openDrawer(newPath, kind_l) {
+    path = newPath;
+    kind = kind_l;
+    loadAcls();
+    loadGroups();
+    loadUsernames();
+    loadOwner();
+    drawer.openDrawer();
+}
+async function loadOwner() {
+    own = isOwner(path, $userStore, $workspaceStore);
+}
+async function loadAcls() {
+    acls = Object.entries(await GranularAclService.getGranularAcls({ workspace: $workspaceStore, path, kind }));
+}
+async function loadGroups() {
+    groups = await GroupService.listGroupNames({ workspace: $workspaceStore });
+}
+async function loadUsernames() {
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
+}
+async function deleteAcl(owner) {
+    try {
+        await GranularAclService.removeGranularAcls({
+            workspace: $workspaceStore,
+            path,
+            kind,
+            requestBody: { owner }
+        });
+        loadAcls();
+        dispatch('change', { path, kind });
+    }
+    catch (err) {
+        sendUserToast(err.toString(), true);
+    }
+}
+async function addAcl(owner, write) {
+    await GranularAclService.addGranularAcls({
+        workspace: $workspaceStore,
+        path,
+        kind,
+        requestBody: { owner, write }
+    });
+    loadAcls();
+    dispatch('change', { path, kind });
+}
+</script>
+
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Share {path}" on:close={drawer.closeDrawer}>
+		<div class="flex flex-col gap-6">
+			<h1>{path}</h1>
+			<h2
+				>Extra Permissions ({acls?.length ?? 0}) &nbsp; <Tooltip
+					>Items already have default permissions. If belonging to an user or group, that group or
+					user owns it and can write to it as well as modify its permisions and move it. Folders
+					have read/write that apply to the whole folder and are additive to the items permissions.</Tooltip
+				></h2
+			>
+			{#if !own}
+				<Alert type="warning" title="Not owner"
+					>Since you do not own this item, you cannot modify its permission</Alert
+				>
+			{/if}
+			<div>
+				{#if own}
+					<div class="flex flex-row flex-wrap gap-2 items-center">
+						<div>
+							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
+								<ToggleButton position="left" value="user" size="xs">User</ToggleButton>
+								<ToggleButton position="right" value="group" size="xs">Group</ToggleButton>
+							</ToggleButtonGroup>
+						</div>
+						{#key ownerKind}
+							<AutoComplete
+								items={ownerKind === 'user' ? usernames : groups}
+								bind:selectedItem={owner}
+							/>
+						{/key}
+						<Button size="sm" on:click={() => addAcl(newOwner, write)}>Add permission</Button>
+					</div>
+				{/if}
+				<TableCustom>
+					<tr slot="header-row">
+						<th>owner</th>
+						<th />
+						<th />
+					</tr>
+					<tbody slot="body">
+						{#each acls as [owner, write]}
+							<tr>
+								<td>{owner}</td>
+								<td
+									>{#if own}
+										<div>
+											<ToggleButtonGroup
+												selected={write ? 'writer' : 'viewer'}
+												on:selected={async (e) => {
+													const role = e.detail
+													if (role == 'writer') {
+														await addAcl(owner, true)
+													} else {
+														await addAcl(owner, false)
+													}
+													loadAcls()
+												}}
+											>
+												<ToggleButton position="left" value="viewer" size="xs">Viewer</ToggleButton>
+												<ToggleButton position="right" value="writer" size="xs">Writer</ToggleButton
+												>
+											</ToggleButtonGroup>
+										</div>
+									{:else}{write}{/if}</td
+								>
+								<td>
+									{#if own}
+										<Button
+											variant="border"
+											color="red"
+											size="xs"
+											on:click={() => deleteAcl(owner)}
+										>
+											Delete
+										</Button>
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</TableCustom>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/ShareModal.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: ((newPath: string, kind_l: "flow" | "script" | "resource" | "app" | "group_" | "schedule" | "variable") => Promise<void>) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ShareModalProps = typeof __propDef.props;
+export type ShareModalEvents = typeof __propDef.events;
+export type ShareModalSlots = typeof __propDef.slots;
+export default class ShareModal extends SvelteComponentTyped<ShareModalProps, ShareModalEvents, ShareModalSlots> {
+    get openDrawer(): (newPath: string, kind_l: "flow" | "script" | "resource" | "app" | "group_" | "schedule" | "variable") => Promise<void>;
+}
+export {};

package/package/components/SharedBadge.svelte

@@ -0,0 +1,62 @@
+<script>import { userStore } from '../stores';
+import { Users } from 'lucide-svelte';
+import Badge from './common/badge/Badge.svelte';
+import Popover from './Popover.svelte';
+export let extraPerms = {};
+export let canWrite;
+let kind = undefined;
+let reason = '';
+$: {
+    if ($userStore?.is_admin || $userStore?.is_super_admin) {
+        kind = undefined;
+    }
+    else {
+        let username = $userStore?.username ?? '';
+        let pgroups = $userStore?.pgroups ?? [];
+        let pusername = `u/${username}`;
+        let extraPermsKeys = Object.keys(extraPerms);
+        if (pusername in extraPermsKeys) {
+            if (extraPerms[pusername]) {
+                kind = 'write';
+            }
+            else {
+                kind = 'read';
+            }
+            reason = 'This item was shared to you personally';
+        }
+        else {
+            let writeGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
+            if (writeGroup) {
+                kind = 'write';
+                reason = `This item was write shared to the group ${writeGroup} which you are a member of`;
+            }
+            else {
+                let readGroup = pgroups.find((x) => extraPermsKeys.includes(x));
+                if (readGroup) {
+                    kind = 'read';
+                    reason = `This item was read-only shared to the group ${readGroup} which you are a member of`;
+                }
+                else {
+                    kind = undefined;
+                }
+            }
+        }
+        if (kind == 'read' && canWrite) {
+            kind = undefined;
+        }
+        if (kind == undefined && !canWrite) {
+            kind = 'read';
+            reason = '';
+        }
+    }
+}
+</script>
+
+{#if kind === 'read' || kind === 'write'}
+	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
+		<Popover notClickable>
+			<Users size={12} />
+			<span slot="text">{kind == 'read' ? 'Shared & read-only' : 'Read & Write'} {reason}</span>
+		</Popover>
+	</Badge>
+{/if}

package/package/components/SharedBadge.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        extraPerms?: Record<string, boolean> | undefined;
+        canWrite: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SharedBadgeProps = typeof __propDef.props;
+export type SharedBadgeEvents = typeof __propDef.events;
+export type SharedBadgeSlots = typeof __propDef.slots;
+export default class SharedBadge extends SvelteComponentTyped<SharedBadgeProps, SharedBadgeEvents, SharedBadgeSlots> {
+}
+export {};