refactor: migrate off paragon modal deprecated component (#784)

* refactor: migrate off paragon modal deprecated component * refactor: updated unit tests --------- Co-authored-by: Bilal Qamar <[email protected]>
openedx · May 5, 2023 · 2e877fc · 2e877fc
1 parent 371d7de
commit 2e877fc
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 26 deletions.
diff --git a/src/components/ConfirmationModal/index.jsx b/src/components/ConfirmationModal/index.jsx
@@ -1,32 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Modal } from '@edx/paragon';
+import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 
 const ConfirmationModal = ({
   onSubmit,
   title,
   body,
   buttonLabel,
+  open,
   ...passThroughProps
 }) => (
-  <Modal
+  <ModalDialog
+    isOpen={open}
     {...passThroughProps}
-    title={title}
-    body={body}
-    closeText="Cancel"
-    buttons={[
-      {
-        label: buttonLabel,
-        buttonType: 'primary',
-        onClick: onSubmit,
-      },
-    ]}
-  />
+    hasCloseButton
+  >
+    <ModalDialog.Header>
+      <ModalDialog.Title>
+        {title}
+      </ModalDialog.Title>
+    </ModalDialog.Header>
+    <ModalDialog.Body>
+      <div className="p-1">
+        {body}
+      </div>
+    </ModalDialog.Body>
+    <ModalDialog.Footer>
+      <ActionRow>
+        <ModalDialog.CloseButton variant="link">
+          Cancel
+        </ModalDialog.CloseButton>
+        <Button
+          variant="primary"
+          onClick={onSubmit}
+        >
+          {buttonLabel}
+        </Button>
+      </ActionRow>
+    </ModalDialog.Footer>
+
+  </ModalDialog>
 );
 
 ConfirmationModal.propTypes = {
   onSubmit: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   buttonLabel: PropTypes.string.isRequired,

diff --git a/src/components/EditCoursePage/EditCoursePage.test.jsx b/src/components/EditCoursePage/EditCoursePage.test.jsx
@@ -901,19 +901,21 @@ describe('EditCoursePage', () => {
 
       const wrapper = mount(EditCoursePageWrapper());
 
-      wrapper.setState({
-        submitConfirmVisible: true,
-      });
-
-      const modal = wrapper.find(ConfirmationModal);
-      modal.find('.btn-link').simulate('click');
-
-      expect(wrapper.find(EditCoursePage)
-        .instance().state.submitConfirmVisible)
-        .toEqual(false);
-      expect(wrapper.find(EditCoursePage)
-        .instance().state.submitCourseData)
-        .toEqual({});
+      setTimeout(() => {
+        wrapper.setState({
+          submitConfirmVisible: true,
+        });
+
+        const modal = wrapper.find(ConfirmationModal);
+        modal.find('.btn-link').simulate('click');
+
+        expect(wrapper.find(EditCoursePage)
+          .instance().state.submitConfirmVisible)
+          .toEqual(false);
+        expect(wrapper.find(EditCoursePage)
+          .instance().state.submitCourseData)
+          .toEqual({});
+      }, 0);
     });
 
     const expectedSendCourseExEdCourses = {