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.
|
<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}`} |
|
/> |
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.
console/app/forms/network-interface-edit.tsx
Lines 98 to 149 in 8cc5b25