feat: allow plugin.modal to open a fullscreen modal

openedx · Dec 1, 2023 · ff7e700 · ff7e700
1 parent bce25c4
commit ff7e700
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 20 deletions.
diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { StrictDict } from '@edx/react-unit-test-utils';
-import { Modal } from '@edx/paragon';
+import { ModalDialog, Modal } from '@edx/paragon';
 
 import PageLoading from '../../../../generic/PageLoading';
 import * as hooks from './hooks';
@@ -64,6 +64,21 @@ const ContentIFrame = ({
     onLoad: handleIFrameLoad,
   };
 
+  let modalContent;
+  if (modalOptions.isOpen) {
+    modalContent = modalOptions.body
+      ? <div className="unit-modal">{ modalOptions.body }</div>
+      : (
+        <iframe
+          title={modalOptions.title}
+          allow={IFRAME_FEATURE_POLICY}
+          frameBorder="0"
+          src={modalOptions.url}
+          style={{ width: '100%', height: modalOptions.height }}
+        />
+      );
+  }
+
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
@@ -74,23 +89,28 @@ const ContentIFrame = ({
           <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
         </div>
       )}
-      {modalOptions.isOpen && (
-        <Modal
-          body={modalOptions.body
-            ? <div className="unit-modal">{ modalOptions.body }</div>
-            : (
-              <iframe
-                title={modalOptions.title}
-                allow={IFRAME_FEATURE_POLICY}
-                frameBorder="0"
-                src={modalOptions.url}
-                style={{ width: '100%', height: modalOptions.height }}
-              />
-            )}
-          dialogClassName="modal-lti"
-          onClose={handleModalClose}
-          open
-        />
+      {modalOptions.isOpen && (modalOptions.isFullscreen
+        ? (
+          <ModalDialog
+            dialogClassName="modal-lti"
+            onClose={handleModalClose}
+            size="fullscreen"
+            isOpen
+            hasCloseButton={false}
+          >
+            <ModalDialog.Body className={modalOptions.modalBodyClassName}>
+              {modalContent}
+            </ModalDialog.Body>
+          </ModalDialog>
+
+        ) : (
+          <Modal
+            body={modalContent}
+            dialogClassName="modal-lti"
+            onClose={handleModalClose}
+            open
+          />
+        )
       )}
     </>
   );

diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.test.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
+import { ModalDialog, Modal } from '@edx/paragon';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import PageLoading from '../../../../generic/PageLoading';
@@ -11,7 +11,13 @@ import ContentIFrame, { IFRAME_FEATURE_POLICY, testIDs } from './ContentIFrame';
 
 jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: 'ErrorPage' }));
 
-jest.mock('@edx/paragon', () => ({ Modal: 'Modal' }));
+jest.mock('@edx/paragon', () => jest.requireActual('@edx/react-unit-test-utils')
+  .mockComponents({
+    Modal: 'Modal',
+    ModalDialog: {
+      Body: 'ModalDialog.Body',
+    },
+  }));
 
 jest.mock('../../../../generic/PageLoading', () => 'PageLoading');
 
@@ -140,6 +146,49 @@ describe('ContentIFrame Component', () => {
           expect(component.props.onClose).toEqual(modalIFrameData.handleModalClose);
         });
       };
+      describe('fullscreen modal', () => {
+        describe('body modal', () => {
+          beforeEach(() => {
+            hooks.useModalIFrameData.mockReturnValueOnce({
+              ...modalIFrameData,
+              modalOptions: { ...modalOptions.withBody, isFullscreen: true },
+            });
+            el = shallow(<ContentIFrame {...props} />);
+            [component] = el.instance.findByType(ModalDialog);
+          });
+          it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
+            const content = component.findByType(ModalDialog.Body)[0].children[0];
+            expect(content.matches(shallow(
+              <div className="unit-modal">{modalOptions.withBody.body}</div>,
+            ))).toEqual(true);
+          });
+          testModalOpenAndHandleClose();
+        });
+        describe('url modal', () => {
+          beforeEach(() => {
+            hooks.useModalIFrameData
+              .mockReturnValueOnce({
+                ...modalIFrameData,
+                modalOptions: { ...modalOptions.withUrl, isFullscreen: true },
+              });
+            el = shallow(<ContentIFrame {...props} />);
+            [component] = el.instance.findByType(ModalDialog);
+          });
+          testModalOpenAndHandleClose();
+          it('displays Modal with iframe to provided url if modal.body is not provided', () => {
+            const content = component.findByType(ModalDialog.Body)[0].children[0];
+            expect(content.matches(shallow(
+              <iframe
+                title={modalOptions.withUrl.title}
+                allow={IFRAME_FEATURE_POLICY}
+                frameBorder="0"
+                src={modalOptions.withUrl.url}
+                style={{ width: '100%', height: modalOptions.withUrl.height }}
+              />,
+            ))).toEqual(true);
+          });
+        });
+      });
       describe('body modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });