diff --git a/app/components/form/fields/ImageSelectField.tsx b/app/components/form/fields/ImageSelectField.tsx index d2df362f5f..cf311cbd6f 100644 --- a/app/components/form/fields/ImageSelectField.tsx +++ b/app/components/form/fields/ImageSelectField.tsx @@ -59,9 +59,9 @@ export function toListboxItem(i: Image, includeProjectSiloIndicator = false): Li const formattedSize = `${bytesToGiB(size, 1)} GiB` // filter out any undefined metadata and create a comma-separated list - // for the selected listbox item (shown in labelString) + // for the selected listbox item (shown in selectedLabel) const condensedImageMetadata = [os, version, formattedSize].filter((i) => !!i).join(', ') - const metadataForLabelString = condensedImageMetadata.length + const metadataForSelectedLabel = condensedImageMetadata.length ? ` (${condensedImageMetadata})` : '' @@ -81,7 +81,7 @@ export function toListboxItem(i: Image, includeProjectSiloIndicator = false): Li )) return { value: i.id, - labelString: `${name}${metadataForLabelString}`, + selectedLabel: `${name}${metadataForSelectedLabel}`, label: ( <>
{name}
diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx index 62af6c9e0c..d959d9a12f 100644 --- a/app/forms/access-util.tsx +++ b/app/forms/access-util.tsx @@ -41,7 +41,7 @@ export const actorToItem = (actor: Actor): ListboxItem => ({ )} ), - labelString: actor.displayName, + selectedLabel: actor.displayName, }) export type AddRoleModalProps = { diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx index ea0ae12d80..e70ccb8a3f 100644 --- a/app/forms/disk-create.tsx +++ b/app/forms/disk-create.tsx @@ -253,7 +253,7 @@ const SnapshotSelectField = ({ control }: { control: Control }) => { const formattedSize = filesize(i.size, { base: 2, output: 'object' }) return { value: i.id, - labelString: `${i.name}`, + selectedLabel: `${i.name}`, label: ( <>
{i.name}
diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx index 3682cc1803..af80f3bb2f 100644 --- a/app/forms/floating-ip-create.tsx +++ b/app/forms/floating-ip-create.tsx @@ -35,7 +35,7 @@ const toListboxItem = (p: SiloIpPool) => { // For the default pool, add a label to the dropdown return { value: p.name, - labelString: p.name, + selectedLabel: p.name, label: ( <> {p.name}{' '} diff --git a/app/pages/project/floating-ips/AttachFloatingIpModal.tsx b/app/pages/project/floating-ips/AttachFloatingIpModal.tsx index 3436f24b71..7d28afffd4 100644 --- a/app/pages/project/floating-ips/AttachFloatingIpModal.tsx +++ b/app/pages/project/floating-ips/AttachFloatingIpModal.tsx @@ -74,7 +74,7 @@ export const AttachFloatingIpModal = ({ items={floatingIps.map((ip) => ({ value: ip.id, label: , - labelString: ip.name, + selectedLabel: ip.name, }))} required /> diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx index f61c4aadcd..7ea6ee03e4 100644 --- a/app/ui/lib/Listbox.tsx +++ b/app/ui/lib/Listbox.tsx @@ -26,7 +26,7 @@ import { TextInputHint } from './TextInput' export type ListboxItem = { value: Value -} & { label?: string | ReactNode; labelString?: string } +} & { label?: string | ReactNode; selectedLabel?: string } export interface ListboxProps { // null is allowed as a default empty value, but onChange will never be called with null @@ -121,8 +121,8 @@ export const Listbox = ({ >
{selectedItem ? ( - // labelString is one line, which is what we need when label is a ReactNode - selectedItem.labelString || selectedItem.label + // selectedLabel is one line, which is what we need when label is a ReactNode + selectedItem.selectedLabel || selectedItem.label ) : ( {noItems ? 'No items' : placeholder}