diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcGatewaysTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcGatewaysTab.tsx
index 6b0e219cd..fd8fdd586 100644
--- a/app/pages/project/vpcs/VpcPage/tabs/VpcGatewaysTab.tsx
+++ b/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
-
- return matchingRoutes.map(([router, route]) => {
- const to = pb.vpcRouterRouteEdit({ project, vpc, router, route: route.name })
- const key = `${router}-${route.name}`
- return (
-
- {route.name}
-
- )
- })
+ const to = pb.vpcInternetGateway({ project, vpc, gateway })
+ return {matchingRoutes.length}
}
const colHelper = createColumnHelper()
diff --git a/test/e2e/vpcs.e2e.ts b/test/e2e/vpcs.e2e.ts
index d6de8039e..ffa43dbfc 100644
--- a/test/e2e/vpcs.e2e.ts
+++ b/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' })