From e00a4c4d03d25b875b893122c1f2f7971f77f7d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chris=20Ch=C3=A1vez?= <xnpiochv@gmail.com>
Date: Fri, 11 Apr 2025 11:55:32 -0500
Subject: [PATCH] refactor: Build new action buttons for cancel confirmation
 modal (#1732)

Build new action buttons for cancel confirmation modal in basic block and advanced block editors.
---
 src/editors/AdvancedEditor.test.tsx           |  4 ++--
 .../components/CancelConfirmModal.tsx         | 15 ++++++++++++---
 .../containers/EditorContainer/index.test.tsx |  4 ++--
 .../containers/EditorContainer/messages.ts    | 13 +++++++++----
 .../SwitchToAdvancedEditorCard.test.jsx.snap  |  1 +
 .../__snapshots__/index.test.jsx.snap         |  6 ++++--
 .../sharedComponents/BaseModal/index.jsx      | 19 ++++++++++++++-----
 .../__snapshots__/index.test.jsx.snap         |  1 +
 .../__snapshots__/index.test.jsx.snap         |  1 +
 9 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/editors/AdvancedEditor.test.tsx b/src/editors/AdvancedEditor.test.tsx
index 635069f35..e4381d587 100644
--- a/src/editors/AdvancedEditor.test.tsx
+++ b/src/editors/AdvancedEditor.test.tsx
@@ -38,8 +38,8 @@ describe('AdvancedEditor', () => {
 
     // Expect open cancel confimation modal
     expect(await screen.findByText(/Are you sure you want to exit the editor/)).toBeInTheDocument();
-    // Click on "OK"
-    const confirmButton = await screen.findByRole('button', { name: 'OK' });
+    // Click on "Discard button"
+    const confirmButton = await screen.findByRole('button', { name: 'Discard Changes and Exit' });
     fireEvent.click(confirmButton);
     // Should call `onClose`
     expect(onCloseMock).toHaveBeenCalled();
diff --git a/src/editors/containers/EditorContainer/components/CancelConfirmModal.tsx b/src/editors/containers/EditorContainer/components/CancelConfirmModal.tsx
index a0860c0fc..7f7859adb 100644
--- a/src/editors/containers/EditorContainer/components/CancelConfirmModal.tsx
+++ b/src/editors/containers/EditorContainer/components/CancelConfirmModal.tsx
@@ -17,18 +17,27 @@ const CancelConfirmModal = ({
   const intl = useIntl();
   return (
     <BaseModal
-      size="md"
+      size="lg"
+      footerAction={(
+        <Button
+          variant="outline-brand"
+          onClick={() => onCloseEditor?.()}
+        >
+          <FormattedMessage {...messages.discardChangesButtonlabel} />
+        </Button>
+      )}
       confirmAction={(
         <Button
           variant="primary"
-          onClick={() => onCloseEditor?.()}
+          onClick={closeCancelConfirmModal}
         >
-          <FormattedMessage {...messages.okButtonLabel} />
+          <FormattedMessage {...messages.keepEditingButtonLabel} />
         </Button>
       )}
       isOpen={isOpen}
       close={closeCancelConfirmModal}
       title={intl.formatMessage(messages.cancelConfirmTitle)}
+      hideCancelButton
     >
       <FormattedMessage {...messages.cancelConfirmDescription} />
     </BaseModal>
diff --git a/src/editors/containers/EditorContainer/index.test.tsx b/src/editors/containers/EditorContainer/index.test.tsx
index f61730626..403f27f85 100644
--- a/src/editors/containers/EditorContainer/index.test.tsx
+++ b/src/editors/containers/EditorContainer/index.test.tsx
@@ -90,14 +90,14 @@ describe('EditorContainer', () => {
     expect(defaultPropsHtml.onClose).not.toHaveBeenCalled();
 
     // Should close modal if cancelled
-    const cancelBtn = await screen.findByRole('button', { name: 'Cancel' });
+    const cancelBtn = await screen.findByRole('button', { name: 'Keep Editing' });
     fireEvent.click(cancelBtn);
     expect(defaultPropsHtml.onClose).not.toHaveBeenCalled();
 
     // open modal again
     fireEvent.click(closeButton);
     // And can confirm the cancelation:
-    const confirmButton = await screen.findByRole('button', { name: 'OK' });
+    const confirmButton = await screen.findByRole('button', { name: 'Discard Changes and Exit' });
     fireEvent.click(confirmButton);
     expect(defaultPropsHtml.onClose).toHaveBeenCalled();
     window.dispatchEvent(mockEvent);
diff --git a/src/editors/containers/EditorContainer/messages.ts b/src/editors/containers/EditorContainer/messages.ts
index 55b4259ca..f9dc2fd15 100644
--- a/src/editors/containers/EditorContainer/messages.ts
+++ b/src/editors/containers/EditorContainer/messages.ts
@@ -17,10 +17,15 @@ const messages = defineMessages({
     defaultMessage: 'Exit the editor',
     description: 'Alt text for the Exit button',
   },
-  okButtonLabel: {
-    id: 'authoring.editorContainer.okButton.label',
-    defaultMessage: 'OK',
-    description: 'Label for OK button',
+  keepEditingButtonLabel: {
+    id: 'authoring.editorContainer.keepEditing.label',
+    defaultMessage: 'Keep Editing',
+    description: 'Label for keep editing button on the editor cancel confirmation',
+  },
+  discardChangesButtonlabel: {
+    id: 'authoring.editorContainer.discardChanges.label',
+    defaultMessage: 'Discard Changes and Exit',
+    description: 'Label for discard changes button on the editor cancel confirmation',
   },
   modalTitle: {
     id: 'authoring.editorContainer.accessibleTitle',
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
index 499684524..ee45799a9 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
@@ -23,6 +23,7 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar
     }
     footerAction={null}
     headerComponent={null}
+    hideCancelButton={false}
     isFullscreenScroll={true}
     isOpen={false}
     size="md"
diff --git a/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
index aee7fdf3e..f76ae5cea 100644
--- a/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
+++ b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
@@ -32,8 +32,10 @@ exports[`BaseModal ImageUploadModal template component snapshot 1`] = `
   </Scrollable>
   <ModalDialog.Footer>
     <ActionRow>
-      props.footerAction node
-      <ActionRow.Spacer />
+      <Fragment>
+        props.footerAction node
+        <ActionRow.Spacer />
+      </Fragment>
       <ModalDialog.CloseButton
         onClick={[MockFunction props.close]}
         variant="tertiary"
diff --git a/src/editors/sharedComponents/BaseModal/index.jsx b/src/editors/sharedComponents/BaseModal/index.jsx
index 74639dd54..455e604a9 100644
--- a/src/editors/sharedComponents/BaseModal/index.jsx
+++ b/src/editors/sharedComponents/BaseModal/index.jsx
@@ -22,6 +22,7 @@ const BaseModal = ({
   isFullscreenScroll,
   bodyStyle,
   className,
+  hideCancelButton,
 }) => (
   <ModalDialog
     isOpen={isOpen}
@@ -47,11 +48,17 @@ const BaseModal = ({
     </Scrollable>
     <ModalDialog.Footer>
       <ActionRow>
-        {footerAction}
-        <ActionRow.Spacer />
-        <ModalDialog.CloseButton variant="tertiary" onClick={close}>
-          <FormattedMessage {...messages.cancelButtonLabel} />
-        </ModalDialog.CloseButton>
+        {footerAction && (
+          <>
+            {footerAction}
+            <ActionRow.Spacer />
+          </>
+        )}
+        {!hideCancelButton && (
+          <ModalDialog.CloseButton variant="tertiary" onClick={close}>
+            <FormattedMessage {...messages.cancelButtonLabel} />
+          </ModalDialog.CloseButton>
+        )}
         {confirmAction}
       </ActionRow>
     </ModalDialog.Footer>
@@ -65,6 +72,7 @@ BaseModal.defaultProps = {
   isFullscreenScroll: true,
   bodyStyle: null,
   className: undefined,
+  hideCancelButton: false,
 };
 
 BaseModal.propTypes = {
@@ -79,6 +87,7 @@ BaseModal.propTypes = {
   isFullscreenScroll: PropTypes.bool,
   bodyStyle: PropTypes.shape({}),
   className: PropTypes.string,
+  hideCancelButton: PropTypes.bool,
 };
 
 export default BaseModal;
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap
index d590d01b4..edc1be5cd 100644
--- a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap
@@ -37,6 +37,7 @@ exports[`ImageSettingsModal render snapshot 1`] = `
   }
   footerAction={null}
   headerComponent={null}
+  hideCancelButton={false}
   isFullscreenScroll={true}
   isOpen={false}
   size="lg"
diff --git a/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap
index e0b26f6fe..94cfe0449 100644
--- a/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap
+++ b/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap
@@ -30,6 +30,7 @@ exports[`SourceCodeModal renders as expected with default behavior 1`] = `
   }
   footerAction={null}
   headerComponent={null}
+  hideCancelButton={false}
   isFullscreenScroll={true}
   isOpen={false}
   size="xl"