(ui): Convert all tasks tables to use TasksTable component

ui/src/components/CompletedTasksTable.tsx

@@ -1,22 +1,12 @@
 import Checkbox from "@material-ui/core/Checkbox";
 import IconButton from "@material-ui/core/IconButton";
-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 DeleteIcon from "@material-ui/icons/Delete";
 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 React, { useCallback, useState } from "react";
+import React from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
@@ -26,9 +16,7 @@ import {
   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 {
@@ -39,26 +27,7 @@ import {
   uuidPrefix,
 } from "../utils";
 import SyntaxHighlighter from "./SyntaxHighlighter";
-import TableActions from "./TableActions";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    minWidth: 650,
-  },
-  stickyHeaderCell: {
-    background: theme.palette.background.paper,
-  },
-  alert: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  pagination: {
-    border: "none",
-  },
-}));
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -73,10 +42,10 @@ function mapStateToProps(state: AppState) {
 }
 
 const mapDispatchToProps = {
-  listCompletedTasksAsync,
-  deleteCompletedTaskAsync,
-  deleteAllCompletedTasksAsync,
-  batchDeleteCompletedTasksAsync,
+  listTasks: listCompletedTasksAsync,
+  deleteTask: deleteCompletedTaskAsync,
+  deleteAllTasks: deleteAllCompletedTasksAsync,
+  batchDeleteTasks: batchDeleteCompletedTasksAsync,
   taskRowsPerPageChange,
 };
 
@@ -89,242 +58,15 @@ interface Props {
   totalTaskCount: number; // totoal number of completed tasks.
 }
 
-function CompletedTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listCompletedTasksAsync, queue, pageSize } = props;
-  const classes = useStyles();
-  const [page, setPage] = useState(0);
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
-  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
-  const handlePageChange = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleRowsPerPageChange = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    props.taskRowsPerPageChange(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = props.tasks.map((t) => t.id);
-      setSelectedIds(newSelected);
-    } else {
-      setSelectedIds([]);
-    }
-  };
-
-  const handleDeleteAllClick = () => {
-    props.deleteAllCompletedTasksAsync(queue);
-  };
-
-  const handleBatchDeleteClick = () => {
-    props
-      .batchDeleteCompletedTasksAsync(queue, selectedIds)
-      .then(() => setSelectedIds([]));
-  };
-
-  const fetchData = useCallback(() => {
-    const pageOpts = { page: page + 1, size: pageSize };
-    listCompletedTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listCompletedTasksAsync]);
-
-  usePolling(fetchData, pollInterval);
-
-  if (props.error.length > 0) {
-    return (
-      <Alert severity="error" className={classes.alert}>
-        <AlertTitle>Error</AlertTitle>
-        {props.error}
-      </Alert>
-    );
-  }
-  if (props.tasks.length === 0) {
-    return (
-      <Alert severity="info" className={classes.alert}>
-        <AlertTitle>Info</AlertTitle>
-        No completed tasks at this time.
-      </Alert>
-    );
-  }
-
-  const columns: TableColumn[] = [
-    { key: "id", label: "ID", align: "left" },
-    { key: "type", label: "Type", align: "left" },
-    { key: "payload", label: "Payload", align: "left" },
-    { key: "completed_at", label: "Completed", align: "left" },
-    { key: "result", label: "Result", align: "left" },
-    { key: "ttl", label: "TTL", align: "left" },
-    { key: "actions", label: "Actions", align: "center" },
-  ];
-
-  const rowCount = props.tasks.length;
-  const numSelected = selectedIds.length;
-  return (
-    <div>
-      {!window.READ_ONLY && (
-        <TableActions
-          showIconButtons={numSelected > 0}
-          iconButtonActions={[
-            {
-              tooltip: "Delete",
-              icon: <DeleteIcon />,
-              onClick: handleBatchDeleteClick,
-              disabled: props.batchActionPending,
-            },
-          ]}
-          menuItemActions={[
-            {
-              label: "Delete All",
-              onClick: handleDeleteAllClick,
-              disabled: props.allActionPending,
-            },
-          ]}
-        />
-      )}
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader={true}
-          className={classes.table}
-          aria-label="archived tasks table"
-          size="small"
-        >
-          <TableHead>
-            <TableRow>
-              {!window.READ_ONLY && (
-                <TableCell
-                  padding="checkbox"
-                  classes={{ stickyHeader: classes.stickyHeaderCell }}
-                >
-                  <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
-                .filter((col) => {
-                  // Filter out actions column in readonly mode.
-                  return !window.READ_ONLY || col.key !== "actions";
-                })
-                .map((col) => (
-                  <TableCell
-                    key={col.key}
-                    align={col.align}
-                    classes={{ stickyHeader: classes.stickyHeaderCell }}
-                  >
-                    {col.label}
-                  </TableCell>
-                ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.tasks.map((task) => (
-              <Row
-                key={task.id}
-                task={task}
-                isSelected={selectedIds.includes(task.id)}
-                onSelectChange={(checked: boolean) => {
-                  if (checked) {
-                    setSelectedIds(selectedIds.concat(task.id));
-                  } else {
-                    setSelectedIds(selectedIds.filter((id) => id !== task.id));
-                  }
-                }}
-                onDeleteClick={() => {
-                  props.deleteCompletedTaskAsync(queue, task.id);
-                }}
-                allActionPending={props.allActionPending}
-                onActionCellEnter={() => setActiveTaskId(task.id)}
-                onActionCellLeave={() => setActiveTaskId("")}
-                showActions={activeTaskId === task.id}
-              />
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1}
-                count={props.totalTaskCount}
-                rowsPerPage={pageSize}
-                page={page}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onPageChange={handlePageChange}
-                onRowsPerPageChange={handleRowsPerPageChange}
-                ActionsComponent={TablePaginationActions}
-                className={classes.pagination}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-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",
-    },
-    "&:hover .MuiTableCell-root": {
-      borderBottomColor: theme.palette.background.paper,
-    },
-  },
-  actionCell: {
-    width: "96px",
-  },
-  actionButton: {
-    marginLeft: 3,
-    marginRight: 3,
-  },
-  idCell: {
-    width: "200px",
-  },
-  copyButton: {
-    display: "none",
-  },
-  IdGroup: {
-    display: "flex",
-    alignItems: "center",
-  },
-}));
-
-interface RowProps {
-  task: TaskInfoExtended;
-  isSelected: boolean;
-  onSelectChange: (checked: boolean) => void;
-  onDeleteClick: () => void;
-  allActionPending: boolean;
-  showActions: boolean;
-  onActionCellEnter: () => void;
-  onActionCellLeave: () => void;
-}
+const columns: TableColumn[] = [
+  { key: "id", label: "ID", align: "left" },
+  { key: "type", label: "Type", align: "left" },
+  { key: "payload", label: "Payload", align: "left" },
+  { key: "completed_at", label: "Completed", align: "left" },
+  { key: "result", label: "Result", align: "left" },
+  { key: "ttl", label: "TTL", align: "left" },
+  { key: "actions", label: "Actions", align: "center" },
+];
 
 function Row(props: RowProps) {
   const { task } = props;
@@ -421,4 +163,14 @@ function Row(props: RowProps) {
   );
 }
 
+function CompletedTasksTable(props: Props & ReduxProps) {
+  return (
+    <TasksTable
+      taskState="completed"
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+      {...props}
+    />
+  );
+}
 export default connector(CompletedTasksTable);