-
Notifications
You must be signed in to change notification settings - Fork 10
/
disk-attach.tsx
69 lines (61 loc) · 1.87 KB
/
disk-attach.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*
* 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 { useForm } from 'react-hook-form'
import { useApiQuery, type ApiError } from '@oxide/api'
import { ComboboxField } from '~/components/form/fields/ComboboxField'
import { SideModalForm } from '~/components/form/SideModalForm'
import { useProjectSelector } from '~/hooks/use-params'
const defaultValues = { name: '' }
type AttachDiskProps = {
/** If defined, this overrides the usual mutation */
onSubmit: (diskAttach: { name: string }) => void
onDismiss: () => void
diskNamesToExclude?: string[]
loading?: boolean
submitError?: ApiError | null
}
/**
* Can be used with either a `setState` or a real mutation as `onSubmit`, hence
* the optional `loading` and `submitError`
*/
export function AttachDiskSideModalForm({
onSubmit,
onDismiss,
diskNamesToExclude = [],
loading,
submitError = null,
}: AttachDiskProps) {
const { project } = useProjectSelector()
const { data } = useApiQuery('diskList', { query: { project, limit: 1000 } })
const detachedDisks =
data?.items.filter(
(d) => d.state.state === 'detached' && !diskNamesToExclude.includes(d.name)
) || []
const form = useForm({ defaultValues })
return (
<SideModalForm
form={form}
formType="create"
resourceName="disk"
title="Attach disk"
onSubmit={onSubmit}
loading={loading}
submitError={submitError}
onDismiss={onDismiss}
>
<ComboboxField
label="Disk name"
placeholder="Select a disk"
name="name"
items={detachedDisks.map(({ name }) => ({ value: name, label: name }))}
required
control={form.control}
/>
</SideModalForm>
)
}