From d02024c5045368d615b1c535436154b9d6062a08 Mon Sep 17 00:00:00 2001
From: mashal-m <mashal.malik@arbisoft.com>
Date: Tue, 11 Oct 2022 16:43:52 +0500
Subject: [PATCH 1/3] refactor: migrate off paragon modal deprecated component

---
 .../author-library/LibraryAuthoringPage.jsx   |  62 +++---
 .../library-access/UserAccessWidget.jsx       | 201 ++++++++++--------
 2 files changed, 148 insertions(+), 115 deletions(-)

diff --git a/src/library-authoring/author-library/LibraryAuthoringPage.jsx b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
index 458c366f..982b4455 100644
--- a/src/library-authoring/author-library/LibraryAuthoringPage.jsx
+++ b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
@@ -7,11 +7,12 @@ import {
   Button,
   Card,
   Navbar,
-  Modal,
   Dropdown,
   SearchField,
   Form,
   Pagination,
+  ModalDialog,
+  ActionRow,
 } from '@edx/paragon';
 import { v4 as uuid4 } from 'uuid';
 import { faPlus, faSync } from '@fortawesome/free-solid-svg-icons';
@@ -79,7 +80,7 @@ export const BlockPreviewBase = ({
     <Navbar className="border">
       <Navbar.Brand>{block.display_name}</Navbar.Brand>
       <Navbar.Collapse className="justify-content-end">
-        { library.allow_lti && (
+        {library.allow_lti && (
           <>
             <Button disabled={isLtiUrlGenerating} size="lg" className="mr-1" onClick={() => { props.fetchBlockLtiUrl({ blockId: block.id }); }}>
               <FontAwesomeIcon icon={faClipboard} className="pr-1" />
@@ -103,25 +104,34 @@ export const BlockPreviewBase = ({
         </Button>
       </Navbar.Collapse>
     </Navbar>
-    <Modal
-      open={showDeleteModal}
-      title={intl.formatMessage(messages['library.detail.block.delete.modal.title'])}
+    <ModalDialog
+      isOpen={showDeleteModal}
       onClose={() => setShowDeleteModal(false)}
-      body={(
+    >
+
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {intl.formatMessage(messages['library.detail.block.delete.modal.title'])}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
         <div>
           <p>
             {intl.formatMessage(messages['library.detail.block.delete.modal.body'])}
           </p>
         </div>
-      )}
-      buttons={[
-        <Button
-          onClick={() => props.deleteLibraryBlock({ blockId: block.id })}
-        >
-          {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
-        </Button>,
-      ]}
-    />
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="link">
+            Close
+          </ModalDialog.CloseButton>
+          <Button onClick={() => props.deleteLibraryBlock({ blockId: block.id })} variant="primary">
+            {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
     {showPreviews && (
       <Card>
         <Card.Body>
@@ -274,7 +284,7 @@ const ButtonTogglesBase = ({
     </Button>
     <Button variant="primary" className="ml-1" onClick={() => setShowPreviews(!showPreviews)} size="lg">
       <FontAwesomeIcon icon={faSync} className="pr-1" />
-      { intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews']) }
+      {intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews'])}
     </Button>
   </>
 );
@@ -425,16 +435,16 @@ export const LibraryAuthoringPageBase = ({
                 : null}
               <Col xs={12} className="text-center py-3 add-buttons-container">
                 {library.type !== LIBRARY_TYPES.COMPLEX && (
-                <Button
-                  variant="success"
-                  size="lg"
-                  disabled={sending}
-                  onClick={() => addBlock(library.type)}
-                  className="cta-button"
-                >
-                  <FontAwesomeIcon icon={faPlus} className="pr-1" />
-                  {intl.formatMessage(messages[`library.detail.add_${library.type}`])}
-                </Button>
+                  <Button
+                    variant="success"
+                    size="lg"
+                    disabled={sending}
+                    onClick={() => addBlock(library.type)}
+                    className="cta-button"
+                  >
+                    <FontAwesomeIcon icon={faPlus} className="pr-1" />
+                    {intl.formatMessage(messages[`library.detail.add_${library.type}`])}
+                  </Button>
                 )}
                 {library.type === LIBRARY_TYPES.COMPLEX && (
                   <Row>
diff --git a/src/library-authoring/library-access/UserAccessWidget.jsx b/src/library-authoring/library-access/UserAccessWidget.jsx
index c391e40e..5b80d136 100644
--- a/src/library-authoring/library-access/UserAccessWidget.jsx
+++ b/src/library-authoring/library-access/UserAccessWidget.jsx
@@ -2,8 +2,9 @@
 Component for displaying and modifying a user's access level for a library.
  */
 import {
+  ActionRow,
   Badge,
-  Button, Card, Col, Modal, Row,
+  Button, Card, Col, ModalDialog, Row,
 } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
@@ -40,99 +41,121 @@ export const UserAccessWidget = ({
             </span>
           </Col>
           {isAdmin && (
-          <Col xs={12} md={6}>
-            <Row>
-              {(user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked && (
-              <Col xs={12} className="text-center text-md-right">
-                <small>{intl.formatMessage(messages['library.access.info.admin_unlock'])}</small>
-              </Col>
-              )}
-              {user.access_level === LIBRARY_ACCESS.ADMIN && multipleAdmins && (
-              <Col xs={10} className="text-left text-md-right">
-                <Button size="lg" variant="secondary" onClick={() => setShowDeprivModal(true)}>
-                  {intl.formatMessage(messages['library.access.remove_admin'])}
-                </Button>
-                <Modal
-                  open={showDeprivModal}
-                  title={intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
-                  onClose={() => setShowDeprivModal(false)}
-                  body={(
-                    <div>
-                      <p>
-                        {intl.formatMessage(
-                          messages['library.access.modal.remove_admin.body'],
-                          { library: library.title, email: user.email },
-                        )}
-                      </p>
-                    </div>
-                  )}
-                  buttons={[
-                    <Button
-                      onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR).then(setShowDeprivModal(false))}
+            <Col xs={12} md={6}>
+              <Row>
+                {(user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked && (
+                  <Col xs={12} className="text-center text-md-right">
+                    <small>{intl.formatMessage(messages['library.access.info.admin_unlock'])}</small>
+                  </Col>
+                )}
+                {user.access_level === LIBRARY_ACCESS.ADMIN && multipleAdmins && (
+                  <Col xs={10} className="text-left text-md-right">
+                    <Button size="lg" variant="secondary" onClick={() => setShowDeprivModal(true)}>
+                      {intl.formatMessage(messages['library.access.remove_admin'])}
+                    </Button>
+                    <ModalDialog
+                      isOpen={showDeprivModal}
+                      onClose={() => setShowDeprivModal(false)}
                     >
-                      {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
-                    </Button>,
-                  ]}
-                />
-              </Col>
-              )}
-              {user.access_level === LIBRARY_ACCESS.READ && (
-              <Col xs={10} className="text-left text-md-right">
-                <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR)}>
-                  {intl.formatMessage(messages['library.access.add_author'])}
-                </Button>
-              </Col>
-              )}
-              {user.access_level === LIBRARY_ACCESS.AUTHOR && (
-                <>
-                  <Col xs={5} className="text-left text-md-right pl-md-1">
-                    <Button size="lg" variant="secondary" onClick={() => setAccessLevel(LIBRARY_ACCESS.READ)}>
-                      {intl.formatMessage(messages['library.access.remove_author'])}
+
+                      <ModalDialog.Header>
+                        <ModalDialog.Title>
+                          {intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
+                        </ModalDialog.Title>
+                      </ModalDialog.Header>
+                      <ModalDialog.Body>
+                        <div>
+                          <p>
+                            {intl.formatMessage(
+                              messages['library.access.modal.remove_admin.body'],
+                              { library: library.title, email: user.email },
+                            )}
+                          </p>
+                        </div>
+                      </ModalDialog.Body>
+                      <ModalDialog.Footer>
+                        <ActionRow>
+                          <ModalDialog.CloseButton variant="link">
+                            Close
+                          </ModalDialog.CloseButton>
+                          <Button
+                            onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR).then(setShowDeprivModal(false))}
+                          >
+                            {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
+                          </Button>,
+                        </ActionRow>
+                      </ModalDialog.Footer>
+                    </ModalDialog>
+                  </Col>
+                )}
+                {user.access_level === LIBRARY_ACCESS.READ && (
+                  <Col xs={10} className="text-left text-md-right">
+                    <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR)}>
+                      {intl.formatMessage(messages['library.access.add_author'])}
                     </Button>
                   </Col>
-                  <Col xs={5} className="text-left text-md-right pl-md-1">
-                    <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.ADMIN)}>
-                      {intl.formatMessage(messages['library.access.add_admin'])}
+                )}
+                {user.access_level === LIBRARY_ACCESS.AUTHOR && (
+                  <>
+                    <Col xs={5} className="text-left text-md-right pl-md-1">
+                      <Button size="lg" variant="secondary" onClick={() => setAccessLevel(LIBRARY_ACCESS.READ)}>
+                        {intl.formatMessage(messages['library.access.remove_author'])}
+                      </Button>
+                    </Col>
+                    <Col xs={5} className="text-left text-md-right pl-md-1">
+                      <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.ADMIN)}>
+                        {intl.formatMessage(messages['library.access.add_admin'])}
+                      </Button>
+                    </Col>
+                  </>
+                )}
+                {(!((user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked)) && (
+                  <Col xs={2} className="text-right text-md-center">
+                    <Button
+                      size="lg"
+                      variant="danger"
+                      onClick={() => setShowRemoveModal(true)}
+                      aria-label={
+                        intl.formatMessage(messages['library.access.remove_user'])
+                      }
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
                     </Button>
+                    <ModalDialog
+                      isOpen={showRemoveModal}
+                      onClose={() => setShowRemoveModal(false)}
+                    >
+
+                      <ModalDialog.Header>
+                        <ModalDialog.Title>
+                          {intl.formatMessage(messages['library.access.modal.remove.title'])}
+                        </ModalDialog.Title>
+                      </ModalDialog.Header>
+                      <ModalDialog.Body>
+                        <div>
+                          <p>
+                            {intl.formatMessage(
+                              messages['library.access.modal.remove.body'],
+                              { library: library.title, email: user.email },
+                            )}
+                          </p>
+                        </div>
+                      </ModalDialog.Body>
+                      <ModalDialog.Footer>
+                        <ActionRow>
+                          <ModalDialog.CloseButton variant="link">
+                            Close
+                          </ModalDialog.CloseButton>
+                          <Button onClick={() => removeAccess()}>
+                            {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
+                          </Button>,
+                        </ActionRow>
+                      </ModalDialog.Footer>
+                    </ModalDialog>
                   </Col>
-                </>
-              )}
-              {(!((user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked)) && (
-              <Col xs={2} className="text-right text-md-center">
-                <Button
-                  size="lg"
-                  variant="danger"
-                  onClick={() => setShowRemoveModal(true)}
-                  aria-label={
-                    intl.formatMessage(messages['library.access.remove_user'])
-                  }
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </Button>
-                <Modal
-                  open={showRemoveModal}
-                  title={intl.formatMessage(messages['library.access.modal.remove.title'])}
-                  onClose={() => setShowRemoveModal(false)}
-                  body={(
-                    <div>
-                      <p>
-                        {intl.formatMessage(
-                          messages['library.access.modal.remove.body'],
-                          { library: library.title, email: user.email },
-                        )}
-                      </p>
-                    </div>
-                    )}
-                  buttons={[
-                    <Button onClick={() => removeAccess()}>
-                      {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
-                    </Button>,
-                  ]}
-                />
-              </Col>
-              )}
-            </Row>
-          </Col>
+                )}
+              </Row>
+            </Col>
           )}
         </Row>
       </Card.Body>

From f07907a229c5a53d005fd4f63f5af2a61305a9ea Mon Sep 17 00:00:00 2001
From: mashal-m <mashal.malik@arbisoft.com>
Date: Tue, 18 Oct 2022 11:09:40 +0500
Subject: [PATCH 2/3] refactor: remooved div and p tag

---
 .../author-library/LibraryAuthoringPage.jsx   |  6 +----
 .../library-access/UserAccessWidget.jsx       | 24 +++++++------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/library-authoring/author-library/LibraryAuthoringPage.jsx b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
index 982b4455..006d3ed3 100644
--- a/src/library-authoring/author-library/LibraryAuthoringPage.jsx
+++ b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
@@ -115,11 +115,7 @@ export const BlockPreviewBase = ({
         </ModalDialog.Title>
       </ModalDialog.Header>
       <ModalDialog.Body>
-        <div>
-          <p>
-            {intl.formatMessage(messages['library.detail.block.delete.modal.body'])}
-          </p>
-        </div>
+        {intl.formatMessage(messages['library.detail.block.delete.modal.body'])}
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <ActionRow>
diff --git a/src/library-authoring/library-access/UserAccessWidget.jsx b/src/library-authoring/library-access/UserAccessWidget.jsx
index 5b80d136..8e961cab 100644
--- a/src/library-authoring/library-access/UserAccessWidget.jsx
+++ b/src/library-authoring/library-access/UserAccessWidget.jsx
@@ -64,14 +64,10 @@ export const UserAccessWidget = ({
                         </ModalDialog.Title>
                       </ModalDialog.Header>
                       <ModalDialog.Body>
-                        <div>
-                          <p>
-                            {intl.formatMessage(
-                              messages['library.access.modal.remove_admin.body'],
-                              { library: library.title, email: user.email },
-                            )}
-                          </p>
-                        </div>
+                        {intl.formatMessage(
+                          messages['library.access.modal.remove_admin.body'],
+                          { library: library.title, email: user.email },
+                        )}
                       </ModalDialog.Body>
                       <ModalDialog.Footer>
                         <ActionRow>
@@ -132,14 +128,10 @@ export const UserAccessWidget = ({
                         </ModalDialog.Title>
                       </ModalDialog.Header>
                       <ModalDialog.Body>
-                        <div>
-                          <p>
-                            {intl.formatMessage(
-                              messages['library.access.modal.remove.body'],
-                              { library: library.title, email: user.email },
-                            )}
-                          </p>
-                        </div>
+                        {intl.formatMessage(
+                          messages['library.access.modal.remove.body'],
+                          { library: library.title, email: user.email },
+                        )}
                       </ModalDialog.Body>
                       <ModalDialog.Footer>
                         <ActionRow>

From d0a1891ae4c485369b3ee9413d56c2b356cf9570 Mon Sep 17 00:00:00 2001
From: mashal-m <mashal.malik@arbisoft.com>
Date: Tue, 18 Oct 2022 11:36:06 +0500
Subject: [PATCH 3/3] refactor: removed div and p tag

---
 src/library-authoring/author-library/LibraryAuthoringPage.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/library-authoring/author-library/LibraryAuthoringPage.jsx b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
index 006d3ed3..50cbbe6e 100644
--- a/src/library-authoring/author-library/LibraryAuthoringPage.jsx
+++ b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
@@ -108,7 +108,6 @@ export const BlockPreviewBase = ({
       isOpen={showDeleteModal}
       onClose={() => setShowDeleteModal(false)}
     >
-
       <ModalDialog.Header>
         <ModalDialog.Title>
           {intl.formatMessage(messages['library.detail.block.delete.modal.title'])}