windmill-components 1.46.2 → 1.52.0

package/components/ScriptBuilder.svelte

@@ -14,15 +14,21 @@ import CenteredPage from './CenteredPage.svelte';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import { Button } from './common';
-import { faChevronDown, faChevronUp, faPen } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
 import Toggle from './Toggle.svelte';
+import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
 export let script;
 export let initialPath = '';
 export let template = 'script';
 export let initialArgs = {};
+const langs = [
+    ['Typescript', Script.language.DENO],
+    ['Python', Script.language.PYTHON3],
+    ['Go', Script.language.GO],
+    ['Bash', Script.language.BASH]
+];
 let viewScriptKind = script.kind !== Script.kind.SCRIPT;
-let viewTemplate = script.kind !== Script.kind.SCRIPT && script.language == Script.language.DENO;
 let pathError = '';
 let summaryC = undefined;
 let pathC = undefined;
@@ -72,11 +78,13 @@ async function changeStep(step) {
 <UnsavedConfirmationModal />
 <div class="flex flex-col h-screen">
 	<!-- Nav between steps-->
-	<div class="flex flex-col w-full px-4 py-2 border-b shadow-sm">
-		<div class="justify-between flex flex-row w-full items-center overflow-x-auto scrollbar-hidden">
-			<div class="flex flex-row">
+	<div class="flex flex-col w-full px-2 py-1  border-b shadow-sm">
+		<div
+			class="justify-between flex flex-row w-full items-center overflow-x-auto scrollbar-hidden px-2"
+		>
+			<div class="flex flex-row py-1">
 				<Breadcrumb
-					items={['Metadata', 'Code', 'UI Customisation']}
+					items={['Metadata', 'Code', 'Advanced']}
 					selectedIndex={step}
 					on:select={(e) => changeStep(e.detail.index + 1)}
 					disabled={pathError != ''}
@@ -115,35 +123,32 @@ async function changeStep(step) {
 					</div>
 				</Button>
 			</div>
-
 			<div class="flex flex-row gap-x-2">
-				<Button
-					size="sm"
-					variant={step == 1 ? 'border' : 'contained'}
-					disabled={step === 1 && pathError !== ''}
-					btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
-					on:click={editScript}>Save (commit)</Button
-				>
 				<Button
 					variant="border"
 					size="sm"
-					btnClasses={step == 1 ? 'invisible' : ''}
+					btnClasses={step == 1 ? 'hidden sm:invisible' : ''}
 					on:click={() => changeStep(step - 1)}
 				>
 					Back
 				</Button>
-				{#if step < 3}
-					<Button
-						size="sm"
-						btnClasses={step == 3 ? 'invisible' : ''}
-						disabled={step === 1 && pathError !== ''}
-						on:click={() => changeStep(step + 1)}
-					>
-						Next
-					</Button>
-				{:else}
-					<Button size="sm" on:click={editScript}>Save</Button>
-				{/if}
+				<Button
+					size="sm"
+					variant={step == 1 ? 'contained' : 'border'}
+					btnClasses={step == 3 ? 'invisible' : ''}
+					disabled={step === 1 && pathError !== ''}
+					on:click={() => changeStep(step + 1)}
+				>
+					Next
+				</Button>
+				<Button
+					size="sm"
+					variant={step == 1 ? 'border' : 'contained'}
+					disabled={step === 1 && pathError !== ''}
+					btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
+					startIcon={{ icon: faSave }}
+					on:click={editScript}>Save</Button
+				>
 			</div>
 		</div>
 	</div>
@@ -173,20 +178,38 @@ async function changeStep(step) {
 					/>
 				</label>
 				<h2 class="border-b pb-1 mt-4">Language</h2>
-				<div class="max-w-md">
-					<RadioButton
-						label="Language"
-						options={[
-							['Typescript (Deno)', 'deno'],
-							['Python 3.10', 'python3'],
-							['Go', 'go'],
-							['Bash', 'bash']
-						]}
-						on:change={(e) => initContent(e.detail, script.kind, template)}
-						bind:value={script.language}
-					/>
+				<div class="flex flex-row gap-2 flex-wrap">
+					{#each langs as [label, lang]}
+						{@const isPicked = script.language == lang && template == 'script'}
+						<Button
+							size="sm"
+							variant="border"
+							color={isPicked ? 'blue' : 'dark'}
+							btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							on:click={() => {
+								script.language = lang
+								template = 'script'
+								initContent(lang, script.kind, template)
+							}}
+						>
+							<LanguageIcon {lang} /><span class="ml-2">{label}</span>
+						</Button>
+					{/each}
+					<Button
+						size="sm"
+						variant="border"
+						color={template == 'pgsql' ? 'blue' : 'dark'}
+						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						on:click={() => {
+							script.language = Script.language.DENO
+							template = 'pgsql'
+							initContent(script.language, script.kind, template)
+						}}
+					>
+						<LanguageIcon lang="pgsql" /><span class="ml-2">PostgreSQL</span>
+					</Button>
 				</div>
-				<h2 class="border-b pb-1 mt-4"> Metadata </h2>
+				<h2 class="border-b pb-1 mt-4">Advanced</h2>
 				<div>
 					<Button
 						color="light"
@@ -194,7 +217,7 @@ async function changeStep(step) {
 						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
 						on:click={() => (viewScriptKind = !viewScriptKind)}
 					>
-						Specialize the script as a specific module kind for flows
+						Tag this script as having a specific purpose inside flows
 					</Button>
 				</div>
 				{#if viewScriptKind}
@@ -237,31 +260,6 @@ async function changeStep(step) {
 						/>
 					</div>
 				{/if}
-				{#if script.language == 'deno' && script.kind == Script.kind.SCRIPT}
-					<div
-						><Button
-							color="light"
-							size="sm"
-							endIcon={{ icon: viewTemplate ? faChevronUp : faChevronDown }}
-							on:click={() => (viewTemplate = !viewTemplate)}
-						>
-							Use a predefined template specific to this language and script kind
-						</Button>
-					</div>
-					{#if viewTemplate}
-						<div class="max-w-lg">
-							<RadioButton
-								label="Template"
-								options={[
-									['Standard', 'script'],
-									['PostgreSQL Prepared Statement', 'pgsql']
-								]}
-								on:change={(e) => initContent(script.language, script.kind, e.detail)}
-								bind:value={template}
-							/>
-						</div>
-					{/if}
-				{/if}
 				<div class="ml-3">
 					<Toggle
 						bind:checked={script.is_template}

package/components/ScriptBuilder.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ScriptBuilderProps = typeof __propDef.props;
-export declare type ScriptBuilderEvents = typeof __propDef.events;
-export declare type ScriptBuilderSlots = typeof __propDef.slots;
+export type ScriptBuilderProps = typeof __propDef.props;
+export type ScriptBuilderEvents = typeof __propDef.events;
+export type ScriptBuilderSlots = typeof __propDef.slots;
 export default class ScriptBuilder extends SvelteComponentTyped<ScriptBuilderProps, ScriptBuilderEvents, ScriptBuilderSlots> {
 }
 export {};

package/components/ScriptEditor.svelte

@@ -1,7 +1,7 @@
 <script>import { CompletedJob, Job, JobService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
 import { emptySchema, scriptLangToEditorLang } from '../utils';
-import { faPlay, faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
 import Editor from './Editor.svelte';
 import { inferArgs } from '../infer';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -13,7 +13,6 @@ import TestJobLoader from './TestJobLoader.svelte';
 import { onMount } from 'svelte';
 import { Button, Kbd } from './common';
 import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
-import Tooltip from './Tooltip.svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 // Exported
 export let schema = emptySchema();
@@ -21,6 +20,7 @@ export let code;
 export let path;
 export let lang;
 export let initialArgs = {};
+export let fixedOverflowWidgets = true;
 let websocketAlive = { pyright: false, black: false, deno: false, go: false };
 let width = 1200;
 // Internal state
@@ -92,7 +92,7 @@ onMount(() => {
 
 <svelte:window on:keydown={onKeyDown} />
 
-<div class="border-b-2 shadow-sm p-1 pr-4" bind:clientWidth={width}>
+<div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
 			{validCode}
@@ -101,25 +101,26 @@ onMount(() => {
 			{lang}
 			{websocketAlive}
 		/>
-
-		<Button
-			target="_blank"
-			href="https://github.com/windmill-labs/windmill-gh-action-deploy"
-			color="light"
-			size="sm"
-			btnClasses="mr-1 hidden md:block"
-			startIcon={{
-				icon: faGithub
-			}}
-		>
-			Sync from Github
-		</Button>
+		<div class="py-1">
+			<Button
+				target="_blank"
+				href="https://github.com/windmill-labs/windmill/tree/main/cli"
+				color="light"
+				size="xs"
+				btnClasses="mr-1 hidden md:block"
+				startIcon={{
+					icon: faGithub
+				}}
+			>
+				Sync from Github
+			</Button>
+		</div>
 	</div>
 </div>
-<SplitPanesWrapper>
-	<Pane size={60} minSize={10}>
+<SplitPanesWrapper panesClass="!overflow-visible">
+	<Pane size={60} minSize={10} class="!overflow-visible">
 		<div
-			class="p-2 h-full"
+			class="p-2 h-full !overflow-visible"
 			on:mouseleave={() => {
 				inferSchema()
 			}}
@@ -128,6 +129,7 @@ onMount(() => {
 				bind:code
 				bind:websocketAlive
 				bind:this={editor}
+				on:change={() => inferSchema()}
 				cmdEnterAction={async () => {
 					await inferSchema()
 					runTest()
@@ -137,24 +139,20 @@ onMount(() => {
 					localStorage.setItem(path ?? 'last_save', code)
 					lastSave = code
 				}}
-				class="flex flex-1 h-full"
+				class="flex flex-1 h-full !overflow-visible"
 				lang={scriptLangToEditorLang(lang)}
 				automaticLayout={true}
+				{fixedOverflowWidgets}
 			/>
 		</div>
 	</Pane>
 	<Pane size={40} minSize={10}>
 		<Splitpanes horizontal>
 			<Pane size={33}>
-				<div class="w-full  bg-gray-100 px-2 text-sm"
-					>Preview <Tooltip>
-						To recompute the input schema press <Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd> or move the focus
-						outside of the text editor
-					</Tooltip></div
-				>
+				<div class="w-full border-b p-2 text-xs font-bold">Preview</div>
 				<div class="px-2">
 					<div class="break-words relative font-sans">
-						<SchemaForm {schema} bind:args bind:isValid />
+						<SchemaForm compact {schema} bind:args bind:isValid />
 					</div>
 				</div>
 			</Pane>
@@ -180,7 +178,7 @@ onMount(() => {
 								classes: 'animate-none'
 							}}
 						>
-							{testIsLoading ? 'Running' : 'Test (Ctrl+Enter)'}
+							{#if testIsLoading}Running{:else}Test <Kbd class="ml-4 text-5xs">Ctrl+Enter</Kbd>{/if}
 						</Button>
 					{/if}
 				</div>

package/components/ScriptEditor.svelte.d.ts

@@ -8,15 +8,16 @@ declare const __propDef: {
         path: string | undefined;
         lang: Preview.language;
         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,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { Script } from '../gen';
 declare const __propDef: {
     props: {
+        initialPath?: string | undefined;
         scriptPath?: string | undefined;
         allowFlow?: boolean | undefined;
         allowHub?: boolean | undefined;
@@ -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

@@ -15,7 +15,7 @@ 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>

package/components/ScriptSchema.svelte.d.ts

@@ -12,9 +12,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,6 @@
 <script>import { userStore } from '../stores';
 import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';
+import { Users } from 'svelte-lucide';
 import Badge from './common/badge/Badge.svelte';
 import Tooltip from './Tooltip.svelte';
 export let extraPerms = {};
@@ -48,10 +49,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 {};