windmill-components 1.109.8 → 1.121.0

package/package/components/Path.svelte

@@ -11,12 +11,13 @@ 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 ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import FolderEditor from './FolderEditor.svelte';
 import { random_adj } from './random_positive_adjetive';
 import Required from './Required.svelte';
 import Tooltip from './Tooltip.svelte';
+import { Folder, User } from 'lucide-svelte';
 let meta = undefined;
 export let namePlaceholder = '';
 export let initialPath;
@@ -252,7 +253,7 @@ async function addFolder() {
 			<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>
+					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
 
 					<ToggleButtonGroup
 						class="mt-0.5"
@@ -261,7 +262,8 @@ async function addFolder() {
 							const kind = e.detail
 							if (meta) {
 								if (kind === 'folder') {
-									meta.owner = $userStore?.folders?.[0] ?? ''
+									console.log($userStore?.folders)
+									meta.owner = folders?.[0]?.name ?? ''
 								} else if (kind === 'group') {
 									meta.owner = 'all'
 								} else {
@@ -270,9 +272,25 @@ async function addFolder() {
 							}
 						}}
 					>
-						<ToggleButton light size="xs" value="user" position="left">User</ToggleButton>
+						<ToggleButton
+							icon={User}
+							{disabled}
+							light
+							size="xs"
+							value="user"
+							position="left"
+							label="User"
+						/>
 						<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
-						<ToggleButton light size="xs" value="folder" position="right">Folder</ToggleButton>
+						<ToggleButton
+							icon={Folder}
+							{disabled}
+							light
+							size="xs"
+							value="folder"
+							position="right"
+							label="Folder"
+						/>
 					</ToggleButtonGroup>
 				</label>
 				{#if meta.ownerKind === 'user'}
@@ -283,7 +301,7 @@ async function addFolder() {
 							type="text"
 							bind:value={meta.owner}
 							placeholder={$userStore?.username ?? ''}
-							disabled={!($superadmin || ($userStore?.is_admin ?? false))}
+							disabled={disabled || !($superadmin || ($userStore?.is_admin ?? false))}
 						/>
 					</label>
 				{:else if meta.ownerKind === 'folder'}
@@ -309,6 +327,7 @@ async function addFolder() {
 								title="View folder"
 								btnClasses="!p-1.5"
 								variant="border"
+								color="light"
 								size="xs"
 								disabled={!meta.owner || meta.owner == ''}
 								on:click={viewFolder.openDrawer}
@@ -319,6 +338,7 @@ async function addFolder() {
 								title="New folder"
 								btnClasses="!p-1.5"
 								variant="border"
+								color="light"
 								size="xs"
 								{disabled}
 								on:click={newFolder.openDrawer}

package/package/components/Popover.svelte

@@ -5,6 +5,7 @@ export let notClickable = false;
 export let popupClass = '';
 export let disablePopup = false;
 export let disappearTimeout = 100;
+export let appearTimeout = 300;
 const [popperRef, popperContent] = createPopperActions({ placement });
 const popperOptions = {
     placement: 'bottom-end',
@@ -20,12 +21,20 @@ const popperOptions = {
     ]
 };
 let showTooltip = false;
-let timeout;
+let timeout = undefined;
+let inTimeout = undefined;
 function open() {
     clearTimeout(timeout);
-    showTooltip = true;
+    if (appearTimeout == 0) {
+        showTooltip = true;
+    }
+    else {
+        inTimeout = setTimeout(() => (showTooltip = true), appearTimeout);
+    }
 }
 function close() {
+    inTimeout && clearTimeout(inTimeout);
+    inTimeout = undefined;
     timeout = setTimeout(() => (showTooltip = false), disappearTimeout);
 }
 </script>

package/package/components/Popover.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         popupClass?: string | undefined;
         disablePopup?: boolean | undefined;
         disappearTimeout?: number | undefined;
+        appearTimeout?: number | undefined;
     };
     events: {
         click: MouseEvent;

package/package/components/Required.svelte

@@ -3,7 +3,7 @@ export let detail = '';
 </script>
 
 {#if required}
-	<span class="text-red-700 font-normal {$$props.class}">*</span>
+	<span class="text-red-700 dark:text-red-400 font-normal {$$props.class}">*</span>
 {:else if detail || detail != ''}
 	<span class="text-sm text-gray-500 ml-2 font-normal {$$props.class}"
 		>({detail != '' ? `${detail}` : ''})</span

package/package/components/ResourcePicker.svelte

@@ -86,11 +86,17 @@ let resourceEditor;
 		>
 	{/if}
 
-	<Button variant="border" size="xs" on:click={() => appConnect?.open?.(resourceType)}>
+	<Button
+		color="light"
+		variant="border"
+		size="xs"
+		on:click={() => appConnect?.open?.(resourceType)}
+	>
 		<Icon scale={0.8} data={faPlus} /></Button
 	>
 	<Button
 		variant="border"
+		color="light"
 		size="xs"
 		on:click={() => {
 			loadResources(resourceType)

package/package/components/RunForm.svelte

@@ -25,6 +25,10 @@ if ($runFormStore) {
     args = $runFormStore;
     $runFormStore = undefined;
 }
+export async function setArgs(nargs) {
+    args = nargs;
+    reloadArgs++;
+}
 export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
 }
@@ -32,6 +36,7 @@ export let isValid = true;
 let scheduledForStr;
 let invisible_to_owner;
 $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
+let reloadArgs = 0;
 </script>
 
 <div class="max-w-3xl">
@@ -91,14 +96,16 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<SchemaForm
-				prettifyHeader
-				{noVariablePicker}
-				{autofocus}
-				schema={runnable.schema}
-				bind:isValid
-				bind:args
-			/>
+			{#key reloadArgs}
+				<SchemaForm
+					prettifyHeader
+					{noVariablePicker}
+					{autofocus}
+					schema={runnable.schema}
+					bind:isValid
+					bind:args
+				/>
+			{/key}
 		{/if}
 	{:else}
 		<div class="text-xs text-gray-600">No arguments</div>

package/package/components/RunForm.svelte.d.ts

@@ -26,6 +26,7 @@ declare const __propDef: {
         viewCliRun?: boolean | undefined;
         isFlow: boolean;
         args?: Record<string, any> | undefined;
+        setArgs?: ((nargs: Record<string, any>) => Promise<void>) | undefined;
         run?: (() => void) | undefined;
         isValid?: boolean | undefined;
     };
@@ -38,6 +39,7 @@ export type RunFormProps = typeof __propDef.props;
 export type RunFormEvents = typeof __propDef.events;
 export type RunFormSlots = typeof __propDef.slots;
 export default class RunForm extends SvelteComponentTyped<RunFormProps, RunFormEvents, RunFormSlots> {
+    get setArgs(): (nargs: Record<string, any>) => Promise<void>;
     get run(): () => void;
 }
 export {};

package/package/components/SchemaEditor.svelte

@@ -248,18 +248,20 @@ function displayInfoKey(displayInfo) {
 							<th />
 						</tr>
 						<tbody slot="body">
-							{#each schemaPropertiesToDisplay(schema) as displayInfo (displayInfoKey(displayInfo))}
-								<tr animate:flip={{ duration: moveAnimationDuration }}>
-									<PropertyRow
-										{displayInfo}
-										{isAnimated}
-										{lightMode}
-										on:startEditArgument={handleStartEditEvent}
-										on:deleteArgument={handleDeleteEvent}
-										on:changePosition={handleChangePositionEvent}
-									/>
-								</tr>
-							{/each}
+							{#key schema.required}
+								{#each schemaPropertiesToDisplay(schema) as displayInfo (displayInfoKey(displayInfo))}
+									<tr animate:flip={{ duration: moveAnimationDuration }}>
+										<PropertyRow
+											{displayInfo}
+											{isAnimated}
+											{lightMode}
+											on:startEditArgument={handleStartEditEvent}
+											on:deleteArgument={handleDeleteEvent}
+											on:changePosition={handleChangePositionEvent}
+										/>
+									</tr>
+								{/each}
+							{/key}
 						</tbody>
 					</TableCustom>
 				{:else}

package/package/components/SchemaForm.svelte

@@ -1,4 +1,4 @@
-<script>import { VariableService } from '../gen';
+<script>import { ResourceService, VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
@@ -49,16 +49,22 @@ $: {
         }
     }
 }
+let resourceTypes = undefined;
+async function loadResourceTypes() {
+    resourceTypes = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
+}
+loadResourceTypes();
 </script>
 
 <div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
 	{#if keys.length > 0}
 		{#each keys as argName, i (argName)}
-			{#if Object.keys(schema.properties ?? {}).includes(argName)}
+			{#if Object.keys(schema?.properties ?? {}).includes(argName)}
 				<div>
 					{#if typeof args == 'object' && schema?.properties[argName]}
 						{#if editableSchema}
 							<ArgInput
+								{resourceTypes}
 								{prettifyHeader}
 								autofocus={i == 0 && autofocus}
 								label={argName}
@@ -85,6 +91,7 @@ $: {
 							/>
 						{:else}
 							<ArgInput
+								{resourceTypes}
 								{prettifyHeader}
 								autofocus={i == 0 && autofocus}
 								label={argName}

package/package/components/SchemaModal.svelte

@@ -29,6 +29,7 @@ import { Alert, Button } from './common';
 import Toggle from './Toggle.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Drawer from './common/drawer/Drawer.svelte';
+import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte';
 export let error = '';
 export let editing = false;
 export let oldArgName = undefined;
@@ -118,6 +119,11 @@ else {
 								property.contentEncoding = undefined
 								property.enum_ = undefined
 								property.pattern = undefined
+								if (argType == 'array') {
+									property.items = { type: 'string' }
+								} else {
+									property.items = undefined
+								}
 							}}
 						>
 							{argType}
@@ -139,10 +145,12 @@ else {
 			<div>
 				<div class="flex flex-row gap-x-4 items-center">
 					<ArgInput
+						resourceTypes={[]}
 						label="Default"
 						bind:value={property.default}
 						type={property.selectedType}
 						pattern={property.pattern}
+						itemsType={property.items}
 					/>
 					<Toggle
 						options={{ right: 'Required' }}
@@ -170,11 +178,7 @@ else {
 							bind:contentEncoding={property.contentEncoding}
 						/>
 					{:else if property.selectedType == 'array'}
-						<select bind:value={property.items}>
-							<option value={undefined}>No specific item type</option>
-							<option value={{ type: 'string' }}> Items are strings</option>
-							<option value={{ type: 'number' }}>Items are numbers</option>
-						</select>
+						<ArrayTypeNarrowing bind:itemsType={property.items} />
 					{:else if property.selectedType == 'object'}
 						<h3 class="mb-2 font-bold mt-4">Resource type</h3>
 						<ObjectTypeNarrowing bind:format={property.format} />

package/package/components/ScriptBuilder.svelte

@@ -369,6 +369,7 @@ function onKeyDown(event) {
 			{#if !isCloudHosted()}
 				<h2 class="border-b pb-1 mt-10 mb-4"
 					>Custom env variables<Tooltip
+						documentationLink="https://docs.windmill.dev/docs/reference#custom-environment-variables"
 						>Additional static custom env variables to pass to the script.</Tooltip
 					></h2
 				>
@@ -399,30 +400,30 @@ function onKeyDown(event) {
 						{/if}
 					{/if}
 				</div>
+				<div class="flex mt-2">
+					<Button
+						variant="border"
+						color="dark"
+						size="xs"
+						btnClasses="mt-1"
+						on:click={() => {
+							if (script.envs == undefined || !Array.isArray(script.envs)) {
+								script.envs = []
+							}
+							script.envs = script.envs.concat('')
+						}}
+					>
+						<Icon data={faPlus} class="mr-2" />
+						Add item
+					</Button>
+				</div>
 			{/if}
-			<div class="flex mt-2">
-				<Button
-					variant="border"
-					color="dark"
-					size="xs"
-					btnClasses="mt-1"
-					on:click={() => {
-						if (script.envs == undefined || !Array.isArray(script.envs)) {
-							script.envs = []
-						}
-						script.envs = script.envs.concat('')
-					}}
-				>
-					<Icon data={faPlus} class="mr-2" />
-					Add item
-				</Button>
-			</div>
 		</DrawerContent>
 	</Drawer>
 
 	<div class="flex flex-col h-screen">
 		<div class="flex flex-col w-full px-2 py-1 border-b shadow-sm">
-			<div class="justify-between flex gap-8 w-full items-center px-2">
+			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center px-2">
 				<div class="min-w-64 w-full max-w-md">
 					<input
 						type="text"
@@ -472,7 +473,7 @@ function onKeyDown(event) {
 					<Awareness />
 				{/if}
 
-				<div class="flex flex-row gap-x-4">
+				<div class="flex flex-row gap-x-1 lg:gap-x-4">
 					<Button
 						color="light"
 						variant="border"
@@ -558,6 +559,7 @@ function onKeyDown(event) {
 				<ScriptSchema bind:schema={script.schema} />
 			</DrawerContent>
 		</Drawer>
+
 		<ScriptEditor
 			collabMode
 			edit={initialPath != ''}

package/package/components/ScriptEditor.svelte

@@ -81,29 +81,15 @@ async function loadPastTests() {
     });
 }
 export async function inferSchema(code, nlang) {
-    schema = schema ?? emptySchema();
-    let isDefault = [];
-    Object.entries(args).forEach(([k, v]) => {
-        if (schema.properties?.[k]?.default == v) {
-            isDefault.push(k);
-        }
-    });
+    let nschema = schema ?? emptySchema();
     try {
-        await inferArgs(nlang ?? lang, code, schema);
+        await inferArgs(nlang ?? lang, code, nschema);
         validCode = true;
+        schema = nschema;
     }
     catch (e) {
         validCode = false;
     }
-    schema = schema;
-    isDefault
-        .filter((key) => schema.properties[key] != undefined)
-        .forEach((key) => (args[key] = schema.properties[key].default));
-    for (const key of Object.keys(args)) {
-        if (schema.properties[key] == undefined) {
-            delete args[key];
-        }
-    }
 }
 onMount(() => {
     inferSchema(code);
@@ -200,6 +186,7 @@ function collabUrl() {
 <div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
+			scriptPath={edit ? path : undefined}
 			on:toggleCollabMode={() => {
 				if (wsProvider?.shouldConnect) {
 					disableCollaboration()
@@ -222,7 +209,7 @@ function collabUrl() {
 			<div class="py-1">
 				<Button
 					target="_blank"
-					href="https://github.com/windmill-labs/windmill/tree/main/cli"
+					href="https://docs.windmill.dev/docs/cli_local_dev/vscode-extension"
 					color="light"
 					size="xs"
 					btnClasses="mr-1 hidden lg:block"
@@ -230,7 +217,7 @@ function collabUrl() {
 						icon: faGithub
 					}}
 				>
-					Sync from Github
+					Use VScode
 				</Button>
 			</div>
 		{/if}

package/package/components/ScriptPicker.svelte

@@ -3,11 +3,13 @@ import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
 import Select from 'svelte-select';
 import { getScriptByPath } from '../scripts';
-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';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import { Code2, Globe } from 'lucide-svelte';
 export let initialPath = undefined;
 export let scriptPath = undefined;
 export let allowFlow = false;
@@ -20,9 +22,9 @@ let drawerViewer;
 let drawerFlowViewer;
 let code = '';
 let lang;
-let options = [['Script', 'script']];
-allowHub && options.unshift(['Hub', 'hub']);
-allowFlow && options.push(['Flow', 'flow']);
+let options = [['Script', 'script', Code2]];
+allowHub && options.unshift(['Hub', 'hub', Globe]);
+allowFlow && options.push(['Flow', 'flow', undefined]);
 const dispatch = createEventDispatcher();
 async function loadItems() {
     if (itemKind == 'flow') {
@@ -60,10 +62,14 @@ $: itemKind && $workspaceStore && loadItems();
 	</DrawerContent>
 </Drawer>
 
-<div class="flex flex-row items-center gap-4 w-full">
+<div class="flex flex-row items-center gap-4 w-full mt-2">
 	{#if options.length > 1}
-		<div class="w-80 mt-1">
-			<RadioButton {disabled} bind:value={itemKind} {options} />
+		<div>
+			<ToggleButtonGroup bind:selected={itemKind}>
+				{#each options as [label, value, icon]}
+					<ToggleButton {icon} {disabled} {value} {label} />
+				{/each}
+			</ToggleButtonGroup>
 		</div>
 	{/if}
 

package/package/components/ScriptVersionHistory.svelte

@@ -0,0 +1,57 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import PanelSection from './apps/editor/settingsPanel/common/PanelSection.svelte';
+import { classNames } from '../utils';
+import { ScriptService } from '../gen';
+import { workspaceStore } from '../stores';
+import { Skeleton } from './common';
+import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
+export let scriptPath;
+let selectedVersion = undefined;
+let versions = undefined;
+async function loadVersions() {
+    versions = (await ScriptService.getScriptByPath({ workspace: $workspaceStore, path: scriptPath })).parent_hashes;
+}
+loadVersions();
+</script>
+
+<Splitpanes class="!overflow-visible">
+	<Pane size={20}>
+		<PanelSection title="Past Versions">
+			<div class="flex flex-col gap-2 w-full">
+				{#if versions}
+					{#if versions.length > 0}
+						<div class="flex gap-2 flex-col">
+							{#each versions ?? [] as version}
+								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<div
+									class={classNames(
+										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+										selectedVersion == version ? 'bg-blue-100 text-blue-600' : ''
+									)}
+									on:click={() => (selectedVersion = version)}
+								>
+									<span class="text-xs truncate">{version}</span>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="text-sm text-gray-500">No items</div>
+					{/if}
+				{:else}
+					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+				{/if}
+			</div>
+		</PanelSection>
+	</Pane>
+	<Pane size={80}>
+		<div class="h-full w-full overflow-auto">
+			{#if selectedVersion}
+				{#key selectedVersion}
+					<FlowModuleScript path={scriptPath} hash={selectedVersion} />
+				{/key}
+			{:else}
+				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+			{/if}
+		</div>
+	</Pane>
+</Splitpanes>

package/package/components/ScriptVersionHistory.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        scriptPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptVersionHistoryProps = typeof __propDef.props;
+export type ScriptVersionHistoryEvents = typeof __propDef.events;
+export type ScriptVersionHistorySlots = typeof __propDef.slots;
+export default class ScriptVersionHistory extends SvelteComponentTyped<ScriptVersionHistoryProps, ScriptVersionHistoryEvents, ScriptVersionHistorySlots> {
+}
+export {};

package/package/components/SimpleEditor.svelte

@@ -45,6 +45,7 @@ export let extraLib = '';
 export let shouldBindKey = true;
 export let autoHeight = false;
 export let fixedOverflowWidgets = true;
+export let small = false;
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 buildWorkerDefinition('../../../workers', import.meta.url, false);
@@ -82,7 +83,8 @@ async function loadMonaco() {
     let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
     editor = meditor.create(divEl, {
         ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
-        overflowWidgetsDomNode: widgets
+        overflowWidgetsDomNode: widgets,
+        fontSize: small ? 12 : 14
     });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {

package/package/components/SimpleEditor.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         shouldBindKey?: boolean | undefined;
         autoHeight?: boolean | undefined;
         fixedOverflowWidgets?: boolean | undefined;
+        small?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;

package/package/components/Slider.svelte

@@ -5,9 +5,10 @@ import Tooltip from './Tooltip.svelte';
 export let text;
 export let tooltip = undefined;
 export let view = false;
+export let size = 'md';
 </script>
 
-<Button color="light" on:click={() => (view = !view)} variant="border"
+<Button color="light" on:click={() => (view = !view)} {size} variant="border"
 	>{text}
 	{#if tooltip}
 		<Tooltip wrapperClass="mx-1">{tooltip}</Tooltip>

package/package/components/Slider.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         text: string;
         tooltip?: string | undefined;
         view?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;