github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/components/DeleteQueueConfirmationDialog.tsx (about)

     1  import React from "react";
     2  import { connect, ConnectedProps } from "react-redux";
     3  import Button from "@material-ui/core/Button";
     4  import Dialog from "@material-ui/core/Dialog";
     5  import DialogActions from "@material-ui/core/DialogActions";
     6  import DialogContent from "@material-ui/core/DialogContent";
     7  import DialogContentText from "@material-ui/core/DialogContentText";
     8  import DialogTitle from "@material-ui/core/DialogTitle";
     9  import { Queue } from "../api";
    10  import { AppState } from "../store";
    11  import { deleteQueueAsync } from "../actions/queuesActions";
    12  
    13  interface Props {
    14    queue: Queue | null; // queue to delete
    15    onClose: () => void;
    16  }
    17  
    18  function mapStateToProps(state: AppState, ownProps: Props) {
    19    let requestPending = false;
    20    if (ownProps.queue !== null) {
    21      const q = state.queues.data.find((q) => q.name === ownProps.queue?.queue);
    22      if (q !== undefined) {
    23        requestPending = q.requestPending;
    24      }
    25    }
    26    return {
    27      requestPending,
    28    };
    29  }
    30  
    31  const connector = connect(mapStateToProps, { deleteQueueAsync });
    32  
    33  type ReduxProps = ConnectedProps<typeof connector>;
    34  
    35  function DeleteQueueConfirmationDialog(props: Props & ReduxProps) {
    36    const handleDeleteClick = () => {
    37      if (!props.queue) {
    38        return;
    39      }
    40      props.deleteQueueAsync(props.queue.queue);
    41      props.onClose();
    42    };
    43    return (
    44      <Dialog
    45        open={props.queue !== null}
    46        onClose={props.onClose}
    47        aria-labelledby="alert-dialog-title"
    48        aria-describedby="alert-dialog-description"
    49      >
    50        {props.queue !== null &&
    51          (props.queue.size > 0 ? (
    52            <>
    53              <DialogTitle id="alert-dialog-title">
    54                Queue is not empty
    55              </DialogTitle>
    56              <DialogContent>
    57                <DialogContentText id="alert-dialog-description">
    58                  You are trying to delete a non-emtpy queue "{props.queue.queue}
    59                  ". Please empty the queue first before deleting.
    60                </DialogContentText>
    61              </DialogContent>
    62              <DialogActions>
    63                <Button onClick={props.onClose} color="primary">
    64                  OK
    65                </Button>
    66              </DialogActions>
    67            </>
    68          ) : (
    69            <>
    70              <DialogTitle id="alert-dialog-title">
    71                Are you sure you want to delete "{props.queue.queue}"?
    72              </DialogTitle>
    73              <DialogContent>
    74                <DialogContentText id="alert-dialog-description">
    75                  You can't undo this action.
    76                </DialogContentText>
    77              </DialogContent>
    78              <DialogActions>
    79                <Button
    80                  onClick={props.onClose}
    81                  disabled={props.requestPending}
    82                  color="primary"
    83                >
    84                  Cancel
    85                </Button>
    86                <Button
    87                  onClick={handleDeleteClick}
    88                  disabled={props.requestPending}
    89                  color="primary"
    90                  autoFocus
    91                >
    92                  Delete
    93                </Button>
    94              </DialogActions>
    95            </>
    96          ))}
    97      </Dialog>
    98    );
    99  }
   100  
   101  export default connector(DeleteQueueConfirmationDialog);