src/components/confirmation-dialog/confirmation-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, DialogContentText } from "@material-ui/core";
   7 import { WithDialogProps } from "~/store/dialog/with-dialog";
   8 import { WarningIcon } from '~/components/icon/icon';
   9
  10 export interface ConfirmationDialogDataProps {
  11     title: string;
  12     text: string;
  13     info?: string;
  14     cancelButtonLabel?: string;
  15     confirmButtonLabel?: string;
  16 }
  17
  18 export interface ConfirmationDialogProps {
  19     onConfirm: () => void;
  20 }
  21
  22 export const ConfirmationDialog = (props: ConfirmationDialogProps & WithDialogProps<ConfirmationDialogDataProps>) =>
  23     <Dialog open={props.open}>
  24         <div data-cy='confirmation-dialog'>
  25             <DialogTitle>{props.data.title}</DialogTitle>
  26             <DialogContent style={{ display: 'flex', alignItems: 'center' }}>
  27                 <WarningIcon />
  28                 <DialogContentText style={{ paddingLeft: '8px' }}>
  29                     <div>{props.data.text}</div>
  30                     <div>{props.data.info}</div>
  31                 </DialogContentText>
  32             </DialogContent>
  33             <DialogActions style={{ margin: '0px 24px 24px' }}>
  34                 <Button
  35                     data-cy='confirmation-dialog-cancel-btn'
  36                     variant='text'
  37                     color='primary'
  38                     onClick={props.closeDialog}>
  39                     {props.data.cancelButtonLabel || 'Cancel'}
  40                 </Button>
  41                 <Button
  42                     data-cy='confirmation-dialog-ok-btn'
  43                     variant='contained'
  44                     color='primary'
  45                     type='submit'
  46                     onClick={props.onConfirm}>
  47                     {props.data.confirmButtonLabel || 'Ok'}
  48                 </Button>
  49             </DialogActions>
  50         </div>
  51     </Dialog>;