From c2b4d04b5d2055ae4ad7f843b22fad9c2c2b2bf6 Mon Sep 17 00:00:00 2001
From: Mashal Malik <107556986+Mashal-m@users.noreply.github.com>
Date: Mon, 5 Jun 2023 23:47:53 +0500
Subject: [PATCH] Migrate off paragon modal deprecated component (#95)

* refactor: migrate off paragon modal deprecated component

* refactor: migrate off paragon modal deprecated component

* refactor: resource the close button string

* refactor: remove extra file

* refactor: add message in messages  file
---
 .../ViewEmailModal.jsx                        | 55 +++++++++++--------
 .../bulk-email-task-manager/messages.js       |  4 ++
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
index 8d6a512..dd3118e 100644
--- a/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal } from '@edx/paragon';
+import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';
@@ -12,10 +12,13 @@ function ViewEmailModal({
   const [, dispatch] = useContext(BulkEmailContext);
   return (
     <div>
-      <Modal
-        open={isOpen}
-        title=""
-        body={(
+      <ModalDialog
+        isOpen={isOpen}
+        onClose={() => setModalOpen(false)}
+        hasCloseButton
+      >
+        <ModalDialog.Body>
+
           <div>
             <div className="d-flex flex-row">
               <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
@@ -40,24 +43,30 @@ function ViewEmailModal({
               <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
             </div>
           </div>
-        )}
-        onClose={() => setModalOpen(false)}
-        buttons={[
-          <Button
-            onClick={() => {
-              dispatch(
-                copyToEditor({
-                  emailBody: messageContent.email.html_message,
-                  emailSubject: messageContent.subject,
-                }),
-              );
-              setModalOpen(false);
-            }}
-          >
-            <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
-          </Button>,
-        ]}
-      />
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="link">
+              <FormattedMessage id="bulk.email.tool.close.modalDialog.button" defaultMessage="Close" />
+            </ModalDialog.CloseButton>
+            <Button
+              onClick={() => {
+                dispatch(
+                  copyToEditor({
+                    emailBody: messageContent.email.html_message,
+                    emailSubject: messageContent.subject,
+                  }),
+                );
+                setModalOpen(false);
+              }}
+              variant="primary"
+            >
+              <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
+
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
     </div>
   );
 }
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/messages.js b/src/components/bulk-email-tool/bulk-email-task-manager/messages.js
index cedc47d..5ed6595 100644
--- a/src/components/bulk-email-tool/bulk-email-task-manager/messages.js
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/messages.js
@@ -34,6 +34,10 @@ const messages = defineMessages({
     id: 'bulk.email.content.history.table.modal.messageBody',
     defaultMessage: 'Message:',
   },
+  modalCloseButton: {
+    id: 'bulk.email.tool.close.modalDialog.button',
+    defaultMessage: 'Close',
+  },
   emailHistoryTableViewMessageInstructions: {
     id: 'bulk.email.content.history.table.viewMessageInstructions',
     defaultMessage: 'To read a sent email message, click the `View Message` button within the table.',