diff --git a/app/forms/disk-attach.tsx b/app/forms/disk-attach.tsx index f7995fd307..bfe2a4a7bf 100644 --- a/app/forms/disk-attach.tsx +++ b/app/forms/disk-attach.tsx @@ -5,7 +5,12 @@ * * Copyright Oxide Computer Company */ +import { Combobox } from '@headlessui/react' +import cn from 'classnames' +import { useState } from 'react' + import { useApiQuery, type ApiError } from '@oxide/api' +import { DirectionDownIcon } from '@oxide/design-system/icons/react' import { ListboxField } from '~/components/form/fields/ListboxField' import { SideModalForm } from '~/components/form/SideModalForm' @@ -42,6 +47,13 @@ export function AttachDiskSideModalForm({ (d) => d.state.state === 'detached' ) || [] + const [selectedDisk, setSelectedDisk] = useState(detachedDisks[0]) + const [query, setQuery] = useState('') + const filteredDisks = + query === '' + ? detachedDisks + : detachedDisks.filter((d) => d.name.includes(query.toLowerCase())) + const form = useForm({ defaultValues }) return ( @@ -62,6 +74,31 @@ export function AttachDiskSideModalForm({ required control={form.control} /> + +