fix(cancel-operation-btn) replace ambiguous modal button labels

canonical · Jun 15, 2023 · 5c4dbc4 · 5c4dbc4
1 parent 625ec11
commit 5c4dbc4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/components/ConfirmationButton.tsx b/src/components/ConfirmationButton.tsx
@@ -6,6 +6,7 @@ import classnames from "classnames";
 import { ButtonAppearance } from "@canonical/react-components/dist/components/Button/Button";
 
 interface Props {
+  cancelButtonLabel?: string;
   className?: string;
   confirmButtonAppearance?: ValueOf<typeof ButtonAppearance> | string;
   confirmButtonLabel: string;
@@ -25,6 +26,7 @@ interface Props {
 }
 
 const ConfirmationButton: FC<Props> = ({
+  cancelButtonLabel,
   className,
   confirmButtonAppearance,
   confirmButtonLabel,
@@ -73,6 +75,7 @@ const ConfirmationButton: FC<Props> = ({
           <ConfirmationModal
             title={title}
             onClose={handleCancelModal}
+            cancelButtonLabel={cancelButtonLabel}
             confirmExtra={confirmExtra}
             confirmMessage={confirmMessage}
             confirmButtonLabel={confirmButtonLabel}

diff --git a/src/components/ConfirmationModal.tsx b/src/components/ConfirmationModal.tsx
@@ -3,6 +3,7 @@ import { Button, Modal, ValueOf } from "@canonical/react-components";
 import { ButtonAppearance } from "@canonical/react-components/dist/components/Button/Button";
 
 interface Props {
+  cancelButtonLabel?: string;
   confirmButtonAppearance?: ValueOf<typeof ButtonAppearance> | string;
   confirmButtonLabel: string;
   confirmExtra?: ReactNode;
@@ -14,6 +15,7 @@ interface Props {
 }
 
 const ConfirmationModal: FC<Props> = ({
+  cancelButtonLabel,
   confirmButtonAppearance = "negative",
   confirmButtonLabel,
   confirmExtra,
@@ -31,7 +33,7 @@ const ConfirmationModal: FC<Props> = ({
         <>
           {confirmExtra}
           <Button className="u-no-margin--bottom" onClick={onClose}>
-            Cancel
+            {cancelButtonLabel ?? "Cancel"}
           </Button>
           <Button
             appearance={confirmButtonAppearance}

diff --git a/src/pages/operations/actions/CancelOperationBtn.tsx b/src/pages/operations/actions/CancelOperationBtn.tsx
@@ -35,8 +35,9 @@ const CancelOperationBtn: FC<Props> = ({ operation }) => {
       toggleAppearance=""
       isLoading={isLoading}
       title="Confirm cancel"
+      cancelButtonLabel="No"
       confirmMessage="Are you sure you want to cancel the operation?"
-      confirmButtonLabel="Cancel"
+      confirmButtonLabel="Yes, cancel operation"
       toggleCaption="Cancel"
       onConfirm={handleCancel}
       isDisabled={!operation.may_cancel}