Add Transit IPs column to instance NIC table (#2437)

* Add Transit IPs column to instance NIC table

* Add Transit IPs mini table to edit form

* Add Transit IP sub-form in sidemodal

* Update links, capitalization

* Move EmptyCell into ListPlusCell as fallback when no children passed in

* Dedupe ClearAndAddButtons component

* Including the new file is helpful

* Add tooltip header for Other transit IPs

* Layout adjustments, and show TransitIPs as optional

* update tooltip header styling for ListPlusCell

* A few post-review tweaks

* Fix broken aria-describedby tooltipText code

Author: charliepark

app/components/ListPlusCell.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react'
 
+import { EmptyCell } from '~/table/cells/EmptyCell'
 import { Tooltip } from '~/ui/lib/Tooltip'
 
 type ListPlusCellProps = {
@@ -18,19 +19,25 @@ type ListPlusCellProps = {
 }
 
 /**
- * Gives a count with a tooltip that expands to show details when the user hovers over it
+ * Gives a count with a tooltip that expands to show details when the user hovers over it.
+ * The ReactNode children are split into two groups: the first `numInCell` are shown in the cell,
+ * and the rest are shown in the tooltip. If the number of children is less than or equal to
+ * `numInCell`, no tooltip (or `+N` target) is shown.
  */
 export const ListPlusCell = ({
   tooltipTitle,
   children,
   numInCell = 1,
 }: ListPlusCellProps) => {
   const array = React.Children.toArray(children)
+  if (array.length === 0) {
+    return <EmptyCell />
+  }
   const inCell = array.slice(0, numInCell)
   const rest = array.slice(numInCell)
   const content = (
     <div>
-      <div className="mb-2">{tooltipTitle}</div>
+      <div className="mb-2 text-sans-semi-md text-default">{tooltipTitle}</div>
       <div className="flex flex-col items-start gap-2">{...rest}</div>
     </div>
   )

app/components/form/fields/TextField.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import cn from 'classnames'
 import { useId } from 'react'
 import {
   useController,
@@ -47,7 +46,7 @@ export interface TextFieldProps<
    * Displayed in a tooltip beside the title. This field should be used
    * for auxiliary context that helps users understand extra context about
    * a field but isn't specifically required to know how to complete the input.
-   * This is announced as an `aria-description`
+   * This is announced as an `aria-description`, immediately following the aria-labelledby text.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description
    */
@@ -87,7 +86,7 @@ export function TextField<
         )}
       </div>
       {/* passing the generated id is very important for a11y */}
-      <TextFieldInner name={name} {...props} id={id} />
+      <TextFieldInner name={name} {...props} id={id} tooltipText={tooltipText} />
     </div>
   )
 }
@@ -129,12 +128,17 @@ export const TextFieldInner = <
         title={label}
         type={type}
         error={!!error}
-        aria-labelledby={cn(`${id}-label`, !!tooltipText && `${id}-help-text`)}
-        aria-describedby={tooltipText ? `${id}-label-tip` : undefined}
+        aria-labelledby={`${id}-label ${id}-help-text`}
+        aria-describedby={tooltipText ? `${id}-tooltipText` : undefined}
         onChange={(e) => onChange(transform ? transform(e.target.value) : e.target.value)}
         {...fieldRest}
         {...props}
       />
+      {tooltipText && (
+        <div className="sr-only" id={`${id}-tooltipText`}>
+          {tooltipText}
+        </div>
+      )}
       <ErrorMessage error={error} label={label} />
     </>
   )

app/forms/firewall-rules-common.tsx

@@ -33,7 +33,6 @@ import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField, TextFieldInner } from '~/components/form/fields/TextField'
 import { useVpcSelector } from '~/hooks/use-params'
 import { Badge } from '~/ui/lib/Badge'
-import { Button } from '~/ui/lib/Button'
 import { FormDivider } from '~/ui/lib/Divider'
 import { Message } from '~/ui/lib/Message'
 import * as MiniTable from '~/ui/lib/MiniTable'
@@ -50,9 +49,9 @@ import { type FirewallRuleValues } from './firewall-rules-util'
  * a few sub-sections (Ports, Protocols, and Hosts).
  *
  * The Targets section and the Filters:Hosts section are very similar, so we've
- * pulled common code to the DynamicTypeAndValueFields and ClearAndAddButtons
- * components. We also then set up the Targets / Ports / Hosts variables at the
- * top of the CommonFields component.
+ * pulled common code to the DynamicTypeAndValueFields components.
+ * We also then set up the Targets / Ports / Hosts variables at the top of the
+ * CommonFields component.
  */
 
 type TargetAndHostFilterType =
