feat: 🎸 throwAlertOnCancel control prop for SQFormDialog (#807)

* feat: 🎸 throwAlertOnCancel control prop for SQFormDialog

throwAlertOnCancel allows the option to override the Are You Sure dialog
when cancelling SQFormDialog while in the middle of filling out. Set to
true and will throw alert by default (same as previous behavior).

✅ Closes: #806

src/components/SQFormDialog/SQFormDialog.tsx

@@ -67,6 +67,8 @@ export type SQFormDialogProps<Values extends FormikValues> = {
   helperText?: string;
   /** helper text type to eventually get passed to SQFormHelperText component */
   helperTextType?: 'fail' | 'error' | 'valid';
+  /** option to throw an Are You Sure alert when hitting cancel while in the middle of filling out a the form.  true by default. */
+  throwAlertOnCancel?: boolean;
 };
 
 function SQFormDialog<Values extends FormikValues>({
@@ -93,6 +95,7 @@ function SQFormDialog<Values extends FormikValues>({
   tertiaryButtonVariant = 'outlined',
   helperText,
   helperTextType = 'error',
+  throwAlertOnCancel = true,
 }: SQFormDialogProps<Values>): React.ReactElement {
   const initialErrors = useInitialRequiredErrors(
     validationSchema,
@@ -128,6 +131,7 @@ function SQFormDialog<Values extends FormikValues>({
         tertiaryButtonVariant={tertiaryButtonVariant}
         helperText={helperText}
         helperTextType={helperTextType}
+        throwAlertOnCancel={throwAlertOnCancel}
       />
     </Formik>
   );

src/components/SQFormDialog/SQFormDialogInner.tsx

@@ -67,6 +67,8 @@ type SQFormDialogInnerProps<Values extends FormikValues> = {
   helperText?: string;
   /** helper text type to pass to SQFormHelperText component */
   helperTextType?: 'fail' | 'error' | 'valid';
+  /** option to throw an Are You Sure alert when hitting cancel while in the middle of filling out a the form.  true by default. */
+  throwAlertOnCancel?: boolean;
 };
 
 /*
@@ -136,6 +138,7 @@ function SQFormDialogInner<Values extends FormikValues>({
   tertiaryButtonVariant,
   helperText,
   helperTextType = 'error',
+  throwAlertOnCancel = true,
 }: SQFormDialogInnerProps<Values>): React.ReactElement {
   const theme = useTheme();
   const titleClasses = useTitleStyles(theme);
@@ -169,7 +172,7 @@ function SQFormDialogInner<Values extends FormikValues>({
       return;
     }
 
-    if (!formikContext.dirty) {
+    if (!formikContext.dirty || !throwAlertOnCancel) {
       onClose && onClose(event, reason);
     } else {
       openDialogAlert();

stories/__tests__/SQFormDialog.stories.test.tsx

@@ -283,3 +283,48 @@ describe('Tests for Tertiary Button', () => {
     ).toBeDisabled();
   });
 });
+
+describe('Tests for throwAlertOnCancel', () => {
+  it('should skip alerts if throwAlertOnCancel is set to false and form is currently dirty', async () => {
+    // render component with throwAlertOnCancel set to false
+    render(
+      <WithValidation
+        isOpen={true}
+        onSave={handleSave}
+        onClose={handleClose}
+        throwAlertOnCancel={false}
+      />
+    );
+
+    // dirty form by filling out text field
+    const textField = screen.getByLabelText(/hello/i);
+    userEvent.type(textField, mockData.hello);
+
+    // select cancel and see if onClose handler is called
+    const cancelButton = screen.getByRole('button', {name: /cancel/i});
+    userEvent.click(cancelButton);
+
+    await waitFor(() => {
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should not skip alerts if throwAlertOnCancel is set to true and form is currently dirty', async () => {
+    // render component with throwAlertOnCancel set to true (by default)
+    render(
+      <WithValidation isOpen={true} onSave={handleSave} onClose={handleClose} />
+    );
+
+    // dirty form by filling out text field
+    const textField = screen.getByLabelText(/hello/i);
+    userEvent.type(textField, mockData.hello);
+
+    // select cancel and see if onClose handler is called
+    const cancelButton = screen.getByRole('button', {name: /cancel/i});
+    userEvent.click(cancelButton);
+
+    await waitFor(() => {
+      expect(handleClose).toHaveBeenCalledTimes(0);
+    });
+  });
+});