Allow units to create a modal in the parent window (#184)

This is used by LTI blocks configured to launch in a modal window. Instead of opening a modal in our unit iframe, the component will send a message to the parent window (the courseware mfe) requesting it to open its own modal, containing a URL to launch the LTI tool.

src/courseware/course/sequence/Unit.jsx

@@ -9,6 +9,7 @@ import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Modal } from '@edx/paragon';
 import messages from './messages';
 import BookmarkButton from '../bookmark/BookmarkButton';
 import { useModel } from '../../../generic/model-store';
@@ -64,6 +65,7 @@ function Unit({
 
   const [iframeHeight, setIframeHeight] = useState(0);
   const [hasLoaded, setHasLoaded] = useState(false);
+  const [modalOptions, setModalOptions] = useState({ open: false });
 
   const unit = useModel('units', id);
   const course = useModel('courses', courseId);
@@ -89,6 +91,9 @@ function Unit({
             onLoaded();
           }
         }
+      } else if (type === 'plugin.modal') {
+        payload.open = true;
+        setModalOptions(payload);
       }
     }
     // If we currently have an event listener, remove it.
@@ -130,6 +135,27 @@ function Unit({
           srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
         />
       )}
+      {modalOptions.open && (
+        <Modal
+          body={(
+            <>
+              {modalOptions.body
+                ? <div className="unit-modal">{ modalOptions.body }</div>
+                : (
+                  <iframe
+                    title={modalOptions.title}
+                    allow="microphone *; camera *; midi *; geolocation *; encrypted-media *"
+                    frameBorder="0"
+                    src={modalOptions.url}
+                  />
+                )}
+            </>
+          )}
+          title={modalOptions.title}
+          onClose={() => { setModalOptions({ open: false }); }}
+          open
+        />
+      )}
       <div className="unit-iframe-wrapper">
         <iframe
           id="unit-iframe"

src/index.scss

@@ -311,6 +311,21 @@ $primary: #1176B2;
   }
 }
 
+.modal {
+  max-width: 100%;
+  height: 100vh;
+  .modal-dialog {
+    max-width: 100%;
+  }
+  .modal-body {
+    width: 100%;
+
+    iframe {
+      width: 100%;
+      min-height:100vh;
+    }
+  }
+}
 // Import component-specific sass files
 @import 'courseware/course/celebration/CelebrationModal.scss';
 @import 'courseware/course/content-tools/calculator/calculator.scss';