Merge branch '18169-cancel-button-not-working' into main

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

diff --git a/src/components/form-dialog/form-dialog.tsx b/src/components/form-dialog/form-dialog.tsx
index 3df874b7a3921e473a7c12b6d9ffe8f06bf9bc1e..0fc799dee92b62eb0ab58a6ce100403dc7477193 100644 (file)
--- a/src/components/form-dialog/form-dialog.tsx
+++ b/src/components/form-dialog/form-dialog.tsx
@@ -2,11 +2,11 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+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 { WithDialogProps } from '~/store/dialog/with-dialog';
+import { WithDialogProps } from 'store/dialog/with-dialog';
 
 type CssRules = "button" | "lastButton" | "formContainer" | "dialogTitle" | "progressIndicator" | "dialogActions";
 
@@ -42,6 +42,9 @@ interface DialogProjectDataProps {
     dialogTitle: string;
     formFields: React.ComponentType<InjectedFormProps<any> & WithDialogProps<any>>;
     submitLabel?: string;
+    cancelCallback?: Function;
+    enableWhenPristine?: boolean;
+    doNotDisableCancel?: boolean;
 }
 
 type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
@@ -54,7 +57,7 @@ export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
         disableEscapeKeyDown={props.submitting}
         fullWidth
         maxWidth='md'>
-        <form>
+        <form data-cy='form-dialog'>
             <DialogTitle className={props.classes.dialogTitle}>
                 {props.dialogTitle}
             </DialogTitle>
@@ -63,18 +66,28 @@ export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
             </DialogContent>
             <DialogActions className={props.classes.dialogActions}>
                 <Button
-                    onClick={props.closeDialog}
+                    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.submitting}>
+                    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}
+                    disabled={props.invalid || props.submitting || (props.pristine && !props.enableWhenPristine)}
                     variant="contained">
                     {props.submitLabel || 'Submit'}
                     {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
@@ -83,5 +96,3 @@ export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
         </form>
     </Dialog>
 );
-
-