Refactor to eliminate IpPoolSelector (#3113)

After refactors at the end of #3057, there wasn't much left of
`IpPoolSelector`, so I intended to remove it. Essentially all it did was
sort the pools, which we can do at the call sites. Removing it is a net
-40 line change with no loss of functionality.

Author: david-crespo

app/api/util.ts

@@ -107,6 +107,15 @@ export const poolHasIpVersion = (versions: Iterable<IpVersion>) => {
   return (pool: { ipVersion: IpVersion }): boolean => versionSet.has(pool.ipVersion)
 }
 
+/** Sort pools: defaults first, then v4 before v6, then by name */
+export const sortPools = <T extends SiloIpPool>(pools: T[]) =>
+  R.sortBy(
+    pools,
+    (p) => !p.isDefault, // false sorts first → defaults first
+    (p) => p.ipVersion, // v4 before v6
+    (p) => p.name
+  )
+
 const instanceActions = {
   // NoVmm maps to to Stopped:
   // https://github.com/oxidecomputer/omicron/blob/6dd9802/nexus/db-model/src/instance_state.rs#L55

app/components/AttachEphemeralIpModal.tsx

@@ -15,12 +15,14 @@ import {
   poolHasIpVersion,
   q,
   queryClient,
+  sortPools,
   useApiMutation,
   usePrefetchedQuery,
   type IpVersion,
 } from '~/api'
-import { IpPoolSelector } from '~/components/form/fields/IpPoolSelector'
+import { ListboxField } from '~/components/form/fields/ListboxField'
 import { HL } from '~/components/HL'
+import { toIpPoolItem } from '~/components/IpPoolListboxItem'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
@@ -84,12 +86,14 @@ export const AttachEphemeralIpModal = ({
         <Modal.Section>
           {infoMessage && <Message variant="info" content={infoMessage} />}
           <form>
-            <IpPoolSelector
+            <ListboxField
+              name="pool"
+              label="Pool"
               control={form.control}
-              poolFieldName="pool"
-              pools={compatibleUnicastPools}
+              items={sortPools(compatibleUnicastPools).map(toIpPoolItem)}
               disabled={compatibleUnicastPools.length === 0}
-              compatibleVersions={availableVersions}
+              placeholder="Select a pool"
+              noItemsPlaceholder="No pools available"
             />
           </form>
         </Modal.Section>

app/components/IpPoolListboxItem.tsx

@@ -0,0 +1,32 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import type { SiloIpPool } from '@oxide/api'
+import { Badge } from '@oxide/design-system/ui'
+
+import { IpVersionBadge } from '~/components/IpVersionBadge'
+import type { ListboxItem } from '~/ui/lib/Listbox'
+
+/** Format a SiloIpPool for use as a ListboxField item */
+export function toIpPoolItem(p: SiloIpPool): ListboxItem {
+  const value = p.name
+  const selectedLabel = p.name
+  const label = (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-1.5">
+        {p.name}
+        {p.isDefault && <Badge color="neutral">default</Badge>}
+        <IpVersionBadge ipVersion={p.ipVersion} />
+      </div>
+      {!!p.description && (
+        <div className="text-secondary selected:text-accent-secondary">{p.description}</div>
+      )}
+    </div>
+  )
+  return { value, selectedLabel, label }
+}

app/components/form/fields/IpPoolSelector.tsx

@@ -14,16 +14,18 @@ import {
   isUnicastPool,
   q,
   queryClient,
+  sortPools,
   useApiMutation,
   usePrefetchedQuery,
   type FloatingIpCreate,
 } from '@oxide/api'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
-import { IpPoolSelector } from '~/components/form/fields/IpPoolSelector'
+import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { toIpPoolItem } from '~/components/IpPoolListboxItem'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
@@ -97,7 +99,15 @@ export default function CreateFloatingIpSideModalForm() {
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
-      <IpPoolSelector control={form.control} poolFieldName="pool" pools={unicastPools} />
+      <ListboxField
+        name="pool"
+        label="Pool"
+        control={form.control}
+        items={sortPools(unicastPools).map(toIpPoolItem)}
+        required
+        placeholder="Select a pool"
+        noItemsPlaceholder="No pools available"
+      />
       <SideModalFormDocs docs={[docLinks.floatingIps]} />
     </SideModalForm>
   )

app/forms/floating-ip-create.tsx

@@ -54,7 +54,7 @@ import {
 } from '~/components/form/fields/DisksTableField'
 import { FileField } from '~/components/form/fields/FileField'
 import { BootDiskImageSelectField as ImageSelectField } from '~/components/form/fields/ImageSelectField'
-import { IpPoolSelector } from '~/components/form/fields/IpPoolSelector'
+import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { NetworkInterfaceField } from '~/components/form/fields/NetworkInterfaceField'
 import { NumberField } from '~/components/form/fields/NumberField'
@@ -63,6 +63,7 @@ import { SshKeysField } from '~/components/form/fields/SshKeysField'
 import { Form } from '~/components/form/Form'
 import { FullPageForm } from '~/components/form/FullPageForm'
 import { HL } from '~/components/HL'
+import { toIpPoolItem } from '~/components/IpPoolListboxItem'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Button } from '~/ui/lib/Button'
@@ -331,15 +332,17 @@ function EphemeralIpCheckbox({
         </span>
       </Wrap>
       <div className={`my-2 ml-6 ${checked ? '' : 'hidden'}`}>
-        <IpPoolSelector
+        <ListboxField
+          name={poolFieldName}
           control={control}
-          poolFieldName={poolFieldName}
-          pools={pools}
+          items={pools.map(toIpPoolItem)}
           disabled={isSubmitting}
           required={checked}
           hideOptionalTag
           label={`${displayVersion} pool`}
           hideLabel
+          placeholder="Select a pool"
+          noItemsPlaceholder="No pools available"
         />
       </div>
     </div>

app/forms/instance-create.tsx

@@ -30,6 +30,13 @@ test('can create a floating IP', async ({ page }) => {
   // Default silo has both v4 and v6 defaults, so no pool is preselected
   const poolDropdown = page.getByLabel('Pool')
   await expect(poolDropdown).toContainText('Select a pool')
+
+  // Pool selection is required when no default can be chosen automatically
+  const dialog = page.getByRole('dialog', { name: 'Create floating IP' })
+  await page.getByRole('button', { name: 'Create floating IP' }).click()
+  await expect(dialog).toBeVisible()
+  await expect(dialog.getByText('Pool is required')).toBeVisible()
+
   await poolDropdown.click()
   await page.getByRole('option', { name: 'ip-pool-1' }).click()
   await page.getByRole('button', { name: 'Create floating IP' }).click()