From 26e07bc2d856551505d40086e483563612b98f07 Mon Sep 17 00:00:00 2001
From: zomars <zomars@me.com>
Date: Thu, 15 Sep 2022 13:10:41 +0100
Subject: [PATCH] Fixed account deletion test

---
 apps/web/pages/v2/settings/my-account/profile.tsx | 10 +++++++++-
 packages/ui/v2/core/Button.tsx                    |  2 ++
 packages/ui/v2/core/Dialog.tsx                    | 11 ++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/web/pages/v2/settings/my-account/profile.tsx b/apps/web/pages/v2/settings/my-account/profile.tsx
index 3f5532703b..9e4556bc07 100644
--- a/apps/web/pages/v2/settings/my-account/profile.tsx
+++ b/apps/web/pages/v2/settings/my-account/profile.tsx
@@ -218,7 +218,11 @@ const ProfileView = () => {
         {/* Delete account Dialog */}
         <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
           <DialogTrigger asChild>
-            <Button color="destructive" className="mt-1 border-2" StartIcon={Icon.FiTrash2}>
+            <Button
+              color="destructive"
+              className="mt-1 border-2"
+              StartIcon={Icon.FiTrash2}
+              data-testid="delete-account">
               {t("delete_account")}
             </Button>
           </DialogTrigger>
@@ -227,6 +231,10 @@ const ProfileView = () => {
             description={t("confirm_delete_account_modal")}
             type="creation"
             actionText={t("delete_my_account")}
+            actionProps={{
+              // @ts-expect-error data attributes aren't typed
+              "data-testid": "delete-account-confirm",
+            }}
             Icon={Icon.FiAlertTriangle}
             actionOnClick={(e) => e && onConfirmButton(e)}>
             <>
diff --git a/packages/ui/v2/core/Button.tsx b/packages/ui/v2/core/Button.tsx
index 3f28cf44bc..03d1f867f7 100644
--- a/packages/ui/v2/core/Button.tsx
+++ b/packages/ui/v2/core/Button.tsx
@@ -65,6 +65,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     loading = false,
     color = "primary",
     size = "base",
+    type = "button",
     StartIcon,
     EndIcon,
     shallow,
@@ -82,6 +83,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     {
       ...passThroughProps,
       disabled,
+      type: !isLink ? type : undefined,
       ref: forwardedRef,
       className: classNames(
         // base styles independent what type of button it is
diff --git a/packages/ui/v2/core/Dialog.tsx b/packages/ui/v2/core/Dialog.tsx
index 4cda477eb3..2092913d53 100644
--- a/packages/ui/v2/core/Dialog.tsx
+++ b/packages/ui/v2/core/Dialog.tsx
@@ -73,10 +73,11 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
   useOwnActionButtons?: boolean;
   actionOnClick?: (e: Event | React.MouseEvent<HTMLElement, MouseEvent>) => void;
   actionOnClose?: () => void;
+  actionProps?: React.ComponentProps<typeof Button>;
 };
 
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, Icon, ...props }, forwardedRef) => (
+  ({ children, Icon, actionProps, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
       {/*zIndex one less than Toast */}
@@ -125,11 +126,15 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
                 </Button>
               </DialogClose>
               {props.actionOnClick ? (
-                <Button color="primary" disabled={props.actionDisabled} onClick={props.actionOnClick}>
+                <Button
+                  color="primary"
+                  disabled={props.actionDisabled}
+                  onClick={props.actionOnClick}
+                  {...actionProps}>
                   {props.actionText}
                 </Button>
               ) : (
-                <Button color="primary" type="submit" disabled={props.actionDisabled}>
+                <Button color="primary" type="submit" disabled={props.actionDisabled} {...actionProps}>
                   {props.actionText}
                 </Button>
               )}