Add Task details view

Allow users to find task by task ID

ui/src/components/ArchivedTasksTable.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from "react";
+import { useHistory } from "react-router-dom";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -38,6 +39,7 @@ import { timeAgo, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
 import { ArchivedTaskExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
+import { taskDetailsPath } from "../paths";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -216,14 +218,16 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
                 padding="checkbox"
                 classes={{ stickyHeader: classes.stickyHeaderCell }}
               >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
+                <IconButton>
+                  <Checkbox
+                    indeterminate={numSelected > 0 && numSelected < rowCount}
+                    checked={rowCount > 0 && numSelected === rowCount}
+                    onChange={handleSelectAllClick}
+                    inputProps={{
+                      "aria-label": "select all tasks shown in the table",
+                    }}
+                  />
+                </IconButton>
               </TableCell>
               {columns.map((col) => (
                 <TableCell
@@ -288,6 +292,15 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
+  },
   actionCell: {
     width: "96px",
   },
@@ -312,15 +325,23 @@ interface RowProps {
 function Row(props: RowProps) {
   const { task } = props;
   const classes = useRowStyles();
+  const history = useHistory();
   return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+        <IconButton>
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </IconButton>
       </TableCell>
       <TableCell component="th" scope="row">
         {uuidPrefix(task.id)}
@@ -341,6 +362,7 @@ function Row(props: RowProps) {
         className={classes.actionCell}
         onMouseEnter={props.onActionCellEnter}
         onMouseLeave={props.onActionCellLeave}
+        onClick={(e) => e.stopPropagation()}
       >
         {props.showActions ? (
           <React.Fragment>