windmill-components 1.408.2 → 1.430.2

package/package/components/AppConnectLightweightResourcePicker.svelte

@@ -16,7 +16,7 @@ if (workspace) {
 }
 onMount(async () => {
     if (resourceType) {
-        appConnect?.open(resourceType, express);
+        appConnect?.open(resourceType);
     }
 });
 </script>
@@ -24,24 +24,27 @@ onMount(async () => {
 <DarkModeObserver bind:darkMode />
 
 <div>
-	<div class="flex flex-row-reverse w-full">
-		<div class="flex gap-2">
-			{#if step > 2}
-				<Button variant="border" on:click={appConnect?.back}>Back</Button>
-			{/if}
-
-			<Button {disabled} on:click={appConnect?.next}>
-				{#if step == 2 && !manual}
-					Connect
-				{:else if step == 1}
-					Next
-				{:else}
-					Save
+	{#if !express}
+		<div class="flex flex-row-reverse w-full pb-2">
+			<div class="flex gap-2">
+				{#if step > 2}
+					<Button variant="border" on:click={appConnect?.back}>Back</Button>
 				{/if}
-			</Button>
+
+				<Button {disabled} on:click={appConnect?.next}>
+					{#if step == 2 && !manual}
+						Connect
+					{:else if step == 1}
+						Next
+					{:else}
+						Save
+					{/if}
+				</Button>
+			</div>
 		</div>
-	</div>
+	{/if}
 	<AppConnectInner
+		{express}
 		bind:this={appConnect}
 		bind:step
 		bind:resourceType

package/package/components/ArgInfo.svelte

@@ -70,16 +70,18 @@ async function getVariable(path) {
 		}}>{value}</button
 	>
 {:else if typeof value !== 'object'}
-	{truncate(JSON.stringify(value), 100)}
-	{#if JSON.stringify(value).length > 100}
-		<button
-			class="text-xs text-blue-500"
-			on:click={() => {
-				jsonViewerContent = value
-				jsonViewer.toggleDrawer()
-			}}>See expanded</button
-		>
-	{/if}
+	<span>
+		{truncate(JSON.stringify(value), 80)}
+		{#if JSON.stringify(value).length > 80}
+			<button
+				class="text-xs text-blue-500"
+				on:click={() => {
+					jsonViewerContent = value
+					jsonViewer.toggleDrawer()
+				}}>See expanded</button
+			>
+		{/if}
+	</span>
 {:else}
 	<div class="relative">
 		{#if JSON.stringify(value).length > 120}
@@ -91,7 +93,7 @@ async function getVariable(path) {
 				}}><Expand size={18} /></button
 			>
 		{/if}
-		<div class="max-h-40 overflow-auto">
+		<div class="max-h-60 overflow-auto">
 			<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
 		</div>
 	</div>

package/package/components/ArgInput.svelte

@@ -99,6 +99,7 @@ let error = '';
 let s3FilePicker;
 let s3FileUploadRawMode;
 let isListJson = false;
+let hasIsListJsonChanged = false;
 let el = undefined;
 let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
@@ -133,6 +134,39 @@ function computeDefaultValue(nvalue, inputCat, defaultValue, nnullable) {
 }
 computeDefaultValue();
 $: computeDefaultValue(value, inputCat, defaultValue, nullable);
+let lastValue = undefined;
+// By setting isListJson to true, we can render inputs even if the value is not an array of the correct type
+// This avoids the issue of the input being rendered as a string with value: [object Object], or as a number with value: NaN
+function checkArrayValueType() {
+    try {
+        if (Array.isArray(value) && value.length > 0) {
+            const firstItem = value?.[0];
+            const type = itemsType?.type;
+            switch (type) {
+                case 'string':
+                    if (typeof firstItem !== 'string') {
+                        isListJson = true;
+                    }
+                    break;
+                case 'number':
+                    if (typeof firstItem !== 'number') {
+                        isListJson = true;
+                    }
+                    break;
+            }
+        }
+    }
+    catch (e) {
+        console.error(e);
+    }
+    lastValue = value;
+}
+$: !isListJson &&
+    inputCat === 'list' &&
+    value != lastValue &&
+    itemsType?.type &&
+    !hasIsListJsonChanged &&
+    checkArrayValueType();
 $: defaultValue != undefined && handleDefaultValueChange();
 let oldDefaultValue = defaultValue;
 function handleDefaultValueChange() {
@@ -337,6 +371,9 @@ $: shouldDispatchChanges && debounced(value);
 									bind:selected={value}
 									options={itemsType?.multiselect ?? []}
 									selectedOptionsDraggable={true}
+									on:open={() => {
+										dispatch('focus')
+									}}
 								/>
 							</div>
 						{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
@@ -347,6 +384,9 @@ $: shouldDispatchChanges && debounced(value);
 									bind:selected={value}
 									options={itemsType?.enum ?? []}
 									selectedOptionsDraggable={true}
+									on:open={() => {
+										dispatch('focus')
+									}}
 								/>
 							</div>
 						{:else}
@@ -476,6 +516,11 @@ $: shouldDispatchChanges && debounced(value);
 					<div class="mt-2 mr-4">
 						<Toggle
 							on:change={(e) => {
+								// Once the user has changed the input type, we should not change it back automatically
+								if (!hasIsListJsonChanged) {
+									hasIsListJsonChanged = true
+								}
+
 								evalValueToRaw()
 								isListJson = !isListJson
 							}}
@@ -567,60 +612,67 @@ $: shouldDispatchChanges && debounced(value);
 				{#if oneOf && oneOf.length >= 2}
 					<div class="flex flex-col gap-2 w-full">
 						{#if oneOf && oneOf.length >= 2}
-							<ToggleButtonGroup bind:selected={oneOfSelected}>
+							<ToggleButtonGroup
+								on:selected={() => {
+									value = {}
+									redraw += 1
+								}}
+								bind:selected={oneOfSelected}
+							>
 								{#each oneOf as obj}
 									<ToggleButton value={obj.title} label={obj.title} />
 								{/each}
 							</ToggleButtonGroup>
-
 							{#if oneOfSelected}
 								{@const objIdx = oneOf.findIndex((o) => o.title === oneOfSelected)}
 								{@const obj = oneOf[objIdx]}
 								{#if obj && obj.properties && Object.keys(obj.properties).length > 0}
-									<div class="p-4 pl-8 border rounded w-full">
-										{#if orderEditable}
-											<SchemaFormDnd
-												{onlyMaskPassword}
-												{disablePortal}
-												{disabled}
-												schema={{
-													properties: Object.fromEntries(
-														Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
-													),
-													order: obj.order?.filter((k) => k !== 'label') ?? undefined,
-													$schema: '',
-													required: obj.required ?? [],
-													type: 'object'
-												}}
-												args={value}
-												dndType={`nested-${title}`}
-												on:reorder={(e) => {
-													if (oneOf && oneOf[objIdx]) {
-														const keys = e.detail
-														oneOf[objIdx].order = keys
-													}
-												}}
-												on:change
-											/>
-										{:else}
-											<SchemaForm
-												{onlyMaskPassword}
-												{disablePortal}
-												{disabled}
-												noDelete
-												schema={{
-													properties: Object.fromEntries(
-														Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
-													),
-													order: obj.order?.filter((k) => k !== 'label') ?? undefined,
-													$schema: '',
-													required: obj.required ?? [],
-													type: 'object'
-												}}
-												bind:args={value}
-											/>
-										{/if}
-									</div>
+									{#key redraw}
+										<div class="p-4 pl-8 border rounded w-full">
+											{#if orderEditable}
+												<SchemaFormDnd
+													{onlyMaskPassword}
+													{disablePortal}
+													{disabled}
+													schema={{
+														properties: Object.fromEntries(
+															Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
+														),
+														order: obj.order?.filter((k) => k !== 'label') ?? undefined,
+														$schema: '',
+														required: obj.required ?? [],
+														type: 'object'
+													}}
+													args={value}
+													dndType={`nested-${title}`}
+													on:reorder={(e) => {
+														if (oneOf && oneOf[objIdx]) {
+															const keys = e.detail
+															oneOf[objIdx].order = keys
+														}
+													}}
+													on:change
+												/>
+											{:else}
+												<SchemaForm
+													{onlyMaskPassword}
+													{disablePortal}
+													{disabled}
+													noDelete
+													schema={{
+														properties: Object.fromEntries(
+															Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
+														),
+														order: obj.order?.filter((k) => k !== 'label') ?? undefined,
+														$schema: '',
+														required: obj.required ?? [],
+														type: 'object'
+													}}
+													bind:args={value}
+												/>
+											{/if}
+										</div>
+									{/key}
 								{:else if disabled}
 									<textarea disabled />
 								{:else}
@@ -730,6 +782,12 @@ $: shouldDispatchChanges && debounced(value);
 						bind:value
 						{enum_}
 						{autofocus}
+						on:focus={() => {
+							dispatch('focus')
+						}}
+						on:blur={(e) => {
+							dispatch('blur')
+						}}
 						enumLabels={extra['enumLabels']}
 					/>
 				</div>
@@ -798,14 +856,16 @@ $: shouldDispatchChanges && debounced(value);
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items-center justify-between relative">
 						{#if password || extra?.['password'] == true}
-							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
-								<input type="text" bind:value />
-							{:else if onlyMaskPassword}
-								<Password
-									{disabled}
-									bind:password={value}
-									placeholder={placeholder ?? defaultValue ?? ''}
-								/>
+							{#if onlyMaskPassword}
+								{#if value && typeof value == 'string' && value?.startsWith('$var:')}
+									<input type="text" bind:value />
+								{:else}
+									<Password
+										{disabled}
+										bind:password={value}
+										placeholder={placeholder ?? defaultValue ?? ''}
+									/>
+								{/if}
 							{:else}
 								<PasswordArgInput {disabled} bind:value />
 							{/if}

package/package/components/AssignableTags.svelte

@@ -3,6 +3,7 @@ import { Pen } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import AssignableTagsInner from './AssignableTagsInner.svelte';
 export let placement = 'bottom-end';
+export let color = 'dark';
 </script>
 
 <Popup
@@ -10,9 +11,9 @@ export let placement = 'bottom-end';
 	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 >
 	<svelte:fragment slot="button">
-		<Button color="dark" size="xs" nonCaptureEvent={true}>
+		<Button {color} size="xs" nonCaptureEvent={true}>
 			<div class="flex flex-row gap-1 items-center"
-				><Pen size={14} /> Custom Tags&nbsp;<Tooltip light
+				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
 					>Tags are assigned to scripts and flows. Workers only accept jobs that correspond to their
 					worker tags. Scripts have a default tag based on the language they are in but users can
 					choose to override their tags with custom ones. This editor allow you to set the custom

package/package/components/AssignableTags.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         placement?: "top-end" | "bottom-end" | undefined;
+        color?: "dark" | "nord" | undefined;
     };
     events: {
         refresh: CustomEvent<any>;

package/package/components/AutheliaSetting.svelte

@@ -46,6 +46,10 @@ function changeOrg(org) {
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />

package/package/components/AuthentikSetting.svelte

@@ -46,6 +46,10 @@ function changeOrg(org) {
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />