windmill-components 1.542.5 → 1.555.0

package/package/components/ObjectStoreConfigSettings.svelte

@@ -229,28 +229,36 @@ async function testConnection() {
 				<label class="block pb-2">
 					<span class="text-primary font-semibold text-sm">Service Account Key</span>
 					<span class="text-tertiary text-2xs">JSON content of the service account key file</span>
-					<SimpleEditor
-						lang="json"
-						bind:code={
-							() => {
-								if (bucket_config?.type === 'Gcs') {
-									return JSON.stringify(bucket_config.serviceAccountKey)
-								} else {
-									return '{}'
-								}
-							},
-							(v) => {
-								if (bucket_config?.type === 'Gcs') {
-									try {
-										bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
-									} catch (_) {
-										bucket_config.serviceAccountKey = {}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onclick={(ev) => {
+							ev.stopPropagation() // this is to prevent wrapping label interference
+						}}
+					>
+						<SimpleEditor
+							lang="json"
+							bind:code={
+								() => {
+									if (bucket_config?.type === 'Gcs') {
+										return JSON.stringify(bucket_config.serviceAccountKey)
+									} else {
+										return '{}'
+									}
+								},
+								(v) => {
+									if (bucket_config?.type === 'Gcs') {
+										try {
+											bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
+										} catch (_) {
+											bucket_config.serviceAccountKey = {}
+										}
 									}
 								}
 							}
-						}
-						class="h-80"
-					/>
+							class="h-80"
+						/>
+					</div>
 				</label>
 			{:else}
 				<div>Unknown bucket type {bucket_config['type']}</div>

package/package/components/Password.svelte

@@ -1,12 +1,8 @@
-<script lang="ts">// @ts-nocheck
-import { onMount } from 'svelte';
-export let password;
-export let placeholder = '******';
-export let disabled = false;
-export let required = false;
-export let small = false;
-$: red = required && (password == '' || password == undefined);
-let hideValue = true;
+<script lang="ts">import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+let { password = $bindable(), placeholder = '******', disabled = false, required = false, small = false, onKeyDown } = $props();
+let red = $derived(required && (password == '' || password == undefined));
+let hideValue = $state(true);
 let randomId = (Math.random() * 10e15).toString(16);
 </script>
 
@@ -25,7 +21,7 @@ let randomId = (Math.random() * 10e15).toString(16);
 				: ''} text-sm h-9"
 			type="password"
 			bind:value={password}
-			on:keydown
+			onkeydown={onKeyDown}
 			autocomplete="new-password"
 			{placeholder}
 			{disabled}
@@ -37,7 +33,7 @@ let randomId = (Math.random() * 10e15).toString(16);
 				: ''} text-sm h-9"
 			type="text"
 			bind:value={password}
-			on:keydown
+			onkeydown={bubble('keydown')}
 			autocomplete="new-password"
 			{placeholder}
 			{disabled}

package/package/components/Password.svelte.d.ts

@@ -1,26 +1,11 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Password: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     password: string | undefined;
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
     small?: boolean;
-}, {
-    keydown: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Password = InstanceType<typeof Password>;
+    onKeyDown?: (event: KeyboardEvent) => void;
+}
+declare const Password: import("svelte").Component<Props, {}, "password">;
+type Password = ReturnType<typeof Password>;
 export default Password;

package/package/components/PasswordArgInput.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">import { VariableService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
 import { generateRandomString } from '../utils';
+import { Button } from './common';
 import Password from './Password.svelte';
-export let value = undefined;
-export let disabled;
-let path = '';
-let password = value && typeof value === 'string' && !value.startsWith('$var:') ? value : '';
+import { untrack } from 'svelte';
+let { value = $bindable(undefined), disabled } = $props();
+let path = $state('');
+let password = $state(value && typeof value === 'string' && !value.startsWith('$var:') ? value : '');
 let isGenerating = false;
+let userPrefix = $derived('u/' + ($userStore?.username ?? $userStore?.email)?.split('@')[0] + '/secret_arg/');
 async function generateValue() {
     if (isGenerating)
         return;
     isGenerating = true;
     try {
-        let npath = 'u/' +
-            ($userStore?.username ?? $userStore?.email)?.split('@')[0] +
-            '/secret_arg/' +
-            generateRandomString(12);
+        let npath = userPrefix + generateRandomString(12);
         let nvalue = '$var:' + npath;
         await VariableService.createVariable({
             workspace: $workspaceStore,
@@ -28,6 +27,7 @@ async function generateValue() {
             }
         });
         path = npath;
+        console.log('generated', nvalue);
         value = nvalue;
         debouncedUpdate();
     }
@@ -54,12 +54,32 @@ function debouncedUpdate() {
     timeout && clearTimeout(timeout);
     timeout = setTimeout(updateValue, 500);
 }
-$: password && debouncedUpdate();
-$: $workspaceStore &&
-    ($userStore?.username || $userStore?.email) &&
-    path == '' &&
-    password != '' &&
-    generateValue();
+$effect(() => {
+    password && untrack(() => debouncedUpdate());
+});
+$effect(() => {
+    $workspaceStore &&
+        ($userStore?.username || $userStore?.email) &&
+        path == '' &&
+        password != '' &&
+        untrack(() => generateValue());
+});
 </script>
 
-<Password {disabled} bind:password />
+{#if value?.startsWith('$var:') && !value.startsWith('$var:' + userPrefix)}
+	<div class="flex items-center gap-2 text-sm text-tertiary">
+		Linked to static variable
+		<Button
+			color="light"
+			size="xs"
+			variant="border"
+			onclick={() => {
+				value = ''
+			}}
+		>
+			Reset variable link
+		</Button>
+	</div>
+{:else}
+	<Password {disabled} bind:password />
+{/if}

package/package/components/PasswordArgInput.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PasswordArgInput: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value?: string | undefined;
     disabled: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PasswordArgInput = InstanceType<typeof PasswordArgInput>;
+}
+declare const PasswordArgInput: import("svelte").Component<Props, {}, "value">;
+type PasswordArgInput = ReturnType<typeof PasswordArgInput>;
 export default PasswordArgInput;

package/package/components/Path.svelte

@@ -344,10 +344,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 							<ToggleButton
 								icon={User}
 								disabled={disabled || disableEditing}
-								light
-								size="xs"
 								value="user"
-								position="left"
 								label="User"
 								{item}
 							/>
@@ -355,10 +352,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 							<ToggleButton
 								icon={Folder}
 								disabled={disabled || disableEditing}
-								light
-								size="xs"
 								value="folder"
-								position="right"
 								label="Folder"
 								{item}
 							/>
@@ -367,7 +361,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 				</div>
 			{/if}
 			{#if !hideUser}
-				<div class="text-xl">/</div>
+				<div class="text-xl text-tertiary">/</div>
 			{/if}
 			<div>
 				{#if meta.ownerKind === 'user'}
@@ -389,7 +383,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 					</label>
 				{/if}
 			</div>
-			<span class="text-xl">/</span>
+			<span class="text-xl text-tertiary">/</span>
 			<label class="block grow w-full max-w-md">
 				<!-- svelte-ignore a11y_autofocus -->
 				<input

package/package/components/Path.svelte.d.ts

@@ -34,6 +34,6 @@ declare const Path: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: () => void;
     setName: (x: string) => void;
     reset: () => Promise<void>;
-}, "error" | "path" | "disabled" | "dirty">;
+}, "path" | "disabled" | "error" | "dirty">;
 type Path = InstanceType<typeof Path>;
 export default Path;

package/package/components/QueuePosition.svelte

@@ -16,8 +16,12 @@ $effect(() => {
                 JobService.getScheduledFor({
                     workspace: workspace,
                     id: jobId
-                }).then((response) => {
+                })
+                    .then((response) => {
                     scheduledFor = response;
+                })
+                    .catch((error) => {
+                    console.error('Failed to fetch scheduled for:', error);
                 });
             }
             catch (error) {
@@ -45,8 +49,8 @@ $effect(() => {
         queueState = undefined;
     }
     return () => {
+        scheduledForTimeout && clearTimeout(scheduledForTimeout);
         if (queuePositionInterval) {
-            scheduledForTimeout && clearTimeout(scheduledForTimeout);
             clearInterval(queuePositionInterval);
         }
     };

package/package/components/ResourceEditor.svelte

@@ -258,10 +258,9 @@ run(() => {
 					<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
 						File content ({resourceTypeInfo.format_extension})
 					</h5>
-					<div class="h-full w-full border p-1 rounded">
+					<div class="">
 						<SimpleEditor
 							autoHeight
-							class="editor"
 							lang={resourceTypeInfo.format_extension}
 							bind:code={textFileContent}
 							fixedOverflowWidgets={false}
@@ -291,14 +290,8 @@ run(() => {
 				{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
 						>{jsonError}</span
 					>{:else}<div class="py-2"></div>{/if}
-				<div class="h-full w-full border p-1 rounded">
-					<SimpleEditor
-						autoHeight
-						class="editor"
-						lang="json"
-						bind:code={rawCode}
-						fixedOverflowWidgets={false}
-					/>
+				<div class="bg-surface-secondary rounded-md border py-2.5">
+					<SimpleEditor autoHeight lang="json" bind:code={rawCode} />
 				</div>
 			{/if}
 		</div>

package/package/components/ResourcePicker.svelte

@@ -4,12 +4,14 @@ import { onMount, untrack } from 'svelte';
 import AppConnect from './AppConnectDrawer.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import { Button } from './common';
-import { Pen, Plus, RotateCw } from 'lucide-svelte';
+import { Loader2, Pen, Plus, RotateCw } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 import Select from './select/Select.svelte';
 import DbManagerDrawer from './DBManagerDrawer.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
-let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, onClear = undefined, excludedValues = undefined } = $props();
+import { twMerge } from 'tailwind-merge';
+import DropdownV2 from './DropdownV2.svelte';
+let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined } = $props();
 if (initialValue && value == undefined) {
     console.log('initialValue', initialValue);
     value = initialValue;
@@ -128,91 +130,102 @@ let dbManagerDrawer = $state();
 	}}
 />
 <!-- {JSON.stringify({ value, collection })} -->
-<div class="flex flex-col w-full items-start min-h-9">
+<div class="flex flex-col w-full items-start min-h-10 {className}">
 	<div class="flex flex-row w-full items-center">
-		{#if collection?.length > 0}
-			<Select
-				{disabled}
-				{disablePortal}
-				bind:value={
-					() => value,
-					(v) => {
-						value = v
-						valueType = collection.find((x) => x?.value == v)?.type
-					}
+		<Select
+			{disabled}
+			{disablePortal}
+			bind:value={
+				() => value,
+				(v) => {
+					value = v
+					valueType = collection.find((x) => x?.value == v)?.type
 				}
-				onClear={() => {
-					initialValue = undefined
-					value = undefined
-					valueType = undefined
-					onClear?.()
-				}}
-				items={collection}
-				clearable
-				class="text-clip grow min-w-0"
-				placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
-			/>
-		{:else if !loading}
-			<div class="text-2xs text-tertiary mr-2">0 found</div>
-		{/if}
-		{#if !loading}
-			<div class="mx-0.5"></div>
-			{#if value && value != ''}
+			}
+			onClear={() => {
+				initialValue = undefined
+				value = undefined
+				valueType = undefined
+				onClear?.()
+			}}
+			items={collection}
+			clearable
+			class="text-clip grow min-w-0"
+			inputClass={twMerge('min-h-10', selectInputClass)}
+			placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
+			itemLabelWrapperClasses="flex-1"
+			itemButtonWrapperClasses="flex"
+		>
+			{#snippet endSnippet({ item, close })}
 				<Button
 					{disabled}
 					color="light"
 					variant="contained"
-					size="sm"
-					btnClasses="w-8 px-0.5 py-1.5"
-					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					size="xs3"
+					btnClasses="w-8 px-0.5 py-1.5 bg-transparent hover:bg-surface-secondary"
+					wrapperClasses="-mr-2 pl-1"
+					on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
 					startIcon={{ icon: Pen }}
 					iconOnly
 				/>
-			{/if}
-
-			{#if resourceType?.includes(',')}
-				{#each resourceType.split(',') as rt}
+			{/snippet}
+			{#snippet bottomSnippet({ close })}
+				<div class="flex bg-surface border-t divide-x">
+					{#if resourceType?.includes(',')}
+						<DropdownV2
+							enableFlyTransition
+							items={resourceType?.split(',').map((rt) => ({
+								displayName: `${rt} resource`,
+								icon: Plus,
+								action: () => (appConnect?.open?.(rt), close())
+							})) ?? []}
+						>
+							{#snippet buttonReplacement()}
+								<Button
+									{disabled}
+									color="light"
+									variant="contained"
+									wrapperClasses="flex-1"
+									btnClasses="rounded-none mt-0.5"
+									size="sm"
+									startIcon={{ icon: Plus }}
+								>
+									Add a resource
+								</Button>
+							{/snippet}
+						</DropdownV2>
+					{:else}
+						<Button
+							{disabled}
+							color="light"
+							variant="contained"
+							wrapperClasses="flex-1"
+							btnClasses="rounded-none"
+							size="sm"
+							on:click={() => (appConnect?.open?.(resourceType), close())}
+							startIcon={{ icon: Plus }}
+						>
+							Add a {resourceType} resource
+						</Button>
+					{/if}
 					<Button
-						{disabled}
-						color="light"
 						variant="contained"
+						color="light"
+						btnClasses="rounded-none"
 						size="sm"
-						btnClasses="w-8 px-0.5 py-1.5"
-						on:click={() => appConnect?.open?.(rt)}
-						startIcon={{ icon: Plus }}>{rt}</Button
-					>
-				{/each}
-			{:else}
-				<Button
-					{disabled}
-					color="light"
-					variant="border"
-					size="sm"
-					on:click={() => appConnect?.open?.(resourceType)}
-					startIcon={{ icon: Plus }}
-					iconOnly={collection?.length > 0}
-					>{#if collection?.length == 0}
-						Add a {resourceType} resource
-					{/if}</Button
-				>
-				<div class="mx-0.5"></div>
-			{/if}
-		{/if}
-
-		<Button
-			variant="contained"
-			color="light"
-			btnClasses="w-8 px-0.5 py-1.5"
-			size="sm"
-			on:click={() => {
-				loadResources(resourceType)
-			}}
-			startIcon={{ icon: RotateCw }}
-			iconOnly
-		/>
+						on:click={() => {
+							loadResources(resourceType)
+						}}
+						startIcon={loading ? { icon: Loader2, classes: 'animate-spin' } : { icon: RotateCw }}
+						iconOnly
+					/>
+				</div>
+			{/snippet}
+		</Select>
 	</div>
 	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'resource', path: value }, { resource_type: resourceType })}
 		<ExploreAssetButton
+			class="mt-1"
 			_resourceMetadata={{ resource_type: resourceType }}
 			asset={{ kind: 'resource', path: value }}
 			{dbManagerDrawer}

package/package/components/ResourcePicker.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     expressOAuthSetup?: boolean;
     defaultValues?: Record<string, any> | undefined;
     placeholder?: string | undefined;
+    selectInputClass?: string;
+    class?: string;
     onClear?: () => void;
     excludedValues?: string[];
 }

package/package/components/RunChart.svelte

@@ -217,7 +217,7 @@ let scatterOptions = $derived({
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-26px] left-[160px]"
+		<div class="absolute top-[-28px] left-[180px]"
 			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
 				>Load more <Tooltip2
 					>There are more jobs to load but only the first 1000 were fetched</Tooltip2

package/package/components/RunForm.svelte

@@ -12,7 +12,6 @@ import JsonInputs from './JsonInputs.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import InputSelectedBadge from './schema/InputSelectedBadge.svelte';
 import { untrack } from 'svelte';
-import {} from '../gen';
 let reloadArgs = $state(0);
 let jsonEditor = $state(undefined);
 let schemaHeight = $state(0);
@@ -159,7 +158,7 @@ $effect(() => {
 	{#if topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
-			disabled={!isValid || jsonView}
+			disabled={!isValid && !jsonView}
 			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 		>
 			{buttonText}
@@ -167,10 +166,12 @@ $effect(() => {
 	{/if}
 	{#if runnable?.schema}
 		<div class="my-2"></div>
-		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
-			<div class="text-sm py-4 italic">No arguments</div>
-		{:else if jsonView}
-			<div class="py-2" style="height: {schemaHeight}px" data-schema-picker>
+		{#if jsonView}
+			<div
+				class="py-2"
+				style="height: {!schemaHeight || schemaHeight < 600 ? 600 : schemaHeight}px"
+				data-schema-picker
+			>
 				<JsonInputs
 					bind:this={jsonEditor}
 					on:select={(e) => {
@@ -182,23 +183,17 @@ $effect(() => {
 					placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
 				/>
 			</div>
+		{:else if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
+			<div class="text-sm py-4 italic">No arguments</div>
 		{:else}
 			{#key reloadArgs}
 				<div bind:clientHeight={schemaHeight}>
 					<SchemaForm
-						helperScript={runnable.hash
-							? {
-									type: 'hash',
-									hash: runnable.hash
-								}
-							: runnable.schema?.['x-windmill-dyn-select-code'] &&
-								  runnable.schema?.['x-windmill-dyn-select-lang']
-								? {
-										type: 'inline',
-										code: runnable.schema['x-windmill-dyn-select-code'] as string,
-										lang: runnable.schema['x-windmill-dyn-select-lang'] as ScriptLang
-									}
-								: undefined}
+						helperScript={{
+							source: 'deployed',
+							path: runnable.path!,
+							runnable_kind: runnable.hash ? 'script' : 'flow'
+						}}
 						prettifyHeader
 						{noVariablePicker}
 						{autofocus}
@@ -220,7 +215,7 @@ $effect(() => {
 					{loading}
 					color="dark"
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
-					disabled={!isValid || jsonView}
+					disabled={!isValid && !jsonView}
 					on:click={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}
 					shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 				>
@@ -258,7 +253,7 @@ $effect(() => {
 	{:else if !topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
-			disabled={!isValid || jsonView}
+			disabled={!isValid && !jsonView}
 			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 			shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 		>

package/package/components/S3ArrayHelperButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import { Button } from './common';
+import { Plug } from 'lucide-svelte';
+let { label = 'Add object from an expression', onClick, connecting = false, class: className = '' } = $props();
+</script>
+
+{#if !connecting}
+	<Button
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="font-normal text-tertiary"
+		startIcon={{ icon: Plug }}
+		onclick={onClick}
+		wrapperClasses={className}
+	>
+		{label}
+	</Button>
+{/if}

package/package/components/S3ArrayHelperButton.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    label?: string;
+    onClick: () => void;
+    connecting?: boolean;
+    class?: string;
+}
+declare const S3ArrayHelperButton: import("svelte").Component<Props, {}, "">;
+type S3ArrayHelperButton = ReturnType<typeof S3ArrayHelperButton>;
+export default S3ArrayHelperButton;

package/package/components/S3FilePicker.svelte

@@ -717,7 +717,7 @@ $effect.pre(() => {
 			<div class="flex gap-1">
 				{#if secondaryStorageNames.value?.length}
 					<Select
-						inputClass="h-10 min-w-44 !placeholder-primary"
+						inputClass="h-10 min-w-44 !placeholder-secondary"
 						items={[
 							{ value: undefined, label: 'Default storage' },
 							...secondaryStorageNames.value.map((value) => ({ value }))