21720: restored disableBackdropClick functionality for dialogs

[arvados.git] / services / workbench2 / src / components / form-dialog / form-dialog.tsx

diff --git a/services/workbench2/src/components/form-dialog/form-dialog.tsx b/services/workbench2/src/components/form-dialog/form-dialog.tsx
index b50504a6c0b7a7ef4bd8da5bb330a73a18e0406c..e468032b1b0c5b7489445216e0706403294958be 100644 (file)
--- a/services/workbench2/src/components/form-dialog/form-dialog.tsx
+++ b/services/workbench2/src/components/form-dialog/form-dialog.tsx
@@ -4,18 +4,21 @@
 
 import React from 'react';
 import { InjectedFormProps } from 'redux-form';
-import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
-import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material/';
+import { CustomStyleRulesCallback } from 'common/custom-theme';
+import { Button, CircularProgress } from '@mui/material';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
 import { WithDialogProps } from 'store/dialog/with-dialog';
 
 type CssRules = "button" | "lastButton" | "form" | "formContainer" | "dialogTitle" | "progressIndicator" | "dialogActions";
 
-const styles: StyleRulesCallback<CssRules> = theme => ({
+const styles: CustomStyleRulesCallback<CssRules> = theme => ({
     button: {
-        marginLeft: theme.spacing.unit
+        marginLeft: theme.spacing(1),
     },
     lastButton: {
-        marginLeft: theme.spacing.unit,
+        marginLeft: theme.spacing(1),
         marginRight: "0",
     },
     form: {
@@ -30,16 +33,16 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         paddingBottom: "0",
     },
     dialogTitle: {
-        paddingTop: theme.spacing.unit,
-        paddingBottom: theme.spacing.unit,
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
     },
     progressIndicator: {
         position: "absolute",
         minWidth: "20px",
     },
     dialogActions: {
-        marginBottom: theme.spacing.unit,
-        marginRight: theme.spacing.unit * 3,
+        marginBottom: theme.spacing(1),
+        marginRight: theme.spacing(3),
     }
 });
 
@@ -55,50 +58,57 @@ interface DialogProjectDataProps {
 
 type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
 
-export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
-    <Dialog
-        open={props.open}
-        onClose={props.closeDialog}
-        disableBackdropClick
-        disableEscapeKeyDown={props.submitting}
-        fullWidth
-        maxWidth='md'>
-        <form data-cy='form-dialog' className={props.classes.form}>
-            <DialogTitle className={props.classes.dialogTitle}>
-                {props.dialogTitle}
-            </DialogTitle>
-            <DialogContent className={props.classes.formContainer}>
-                <props.formFields {...props} />
-            </DialogContent>
-            <DialogActions className={props.classes.dialogActions}>
-                <Button
-                    data-cy='form-cancel-btn'
-                    onClick={() => {
-                        props.closeDialog();
+export const FormDialog = withStyles(styles)((props: DialogProjectProps) => {
+    
+    const handleClose = (ev, reason) => {
+        if (reason !== 'backdropClick') {
+            props.closeDialog();
+        }
+    }
+    
+    return <Dialog
+                open={props.open}
+                onClose={handleClose}
+                disableEscapeKeyDown={props.submitting}
+                fullWidth
+                scroll='paper'
+                maxWidth='md'>
+                <form data-cy='form-dialog' className={props.classes.form}>
+                    <DialogTitle className={props.classes.dialogTitle}>
+                        {props.dialogTitle}
+                    </DialogTitle>
+                    <DialogContent className={props.classes.formContainer}>
+                        <props.formFields {...props} />
+                    </DialogContent>
+                    <DialogActions className={props.classes.dialogActions}>
+                        <Button
+                            data-cy='form-cancel-btn'
+                            onClick={() => {
+                                props.closeDialog();
 
-                        if (props.cancelCallback) {
-                            props.cancelCallback();
-                            props.reset();
-                            props.initialize({});
-                        }
-                    }}
-                    className={props.classes.button}
-                    color="primary"
-                    disabled={props.doNotDisableCancel ? false : props.submitting}>
-                    {props.cancelLabel || 'Cancel'}
-                </Button>
-                <Button
-                    data-cy='form-submit-btn'
-                    type="submit"
-                    onClick={props.handleSubmit}
-                    className={props.classes.lastButton}
-                    color="primary"
-                    disabled={props.invalid || props.submitting || (props.pristine && !props.enableWhenPristine)}
-                    variant="contained">
-                    {props.submitLabel || 'Submit'}
-                    {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
-                </Button>
-            </DialogActions>
-        </form>
-    </Dialog>
-);
+                                if (props.cancelCallback) {
+                                    props.cancelCallback();
+                                    props.reset();
+                                    props.initialize({});
+                                }
+                            }}
+                            className={props.classes.button}
+                            color="primary"
+                            disabled={props.doNotDisableCancel ? false : props.submitting}>
+                            {props.cancelLabel || 'Cancel'}
+                        </Button>
+                        <Button
+                            data-cy='form-submit-btn'
+                            type="submit"
+                            onClick={props.handleSubmit}
+                            className={props.classes.lastButton}
+                            color="primary"
+                            disabled={props.invalid || props.submitting || (props.pristine && !props.enableWhenPristine)}
+                            variant="contained">
+                            {props.submitLabel || 'Submit'}
+                            {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
+                        </Button>
+                    </DialogActions>
+                </form>
+            </Dialog>
+});