windmill-components 1.46.3 → 1.55.0

package/components/ScriptEditor.svelte.d.ts

@@ -7,16 +7,18 @@ declare const __propDef: {
         code: string;
         path: string | undefined;
         lang: Preview.language;
+        kind?: 'script' | 'trigger' | 'approval' | undefined;
         initialArgs?: Record<string, any> | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ScriptEditorProps = typeof __propDef.props;
-export declare type ScriptEditorEvents = typeof __propDef.events;
-export declare type ScriptEditorSlots = typeof __propDef.slots;
+export type ScriptEditorProps = typeof __propDef.props;
+export type ScriptEditorEvents = typeof __propDef.events;
+export type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponentTyped<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
 }
 export {};

package/components/ScriptPicker.svelte

@@ -1,19 +1,18 @@
 <script>import { ScriptService, FlowService, Script } from '../gen';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
-import ItemPicker from './ItemPicker.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';
+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;
 let items = [];
-let itemPicker;
 let drawerViewer;
 let code = '';
 let lang;
@@ -23,54 +22,45 @@ allowFlow && options.push(['Flow', 'flow']);
 const dispatch = createEventDispatcher();
 async function loadItems() {
     if (itemKind == 'flow') {
-        items = await FlowService.listFlows({ workspace: $workspaceStore });
+        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 });
+        items = (await ScriptService.listScripts({ workspace: $workspaceStore, kind })).map((script) => ({
+            value: script.path,
+            label: `${script.path}${script.summary ? ` | ${script.summary}` : ''}`
+        }));
     }
     else {
-        items = $hubScripts ?? [];
-    }
-}
-$: {
-    if ($workspaceStore) {
-        loadItems();
+        items =
+            $hubScripts?.map((x) => ({
+                value: x.path,
+                label: `${x.path}${x.summary ? ` | ${x.summary}` : ''}`
+            })) ?? [];
     }
 }
+$: itemKind && $workspaceStore && loadItems();
 </script>
 
