Skip to content

Add transit IPs to NIC create form #2892

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}`}
/>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions