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.

Author: ChrisChV

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();

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>

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);

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',

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"

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"

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;

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"

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"