add copy id for the rest of tables

ui/src/components/CompletedTasksTable.tsx

@@ -20,6 +20,7 @@ import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { AppState } from "../store";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import {
   listCompletedTasksAsync,
   deleteAllCompletedTasksAsync,
@@ -270,8 +271,14 @@ function CompletedTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "& #copy-button": {
+      display: "none"
+    },
     "&:hover": {
       boxShadow: theme.shadows[2],
+      "& #copy-button": {
+        display: "inline-block"
+      }
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -320,6 +327,19 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell component="th" scope="row">
         {uuidPrefix(task.id)}
+        <Tooltip title="Copy text to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }
+            }
+            size="small"
+            id="copy-button"
+          >
+            <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
+          </IconButton>
+        </Tooltip>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>