The runs table now shows the ID instead of run number

Author: matt-aitken

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -52,6 +52,8 @@ import {
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
 import { useEnvironment } from "~/hooks/useEnvironment";
+import { CopyableText } from "~/components/primitives/CopyableText";
+import { ClipboardField } from "~/components/primitives/ClipboardField";
 
 type RunsTableProps = {
   total: number;
@@ -134,7 +136,7 @@ export function TaskRunsTable({
               )}
             </TableHeaderCell>
           )}
-          <TableHeaderCell alignment="right">Run #</TableHeaderCell>
+          <TableHeaderCell>ID</TableHeaderCell>
           <TableHeaderCell>Task</TableHeaderCell>
           <TableHeaderCell>Version</TableHeaderCell>
           <TableHeaderCell
@@ -306,8 +308,21 @@ export function TaskRunsTable({
                     />
                   </TableCell>
                 )}
-                <TableCell to={path} alignment="right" isTabbableCell>
-                  {formatNumber(run.number)}
+                <TableCell to={path} isTabbableCell>
+                  <SimpleTooltip
+                    content={run.friendlyId}
+                    button={
+                      <span className="flex h-6 items-center gap-1">
+                        <CopyableText
+                          value={run.friendlyId.slice(-8)}
+                          copyValue={run.friendlyId}
+                          className="font-mono"
+                        />
+                      </span>
+                    }
+                    asChild
+                    disableHoverableContent
+                  />
                 </TableCell>
                 <TableCell to={path}>
                   <span className="flex items-center gap-x-1">