Use count of routes; link to sidemodal

app/pages/project/vpcs/VpcPage/tabs/VpcGatewaysTab.tsx

@@ -9,13 +9,13 @@
 import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiq, getListQFn, queryClient, type InternetGateway } from '~/api'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { EmptyCell } from '~/table/cells/EmptyCell'
 import { IpPoolCell } from '~/table/cells/IpPoolCell'
-import { makeLinkCell } from '~/table/cells/LinkCell'
+import { LinkCell, makeLinkCell } from '~/table/cells/LinkCell'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { CopyableIp } from '~/ui/lib/CopyableIp'
@@ -50,18 +50,9 @@ const GatewayIpPoolCell = (gatewaySelector: PP.VpcInternetGateway) => {
 
 const GatewayRoutes = ({ project, vpc, gateway }: PP.VpcInternetGateway) => {
   const matchingRoutes = useGatewayRoutes({ project, vpc, gateway })
-
   if (!matchingRoutes?.length) return <EmptyCell />
-
-  return matchingRoutes.map(([router, route]) => {
-    const to = pb.vpcRouterRouteEdit({ project, vpc, router, route: route.name })
-    const key = `${router}-${route.name}`
-    return (
-      <Link key={key} to={to} className="link-with-underline text-sans-md">
-        {route.name}
-      </Link>
-    )
-  })
+  const to = pb.vpcInternetGateway({ project, vpc, gateway })
+  return <LinkCell to={to}>{matchingRoutes.length}</LinkCell>
 }
 
 const colHelper = createColumnHelper<InternetGateway>()

test/e2e/vpcs.e2e.ts

@@ -373,6 +373,8 @@ test('internet gateway shows proper list of routes targeting it', async ({ page
   // close the sidemodal
   await sidemodal.getByRole('button', { name: 'Close' }).click()
   await expect(sidemodal).toBeHidden()
+  // check for the route count; which should be 1
+  await expect(page.getByRole('link', { name: '1', exact: true })).toBeVisible()
   // go to the Routers tab
   await page.getByRole('tab', { name: 'Routers' }).click()
   // click on the mock-custom-router to go to the router detail page
@@ -395,12 +397,8 @@ test('internet gateway shows proper list of routes targeting it', async ({ page
   await page.getByRole('link', { name: 'mock-vpc' }).click()
   // click on the internet gateways tab and then the internet-gateway-1 link to go to the detail page
   await page.getByRole('tab', { name: 'Internet Gateways' }).click()
-  await page.getByRole('link', { name: 'internet-gateway-1' }).click()
-
-  // the table should now say "dc2 new-route"
-  await expect(page.getByText('dc2new-route')).toBeVisible()
-  // click on the link to go to the detail page
-  await page.getByRole('link', { name: 'internet-gateway-1' }).click()
+  // verify that the route count is now 2: click on the link to go to the edit gateway sidemodal
+  await page.getByRole('link', { name: '2', exact: true }).click()
 
   // the new route should be visible in the table
   await expectRowVisible(table, { Router: 'mock-custom-router', Route: 'dc2' })