-<ItemPicker
-	bind:this={itemPicker}
-	pickCallback={(path, _) => {
-		scriptPath = path
-		dispatch('select', { path: scriptPath })
-	}}
-	itemName={itemKind == 'flow' ? 'Flow' : 'Script'}
-	extraField="summary"
-	loadItems={async () => {
-		await loadItems()
-		return items
-	}}
-/>
-
-<div class="flex flex-row flex-wrap items-center gap-4 w-full">
+<div class="flex flex-row  items-center gap-4 w-full">
 	{#if options.length > 1}
-		<div class="w-80 -mb-2">
+		<div class="w-80 mt-1">
 			<RadioButton bind:value={itemKind} {options} />
 		</div>
 	{/if}
 
-	<div class="flex items-center grow gap-4">
-		<input class="grow w-full" type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
-		<Button
-			size="sm"
-			endIcon={{ icon: faSearch }}
-			btnClasses="mx-auto whitespace-nowrap"
-			on:click={() => itemPicker.openDrawer()}
-		>
-			Pick a {itemKind} path
-		</Button>
-	</div>
+	<Select
+		value={items.find((x) => x.value == initialPath)}
+		class="grow"
+		on:change={() => {
+			dispatch('select', { path: scriptPath })
+		}}
+		bind:justValue={scriptPath}
+		{items}
+		placeholder="Pick a {itemKind}"
+	/>
 	{#if scriptPath !== undefined && scriptPath !== ''}
 		<Button
 			color="light"

package/components/ScriptPicker.svelte.d.ts

@@ -2,10 +2,11 @@ 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?: "script" | "flow" | "hub" | undefined;
+        itemKind?: "flow" | "script" | "hub" | undefined;
         kind?: Script.kind | undefined;
     };
     events: {
@@ -15,9 +16,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ScriptPickerProps = typeof __propDef.props;
-export declare type ScriptPickerEvents = typeof __propDef.events;
-export declare type ScriptPickerSlots = typeof __propDef.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/components/ScriptSchema.svelte

@@ -4,10 +4,9 @@ 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';
-import SvelteMarkdown from 'svelte-markdown';
 import { Alert } from './common';
+import autosize from 'svelte-autosize';
 export let schema;
-export let summary;
 export let description;
 export function setSchema(newSchema) {
     schema = newSchema;
@@ -15,40 +14,22 @@ export function setSchema(newSchema) {
 </script>
 
 <div class="w-full">
-	<h1 class="my-4">UI customisation</h1>
+	<h1 class="my-4">Advanced</h1>
 
 	<Tabs selected="ui">
-		<Tab value="ui">UI</Tab>
+		<Tab value="ui">Description & Arguments refinement</Tab>
 		<Tab value="jsonschema">JSON Schema</Tab>
 		<svelte:fragment slot="content">
 			<TabContent value="ui">
-				<h2 class="border-b pb-1 mt-6">Display</h2>
-				<div class="grid grid-cols-3 gap-2 mt-4">
-					<label>
-						<div class="text-gray-700 text-sm">Summary</div>
-						<textarea bind:value={summary} placeholder="Edit summary" class="text-sm" />
-					</label>
-					<label class="col-span-2">
-						<div class="text-gray-700 text-sm">Description</div>
-						<textarea
-							bind:value={description}
-							placeholder="Edit description. Markdown accepted."
-							class="text-sm"
-						/>
-						<div class="mt-1 px-2">
-							{#if description}
-								<div
-									class="prose !max-w-full !max-h-48 text-xs shadow-inner shadow-blue overflow-auto mt-1"
-								>
-									<SvelteMarkdown source={description} />
-								</div>
-							{:else}
-								<div class="text-xs text-gray-500"> Enter a description to see the preview </div>
-							{/if}
-						</div>
-					</label>
-				</div>
-				<h2 class="border-b pb-1 my-4">Arguments</h2>
+				<h2 class="border-b pb-1 mt-6 mb-4">Description</h2>
+				<textarea
+					use:autosize
+					bind:value={description}
+					placeholder="Edit description"
+					class="text-sm"
+				/>
+
+				<h2 class="border-b pb-1 mb-4 mt-8">Arguments</h2>
 				<Alert type="info" title="Synchronized with main signature">
 					Argument names, being required or not, and default values are derived from the main
 					signature of step 2 and cannot be edited directly. Change the main signature to edit them.

package/components/ScriptSchema.svelte.d.ts

@@ -3,7 +3,6 @@ import type { Schema } from '../common';
 declare const __propDef: {
     props: {
         schema: Schema;
-        summary: string;
         description: string | undefined;
         setSchema?: ((newSchema: Schema) => void) | undefined;
     };
@@ -12,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ScriptSchemaProps = typeof __propDef.props;
-export declare type ScriptSchemaEvents = typeof __propDef.events;
-export declare type ScriptSchemaSlots = typeof __propDef.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;
 }

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/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/components/ShareModal.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ShareModalProps = typeof __propDef.props;
-export declare type ShareModalEvents = typeof __propDef.events;
-export declare type ShareModalSlots = typeof __propDef.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 | undefined) => Promise<void>;
 }

package/components/SharedBadge.svelte

@@ -1,5 +1,5 @@
 <script>import { userStore } from '../stores';
-import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';
+import { Users } from 'lucide-svelte';
 import Badge from './common/badge/Badge.svelte';
 import Tooltip from './Tooltip.svelte';
 export let extraPerms = {};
@@ -48,10 +48,11 @@ $: {
 </script>
 
 {#if kind === 'read' || kind === 'write'}
-	<Badge icon={{ data: faPeopleGroup }} capitalize color="blue">
+	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
+		<Users size={12} />
 		{kind}
 		{#if reason}
-			<Tooltip>{reason}</Tooltip>
+			<Tooltip><span class="normal-case">{reason}</span></Tooltip>
 		{/if}
 	</Badge>
 {/if}

package/components/SharedBadge.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SharedBadgeProps = typeof __propDef.props;
-export declare type SharedBadgeEvents = typeof __propDef.events;
-export declare type SharedBadgeSlots = typeof __propDef.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 {};

package/components/SimpleEditor.svelte

@@ -15,6 +15,7 @@ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
 <script>import { browser, dev } from '$app/env';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import yamlWorker from 'monaco-yaml/yaml.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
@@ -29,8 +30,9 @@ export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
 export let extraLib = '';
-export let extraLibPath = '';
 export let shouldBindKey = true;
+export let autoHeight = false;
+export let fixedOverflowWidgets = true;
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 if (browser) {
@@ -44,6 +46,9 @@ if (browser) {
                 if (label === 'json') {
                     return new jsonWorker();
                 }
+                else if (label === 'yaml') {
+                    return new yamlWorker();
+                }
                 else if (label === 'typescript' || label === 'javascript') {
                     return new tsWorker();
                 }
@@ -78,18 +83,37 @@ function format() {
         }
     }
 }
+let width = 0;
 async function loadMonaco() {
     model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
+    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
-        }, 500);
-        dispatch('change');
+            dispatch('change', { code });
+        }, 200);
     });
+    if (autoHeight) {
+        let ignoreEvent = false;
+        const updateHeight = () => {
+            const contentHeight = Math.min(1000, editor.getContentHeight());
+            if (divEl) {
+                divEl.style.height = `${contentHeight}px`;
+            }
+            try {
+                ignoreEvent = true;
+                editor.layout({ width, height: contentHeight });
+            }
+            finally {
+                ignoreEvent = false;
+            }
+        };
+        editor.onDidContentSizeChange(updateHeight);
+        updateHeight();
+    }
     editor.onDidFocusEditorText(() => {
         editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
             code = getCode();
@@ -105,14 +129,17 @@ async function loadMonaco() {
         code = getCode();
         dispatch('blur');
     });
-    if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {
+    if (lang == 'javascript' && extraLib != '') {
         monaco.languages.typescript.javascriptDefaults.setExtraLibs([
             {
                 content: extraLib,
-                filePath: extraLibPath
+                filePath: 'windmill.d.ts'
             }
         ]);
     }
+    else {
+        monaco.languages.typescript.javascriptDefaults.setExtraLibs([]);
+    }
 }
 onMount(() => {
     if (browser) {
@@ -128,14 +155,12 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={divEl} class={$$props.class} />
+<div bind:this={divEl} class="{$$props.class} editor" bind:clientWidth={width} />
 
 <style>
 	.editor {
-		padding-left: 0px;
-		padding-right: 0px;
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh;
+		border-radius: 0.5rem;
+		padding: 0px;
 }
 
 	.small-editor {

package/components/SimpleEditor.svelte.d.ts

@@ -9,8 +9,9 @@ declare const __propDef: {
         formatAction?: (() => void) | undefined;
         automaticLayout?: boolean | undefined;
         extraLib?: string | undefined;
-        extraLibPath?: string | undefined;
         shouldBindKey?: boolean | undefined;
+        autoHeight?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
@@ -24,9 +25,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SimpleEditorProps = typeof __propDef.props;
-export declare type SimpleEditorEvents = typeof __propDef.events;
-export declare type SimpleEditorSlots = typeof __propDef.slots;
+export type SimpleEditorProps = typeof __propDef.props;
+export type SimpleEditorEvents = typeof __propDef.events;
+export type SimpleEditorSlots = typeof __propDef.slots;
 export default class SimpleEditor extends SvelteComponentTyped<SimpleEditorProps, SimpleEditorEvents, SimpleEditorSlots> {
     get getCode(): () => string;
     get insertAtCursor(): (code: string) => void;

package/components/Star.svelte

@@ -0,0 +1,42 @@
+<script>import { FavoriteService } from '../gen';
+import { starStore } from '../stores';
+import { sendUserToast } from '../utils';
+import { faStar } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { Star } from 'lucide-svelte';
+export let path;
+export let kind;
+export let starred = false;
+export let workspace_id;
+async function onClick() {
+    if (starred) {
+        await FavoriteService.unstar({
+            workspace: workspace_id,
+            requestBody: { path, favorite_kind: kind }
+        });
+        sendUserToast('Unstarred');
+        $starStore = $starStore + 1;
+    }
+    else {
+        await FavoriteService.star({
+            workspace: workspace_id,
+            requestBody: { path, favorite_kind: kind }
+        });
+        sendUserToast('Marked as favorite, it will appear first');
+        $starStore = $starStore + 1;
+    }
+    dispatch('starred', !starred);
+}
+const dispatch = createEventDispatcher();
+</script>
+
+<button on:click|preventDefault={onClick} class="mx-1">
+	{#if starred}
+		<div>
+			<Icon data={faStar} class="hover:text-gray-300" scale={1.1} />
+		</div>
+	{:else}
+		<Star size={18} class="hover:bg-gray-200" />
+	{/if}
+</button>

package/components/Star.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+        kind: 'flow' | 'app' | 'script';
+        starred?: boolean | undefined;
+        workspace_id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StarProps = typeof __propDef.props;
+export type StarEvents = typeof __propDef.events;
+export type StarSlots = typeof __propDef.slots;
+export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
+}
+export {};

package/components/StringTypeNarrowing.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type StringTypeNarrowingProps = typeof __propDef.props;
-export declare type StringTypeNarrowingEvents = typeof __propDef.events;
-export declare type StringTypeNarrowingSlots = typeof __propDef.slots;
+export type StringTypeNarrowingProps = typeof __propDef.props;
+export type StringTypeNarrowingEvents = typeof __propDef.events;
+export type StringTypeNarrowingSlots = typeof __propDef.slots;
 export default class StringTypeNarrowing extends SvelteComponentTyped<StringTypeNarrowingProps, StringTypeNarrowingEvents, StringTypeNarrowingSlots> {
 }
 export {};