diff --git a/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx index c2113c3f8..c95590566 100644 --- a/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx +++ b/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx @@ -14,6 +14,7 @@ import { type VpcFirewallRule, } from '@oxide/api' import { + ButtonCell, createColumnHelper, DateCell, EnabledCell, @@ -35,7 +36,6 @@ const colHelper = createColumnHelper() /** columns that don't depend on anything in `render` */ const staticColumns = [ - colHelper.accessor('name', { header: 'Name' }), colHelper.accessor('priority', { header: 'Priority', cell: (info) =>
{info.getValue()}
, @@ -88,6 +88,14 @@ export const VpcFirewallRulesTab = () => { // the whole thing can't be static because the action depends on setEditing const columns = useMemo(() => { return [ + colHelper.accessor('name', { + header: 'Name', + cell: (info) => ( + setEditing(info.row.original)}> + {info.getValue()} + + ), + }), ...staticColumns, getActionsCol((rule: VpcFirewallRule) => [ { label: 'Edit', onActivate: () => setEditing(rule) }, diff --git a/app/test/e2e/firewall-rules.e2e.ts b/app/test/e2e/firewall-rules.e2e.ts index 144088bae..ae376b746 100644 --- a/app/test/e2e/firewall-rules.e2e.ts +++ b/app/test/e2e/firewall-rules.e2e.ts @@ -202,14 +202,8 @@ test('can update firewall rule', async ({ page }) => { const modal = page.getByRole('dialog', { name: 'Edit rule' }) await expect(modal).toBeHidden() - // click more button on allow-icmp row to get menu, then click Edit - await page - .locator('role=row', { hasText: 'allow-icmp' }) - .locator('role=button[name="Row actions"]') - .click() - - // filter visible to distinguish from all the hidden menus' Edit button - await page.locator('text="Edit" >> visible=true').click() + // can click name cell to edit + await page.getByRole('button', { name: 'allow-icmp' }).click() // modal is now open await expect(modal).toBeVisible() diff --git a/libs/table/cells/LinkCell.tsx b/libs/table/cells/LinkCell.tsx index 2094d345d..00207c0a5 100644 --- a/libs/table/cells/LinkCell.tsx +++ b/libs/table/cells/LinkCell.tsx @@ -7,19 +7,32 @@ */ import { Link } from 'react-router-dom' +import { classed } from '@oxide/util' + import type { Cell } from './Cell' +const linkClass = + 'link-with-underline group flex h-full w-full items-center text-sans-semi-md' + +/** Pushes out the link area to the entire cell for improved clickability™ */ +const Pusher = classed.div`absolute inset-0 right-px group-hover:bg-raise` + export const linkCell = (makeHref: (value: string) => string) => ({ value }: Cell) => { return ( - - {/* Pushes out the link area to the entire cell for improved clickability™ */} -
+ +
{value}
) } + +export const ButtonCell = ({ children, ...props }: React.ComponentProps<'button'>) => { + return ( + + ) +}