address Ken's comments

ui/src/components/ActiveTasksTable.tsx

@@ -1,42 +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 FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+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: {
@@ -265,12 +258,10 @@ function ActiveTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    "& #copy-button": {
+    
-      display: "none"
-    },
     "&:hover": {
       boxShadow: theme.shadows[2],
-      "& #copy-button": {
+      copyButton: {
         display: "inline-block"
       },
     },
@@ -278,6 +269,12 @@ const useRowStyles = makeStyles((theme) => ({
       borderBottomColor: theme.palette.background.paper,
     },
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
 }));
 
 interface RowProps {
@@ -311,7 +308,7 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell} >
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -321,7 +318,7 @@ function Row(props: RowProps) {
             }
             }
             size="small"
-            id="copy-button"
+            className={classes.copyButton}
           >
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>

ui/src/components/ArchivedTasksTable.tsx

@@ -1,46 +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 FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import { useHistory } from "react-router-dom";
-import {
-  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: {
@@ -56,6 +46,9 @@ const useStyles = makeStyles((theme) => ({
   pagination: {
     border: "none",
   },
+  idCell: {
+    width: "200px",
+  }
 }));
 
 function mapStateToProps(state: AppState) {
@@ -295,12 +288,10 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    "& #copy-button": {
+    
-      display: "none"
-    },
     "&:hover": {
       boxShadow: theme.shadows[2],
-      "& #copy-button": {
+      copyButton: {
         display: "inline-block"
       },
     },
@@ -315,6 +306,12 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width:"200px"
+  },
+  copyButton: {
+    display: "none"
+  },
 }));
 
 interface RowProps {
@@ -350,7 +347,7 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell} >
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -360,7 +357,7 @@ function Row(props: RowProps) {
             }
             }
             size="small"
-            id="copy-button"
+            className={classes.copyButton}
           >
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>

ui/src/components/CompletedTasksTable.tsx

@@ -1,48 +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 FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import { useHistory } from "react-router-dom";
-import {
-  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: {
@@ -271,12 +258,10 @@ function CompletedTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    "& #copy-button": {
+    
-      display: "none"
-    },
     "&:hover": {
       boxShadow: theme.shadows[2],
-      "& #copy-button": {
+      copyButton: {
         display: "inline-block"
       },
     },
@@ -291,6 +276,12 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
 }));
 
 interface RowProps {
@@ -325,7 +316,7 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell} >
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -335,7 +326,7 @@ function Row(props: RowProps) {
             }
             }
             size="small"
-            id="copy-button"
+            className={classes.copyButton}
           >
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>

ui/src/components/PendingTasksTable.tsx

@@ -86,6 +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
@@ -286,12 +287,9 @@ function PendingTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    "& #copy-button": {
-      display: "none"
-    },
     "&:hover": {
       boxShadow: theme.shadows[2],
-      "& #copy-button": {
+      copyButton: {
         display: "inline-block"
       },
     },
@@ -307,6 +305,12 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell:{
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
 }));
 
 interface RowProps {
@@ -342,7 +346,7 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row" style={{width:'200px'}}>
+      <TableCell component="th" scope="row" className={classes.idCell} >
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -351,7 +355,7 @@ function Row(props: RowProps) {
               navigator.clipboard.writeText(task.id) }
             }
             size="small"
-            id="copy-button"
+            className={classes.copyButton}
           >
             <FileCopyOutlinedIcon fontSize="small" style={{height:"12px", width:"12px"}} />
           </IconButton>

ui/src/components/RetryTasksTable.tsx

@@ -1,50 +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 FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+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: {
@@ -328,12 +315,9 @@ function RetryTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    "& #copy-button": {
-      display: "none"
-    },
     "&:hover": {
       boxShadow: theme.shadows[2],
-      "& #copy-button": {
+      copyButton: {
         display: "inline-block"
       },
     },
@@ -348,6 +332,12 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
 }));
 
 interface RowProps {
@@ -385,7 +375,7 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell} >
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -395,7 +385,7 @@ function Row(props: RowProps) {
             }
             }
             size="small"
-            id="copy-button"
+            className={classes.copyButton}
           >
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>

ui/src/components/ScheduledTasksTable.tsx

@@ -325,12 +325,9 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    "& #copy-button": {
-      display: "none"
-    },
     "&:hover": {
       boxShadow: theme.shadows[2],
-      "& #copy-button": {
+      copyButton: {
         display: "inline-block"
       },
     },
@@ -345,6 +342,12 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none"
+  },
 }));
 
 interface RowProps {
@@ -381,7 +384,7 @@ function Row(props: RowProps) {
           />
         </IconButton>
       </TableCell>
-      <TableCell component="th" scope="row">
+      <TableCell component="th" scope="row" className={classes.idCell} >
         {uuidPrefix(task.id)}
         <Tooltip title="Copy text to clipboard">
           <IconButton
@@ -391,7 +394,7 @@ function Row(props: RowProps) {
             }
             }
             size="small"
-            id="copy-button"
+            className={classes.copyButton}
           >
             <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
           </IconButton>