@@ -154,34 +153,6 @@ const DynamicTypeAndValueFields = ({
   )
 }
 
-// The "Clear" and "Add …" buttons that appear below the filter input fields
-const ClearAndAddButtons = ({
-  isDirty,
-  onClear,
-  onSubmit,
-  buttonCopy,
-}: {
-  isDirty: boolean
-  onClear: () => void
-  onSubmit: () => void
-  buttonCopy: string
-}) => (
-  <div className="flex justify-end">
-    <Button
-      variant="ghost"
-      size="sm"
-      className="mr-2.5"
-      disabled={!isDirty}
-      onClick={onClear}
-    >
-      Clear
-    </Button>
-    <Button size="sm" onClick={onSubmit}>
-      {buttonCopy}
-    </Button>
-  </div>
-)
-
 type TypeAndValueTableProps = {
   sectionType: 'target' | 'host'
   items: ControllerRenderProps<FirewallRuleValues, 'targets' | 'hosts'>
@@ -447,11 +418,11 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
           onInputChange={(value) => targetForm.setValue('value', value)}
           onSubmitTextField={submitTarget}
         />
-        <ClearAndAddButtons
-          isDirty={!!targetValue}
+        <MiniTable.ClearAndAddButtons
+          addButtonCopy="Add target"
+          disableClear={!!targetValue}
           onClear={() => targetForm.reset()}
           onSubmit={submitTarget}
-          buttonCopy="Add target"
         />
       </div>
       {!!targets.value.length && <TypeAndValueTable sectionType="target" items={targets} />}
@@ -498,11 +469,11 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
             }}
           />
         </div>
-        <ClearAndAddButtons
-          isDirty={!!portValue}
+        <MiniTable.ClearAndAddButtons
+          addButtonCopy="Add port filter"
+          disableClear={!!portValue}
           onClear={portRangeForm.reset}
           onSubmit={submitPortRange}
