From 90434a27a4525b9ce82cdb6aed3346e49720057b Mon Sep 17 00:00:00 2001
From: Mason Hu <mason.hu@canonical.com>
Date: Mon, 22 Apr 2024 10:44:26 +0200
Subject: [PATCH] feat: allow loading and disable state for confirm button in
 ConfirmationModal

Signed-off-by: Mason Hu <mason.hu@canonical.com>
---
 .../ConfirmationModal/ConfirmationModal.tsx     | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/ConfirmationModal/ConfirmationModal.tsx b/src/components/ConfirmationModal/ConfirmationModal.tsx
index 41edfe55e..f42cf9b91 100644
--- a/src/components/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { PropsWithSpread, ValueOf } from "types";
 import Button, { ButtonAppearance } from "components/Button";
 import Modal, { ModalProps } from "components/Modal";
+import ActionButton from "components/ActionButton";
 
 export type Props = PropsWithSpread<
   {
@@ -30,6 +31,14 @@ export type Props = PropsWithSpread<
      * Function to perform the action prompted by the modal.
      */
     onConfirm: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Is the confirm button loading.
+     */
+    confirmButtonLoading?: boolean;
+    /**
+     * Disable the confirm button.
+     */
+    confirmButtonDisabled?: boolean;
   },
   Omit<ModalProps, "buttonRow">
 >;
@@ -41,6 +50,8 @@ export const ConfirmationModal = ({
   confirmButtonLabel,
   confirmExtra,
   onConfirm,
+  confirmButtonLoading,
+  confirmButtonDisabled,
   ...props
 }: Props): ReactElement => {
   const handleClick =
@@ -65,13 +76,15 @@ export const ConfirmationModal = ({
           >
             {cancelButtonLabel}
           </Button>
-          <Button
+          <ActionButton
             appearance={confirmButtonAppearance}
             className="u-no-margin--bottom"
             onClick={handleClick(onConfirm)}
+            loading={confirmButtonLoading}
+            disabled={confirmButtonDisabled}
           >
             {confirmButtonLabel}
-          </Button>
+          </ActionButton>
         </>
       }
       {...props}