From 71c9b4b06fc1ec2040df595bc7c3a18aa30171e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Neves?= <fabio.neves@clickhouse.com>
Date: Mon, 13 Nov 2023 15:02:13 +0100
Subject: [PATCH] fixing api

---
 src/App.tsx                                   |  2 +-
 .../ConfirmationDialog.stories.tsx            |  8 ++++----
 .../ConfirmationDialog.test.tsx               | 16 ++++++++--------
 .../ConfirmationDialog/ConfirmationDialog.tsx | 19 +++++++++----------
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f2b6b275..7e22dd99 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -435,7 +435,7 @@ const App = () => {
         <ConfirmationDialog
           title="Confirmation Dialog Example"
           message="This is a simple dialog that will be reused across the application"
-          onPrimaryActionClick={() => {
+          onConfirm={() => {
             console.log("close");
           }}
         >
diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx b/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx
index a84e0846..7aaf65e3 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -9,18 +9,18 @@ const ConfirmationDialogComponent = ({
   title,
   message,
   primaryActionLabel,
-  onPrimaryActionClick,
+  onConfirm,
   secondaryActionLabel,
-  onOpenChange,
+  onCancel,
 }: ConfirmationDialogProps) => (
   <GridCenter>
     <ConfirmationDialog
       open={open}
       title={title}
       message={message}
-      onOpenChange={onOpenChange}
+      onCancel={onCancel}
       primaryActionLabel={primaryActionLabel}
-      onPrimaryActionClick={onPrimaryActionClick}
+      onConfirm={onConfirm}
       secondaryActionLabel={secondaryActionLabel}
     >
     </ConfirmationDialog>
diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx b/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
index 11d25bbe..180ed062 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
@@ -10,10 +10,10 @@ describe("Dialog Component", () => {
     {
       title = "Dialog Title",
       message = "Are you sure you want to proceed?",
-      onPrimaryActionClick = () => {
+      onConfirm = () => {
         void undefined;
       },
-      onOpenChange,
+      onCancel,
       open,
       primaryActionLabel = "Confirm",
       secondaryActionLabel = "Cancel",
@@ -24,10 +24,10 @@ describe("Dialog Component", () => {
       <ConfirmationDialog
         title={title}
         message={message}
-        onPrimaryActionClick={onPrimaryActionClick}
+        onConfirm={onConfirm}
         primaryActionLabel={primaryActionLabel}
         secondaryActionLabel={secondaryActionLabel}
-        onOpenChange={onOpenChange}
+        onCancel={onCancel}
         open={open}
         children={children}
       />
@@ -70,7 +70,7 @@ describe("Dialog Component", () => {
       title,
       primaryActionLabel,
       open,
-      onOpenChange: (b: boolean) => open = b
+      onCancel: () => open = false
     });
 
     expect(queryAllByText(title).length).toEqual(1);
@@ -83,12 +83,12 @@ describe("Dialog Component", () => {
     let counter = 0;
     const title = "Dialog Title";
     const primaryActionLabel = "PrimaryAction";
-    const onPrimaryActionClick = () => counter++;
+    const onConfirm = () => counter++;
 
     const { getByText } = renderDialog({
       title,
       primaryActionLabel,
-      onPrimaryActionClick,
+      onConfirm,
       open: true,
     });
 
@@ -113,7 +113,7 @@ describe("Dialog Component", () => {
       title,
       secondaryActionLabel,
       open,
-      onOpenChange: (b: boolean) => open = b
+      onCancel: () => open = false
     });
 
     expect(queryAllByText(title).length).toEqual(1);
diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/src/components/ConfirmationDialog/ConfirmationDialog.tsx
index abdd1089..4246faee 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.tsx
@@ -6,7 +6,7 @@ type DialogPrimaryAction = "primary" | "danger";
 
 export interface ConfirmationDialogProps {
   open?: boolean;
-  onOpenChange?: (b: boolean) => void;
+  onCancel?: () => void;
   title: string;
   primaryActionType?: DialogPrimaryAction;
   primaryActionLabel?: string;
@@ -14,7 +14,7 @@ export interface ConfirmationDialogProps {
   message?: string;
   children?: ReactNode;
   loading?: boolean;
-  onPrimaryActionClick?: (() => void) | (() => Promise<void>);
+  onConfirm?: (() => void) | (() => Promise<void>);
 }
 
 const ActionsWrapper = styled.div`
@@ -25,14 +25,14 @@ const ActionsWrapper = styled.div`
 
 export const ConfirmationDialog = ({
   open,
-  onOpenChange,
+  onCancel,
   title,
   message,
   loading,
   primaryActionType = "primary",
   primaryActionLabel = "Confirm",
   secondaryActionLabel = "Cancel",
-  onPrimaryActionClick,
+  onConfirm,
   children,
 }: ConfirmationDialogProps): ReactElement => {
   if (children && message) {
@@ -44,7 +44,9 @@ export const ConfirmationDialog = ({
   return (
     <Dialog
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={(open: boolean) => {
+        !open && onCancel && onCancel();
+      }}
     >
       <Dialog.Content title={title}>
         {children ? children : <Text>{message}</Text>}
@@ -57,11 +59,8 @@ export const ConfirmationDialog = ({
             type={primaryActionType}
             label={primaryActionLabel}
             onClick={() => {
-              if (onPrimaryActionClick) {
-                onPrimaryActionClick();
-              }
-              if (onOpenChange) {
-                onOpenChange(false);
+              if (onConfirm) {
+                onConfirm();
               }
             }}
           />