Add copy taskID to clipboard button

ui/src/components/ActiveTasksTable.tsx

@@ -1,41 +1,35 @@
-import React, { useState, useCallback } from "react";
+import Checkbox from "@material-ui/core/Checkbox";
-import { useHistory } from "react-router-dom";
+import IconButton from "@material-ui/core/IconButton";
-import { connect, ConnectedProps } from "react-redux";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
+import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
+import CancelIcon from "@material-ui/icons/Cancel";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import TableContainer from "@material-ui/core/TableContainer";
+import React, { useCallback, useState } from "react";
-import TableHead from "@material-ui/core/TableHead";
+import { connect, ConnectedProps } from "react-redux";
-import TableRow from "@material-ui/core/TableRow";
+import { useHistory } from "react-router-dom";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
-import CancelIcon from "@material-ui/icons/Cancel";
-import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import {
-  listActiveTasksAsync,
-  cancelActiveTaskAsync,
-  batchCancelActiveTasksAsync,
-  cancelAllActiveTasksAsync,
-} from "../actions/tasksActions";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { AppState } from "../store";
+import { batchCancelActiveTasksAsync, cancelActiveTaskAsync, cancelAllActiveTasksAsync, listActiveTasksAsync } from "../actions/tasksActions";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
 import { usePolling } from "../hooks";
