windmill-components 1.109.8 → 1.121.0

package/package/cloud.js

@@ -1,5 +1,4 @@
 import { BROWSER } from 'esm-env';
-import { get } from 'svelte/store';
 import { premiumStore, userStore, workspaceStore } from './stores';
 import { getUserExt } from './user';
 import { WorkspaceService } from './gen';
@@ -25,17 +24,4 @@ if (BROWSER) {
             userStore.set(undefined);
         }
     });
-    setInterval(async () => {
-        try {
-            const workspace = get(workspaceStore);
-            const user = get(userStore);
-            if (workspace && user && !user.is_super_admin && !user.is_admin) {
-                userStore.set(await getUserExt(workspace));
-                console.log('refreshed user');
-            }
-        }
-        catch (e) {
-            console.error('Could not refresh user', e);
-        }
-    }, 30000);
 }

package/package/common.d.ts

@@ -21,6 +21,7 @@ export interface SchemaProperty {
     items?: {
         type?: 'string' | 'number' | 'bytes' | 'object';
         contentEncoding?: 'base64';
+        enum?: string[];
     };
     properties?: {
         [name: string]: SchemaProperty;

package/package/components/ArgEnum.svelte

@@ -0,0 +1,53 @@
+<script>import { Pen } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+export let customValue;
+export let disabled;
+export let value;
+export let enum_;
+export let autofocus;
+export let defaultValue;
+export let valid;
+const dispatch = createEventDispatcher();
+</script>
+
+{#if !customValue}
+	<select
+		on:focus={(e) => {
+			dispatch('focus')
+		}}
+		{disabled}
+		class="px-6"
+		bind:value
+	>
+		{#each enum_ ?? [] as e}
+			<option>{e}</option>
+		{/each}
+	</select>
+{:else}
+	<input
+		{autofocus}
+		on:focus
+		type="text"
+		class={twMerge(
+			'secondaryBackground',
+			valid
+				? ''
+				: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+		)}
+		placeholder={defaultValue ?? ''}
+		bind:value
+	/>
+{/if}
+
+{#if !disabled}
+	<button
+		class="min-w-min !px-2 items-center text-gray-800 bg-gray-100 border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
+		on:click={() => {
+			customValue = !customValue
+		}}
+		title="Custom Value"
+	>
+		<Pen size={14} />
+	</button>
+{/if}

package/package/components/ArgEnum.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        customValue: boolean;
+        disabled: boolean;
+        value: any;
+        enum_: string[] | undefined;
+        autofocus: boolean;
+        defaultValue: string | undefined;
+        valid: boolean;
+    };
+    events: {
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ArgEnumProps = typeof __propDef.props;
+export type ArgEnumEvents = typeof __propDef.events;
+export type ArgEnumSlots = typeof __propDef.slots;
+export default class ArgEnum extends SvelteComponentTyped<ArgEnumProps, ArgEnumEvents, ArgEnumSlots> {
+}
+export {};

package/package/components/ArgInfo.svelte

@@ -1,7 +1,8 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { truncate } from '../utils';
-import { DrawerContent } from './common';
+import { copyToClipboard, truncate } from '../utils';
+import { ClipboardCopy, Expand } from 'lucide-svelte';
+import { Button, DrawerContent } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -18,7 +19,16 @@ async function getResource(path) {
 </script>
 
 <Drawer bind:this={jsonViewer} size="800px">
-	<DrawerContent title="Argument Details" on:close={jsonViewer.toggleDrawer}>
+	<DrawerContent title="Argument Details" on:close={jsonViewer.closeDrawer}>
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
+				color="light"
+				size="xs"
+			>
+				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+			</Button>
+		</svelte:fragment>
 		{#if isString(jsonViewerContent)}
 			<pre>{jsonViewerContent}</pre>
 		{:else}
@@ -54,16 +64,18 @@ async function getResource(path) {
 		>
 	{/if}
 {:else}
-	<div class="max-h-40 overflow-auto">
-		<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
+	<div class="relative">
+		{#if JSON.stringify(value).length > 120}
+			<button
+				class="text-xs absolute top-0 right-4 text-gray-500"
+				on:click={() => {
+					jsonViewerContent = value
+					jsonViewer.toggleDrawer()
+				}}><Expand size={18} /></button
+			>
+		{/if}
+		<div class="max-h-40 overflow-auto">
+			<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
+		</div>
 	</div>
-	{#if JSON.stringify(value).length > 120}
-		<button
-			class="text-xs text-blue-500"
-			on:click={() => {
-				jsonViewerContent = value
-				jsonViewer.toggleDrawer()
-			}}>See JSON</button
-		>
-	{/if}
 {/if}

package/package/components/ArgInput.svelte

@@ -1,6 +1,6 @@
 <script>import { faChevronDown, faChevronUp, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { DollarSign, Pen, X } from 'lucide-svelte';
+import { DollarSign, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import autosize from 'svelte-autosize';
 import Icon from 'svelte-awesome';
@@ -18,6 +18,9 @@ import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Toggle from './Toggle.svelte';
+import { twMerge } from 'tailwind-merge';
+import ArgEnum from './ArgEnum.svelte';
+import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -44,6 +47,7 @@ export let noMargin = false;
 export let extra = {};
 export let minW = true;
 export let prettifyHeader = false;
+export let resourceTypes;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 let error = '';
@@ -76,6 +80,14 @@ function computeDefaultValue(nvalue, inputCat, defaultValue) {
 }
 computeDefaultValue();
 $: computeDefaultValue(value, inputCat, defaultValue);
+$: defaultValue != undefined && handleDefaultValueChange();
+let oldDefaultValue = defaultValue;
+function handleDefaultValueChange() {
+    if (value == oldDefaultValue) {
+        value = defaultValue;
+    }
+    oldDefaultValue = defaultValue;
+}
 function evalValueToRaw() {
     rawValue = inputCat === 'object' ? JSON.stringify(value, null, 2) : undefined;
 }
@@ -144,52 +156,47 @@ $: validateInput(pattern, value);
 			<FieldHeader prettify={prettifyHeader} {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
-			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<span
-					class="underline"
-					on:click={() => {
-						seeEditable = !seeEditable
-					}}
-				>
-					Customize property
-					<Icon class="ml-2" data={seeEditable ? faChevronUp : faChevronDown} scale={0.7} />
-				</span>
+			<label class="text-gray-700">
+				Description
+				<textarea
+					class="mb-1"
+					use:autosize
+					rows="1"
+					bind:value={description}
+					on:keydown={onKeyDown}
+					placeholder="Field description"
+				/>
+			</label>
 
-				{#if seeEditable}
-					<div class="mt-2">
-						<label class="text-gray-700">
-							Description
-							<textarea
-								class="mb-1"
-								use:autosize
-								rows="1"
-								bind:value={description}
-								on:keydown={onKeyDown}
-								placeholder="Field description"
-							/>
+			{#if type == 'array'}
+				<ArrayTypeNarrowing bind:itemsType />
+			{:else if (type == 'string' && format != 'date-time') || ['number', 'object'].includes(type ?? '')}
+				<div class="p-2 my-1 text-xs border-solid border border-gray-200 rounded-lg">
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<span
+						class="underline"
+						on:click={() => {
+							seeEditable = !seeEditable
+						}}
+					>
+						Customize
+						<Icon class="ml-2" data={seeEditable ? faChevronUp : faChevronDown} scale={0.7} />
+					</span>
+
+					{#if seeEditable}
+						<div class="mt-2">
 							{#if type == 'string' && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'number'}
 								<NumberTypeNarrowing bind:min={extra['min']} bind:max={extra['max']} />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
-							{:else if type == 'array'}
-								<select bind:value={itemsType}>
-									<option value={undefined}>No specific item type</option>
-									<option value={{ type: 'string' }}> Items are strings</option>
-									<option value={{ type: 'object' }}> Items are objects (JSON)</option>
-									<option value={{ type: 'number' }}>Items are numbers</option>
-									<option value={{ type: 'string', contentEncoding: 'base64' }}
-										>Items are bytes</option
-									>
-								</select>
 							{/if}
-						</label>
-					</div>
-				{/if}
-			</div>
-			<span class="text-2xs">Input preview:</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
+			<span class="text-2xs font-semibold">Preview:</span>
 		{/if}
 
 		{#if description}
@@ -259,12 +266,24 @@ $: validateInput(pattern, value);
 												/>
 											{:else if itemsType?.type == 'object'}
 												<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+											{:else if Array.isArray(itemsType?.enum)}
+												<select
+													on:focus={(e) => {
+														dispatch('focus')
+													}}
+													class="px-6"
+													bind:value={v}
+												>
+													{#each itemsType?.enum ?? [] as e}
+														<option>{e}</option>
+													{/each}
+												</select>
 											{:else}
 												<input type="text" bind:value={v} />
 											{/if}
 											<button
 												transition:fade|local={{ duration: 100 }}
-												class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
+												class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 ml-2"
 												aria-label="Clear"
 												on:click={() => {
 													value.splice(i, 1)
@@ -287,7 +306,7 @@ $: validateInput(pattern, value);
 					<div class="flex mt-2">
 						<Button
 							variant="border"
-							color="dark"
+							color="light"
 							size="xs"
 							btnClasses="mt-1"
 							on:click={() => {
@@ -302,9 +321,9 @@ $: validateInput(pattern, value);
 						</Button>
 					</div>
 				</div>
-			{:else if inputCat == 'resource-object'}
+			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
 				<ObjectResourceInput {format} bind:value />
-			{:else if inputCat == 'object'}
+			{:else if inputCat == 'object' || inputCat == 'resource-object'}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
 						<SchemaForm
@@ -327,43 +346,7 @@ $: validateInput(pattern, value);
 				{/if}
 			{:else if inputCat == 'enum'}
 				<div class="flex flex-row w-full gap-1">
-					{#if !customValue}
-						<select
-							on:focus={(e) => {
-								dispatch('focus')
-							}}
-							{disabled}
-							class="px-6"
-							bind:value
-						>
-							{#each enum_ ?? [] as e}
-								<option>{e}</option>
-							{/each}
-						</select>
-					{:else}
-						<input
-							{autofocus}
-							on:focus
-							type="text"
-							class={valid
-								? ''
-								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-							placeholder={defaultValue ?? ''}
-							bind:value
-						/>
-					{/if}
-
-					{#if !disabled}
-						<button
-							class="min-w-min !px-2 items-center text-gray-800 bg-gray-100 border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
-							on:click={() => {
-								customValue = !customValue
-							}}
-							title="Custom Value"
-						>
-							<Pen size={14} />
-						</button>
-					{/if}
+					<ArgEnum {defaultValue} {valid} {customValue} {disabled} bind:value {enum_} {autofocus} />
 				</div>
 			{:else if inputCat == 'date'}
 				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
@@ -411,9 +394,12 @@ $: validateInput(pattern, value);
 								on:keydown={onKeyDown}
 								type="text"
 								{disabled}
-								class="w-full {valid
-									? ''
-									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+								class={twMerge(
+									'w-full',
+									valid
+										? ''
+										: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+								)}
 								placeholder={defaultValue ?? ''}
 								bind:value
 							/>

package/package/components/ArgInput.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         itemsType?: {
             type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
+            enum?: string[] | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
         properties?: {
@@ -36,6 +37,7 @@ declare const __propDef: {
         extra?: Record<string, any> | undefined;
         minW?: boolean | undefined;
         prettifyHeader?: boolean | undefined;
+        resourceTypes: string[] | undefined;
         editor?: SimpleEditor | undefined;
         focus?: (() => void) | undefined;
     };

package/package/components/ArrayTypeNarrowing.svelte

@@ -0,0 +1,73 @@
+<script>import { Button } from './common';
+export let itemsType;
+let selected = itemsType?.type != 'string'
+    ? itemsType?.type
+    : Array.isArray(itemsType?.enum)
+        ? 'enum'
+        : 'string';
+</script>
+
+<select
+	bind:value={selected}
+	on:change={() => {
+		if (selected == 'enum') {
+			itemsType = { type: 'string', enum: [] }
+		} else if (selected == 'string') {
+			itemsType = { type: 'string' }
+		} else if (selected == 'number') {
+			itemsType = { type: 'number' }
+		} else if (selected == 'object') {
+			itemsType = { type: 'object' }
+		} else if (selected == 'bytes') {
+			itemsType = { type: 'string', contentEncoding: 'base64' }
+		} else {
+			itemsType = undefined
+		}
+	}}
+>
+	<option value="string"> Items are strings</option>
+	<option value="enum">Items are strings from an enum</option>
+	<option value="object"> Items are objects (JSON)</option>
+	<option value="number">Items are numbers</option>
+	<option value="bytes">Items are bytes</option>
+</select>
+{#if Array.isArray(itemsType?.enum)}
+	<div class="pt-1" />
+	<label for="input" class="mb-2 text-gray-700 text-xs">
+		Enums
+		<div class="flex flex-col gap-1">
+			{#each itemsType?.enum || [] as e}
+				<div class="flex flex-row max-w-md">
+					<input id="input" type="text" bind:value={e} />
+					<Button
+						size="sm"
+						btnClasses="ml-6"
+						on:click={() => {
+							if (itemsType?.enum) {
+								itemsType.enum = (itemsType.enum || []).filter((el) => el !== e)
+							}
+						}}>-</Button
+					>
+				</div>
+			{/each}
+		</div>
+		<div class="flex flex-row my-1">
+			<Button
+				size="sm"
+				on:click={() => {
+					if (itemsType?.enum) {
+						itemsType.enum = itemsType.enum ? itemsType.enum.concat('') : ['']
+					}
+				}}>+</Button
+			>
+			<Button
+				variant="border"
+				size="sm"
+				btnClasses="ml-2"
+				on:click={() => itemsType?.enum && (itemsType.enum = undefined)}
+			>
+				Clear
+			</Button>
+		</div>
+	</label>
+{/if}

package/package/components/ArrayTypeNarrowing.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        itemsType: {
+            type?: 'string' | 'number' | 'bytes' | 'object';
+            contentEncoding?: 'base64';
+            enum?: string[];
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ArrayTypeNarrowingProps = typeof __propDef.props;
+export type ArrayTypeNarrowingEvents = typeof __propDef.events;
+export type ArrayTypeNarrowingSlots = typeof __propDef.slots;
+export default class ArrayTypeNarrowing extends SvelteComponentTyped<ArrayTypeNarrowingProps, ArrayTypeNarrowingEvents, ArrayTypeNarrowingSlots> {
+}
+export {};

package/package/components/CenteredModal.svelte

@@ -1,13 +1,9 @@
-<script>import { SettingsService } from '../gen';
-import { onMount } from 'svelte';
-import WindmillIcon from './icons/WindmillIcon.svelte';
+<script>import WindmillIcon from './icons/WindmillIcon.svelte';
+import Uptodate from './Uptodate.svelte';
+import Version from './Version.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 export let disableLogo = false;
-let version = '';
-onMount(async () => {
-    version = await SettingsService.backendVersion();
-});
 </script>
 
 <div class="center-center min-h-screen p-4 relative bg-gray-50">
@@ -39,7 +35,9 @@ onMount(async () => {
 		</div>
 	</div>
 
-	<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
-		<span class="font-mono">{version}</span>
+	<div class="absolute top-0 right-0 text-2xs text-gray-600 italic px-3 py-1">
+		<span class="font-mono flex flex-col">
+			<div>Windmill <Version /></div><div><Uptodate /></div>
+		</span>
 	</div>
 </div>

package/package/components/DeployToSetting.svelte

@@ -0,0 +1,35 @@
+<script>import { WorkspaceService } from '../gen';
+import { usersWorkspaceStore, workspaceStore } from '../stores';
+import { sendUserToast } from '../toast';
+export let workspaceToDeployTo;
+$: deployableWorkspaces = $usersWorkspaceStore?.workspaces
+    .map((w) => w.id)
+    .filter((w) => w != $workspaceStore);
+</script>
+
+<h3 class="mt-8">Workspace to link to</h3>
+<div class="flex min-w-0 mt-2">
+	<select
+		bind:value={workspaceToDeployTo}
+		on:change={async (e) => {
+			await WorkspaceService.editDeployTo({
+				workspace: $workspaceStore ?? '',
+				requestBody: { deploy_to: workspaceToDeployTo == '' ? undefined : workspaceToDeployTo }
+			})
+			if (workspaceToDeployTo == '') {
+				workspaceToDeployTo = undefined
+				sendUserToast('Disabled setting deployable workspace')
+			} else {
+				sendUserToast('Set deployable workspace to ' + workspaceToDeployTo)
+			}
+		}}
+	>
+		{#if deployableWorkspaces?.length == 0}
+			<option disabled>No workspace deployable to</option>
+		{/if}
+		<option value="">Disable deployment</option>
+		{#each deployableWorkspaces ?? [] as name}
+			<option value={name}>{name}</option>
+		{/each}
+	</select>
+</div>

package/package/components/DeployToSetting.svelte.d.ts

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