Skip to content

Add transit IPs to NIC create form #2892

@david-crespo

Description

@david-crespo

Should be easy: the update form already has them, but the create form could not because the transit IPs key was left out of the create request body. I fixed that in oxidecomputer/omicron#8851, so now we can add it to the create form as well.

Note this will be affected by #2878 since we will probably want to use the new input table for this.

Image

<div className="flex flex-col gap-3">
{/* We have to blow this up instead of using TextField for better layout control of field and ClearAndAddButtons */}
<div>
<FieldLabel id="transitIp-label" htmlFor="transitIp" optional>
Transit IPs
</FieldLabel>
<TextInputHint id="transitIp-help-text" className="mb-2">
An IP network, like 192.168.0.0/16.{' '}
<a href={links.transitIpsDocs} target="_blank" rel="noreferrer">
Learn more about transit IPs.
</a>
</TextInputHint>
<TextFieldInner
id="transitIp"
name="transitIp"
control={transitIpsForm.control}
onKeyDown={(e) => {
if (e.key === KEYS.enter) {
e.preventDefault() // prevent full form submission
submitTransitIp()
}
}}
validate={(value) => {
const error = validateIpNet(value)
if (error) return error
if (transitIps.includes(value)) return 'Transit IP already in list'
}}
placeholder="Enter an IP network"
/>
</div>
<ClearAndAddButtons
addButtonCopy="Add Transit IP"
disabled={!transitIpValue}
onClear={() => transitIpsForm.reset()}
onSubmit={submitTransitIp}
/>
</div>
<MiniTable
className="mb-4"
ariaLabel="Transit IPs"
items={transitIps}
columns={[{ header: 'Transit IPs', cell: (ip) => ip }]}
rowKey={(ip) => ip}
onRemoveItem={(ip) => {
form.setValue(
'transitIps',
transitIps.filter((item) => item !== ip)
)
}}
removeLabel={(ip) => `remove IP ${ip}`}
/>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No fields configured for Task.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions