Networking tab enhancements (#2130)

* Change tab to networking

* Move Add Network Interface button above table

* Move to using useReactTable directly for Network Interfaces

* Table and modal to attach / detach working

* Add tests

* refactor button

* fix test

* roll TableTitle into UI table file

* change table title to text-sans-lg

* tweak spacing

* put external IPs on top

* fix e2e tests

* use non-hook version of addToast

* simplify attach modal a bit

* casing

* extract FloatingIpLabel

* use watch instead of getValue and ListboxField instead of setValue

* fix mock floating IP update with empty description

* leave off dash when there's no description

* Table label tweaks

* tweak data fetches, get rid of question marks

* change disk name column header on storage tab to "disk"

* move kind into its own column

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>
Co-authored-by: Benjamin Leonard <hello@benleonard.co.uk>

Author: 3 people

app/pages/project/floating-ips/AttachFloatingIpModal.tsx

@@ -0,0 +1,100 @@
+/*
+ * 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 { useApiMutation, useApiQueryClient, type FloatingIp, type Instance } from '~/api'
+import { ListboxField } from '~/components/form/fields/ListboxField'
+import { addToast } from '~/stores/toast'
+import { Message } from '~/ui/lib/Message'
+import { Modal } from '~/ui/lib/Modal'
+
+function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
+  return (
+    <div className="text-tertiary selected:text-accent-secondary">
+      <div>{fip.name}</div>
+      <div className="flex gap-0.5">
+        <div>{fip.ip}</div>
+        {fip.description && (
+          <>
+            <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>
+            <div className="flex-grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+              {fip.description}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export const AttachFloatingIpModal = ({
+  floatingIps,
+  instance,
+  project,
+  onDismiss,
+}: {
+  floatingIps: Array<FloatingIp>
+  instance: Instance
+  project: string
+  onDismiss: () => void
+}) => {
+  const queryClient = useApiQueryClient()
+  const floatingIpAttach = useApiMutation('floatingIpAttach', {
+    onSuccess() {
+      queryClient.invalidateQueries('floatingIpList')
+      queryClient.invalidateQueries('instanceExternalIpList')
+      addToast({ content: 'Your floating IP has been attached' })
+      onDismiss()
+    },
+    onError: (err) => {
+      addToast({ title: 'Error', content: err.message, variant: 'error' })
+    },
+  })
+  const form = useForm({ defaultValues: { floatingIp: '' } })
+  const floatingIp = form.watch('floatingIp')
+
+  return (
+    <Modal isOpen title="Attach floating IP" onDismiss={onDismiss}>
+      <Modal.Body>
+        <Modal.Section>
+          <Message
+            variant="info"
+            content={`Instance ‘${instance.name}’ will be reachable at the selected IP address`}
+          />
+          <form>
+            <ListboxField
+              control={form.control}
+              name="floatingIp"
+              label="Floating IP"
+              placeholder="Select floating IP"
+              items={floatingIps.map((ip) => ({
+                value: ip.id,
+                label: <FloatingIpLabel fip={ip} />,
+                labelString: ip.name,
+              }))}
+              required
+            />
+          </form>
+        </Modal.Section>
+      </Modal.Body>
+      <Modal.Footer
+        actionText="Attach"
+        disabled={!floatingIp}
+        onAction={() =>
+          floatingIpAttach.mutate({
+            path: { floatingIp },
+            query: { project },
+            body: { kind: 'instance', parent: instance.id },
+          })
+        }
+        onDismiss={onDismiss}
+      ></Modal.Footer>
+    </Modal>
+  )
+}

app/pages/project/floating-ips/FloatingIpsPage.tsx

@@ -238,7 +238,7 @@ const AttachFloatingIpModal = ({
   const form = useForm({ defaultValues: { instanceId: '' } })
 
   return (
-    <Modal isOpen title="Attach Floating IP" onDismiss={onDismiss}>
+    <Modal isOpen title="Attach floating IP" onDismiss={onDismiss}>
       <Modal.Body>
         <Modal.Section>
           <Message

app/pages/project/instances/instance/InstancePage.tsx

@@ -192,7 +192,7 @@ export function InstancePage() {
       <RouteTabs fullWidth>
         <Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
         <Tab to={pb.instanceMetrics(instanceSelector)}>Metrics</Tab>
-        <Tab to={pb.nics(instanceSelector)}>Network Interfaces</Tab>
+        <Tab to={pb.nics(instanceSelector)}>Networking</Tab>
         <Tab to={pb.instanceConnect(instanceSelector)}>Connect</Tab>
       </RouteTabs>
     </>