Direct user to firewall rules tab from instance networking view (#3216)

This PR adds a message box — directing the user to the Firewall Rules
tab of the VPC — to the instance's Networking tab.

<img width="2408" height="2246" alt="image"
src="https://github.com/user-attachments/assets/bf12ebd4-a9d6-43d7-a63f-5c7519556291"
/>

When there are multiple VPCs:
<img width="2398" height="2362" alt="image"
src="https://github.com/user-attachments/assets/88342f89-3e13-4f23-812e-6d421c07c99d"
/>

I'm very open to alternate designs and copy.

Closes #2064

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>

Author: charliepark

app/pages/project/instances/NetworkingTab.tsx

@@ -9,7 +9,7 @@ import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { useCallback, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { type LoaderFunctionArgs } from 'react-router'
+import { Link, type LoaderFunctionArgs } from 'react-router'
 import { match } from 'ts-pattern'
 
 import {
@@ -347,6 +347,16 @@ export default function NetworkingTab() {
     })
   ).data.items
 
+  // Firewall rules and other external networking state live on the VPC of the
+  // primary NIC. The parent InstancePage loader prefetches this VPC, but
+  // primaryNic may be undefined, so we can't use usePrefetchedQuery.
+  const primaryVpcId = nics.find((nic) => nic.primary)?.vpcId
+  const { data: primaryVpc } = useQuery({
+    // primaryVpcId is defined when enabled, so the assertion is safe
+    ...q(api.vpcView, { path: { vpc: primaryVpcId! } }),
+    enabled: !!primaryVpcId,
+  })
+
   const { data: siloPools } = usePrefetchedQuery(
     q(api.ipPoolList, { query: { limit: ALL_ISH } })
   )
@@ -739,7 +749,7 @@ export default function NetworkingTab() {
       </CardBlock>
 
       <CardBlock>
-        <CardBlock.Header title="External Subnets" titleId="attached-subnets-label">
+        <CardBlock.Header title="External subnets" titleId="attached-subnets-label">
           <Button
             size="sm"
             onClick={() => setAttachSubnetModalOpen(true)}
@@ -777,6 +787,25 @@ export default function NetworkingTab() {
           />
         )}
       </CardBlock>
+      <CardBlock>
+        <CardBlock.Header title="Firewall rules" titleId="firewall-rules-label" />
+        <CardBlock.Body>
+          {primaryVpc ? (
+            <>
+              Manage firewall rules affecting this instance in VPC{' '}
+              <Link
+                className="link-with-underline"
+                to={pb.vpcFirewallRules({ project, vpc: primaryVpc.name })}
+              >
+                {primaryVpc.name}
+              </Link>
+              .
+            </>
+          ) : (
+            'Firewall rules are managed on the VPC associated with the primary network interface.'
+          )}
+        </CardBlock.Body>
+      </CardBlock>
     </div>
   )
 }

test/e2e/instance-networking.e2e.ts

@@ -22,6 +22,25 @@ const selectASiloImage = async (page: Page, name: string) => {
   await page.getByRole('option', { name }).click()
 }
 
+test('Instance networking tab — firewall rules card', async ({ page }) => {
+  // db1 has a primary NIC in mock-vpc, so the card names that VPC
+  await page.goto('/projects/mock-project/instances/db1/networking')
+  await expect(
+    page.getByText('Manage firewall rules affecting this instance in VPC mock-vpc')
+  ).toBeVisible()
+
+  // you-fail has no NICs, so there's no primary VPC and we show the fallback copy
+  await page.goto('/projects/mock-project/instances/you-fail/networking')
+  await expect(
+    page.getByText(
+      'Firewall rules are managed on the VPC associated with the primary network interface.'
+    )
+  ).toBeVisible()
+  await expect(
+    page.getByText('Manage firewall rules affecting this instance in VPC')
+  ).toBeHidden()
+})
+
 test('Instance networking tab — NIC table', async ({ page }) => {
   await page.goto('/projects/mock-project/instances/db1')