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' })