Linkify the firewall rules name cell (#1921)

linkify the firewall rules name cell the easy way

Author: david-crespo

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<VpcFirewallRule>()
 
 /** columns that don't depend on anything in `render` */
 const staticColumns = [
-  colHelper.accessor('name', { header: 'Name' }),
   colHelper.accessor('priority', {
     header: 'Priority',
     cell: (info) => <div className="text-secondary">{info.getValue()}</div>,
@@ -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) => (
+          <ButtonCell onClick={() => setEditing(info.row.original)}>
+            {info.getValue()}
+          </ButtonCell>
+        ),
+      }),
       ...staticColumns,
       getActionsCol((rule: VpcFirewallRule) => [
         { label: 'Edit', onActivate: () => setEditing(rule) },

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()

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<string>) => {
     return (
-      <Link
-        className="link-with-underline group flex h-full w-full items-center text-sans-semi-md"
-        to={makeHref(value)}
-      >
-        {/* Pushes out the link area to the entire cell for improved clickability™ */}
-        <div className="absolute inset-0 right-px group-hover:bg-raise" />
+      <Link className={linkClass} to={makeHref(value)}>
+        <Pusher />
         <div className="relative">{value}</div>
       </Link>
     )
   }
+
+export const ButtonCell = ({ children, ...props }: React.ComponentProps<'button'>) => {
+  return (
+    <button className={linkClass} {...props}>
+      <Pusher />
+      <div className="relative">{children}</div>
+    </button>
+  )
+}