add copy id for the rest of tables

ui/src/components/ActiveTasksTable.tsx

@@ -12,7 +12,7 @@ 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 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";
@@ -20,7 +20,12 @@ import React, { useCallback, useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { batchCancelActiveTasksAsync, cancelActiveTaskAsync, cancelAllActiveTasksAsync, listActiveTasksAsync } from "../actions/tasksActions";
+import {
+  batchCancelActiveTasksAsync,
+  cancelActiveTaskAsync,
+  cancelAllActiveTasksAsync,
+  listActiveTasksAsync,
+} from "../actions/tasksActions";
 import { usePolling } from "../hooks";
 import { taskDetailsPath } from "../paths";
 import { ActiveTaskExtended } from "../reducers/tasksReducer";
@@ -29,7 +34,9 @@ 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";
+import TablePaginationActions, {
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -258,11 +265,14 @@ function ActiveTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "& #copy-button": {
+      display: "none",
+    },
     "&:hover": {
       boxShadow: theme.shadows[2],
     },
     "&:hover $copyButton": {
-      display: "inline-block"
+      display: "inline-block",
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -272,12 +282,12 @@ const useRowStyles = makeStyles((theme) => ({
     width: "200px",
   },
   copyButton: {
-    display: "none"
+    display: "none",
   },
   IdGroup: {
     display: "flex",
     alignItems: "center",
-  }
+  },
 }));
 
 interface RowProps {
@@ -317,8 +327,8 @@ function Row(props: RowProps) {
           <Tooltip title="Copy full ID to clipboard">
             <IconButton
               onClick={(e) => {
-              e.stopPropagation()
+                e.stopPropagation();
-              navigator.clipboard.writeText(task.id)
+                navigator.clipboard.writeText(task.id);
               }}
               size="small"
               className={classes.copyButton}

ui/src/components/ArchivedTasksTable.tsx

@@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import DeleteIcon from "@material-ui/icons/Delete";
-import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+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";
@@ -21,7 +21,15 @@ import React, { useCallback, useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { batchDeleteArchivedTasksAsync, batchRunArchivedTasksAsync, deleteAllArchivedTasksAsync, deleteArchivedTaskAsync, listArchivedTasksAsync, runAllArchivedTasksAsync, runArchivedTaskAsync } from "../actions/tasksActions";
+import {
+  batchDeleteArchivedTasksAsync,
+  batchRunArchivedTasksAsync,
+  deleteAllArchivedTasksAsync,
+  deleteArchivedTaskAsync,
+  listArchivedTasksAsync,
+  runAllArchivedTasksAsync,
+  runArchivedTaskAsync,
+} from "../actions/tasksActions";
 import { usePolling } from "../hooks";
 import { taskDetailsPath } from "../paths";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
@@ -30,7 +38,9 @@ import { TableColumn } from "../types/table";
 import { prettifyPayload, timeAgo, uuidPrefix } from "../utils";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import TableActions from "./TableActions";
-import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
+import TablePaginationActions, {
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -48,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
   },
   idCell: {
     width: "200px",
-  }
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -288,11 +298,14 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "& #copy-button": {
+      display: "none",
+    },
     "&:hover": {
       boxShadow: theme.shadows[2],
     },
     "&:hover $copyButton": {
-      display: "inline-block"
+      display: "inline-block",
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -306,15 +319,15 @@ const useRowStyles = makeStyles((theme) => ({
     marginRight: 3,
   },
   idCell: {
-    width:"200px"
+    width: "200px",
   },
   copyButton: {
-    display: "none"
+    display: "none",
   },
   IdGroup: {
     display: "flex",
     alignItems: "center",
-  }
+  },
 }));
 
 interface RowProps {
@@ -356,10 +369,9 @@ function Row(props: RowProps) {
           <Tooltip title="Copy full ID to clipboard">
             <IconButton
               onClick={(e) => {
-              e.stopPropagation()
+                e.stopPropagation();
-              navigator.clipboard.writeText(task.id)
+                navigator.clipboard.writeText(task.id);
-            }
+              }}
-            }
               size="small"
               className={classes.copyButton}
             >

ui/src/components/CompletedTasksTable.tsx

@@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import DeleteIcon from "@material-ui/icons/Delete";
-import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+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";
@@ -20,16 +20,29 @@ import React, { useCallback, useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { batchDeleteCompletedTasksAsync, deleteAllCompletedTasksAsync, deleteCompletedTaskAsync, listCompletedTasksAsync } from "../actions/tasksActions";
+import {
+  batchDeleteCompletedTasksAsync,
+  deleteAllCompletedTasksAsync,
+  deleteCompletedTaskAsync,
+  listCompletedTasksAsync,
+} from "../actions/tasksActions";
 import { usePolling } from "../hooks";
 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 {
+  durationFromSeconds,
+  prettifyPayload,
+  stringifyDuration,
+  timeAgo,
+  uuidPrefix,
+} from "../utils";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import TableActions from "./TableActions";
-import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
+import TablePaginationActions, {
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -258,11 +271,17 @@ 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 $copyButton": {
-      display: "inline-block"
+      display: "inline-block",
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -279,12 +298,12 @@ const useRowStyles = makeStyles((theme) => ({
     width: "200px",
   },
   copyButton: {
-    display: "none"
+    display: "none",
   },
   IdGroup: {
     display: "flex",
     alignItems: "center",
-  }
+  },
 }));
 
 interface RowProps {
@@ -325,10 +344,9 @@ function Row(props: RowProps) {
           <Tooltip title="Copy full ID to clipboard">
             <IconButton
               onClick={(e) => {
-              e.stopPropagation()
+                e.stopPropagation();
-              navigator.clipboard.writeText(task.id)
+                navigator.clipboard.writeText(task.id);
-            }
+              }}
-            }
               size="small"
               className={classes.copyButton}
             >

ui/src/components/RetryTasksTable.tsx

@@ -13,7 +13,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import ArchiveIcon from "@material-ui/icons/Archive";
 import DeleteIcon from "@material-ui/icons/Delete";
-import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+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";
@@ -22,7 +22,18 @@ import React, { useCallback, useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { archiveAllRetryTasksAsync, archiveRetryTaskAsync, batchArchiveRetryTasksAsync, batchDeleteRetryTasksAsync, batchRunRetryTasksAsync, deleteAllRetryTasksAsync, deleteRetryTaskAsync, listRetryTasksAsync, runAllRetryTasksAsync, runRetryTaskAsync } from "../actions/tasksActions";
+import {
+  archiveAllRetryTasksAsync,
+  archiveRetryTaskAsync,
+  batchArchiveRetryTasksAsync,
+  batchDeleteRetryTasksAsync,
+  batchRunRetryTasksAsync,
+  deleteAllRetryTasksAsync,
+  deleteRetryTaskAsync,
+  listRetryTasksAsync,
+  runAllRetryTasksAsync,
+  runRetryTaskAsync,
+} from "../actions/tasksActions";
 import { usePolling } from "../hooks";
 import { taskDetailsPath } from "../paths";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
@@ -31,7 +42,9 @@ import { TableColumn } from "../types/table";
 import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import TableActions from "./TableActions";
-import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
+import TablePaginationActions, {
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -315,11 +328,17 @@ 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 $copyButton": {
-      display: "inline-block"
+      display: "inline-block",
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -336,12 +355,12 @@ const useRowStyles = makeStyles((theme) => ({
     width: "200px",
   },
   copyButton: {
-    display: "none"
+    display: "none",
   },
   IdGroup: {
     display: "flex",
     alignItems: "center",
-  }
+  },
 }));
 
 interface RowProps {
@@ -385,8 +404,8 @@ function Row(props: RowProps) {
           <Tooltip title="Copy full ID to clipboard">
             <IconButton
               onClick={(e) => {
-              e.stopPropagation()
+                e.stopPropagation();
-              navigator.clipboard.writeText(task.id)
+                navigator.clipboard.writeText(task.id);
               }}
               size="small"
               className={classes.copyButton}

ui/src/components/ScheduledTasksTable.tsx

@@ -44,7 +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';
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -325,11 +325,17 @@ 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 $copyButton": {
-      display: "inline-block"
+      display: "inline-block",
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
@@ -346,12 +352,12 @@ const useRowStyles = makeStyles((theme) => ({
     width: "200px",
   },
   copyButton: {
-    display: "none"
+    display: "none",
   },
   IdGroup: {
     display: "flex",
     alignItems: "center",
-  }
+  },
 }));
 
 interface RowProps {
@@ -394,8 +400,8 @@ function Row(props: RowProps) {
           <Tooltip title="Copy full ID to clipboard">
             <IconButton
               onClick={(e) => {
-              e.stopPropagation()
+                e.stopPropagation();
-              navigator.clipboard.writeText(task.id)
+                navigator.clipboard.writeText(task.id);
               }}
               size="small"
               className={classes.copyButton}

ui/tsconfig.json

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