Redesign TableActions component to be more generic

ui/src/components/DeadTasksTable.tsx

@@ -13,6 +13,8 @@ import Paper from "@material-ui/core/Paper";
 import Box from "@material-ui/core/Box";
 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 KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
@@ -164,13 +166,33 @@ function DeadTasksTable(props: Props & ReduxProps) {
   return (
     <div>
       <TableActions
-        allActionPending={props.allActionPending}
+        showIconButtons={numSelected > 0}
-        batchActionPending={props.batchActionPending}
+        iconButtonActions={[
-        showBatchActions={numSelected > 0}
+          {
-        onRunAllClick={handleRunAllClick}
+            tooltip: "Delete",
-        onDeleteAllClick={handleDeleteAllClick}
+            icon: <DeleteIcon />,
-        onBatchRunClick={handleBatchRunClick}
+            onClick: handleBatchDeleteClick,
-        onBatchDeleteClick={handleBatchDeleteClick}
+            disabled: props.batchActionPending,
+          },
+          {
+            tooltip: "Run",
+            icon: <PlayArrowIcon />,
+            onClick: handleBatchRunClick,
+            disabled: props.batchActionPending,
+          },
+        ]}
+        menuItemActions={[
+          {
+            label: "Delete All",
+            onClick: handleDeleteAllClick,
+            disabled: props.allActionPending,
+          },
+          {
+            label: "Run All",
+            onClick: handleRunAllClick,
+            disabled: props.allActionPending,
+          },
+        ]}
       />
       <TableContainer component={Paper}>
         <Table

ui/src/components/RetryTasksTable.tsx

@@ -15,6 +15,9 @@ import Box from "@material-ui/core/Box";
 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 KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
@@ -174,15 +177,44 @@ function RetryTasksTable(props: Props & ReduxProps) {
   return (
     <div>
       <TableActions
-        allActionPending={props.allActionPending}
+        showIconButtons={numSelected > 0}
-        batchActionPending={props.batchActionPending}
+        iconButtonActions={[
-        showBatchActions={numSelected > 0}
+          {
-        onRunAllClick={handleRunAllClick}
+            tooltip: "Delete",
-        onDeleteAllClick={handleDeleteAllClick}
+            icon: <DeleteIcon />,
-        onKillAllClick={handleKillAllClick}
+            onClick: handleBatchDeleteClick,
-        onBatchRunClick={handleBatchRunClick}
+            disabled: props.batchActionPending,
-        onBatchDeleteClick={handleBatchDeleteClick}
+          },
-        onBatchKillClick={handleBatchKillClick}
+          {
+            tooltip: "Kill",
+            icon: <ArchiveIcon />,
+            onClick: handleBatchKillClick,
+            disabled: props.batchActionPending,
+          },
+          {
+            tooltip: "Run",
+            icon: <PlayArrowIcon />,
+            onClick: handleBatchRunClick,
+            disabled: props.batchActionPending,
+          },
+        ]}
+        menuItemActions={[
+          {
+            label: "Delete All",
+            onClick: handleDeleteAllClick,
+            disabled: props.allActionPending,
+          },
+          {
+            label: "Kill All",
+            onClick: handleKillAllClick,
+            disabled: props.allActionPending,
+          },
+          {
+            label: "Run All",
+            onClick: handleRunAllClick,
+            disabled: props.allActionPending,
+          },
+        ]}
       />
       <TableContainer component={Paper}>
         <Table

ui/src/components/ScheduledTasksTable.tsx

@@ -15,6 +15,9 @@ import Box from "@material-ui/core/Box";
 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 KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
@@ -171,15 +174,44 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
   return (
     <div>
       <TableActions
-        allActionPending={props.allActionPending}
+        showIconButtons={numSelected > 0}
-        batchActionPending={props.batchActionPending}
+        iconButtonActions={[
-        showBatchActions={numSelected > 0}
+          {
-        onRunAllClick={handleRunAllClick}
+            tooltip: "Delete",
-        onKillAllClick={handleKillAllClick}
+            icon: <DeleteIcon />,
-        onDeleteAllClick={handleDeleteAllClick}
+            onClick: handleBatchDeleteClick,
-        onBatchRunClick={handleBatchRunClick}
+            disabled: props.batchActionPending,
-        onBatchDeleteClick={handleBatchDeleteClick}
+          },
-        onBatchKillClick={handleBatchKillClick}
+          {
+            tooltip: "Kill",
+            icon: <ArchiveIcon />,
+            onClick: handleBatchKillClick,
+            disabled: props.batchActionPending,
+          },
+          {
+            tooltip: "Run",
+            icon: <PlayArrowIcon />,
+            onClick: handleBatchRunClick,
+            disabled: props.batchActionPending,
+          },
+        ]}
+        menuItemActions={[
+          {
+            label: "Delete All",
+            onClick: handleDeleteAllClick,
+            disabled: props.allActionPending,
+          },
+          {
+            label: "Kill All",
+            onClick: handleKillAllClick,
+            disabled: props.allActionPending,
+          },
+          {
+            label: "Run All",
+            onClick: handleRunAllClick,
+            disabled: props.allActionPending,
+          },
+        ]}
       />
       <TableContainer component={Paper}>
         <Table

ui/src/components/TableActions.tsx

@@ -1,9 +1,6 @@
 import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Tooltip from "@material-ui/core/Tooltip";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
-import DeleteIcon from "@material-ui/icons/Delete";
-import ArchiveIcon from "@material-ui/icons/Archive";
 import IconButton from "@material-ui/core/IconButton";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
@@ -23,16 +20,23 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+interface MenuItemAction {
+  label: string;
+  onClick: () => void;
+  disabled: boolean;
+}
+
+interface IconButtonAction {
+  icon: React.ReactElement;
+  tooltip: string;
+  onClick: () => void;
+  disabled: boolean;
+}
+
 interface Props {
-  allActionPending: boolean;
+  menuItemActions: MenuItemAction[];
-  onRunAllClick: () => void;
+  iconButtonActions: IconButtonAction[];
-  onDeleteAllClick: () => void;
+  showIconButtons: boolean;
-  onKillAllClick?: () => void;
-  showBatchActions: boolean;
-  batchActionPending: boolean;
-  onBatchRunClick: () => void;
-  onBatchDeleteClick: () => void;
-  onBatchKillClick?: () => void;
 }
 
 export default function TableActions(props: Props) {
@@ -63,68 +67,25 @@ export default function TableActions(props: Props) {
         open={Boolean(menuAnchor)}
         onClose={closeMenu}
       >
+        {props.menuItemActions.map((action) => (
           <MenuItem
-          onClick={() => {
+            key={action.label}
-            props.onRunAllClick();
+            onClick={action.onClick}
-            closeMenu();
+            disabled={action.disabled}
-          }}
-          disabled={props.allActionPending}
           >
-          Run All
+            {action.label}
-        </MenuItem>
-        {props.onKillAllClick && (
-          <MenuItem
-            onClick={() => {
-              if (!props.onKillAllClick) return;
-              props.onKillAllClick();
-              closeMenu();
-            }}
-            disabled={props.allActionPending}
-          >
-            Kill All
-          </MenuItem>
-        )}
-        <MenuItem
-          onClick={() => {
-            props.onDeleteAllClick();
-            closeMenu();
-          }}
-          disabled={props.allActionPending}
-        >
-          Delete All
           </MenuItem>
+        ))}
       </Menu>
-      {props.showBatchActions && (
+      {props.showIconButtons && (
         <div className={classes.iconGroup}>
-          {props.onBatchKillClick && (
+          {props.iconButtonActions.map((action) => (
-            <Tooltip title="Kill">
+            <Tooltip key={action.tooltip} title={action.tooltip}>
-              <IconButton
+              <IconButton onClick={action.onClick} disabled={action.disabled}>
-                disabled={props.batchActionPending}
+                {action.icon}
-                onClick={() => {
-                  if (!props.onBatchKillClick) return;
-                  props.onBatchKillClick();
-                }}
-              >
-                <ArchiveIcon />
-              </IconButton>
-            </Tooltip>
-          )}
-          <Tooltip title="Delete">
-            <IconButton
-              disabled={props.batchActionPending}
-              onClick={props.onBatchDeleteClick}
-            >
-              <DeleteIcon />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="Run">
-            <IconButton
-              disabled={props.batchActionPending}
-              onClick={props.onBatchRunClick}
-            >
-              <PlayArrowIcon />
               </IconButton>
             </Tooltip>
+          ))}
         </div>
       )}
     </div>