add copy id for the rest of tables

ui/src/components/ActiveTasksTable.tsx

@@ -36,6 +36,7 @@ import { ActiveTaskExtended } from "../reducers/tasksReducer";
 import { durationBefore, timeAgo, uuidPrefix, prettifyPayload } from "../utils";
 import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -264,8 +265,14 @@ function ActiveTasksTable(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,
@@ -306,6 +313,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>

ui/src/components/ArchivedTasksTable.tsx

@@ -21,6 +21,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 {
   batchDeleteArchivedTasksAsync,
   batchRunArchivedTasksAsync,
@@ -294,8 +295,14 @@ function ArchivedTasksTable(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,
@@ -345,6 +352,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>

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>

ui/src/components/PendingTasksTable.tsx

@@ -346,14 +346,12 @@ function Row(props: RowProps) {
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
-            onClick={(e) => 
+            onClick={(e) =>{ 
-            { 
               e.stopPropagation()
               navigator.clipboard.writeText(task.id) }
             }
             size="small"
             id="copy-button"
-            className={classes.actionButton}
           >
             <FileCopyOutlinedIcon fontSize="small" style={{height:"12px", width:"12px"}} />
           </IconButton>

ui/src/components/RetryTasksTable.tsx

@@ -44,6 +44,7 @@ import { usePolling } from "../hooks";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -327,8 +328,14 @@ function RetryTasksTable(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,
@@ -380,6 +387,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>

ui/src/components/ScheduledTasksTable.tsx

@@ -44,6 +44,7 @@ import { usePolling } from "../hooks";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -324,8 +325,14 @@ function ScheduledTasksTable(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,
@@ -376,6 +383,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>