Update task table styles

ui/src/components/RetryTasksTable.tsx

@@ -10,18 +10,13 @@ import TableRow from "@material-ui/core/TableRow";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import Paper from "@material-ui/core/Paper";
-import Box from "@material-ui/core/Box";
 import Tooltip from "@material-ui/core/Tooltip";
 import Checkbox from "@material-ui/core/Checkbox";
-import Collapse from "@material-ui/core/Collapse";
 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 MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-import Typography from "@material-ui/core/Typography";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "./SyntaxHighlighter";
@@ -60,6 +55,9 @@ const useStyles = makeStyles((theme) => ({
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
+  pagination: {
+    border: "none",
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -181,13 +179,13 @@ function RetryTasksTable(props: Props & ReduxProps) {
   }
 
   const columns: TableColumn[] = [
-    { key: "icon", label: "", align: "left" },
     { key: "id", label: "ID", align: "left" },
     { key: "type", label: "Type", align: "left" },
+    { key: "payload", label: "Payload", align: "left" },
     { key: "retry_in", label: "Retry In", align: "left" },
     { key: "last_error", label: "Last Error", align: "left" },
-    { key: "retried", label: "Retried", align: "left" },
-    { key: "max_retry", label: "Max Retry", align: "left" },
+    { key: "retried", label: "Retried", align: "right" },
+    { key: "max_retry", label: "Max Retry", align: "right" },
     { key: "actions", label: "Actions", align: "center" },
   ];
 
@@ -314,6 +312,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
                 ActionsComponent={TablePaginationActions}
+                className={classes.pagination}
               />
             </TableRow>
           </TableFooter>
@@ -324,11 +323,6 @@ function RetryTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
   actionCell: {
     width: "140px",
   },
@@ -353,103 +347,79 @@ interface RowProps {
 
 function Row(props: RowProps) {
   const { task } = props;
-  const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
   return (
-    <React.Fragment>
-      <TableRow
-        key={task.id}
-        className={classes.root}
-        selected={props.isSelected}
-      >
-        <TableCell padding="checkbox">
-          <Checkbox
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              props.onSelectChange(event.target.checked)
-            }
-            checked={props.isSelected}
-          />
-        </TableCell>
-        <TableCell>
-          <Tooltip title={open ? "Hide Details" : "Show Details"}>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell component="th" scope="row">
-          {uuidPrefix(task.id)}
-        </TableCell>
-        <TableCell>{task.type}</TableCell>
-        <TableCell>{durationBefore(task.next_process_at)}</TableCell>
-        <TableCell>{task.error_message}</TableCell>
-        <TableCell>{task.retried}</TableCell>
-        <TableCell>{task.max_retry}</TableCell>
-        <TableCell
-          align="center"
-          className={clsx(
-            classes.actionCell,
-            props.showActions && classes.activeActionCell
-          )}
-          onMouseEnter={props.onActionCellEnter}
-          onMouseLeave={props.onActionCellLeave}
+    <TableRow key={task.id} selected={props.isSelected}>
+      <TableCell padding="checkbox">
+        <Checkbox
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            props.onSelectChange(event.target.checked)
+          }
+          checked={props.isSelected}
+        />
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {uuidPrefix(task.id)}
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {props.showActions ? (
-            <React.Fragment>
-              <Tooltip title="Delete">
-                <IconButton
-                  onClick={props.onDeleteClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Archive">
-                <IconButton
-                  onClick={props.onArchiveClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <ArchiveIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Run">
-                <IconButton
-                  onClick={props.onRunClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <PlayArrowIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            </React.Fragment>
-          ) : (
-            <IconButton size="small" onClick={props.onActionCellEnter}>
-              <MoreHorizIcon fontSize="small" />
-            </IconButton>
-          )}
-        </TableCell>
-      </TableRow>
-      <TableRow selected={props.isSelected}>
-        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
-              <Typography variant="h6" gutterBottom component="div">
-                Payload
-              </Typography>
-              <SyntaxHighlighter language="json">
-                {JSON.stringify(task.payload, null, 2)}
-              </SyntaxHighlighter>
-            </Box>
-          </Collapse>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>{durationBefore(task.next_process_at)}</TableCell>
+      <TableCell>{task.error_message}</TableCell>
+      <TableCell align="right">{task.retried}</TableCell>
+      <TableCell align="right">{task.max_retry}</TableCell>
+      <TableCell
+        align="center"
+        className={clsx(
+          classes.actionCell,
+          props.showActions && classes.activeActionCell
+        )}
+        onMouseEnter={props.onActionCellEnter}
+        onMouseLeave={props.onActionCellLeave}
+      >
+        {props.showActions ? (
+          <React.Fragment>
+            <Tooltip title="Delete">
+              <IconButton
+                onClick={props.onDeleteClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Archive">
+              <IconButton
+                onClick={props.onArchiveClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <ArchiveIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Run">
+              <IconButton
+                onClick={props.onRunClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <PlayArrowIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </React.Fragment>
+        ) : (
+          <IconButton size="small" onClick={props.onActionCellEnter}>
+            <MoreHorizIcon fontSize="small" />
+          </IconButton>
+        )}
+      </TableCell>
+    </TableRow>
   );
 }