services/workbench2/src/components/form-dialog/form-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { InjectedFormProps } from 'redux-form';
   7 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material/';
   8 import { CustomStyleRulesCallback } from 'common/custom-theme';
   9 import { Button, CircularProgress } from '@mui/material';
  10 import { WithStyles } from '@mui/styles';
  11 import withStyles from '@mui/styles/withStyles';
  12 import { WithDialogProps } from 'store/dialog/with-dialog';
  13
  14 type CssRules = "button" | "lastButton" | "form" | "formContainer" | "dialogTitle" | "progressIndicator" | "dialogActions";
  15
  16 const styles: CustomStyleRulesCallback<CssRules> = theme => ({
  17     button: {
  18         marginLeft: theme.spacing(1),
  19     },
  20     lastButton: {
  21         marginLeft: theme.spacing(1),
  22         marginRight: "0",
  23     },
  24     form: {
  25         display: 'flex',
  26         overflowY: 'auto',
  27         flexDirection: 'column',
  28         flex: '0 1 auto',
  29     },
  30     formContainer: {
  31         display: "flex",
  32         flexDirection: "column",
  33         paddingBottom: "0",
  34     },
  35     dialogTitle: {
  36         paddingTop: theme.spacing(1),
  37         paddingBottom: theme.spacing(1),
  38     },
  39     progressIndicator: {
  40         position: "absolute",
  41         minWidth: "20px",
  42     },
  43     dialogActions: {
  44         marginBottom: theme.spacing(1),
  45         marginRight: theme.spacing(3),
  46     }
  47 });
  48
  49 interface DialogProjectDataProps {
  50     cancelLabel?: string;
  51     dialogTitle: string;
  52     formFields: React.ComponentType<InjectedFormProps<any> & WithDialogProps<any>>;
  53     submitLabel?: string;
  54     cancelCallback?: Function;
  55     enableWhenPristine?: boolean;
  56     doNotDisableCancel?: boolean;
  57 }
  58
  59 type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
  60
  61 export const FormDialog = withStyles(styles)((props: DialogProjectProps) => {
  62
  63     const handleClose = (ev, reason) => {
  64         if (reason !== 'backdropClick') {
  65             props.closeDialog();
  66         }
  67     }
  68
  69     return <Dialog
  70                 open={props.open}
  71                 onClose={handleClose}
  72                 disableEscapeKeyDown={props.submitting}
  73                 fullWidth
  74                 scroll='paper'
  75                 maxWidth='md'>
  76                 <form data-cy='form-dialog' className={props.classes.form}>
  77                     <DialogTitle className={props.classes.dialogTitle}>
  78                         {props.dialogTitle}
  79                     </DialogTitle>
  80                     <DialogContent className={props.classes.formContainer}>
  81                         <props.formFields {...props} />
  82                     </DialogContent>
  83                     <DialogActions className={props.classes.dialogActions}>
  84                         <Button
  85                             data-cy='form-cancel-btn'
  86                             onClick={() => {
  87                                 props.closeDialog();
  88
  89                                 if (props.cancelCallback) {
  90                                     props.cancelCallback();
  91                                     props.reset();
  92                                     props.initialize({});
  93                                 }
  94                             }}
  95                             className={props.classes.button}
  96                             color="primary"
  97                             disabled={props.doNotDisableCancel ? false : props.submitting}>
  98                             {props.cancelLabel || 'Cancel'}
  99                         </Button>
 100                         <Button
 101                             data-cy='form-submit-btn'
 102                             type="submit"
 103                             onClick={props.handleSubmit}
 104                             className={props.classes.lastButton}
 105                             color="primary"
 106                             disabled={props.invalid || props.submitting || (props.pristine && !props.enableWhenPristine)}
 107                             variant="contained">
 108                             {props.submitLabel || 'Submit'}
 109                             {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
 110                         </Button>
 111                     </DialogActions>
 112                 </form>
 113             </Dialog>
 114 });