diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx index 82ff9257b2..6055e15fe4 100644 --- a/app/ui/lib/Listbox.tsx +++ b/app/ui/lib/Listbox.tsx @@ -7,13 +7,12 @@ */ import { Listbox as HListbox, - Label, ListboxButton, ListboxOption, ListboxOptions, } from '@headlessui/react' import cn from 'classnames' -import { type ReactNode, type Ref } from 'react' +import { useId, type ReactNode, type Ref } from 'react' import { SelectArrows6Icon } from '@oxide/design-system/icons/react' @@ -68,6 +67,7 @@ export const Listbox = ({ const noItems = !isLoading && items.length === 0 const isDisabled = disabled || noItems const zIndex = usePopoverZIndex() + const id = useId() return (
@@ -83,13 +83,20 @@ export const Listbox = ({ <> {label && (
- - + + {label} - {description && {description}} + {description && ( + {description} + )}
)} { // Now click back to floating IPs and reattach it to db1 await page.getByRole('link', { name: 'Floating IPs' }).click() await clickRowAction(page, 'cola-float', 'Attach') - await page.getByRole('button', { name: 'Select an instance' }).click() + await page.getByLabel('Instance').click() await page.getByRole('option', { name: 'db1' }).click() await page.getByRole('button', { name: 'Attach' }).click() diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts index 35b3f4a014..628b92b9b5 100644 --- a/test/e2e/instance-create.e2e.ts +++ b/test/e2e/instance-create.e2e.ts @@ -398,9 +398,10 @@ test('does not attach an ephemeral IP when the checkbox is unchecked', async ({ test('attaches a floating IP; disables button when no IPs available', async ({ page }) => { const attachFloatingIpButton = page.getByRole('button', { name: 'Attach floating IP' }) - const selectFloatingIpButton = page.getByRole('button', { name: 'Select a floating ip' }) + const dialog = page.getByRole('dialog') + const selectFloatingIpButton = dialog.getByRole('button', { name: 'Floating IP' }) const rootbeerFloatOption = page.getByRole('option', { name: 'rootbeer-float' }) - const attachButton = page.getByRole('button', { name: 'Attach', exact: true }) + const attachButton = dialog.getByRole('button', { name: 'Attach', exact: true }) const instanceName = 'with-floating-ip' await page.goto('/projects/mock-project/instances-new') diff --git a/test/e2e/instance-networking.e2e.ts b/test/e2e/instance-networking.e2e.ts index 26b868a751..f74b1b91b3 100644 --- a/test/e2e/instance-networking.e2e.ts +++ b/test/e2e/instance-networking.e2e.ts @@ -129,7 +129,7 @@ test('Instance networking tab — floating IPs', async ({ page }) => { // Select the 'rootbeer-float' option const dialog = page.getByRole('dialog') // TODO: this "select the option" syntax is awkward; it's working, but I suspect there's a better way - await dialog.getByRole('button', { name: 'Select a floating IP' }).click() + await dialog.getByLabel('Floating IP').click() await page.keyboard.press('ArrowDown') await page.keyboard.press('Enter') // await dialog.getByRole('button', { name: 'rootbeer-float' }).click()