Add table row action to copy silo ID from system utilization page

app/pages/system/UtilizationPage.tsx

@@ -24,6 +24,7 @@ import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { useIntervalPicker } from '~/components/RefetchIntervalPicker'
 import { SystemMetric } from '~/components/SystemMetric'
 import { LinkCell } from '~/table/cells/LinkCell'
+import { RowActions } from '~/table/columns/action-col'
 import { Listbox } from '~/ui/lib/Listbox'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { ResourceMeter } from '~/ui/lib/ResourceMeter'
@@ -168,6 +169,7 @@ function UsageTab() {
           <Table.HeadCell colSpan={3} data-test-ignore>
             Available
           </Table.HeadCell>
+          <Table.HeadCell data-test-ignore></Table.HeadCell>
         </Table.HeaderRow>
         <Table.HeaderRow>
           <Table.HeadCell data-test-ignore></Table.HeadCell>
@@ -177,6 +179,7 @@ function UsageTab() {
           <Table.HeadCell>CPU</Table.HeadCell>
           <Table.HeadCell>Memory</Table.HeadCell>
           <Table.HeadCell>Storage</Table.HeadCell>
+          <Table.HeadCell data-test-ignore></Table.HeadCell>
         </Table.HeaderRow>
       </Table.Header>
       <Table.Body>
@@ -225,6 +228,9 @@ function UsageTab() {
                 unit="TiB"
               />
             </Table.Cell>
+            <Table.Cell className="action-col w-10 children:p-0" height="large">
+              <RowActions id={silo.siloId} copyIdLabel="Copy silo ID" />
+            </Table.Cell>
           </Table.Row>
         ))}
       </Table.Body>

app/table/columns/action-col.tsx

@@ -50,6 +50,20 @@ export const getActionsCol = <TData extends Record<string, unknown>>(
       // TODO: control flow here has always confused me, would like to straighten it out
       const actions = makeActions(row.original)
       const id = typeof row.original.id === 'string' ? row.original.id : null
+      return <RowActions id={id} actions={actions} />
+    },
+  }
+}
+
+type RowActionsProps = {
+  /** If `id` is provided, a `Copy ID` menu item will be automatically included. */
+  id?: string | null
+  /** Use `copyIdLabel` to override the default label (`Copy ID`). */
+  copyIdLabel?: string
+  actions?: MenuAction[]
+}
+
+export const RowActions = ({ id, copyIdLabel = 'Copy ID', actions }: RowActionsProps) => {
   return (
     <DropdownMenu.Root>
       {/* TODO: This name should not suck; future us, make it so! */}
@@ -70,10 +84,10 @@ export const getActionsCol = <TData extends Record<string, unknown>>(
                 window.navigator.clipboard.writeText(id)
               }}
             >
-                  Copy ID
+              {copyIdLabel}
             </DropdownMenu.Item>
           )}
-              {actions.map((action) => {
+          {actions?.map((action) => {
             // TODO: Tooltip on disabled button broke, probably due to portal
             return (
               <Wrap
@@ -98,6 +112,4 @@ export const getActionsCol = <TData extends Record<string, unknown>>(
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
   )
-    },
-  }
 }

test/e2e/images.e2e.ts

@@ -77,8 +77,8 @@ test('can promote an image from project', async ({ page }) => {
 test('can copy an image ID to clipboard', async ({ page, browserName }) => {
   // eslint-disable-next-line playwright/no-skipped-test
   test.skip(
-    browserName === 'firefox' || browserName === 'webkit',
-    'navigator.clipboard.readText() not supported in FF. Works locally in Safari but not in CI.'
+    browserName === 'webkit',
+    'navigator.clipboard.readText() works locally in Safari but not in CI.'
   )
 
   await page.goto('/images')

test/e2e/utilization.e2e.ts

@@ -7,6 +7,7 @@
  */
 import {
   clickRowAction,
+  clipboardText,
   closeToast,
   expect,
   expectRowVisible,
@@ -43,6 +44,17 @@ test.describe('System utilization', () => {
     await page.getByRole('tab', { name: 'Metrics' }).click()
   })
 
+  test('can copy silo ID', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName === 'webkit',
+      'navigator.clipboard.readText() works locally in Safari but not in CI.'
+    )
+    await page.goto('/system/utilization')
+    await clickRowAction(page, 'maze-war', 'Copy silo ID')
+    expect(await clipboardText(page)).toEqual('6d3a9c06-475e-4f75-b272-c0d0e3f980fa')
+  })
+
   test('does not appear for dev user', async ({ browser }) => {
     const page = await getPageAsUser(browser, 'Hans Jonas')
     await page.goto('/system/utilization')