-import { ActiveTaskExtended } from "../reducers/tasksReducer";
-import { durationBefore, timeAgo, uuidPrefix, prettifyPayload } from "../utils";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { ActiveTaskExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -266,11 +260,24 @@ const useRowStyles = makeStyles((theme) => ({
     cursor: "pointer",
     "&:hover": {
       boxShadow: theme.shadows[2],
+    }, 
+    "&:hover $copyButton": {
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
     },
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -304,8 +311,22 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+          <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>

ui/src/components/ArchivedTasksTable.tsx

@@ -1,45 +1,36 @@
-import React, { useCallback, useState } from "react";
+import Checkbox from "@material-ui/core/Checkbox";
-import { useHistory } from "react-router-dom";
+import IconButton from "@material-ui/core/IconButton";
-import { connect, ConnectedProps } from "react-redux";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import Checkbox from "@material-ui/core/Checkbox";
 import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import TableFooter from "@material-ui/core/TableFooter";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
-import TablePagination from "@material-ui/core/TablePagination";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
+import React, { useCallback, useState } from "react";
-import { AppState } from "../store";
+import { connect, ConnectedProps } from "react-redux";
-import {
+import { useHistory } from "react-router-dom";
-  batchDeleteArchivedTasksAsync,
-  batchRunArchivedTasksAsync,
-  deleteArchivedTaskAsync,
-  deleteAllArchivedTasksAsync,
-  listArchivedTasksAsync,
-  runArchivedTaskAsync,
-  runAllArchivedTasksAsync,
-} from "../actions/tasksActions";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import TableActions from "./TableActions";
+import { batchDeleteArchivedTasksAsync, batchRunArchivedTasksAsync, deleteAllArchivedTasksAsync, deleteArchivedTaskAsync, listArchivedTasksAsync, runAllArchivedTasksAsync, runArchivedTaskAsync } from "../actions/tasksActions";
-import { timeAgo, uuidPrefix, prettifyPayload } from "../utils";
 import { usePolling } from "../hooks";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { prettifyPayload, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -55,6 +46,9 @@ const useStyles = makeStyles((theme) => ({
   pagination: {
     border: "none",
   },
+  idCell: {
+    width: "200px",
+  }
 }));
 
 function mapStateToProps(state: AppState) {
@@ -296,6 +290,9 @@ const useRowStyles = makeStyles((theme) => ({
     cursor: "pointer",
     "&:hover": {
       boxShadow: theme.shadows[2],
+    }, 
+    "&:hover $copyButton": {
+      display: "inline-block"
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -308,6 +305,16 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width:"200px"
+  },
+  copyButton: {
+    display: "none"
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -343,8 +350,23 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }
+            }
+            size="small"
+            className={classes.copyButton}
+          >
+          <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>

ui/src/components/CompletedTasksTable.tsx

@@ -1,47 +1,35 @@
-import React, { useCallback, useState } from "react";
+import Checkbox from "@material-ui/core/Checkbox";
-import { useHistory } from "react-router-dom";
+import IconButton from "@material-ui/core/IconButton";
-import { connect, ConnectedProps } from "react-redux";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import Checkbox from "@material-ui/core/Checkbox";
 import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
+import React, { useCallback, useState } from "react";
-import { AppState } from "../store";
+import { connect, ConnectedProps } from "react-redux";
-import {
+import { useHistory } from "react-router-dom";
-  listCompletedTasksAsync,
-  deleteAllCompletedTasksAsync,
-  deleteCompletedTaskAsync,
-  batchDeleteCompletedTasksAsync,
-} from "../actions/tasksActions";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import TableActions from "./TableActions";
+import { batchDeleteCompletedTasksAsync, deleteAllCompletedTasksAsync, deleteCompletedTaskAsync, listCompletedTasksAsync } from "../actions/tasksActions";
-import {
-  durationFromSeconds,
-  stringifyDuration,
-  timeAgo,
-  uuidPrefix,
-  prettifyPayload
-} from "../utils";
 import { usePolling } from "../hooks";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { durationFromSeconds, prettifyPayload, stringifyDuration, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -273,6 +261,9 @@ const useRowStyles = makeStyles((theme) => ({
     "&:hover": {
       boxShadow: theme.shadows[2],
     },
+    "&:hover $copyButton": {
+      display: "inline-block"
+    },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
     },
@@ -284,6 +275,16 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -318,8 +319,23 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }
+            }
+            size="small"
+            className={classes.copyButton}
+          >
+          <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>

ui/src/components/PendingTasksTable.tsx

@@ -1,45 +1,36 @@
-import React, { useCallback, useState } from "react";
+import Checkbox from "@material-ui/core/Checkbox";
-import { useHistory } from "react-router-dom";
+import IconButton from "@material-ui/core/IconButton";
-import { connect, ConnectedProps } from "react-redux";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
 import TableContainer from "@material-ui/core/TableContainer";
+import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import DeleteIcon from "@material-ui/icons/Delete";
 import ArchiveIcon from "@material-ui/icons/Archive";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import SyntaxHighlighter from "./SyntaxHighlighter";
+import Alert from "@material-ui/lab/Alert";
-import TablePaginationActions, {
+import AlertTitle from "@material-ui/lab/AlertTitle";
-  rowsPerPageOptions,
+import React, { useCallback, useState } from "react";
-} from "./TablePaginationActions";
+import { connect, ConnectedProps } from "react-redux";
-import TableActions from "./TableActions";
+import { useHistory } from "react-router-dom";
-import {
-  listPendingTasksAsync,
-  deletePendingTaskAsync,
-  batchDeletePendingTasksAsync,
-  deleteAllPendingTasksAsync,
-  archivePendingTaskAsync,
-  batchArchivePendingTasksAsync,
-  archiveAllPendingTasksAsync,
-} from "../actions/tasksActions";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { AppState } from "../store";
+import { archiveAllPendingTasksAsync, archivePendingTaskAsync, batchArchivePendingTasksAsync, batchDeletePendingTasksAsync, deleteAllPendingTasksAsync, deletePendingTaskAsync, listPendingTasksAsync } from "../actions/tasksActions";
 import { usePolling } from "../hooks";
-import { uuidPrefix, prettifyPayload } from "../utils";
-import { TableColumn } from "../types/table";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { prettifyPayload, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -95,7 +86,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
   const [page, setPage] = useState(0);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string>("");
-
+  
   const handlePageChange = (
     event: React.MouseEvent<HTMLButtonElement> | null,
     newPage: number
@@ -299,10 +290,14 @@ const useRowStyles = makeStyles((theme) => ({
     "&:hover": {
       boxShadow: theme.shadows[2],
     },
+    "&:hover $copyButton":{
+      display: "inline-block"
+    },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
     },
   },
+   
   actionCell: {
     width: "96px",
   },
@@ -310,6 +305,16 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell:{
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
+  IdGroup:{
+    display:"flex",
+    alignItems:"center",
+  }
 }));
 
 interface RowProps {
@@ -345,8 +350,22 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => { 
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+            <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>

ui/src/components/RetryTasksTable.tsx

@@ -1,49 +1,37 @@
-import React, { useCallback, useState } from "react";
+import Checkbox from "@material-ui/core/Checkbox";
-import { useHistory } from "react-router-dom";
+import IconButton from "@material-ui/core/IconButton";
-import { connect, ConnectedProps } from "react-redux";
+import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
 import TableFooter from "@material-ui/core/TableFooter";
+import TableHead from "@material-ui/core/TableHead";
 import TablePagination from "@material-ui/core/TablePagination";
-import Paper from "@material-ui/core/Paper";
+import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
-import DeleteIcon from "@material-ui/icons/Delete";
 import ArchiveIcon from "@material-ui/icons/Archive";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
+import React, { useCallback, useState } from "react";
-import {
+import { connect, ConnectedProps } from "react-redux";
-  batchDeleteRetryTasksAsync,
+import { useHistory } from "react-router-dom";
-  batchRunRetryTasksAsync,
-  batchArchiveRetryTasksAsync,
-  deleteAllRetryTasksAsync,
-  runAllRetryTasksAsync,
-  archiveAllRetryTasksAsync,
-  listRetryTasksAsync,
-  deleteRetryTaskAsync,
-  runRetryTaskAsync,
-  archiveRetryTaskAsync,
-} from "../actions/tasksActions";
-import { AppState } from "../store";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import TableActions from "./TableActions";
+import { archiveAllRetryTasksAsync, archiveRetryTaskAsync, batchArchiveRetryTasksAsync, batchDeleteRetryTasksAsync, batchRunRetryTasksAsync, deleteAllRetryTasksAsync, deleteRetryTaskAsync, listRetryTasksAsync, runAllRetryTasksAsync, runRetryTaskAsync } from "../actions/tasksActions";
-import { durationBefore, uuidPrefix, prettifyPayload } from "../utils";
 import { usePolling } from "../hooks";
-import { TaskInfoExtended } from "../reducers/tasksReducer";
-import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TableActions from "./TableActions";
+import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -330,6 +318,9 @@ const useRowStyles = makeStyles((theme) => ({
     "&:hover": {
       boxShadow: theme.shadows[2],
     },
+    "&:hover $copyButton": {
+      display: "inline-block"
+    },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
     },
@@ -341,6 +332,16 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  }, 
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -378,8 +379,22 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+            <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
       </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: {
@@ -327,6 +328,9 @@ const useRowStyles = makeStyles((theme) => ({
     "&:hover": {
       boxShadow: theme.shadows[2],
     },
+    "&:hover $copyButton": {
+      display: "inline-block"
+    },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
     },
@@ -338,6 +342,16 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
+  }
 }));
 
 interface RowProps {
@@ -374,8 +388,22 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
         {uuidPrefix(task.id)}
+        <Tooltip title="Copy full ID to clipboard">
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation()
+              navigator.clipboard.writeText(task.id)
+            }}
+            size="small"
+            className={classes.copyButton}
+          >
+            <FileCopyOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>

ui/tsconfig.json

@@ -17,7 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "noFallthroughCasesInSwitch": true
   },
   "include": [