Move from labelString to selectedLabel (#2251)

Author: charliepark

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: (
       <>
         <div>{name}</div>

app/forms/access-util.tsx

@@ -41,7 +41,7 @@ export const actorToItem = (actor: Actor): ListboxItem => ({
       )}
     </>
   ),
-  labelString: actor.displayName,
+  selectedLabel: actor.displayName,
 })
 
 export type AddRoleModalProps = {

app/forms/disk-create.tsx

@@ -253,7 +253,7 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
         const formattedSize = filesize(i.size, { base: 2, output: 'object' })
         return {
           value: i.id,
-          labelString: `${i.name}`,
+          selectedLabel: `${i.name}`,
           label: (
             <>
               <div>{i.name}</div>

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}{' '}

app/pages/project/floating-ips/AttachFloatingIpModal.tsx

@@ -74,7 +74,7 @@ export const AttachFloatingIpModal = ({
               items={floatingIps.map((ip) => ({
                 value: ip.id,
                 label: <FloatingIpLabel fip={ip} />,
-                labelString: ip.name,
+                selectedLabel: ip.name,
               }))}
               required
             />

app/ui/lib/Listbox.tsx

@@ -26,7 +26,7 @@ import { TextInputHint } from './TextInput'
 
 export type ListboxItem<Value extends string = string> = {
   value: Value
-} & { label?: string | ReactNode; labelString?: string }
+} & { label?: string | ReactNode; selectedLabel?: string }
 
 export interface ListboxProps<Value extends string = string> {
   // null is allowed as a default empty value, but onChange will never be called with null
@@ -121,8 +121,8 @@ export const Listbox = <Value extends string = string>({
             >
               <div className="w-full overflow-hidden overflow-ellipsis whitespace-pre px-3 text-left">
                 {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
                 ) : (
                   <span className="text-quaternary">
                     {noItems ? 'No items' : placeholder}