-          buttonCopy="Add port filter"
         />
       </div>
       {!!ports.value.length && (
@@ -554,11 +525,11 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
           onInputChange={(value) => hostForm.setValue('value', value)}
           onSubmitTextField={submitHost}
         />
-        <ClearAndAddButtons
-          isDirty={!!hostValue}
+        <MiniTable.ClearAndAddButtons
+          addButtonCopy="Add host filter"
+          disableClear={!!hostValue}
           onClear={() => hostForm.reset()}
           onSubmit={submitHost}
-          buttonCopy="Add host filter"
         />
       </div>
       {!!hosts.value.length && <TypeAndValueTable sectionType="host" items={hosts} />}

app/forms/network-interface-edit.tsx

@@ -17,8 +17,15 @@ import {
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
+import { TextFieldInner } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useInstanceSelector } from '~/hooks/use-params'
+import { FormDivider } from '~/ui/lib/Divider'
+import { FieldLabel } from '~/ui/lib/FieldLabel'
+import * as MiniTable from '~/ui/lib/MiniTable'
+import { TextInputHint } from '~/ui/lib/TextInput'
+import { KEYS } from '~/ui/util/keys'
+import { links } from '~/util/links'
 
 type EditNetworkInterfaceFormProps = {
   editing: InstanceNetworkInterface
@@ -42,9 +49,20 @@ export function EditNetworkInterfaceForm({
   const defaultValues = R.pick(editing, [
     'name',
     'description',
+    'transitIps',
   ]) satisfies InstanceNetworkInterfaceUpdate
 
   const form = useForm({ defaultValues })
+  const transitIps = form.watch('transitIps') || []
+
+  const transitIpsForm = useForm({ defaultValues: { transitIp: '' } })
+
+  const submitTransitIp = () => {
+    const transitIp = transitIpsForm.getValues('transitIp')
+    if (!transitIp) return
+    form.setValue('transitIps', [...transitIps, transitIp])
+    transitIpsForm.reset()
+  }
 
   return (
     <SideModalForm
@@ -65,6 +83,69 @@ export function EditNetworkInterfaceForm({
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
+      <FormDivider />
+
+      <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">
+            Enter an IPv4 or IPv6 address.{' '}
+            <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()
+              }
+            }}
+          />
+        </div>
+        <MiniTable.ClearAndAddButtons
+          addButtonCopy="Add Transit IP"
+          disableClear={!!transitIpsForm.formState.dirtyFields.transitIp}
+          onClear={transitIpsForm.reset}
+          onSubmit={submitTransitIp}
+        />
+      </div>
+      {transitIps.length > 0 && (
+        <MiniTable.Table className="mb-4" aria-label="Transit IPs">
+          <MiniTable.Header>
+            <MiniTable.HeadCell>Transit IPs</MiniTable.HeadCell>
+            {/* For remove button */}
+            <MiniTable.HeadCell className="w-12" />
+          </MiniTable.Header>
+          <MiniTable.Body>
+            {transitIps.map((ip, index) => (
+              <MiniTable.Row
+                tabIndex={0}
+                aria-rowindex={index + 1}
+                aria-label={ip}
+                key={ip}
+              >
+                <MiniTable.Cell>{ip}</MiniTable.Cell>
+                <MiniTable.RemoveCell
+                  label={`remove IP ${ip}`}
+                  onClick={() => {
+                    form.setValue(
+                      'transitIps',
+                      transitIps.filter((item) => item !== ip)
+                    )
+                  }}
+                />
+              </MiniTable.Row>
+            ))}
+          </MiniTable.Body>
+        </MiniTable.Table>
+      )}
     </SideModalForm>
   )
 }

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -24,6 +24,7 @@ import { IpGlobal24Icon, Networking24Icon } from '@oxide/design-system/icons/rea
 import { AttachEphemeralIpModal } from '~/components/AttachEphemeralIpModal'
 import { AttachFloatingIpModal } from '~/components/AttachFloatingIpModal'
 import { HL } from '~/components/HL'
+import { ListPlusCell } from '~/components/ListPlusCell'
 import { CreateNetworkInterfaceForm } from '~/forms/network-interface-create'
 import { EditNetworkInterfaceForm } from '~/forms/network-interface-edit'
 import {
@@ -133,6 +134,14 @@ const staticCols = [
     header: 'subnet',
     cell: (info) => <SubnetNameFromId value={info.getValue()} />,
   }),
+  colHelper.accessor('transitIps', {
+    header: 'Transit IPs',
+    cell: (info) => (
+      <ListPlusCell tooltipTitle="Other transit IPs">
+        {info.getValue()?.map((ip) => <div key={ip}>{ip}</div>)}
+      </ListPlusCell>
+    ),
+  }),
 ]
 
 const updateNicStates = fancifyStates(instanceCan.updateNic.states)

app/ui/lib/MiniTable.tsx

@@ -9,6 +9,7 @@ import Error16Icon from '@oxide/design-system/icons/react/Error16Icon'
 
 import { classed } from '~/util/classed'
 
+import { Button } from './Button'
 import { Table as BigTable } from './Table'
 
 type Children = { children: React.ReactNode }
@@ -44,3 +45,30 @@ export const RemoveCell = ({ onClick, label }: { onClick: () => void; label: str
     </button>
   </Cell>
 )
+
+type ClearAndAddButtonsProps = {
+  addButtonCopy: string
+  disableClear: boolean
+  onClear: () => void
+  onSubmit: () => void
+}
+
+/**
+ * A set of buttons used with embedded sub-forms to add items to MiniTables,
+ * like in the firewall rules and NIC edit forms.
+ */
+export const ClearAndAddButtons = ({
+  addButtonCopy,
+  disableClear,
+  onClear,
+  onSubmit,
+}: ClearAndAddButtonsProps) => (
+  <div className="flex justify-end gap-2.5">
+    <Button variant="ghost" size="sm" disabled={disableClear} onClick={onClear}>
+      Clear
+    </Button>
+    <Button size="sm" onClick={onSubmit}>
+      {addButtonCopy}
+    </Button>
+  </div>
+)

app/util/links.ts

@@ -42,6 +42,8 @@ export const links = {
   systemIpPoolsDocs: 'https://docs.oxide.computer/guides/operator/ip-pool-management',
   systemMetricsDocs: 'https://docs.oxide.computer/guides/operator/system-metrics',
   systemSiloDocs: 'https://docs.oxide.computer/guides/operator/silo-management',
+  transitIpsDocs:
+    'https://docs.oxide.computer/guides/configuring-guest-networking#_example_4_software_routing_tunnels',
   instancesDocs: 'https://docs.oxide.computer/guides/deploying-workloads',
   vpcsDocs: 'https://docs.oxide.computer/guides/configuring-guest-networking',
 }

mock-api/msw/handlers.ts

@@ -677,6 +677,10 @@ export const handlers = makeHandlers({
       nic.primary = !!body.primary
     }
 
+    if (body.transit_ips) {
+      nic.transit_ips = body.transit_ips
+    }
+
     return nic
   },
   instanceNetworkInterfaceDelete({ path, query }) {

mock-api/network-interface.ts

@@ -22,5 +22,6 @@ export const networkInterface: Json<InstanceNetworkInterface> = {
   subnet_id: vpcSubnet.id,
   time_created: new Date().toISOString(),
   time_modified: new Date().toISOString(),
+  transit_ips: ['172.30.0.0/22'],
   vpc_id: vpc.id,
 }