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