From 3ab1ed31a6468e4d8f0f103b3def7d3f05f82722 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Tue, 22 Dec 2020 05:49:39 -0800
Subject: [PATCH] Redesign TableActions component to be more generic

---
 ui/src/components/DeadTasksTable.tsx      | 36 +++++++--
 ui/src/components/RetryTasksTable.tsx     | 50 +++++++++---
 ui/src/components/ScheduledTasksTable.tsx | 50 +++++++++---
 ui/src/components/TableActions.tsx        | 95 +++++++----------------
 4 files changed, 139 insertions(+), 92 deletions(-)

diff --git a/ui/src/components/DeadTasksTable.tsx b/ui/src/components/DeadTasksTable.tsx
index 11b2778..ff069c1 100644
--- a/ui/src/components/DeadTasksTable.tsx
+++ b/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}
-        batchActionPending={props.batchActionPending}
-        showBatchActions={numSelected > 0}
-        onRunAllClick={handleRunAllClick}
-        onDeleteAllClick={handleDeleteAllClick}
-        onBatchRunClick={handleBatchRunClick}
-        onBatchDeleteClick={handleBatchDeleteClick}
+        showIconButtons={numSelected > 0}
+        iconButtonActions={[
+          {
+            tooltip: "Delete",
+            icon: <DeleteIcon />,
+            onClick: 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
diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx
index ca1e56f..2dc2685 100644
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/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}
-        batchActionPending={props.batchActionPending}
-        showBatchActions={numSelected > 0}
-        onRunAllClick={handleRunAllClick}
-        onDeleteAllClick={handleDeleteAllClick}
-        onKillAllClick={handleKillAllClick}
-        onBatchRunClick={handleBatchRunClick}
-        onBatchDeleteClick={handleBatchDeleteClick}
-        onBatchKillClick={handleBatchKillClick}
+        showIconButtons={numSelected > 0}
+        iconButtonActions={[
+          {
+            tooltip: "Delete",
+            icon: <DeleteIcon />,
+            onClick: handleBatchDeleteClick,
+            disabled: props.batchActionPending,
+          },
+          {
+            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
diff --git a/ui/src/components/ScheduledTasksTable.tsx b/ui/src/components/ScheduledTasksTable.tsx
index eb0023e..8c07e8e 100644
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/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}
-        batchActionPending={props.batchActionPending}
-        showBatchActions={numSelected > 0}
-        onRunAllClick={handleRunAllClick}
-        onKillAllClick={handleKillAllClick}
-        onDeleteAllClick={handleDeleteAllClick}
-        onBatchRunClick={handleBatchRunClick}
-        onBatchDeleteClick={handleBatchDeleteClick}
-        onBatchKillClick={handleBatchKillClick}
+        showIconButtons={numSelected > 0}
+        iconButtonActions={[
+          {
+            tooltip: "Delete",
+            icon: <DeleteIcon />,
+            onClick: handleBatchDeleteClick,
+            disabled: props.batchActionPending,
+          },
+          {
+            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
diff --git a/ui/src/components/TableActions.tsx b/ui/src/components/TableActions.tsx
index beb3937..522b570 100644
--- a/ui/src/components/TableActions.tsx
+++ b/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;
-  onRunAllClick: () => void;
-  onDeleteAllClick: () => void;
-  onKillAllClick?: () => void;
-  showBatchActions: boolean;
-  batchActionPending: boolean;
-  onBatchRunClick: () => void;
-  onBatchDeleteClick: () => void;
-  onBatchKillClick?: () => void;
+  menuItemActions: MenuItemAction[];
+  iconButtonActions: IconButtonAction[];
+  showIconButtons: boolean;
 }
 
 export default function TableActions(props: Props) {
@@ -63,68 +67,25 @@ export default function TableActions(props: Props) {
         open={Boolean(menuAnchor)}
         onClose={closeMenu}
       >
-        <MenuItem
-          onClick={() => {
-            props.onRunAllClick();
-            closeMenu();
-          }}
-          disabled={props.allActionPending}
-        >
-          Run All
-        </MenuItem>
-        {props.onKillAllClick && (
+        {props.menuItemActions.map((action) => (
           <MenuItem
-            onClick={() => {
-              if (!props.onKillAllClick) return;
-              props.onKillAllClick();
-              closeMenu();
-            }}
-            disabled={props.allActionPending}
+            key={action.label}
+            onClick={action.onClick}
+            disabled={action.disabled}
           >
-            Kill All
+            {action.label}
           </MenuItem>
-        )}
-        <MenuItem
-          onClick={() => {
-            props.onDeleteAllClick();
-            closeMenu();
-          }}
-          disabled={props.allActionPending}
-        >
-          Delete All
-        </MenuItem>
+        ))}
       </Menu>
-      {props.showBatchActions && (
+      {props.showIconButtons && (
         <div className={classes.iconGroup}>
-          {props.onBatchKillClick && (
-            <Tooltip title="Kill">
-              <IconButton
-                disabled={props.batchActionPending}
-                onClick={() => {
-                  if (!props.onBatchKillClick) return;
-                  props.onBatchKillClick();
-                }}
-              >
-                <ArchiveIcon />
+          {props.iconButtonActions.map((action) => (
+            <Tooltip key={action.tooltip} title={action.tooltip}>
+              <IconButton onClick={action.onClick} disabled={action.disabled}>
+                {action.icon}
               </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>