Create DeleteQueueConfirmationDialog component

ui/src/components/DeleteQueueConfirmationDialog.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import { Queue } from "../api";
+import { AppState } from "../store";
+import { deleteQueueAsync } from "../actions/queuesActions";
+
+interface Props {
+  queue: Queue | null; // queue to delete
+  onClose: () => void;
+}
+
+function mapStateToProps(state: AppState, ownProps: Props) {
+  let requestPending = false;
+  if (ownProps.queue !== null) {
+    const q = state.queues.data.find((q) => q.name === ownProps.queue?.queue);
+    if (q !== undefined) {
+      requestPending = q.requestPending;
+    }
+  }
+  return {
+    requestPending,
+  };
+}
+
+const connector = connect(mapStateToProps, { deleteQueueAsync });
+
+type ReduxProps = ConnectedProps<typeof connector>;
+
+function DeleteQueueConfirmationDialog(props: Props & ReduxProps) {
+  const handleDeleteClick = () => {
+    if (!props.queue) {
+      return;
+    }
+    props.deleteQueueAsync(props.queue.queue);
+    props.onClose();
+  };
+  return (
+    <Dialog
+      open={props.queue !== null}
+      onClose={props.onClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      {props.queue !== null &&
+        (props.queue.size > 0 ? (
+          <>
+            <DialogTitle id="alert-dialog-title">
+              Queue is not empty
+            </DialogTitle>
+            <DialogContent>
+              <DialogContentText id="alert-dialog-description">
+                You are trying to delete a non-emtpy queue "{props.queue.queue}
+                ". Please empty the queue first before deleting.
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={props.onClose} color="primary">
+                OK
+              </Button>
+            </DialogActions>
+          </>
+        ) : (
+          <>
+            <DialogTitle id="alert-dialog-title">
+              Are you sure you want to delete "{props.queue.queue}"?
+            </DialogTitle>
+            <DialogContent>
+              <DialogContentText id="alert-dialog-description">
+                You can't undo this action.
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button
+                onClick={props.onClose}
+                disabled={props.requestPending}
+                color="primary"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleDeleteClick}
+                disabled={props.requestPending}
+                color="primary"
+                autoFocus
+              >
+                Delete
+              </Button>
+            </DialogActions>
+          </>
+        ))}
+    </Dialog>
+  );
+}
+
+export default connector(DeleteQueueConfirmationDialog);

ui/src/components/QueuesOverviewTable.tsx

@@ -2,12 +2,6 @@ import React, { useState } from "react";
 import clsx from "clsx";
 import { Link } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -21,6 +15,7 @@ import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled";
 import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled";
 import DeleteIcon from "@material-ui/icons/Delete";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
+import DeleteQueueConfirmationDialog from "./DeleteQueueConfirmationDialog";
 import { Queue } from "../api";
 import { queueDetailsPath } from "../paths";
 
@@ -53,13 +48,14 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 interface QueueWithMetadata extends Queue {
-  pauseRequestPending: boolean; // indicates pause/resume request is pending for the queue.
+  requestPending: boolean; // indicates pause/resume/delete request is pending for the queue.
 }
 
 interface Props {
   queues: QueueWithMetadata[];
   onPauseClick: (qname: string) => Promise<void>;
   onResumeClick: (qname: string) => Promise<void>;
+  onDeleteClick: (qname: string) => Promise<void>;
 }
 
 enum SortBy {
@@ -118,7 +114,9 @@ export default function QueuesOverviewTable(props: Props) {
   const [sortBy, setSortBy] = useState<SortBy>(SortBy.Queue);
   const [sortDir, setSortDir] = useState<SortDirection>(SortDirection.Asc);
   const [activeRowIndex, setActiveRowIndex] = useState<number>(-1);
-  const [queueToDelete, setQueueToDelete] = useState<Queue | null>(null);
+  const [queueToDelete, setQueueToDelete] = useState<QueueWithMetadata | null>(
+    null
+  );
   const total = getAggregateCounts(props.queues);
 
   const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => {
@@ -274,7 +272,7 @@ export default function QueuesOverviewTable(props: Props) {
                           <IconButton
                             color="secondary"
                             onClick={() => props.onResumeClick(q.queue)}
-                            disabled={q.pauseRequestPending}
+                            disabled={q.requestPending}
                           >
                             <PlayCircleFilledIcon />
                           </IconButton>
@@ -282,7 +280,7 @@ export default function QueuesOverviewTable(props: Props) {
                           <IconButton
                             color="primary"
                             onClick={() => props.onPauseClick(q.queue)}
-                            disabled={q.pauseRequestPending}
+                            disabled={q.requestPending}
                           >
                             <PauseCircleFilledIcon />
                           </IconButton>
@@ -330,34 +328,10 @@ export default function QueuesOverviewTable(props: Props) {
           </TableFooter>
         </Table>
       </TableContainer>
-      <Dialog
-        open={queueToDelete !== null}
+      <DeleteQueueConfirmationDialog
         onClose={handleDialogClose}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        {queueToDelete !== null && (
-          <>
-            <DialogTitle id="alert-dialog-title">
-              Are you sure you want to delete "{queueToDelete.queue}"?
-            </DialogTitle>
-            <DialogContent>
-              <DialogContentText id="alert-dialog-description">
-                All of the tasks in the queue will be deleted. You can't undo
-                this action.
-              </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={handleDialogClose} color="primary">
-                Cancel
-              </Button>
-              <Button onClick={handleDialogClose} color="primary" autoFocus>
-                Delete
-              </Button>
-            </DialogActions>
-          </>
-        )}
-      </Dialog>
+        queue={queueToDelete}
+      />
     </React.Fragment>
   );
 }