From e4a1e4136745ce02fc7424a3226f30d4c0965c8d Mon Sep 17 00:00:00 2001
From: Sagirov Evgeniy <34642612+UvgenGen@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:03:07 +0300
Subject: [PATCH]  feat: new Studio view for rendering a Unit in an iframe
 [FC-0070]

The first attempt at creating a new MFE-driven page for Studio Unit
rendering involved rendering each XBlock separately in its own iframe.
This turned out to be prohibitively slow because of the many redundant
assets and JavaScript processing (e.g. MathJax) that happens for each
XBlock component.

In order to mitigate some of these issues, we decided to try a hybrid
approach where we render the entire Unit's worth of XBlocks at once on
the server side in a Studio view + template, and then invoke that from
frontend-app-authoring as an iframe. The frontend-app-authoring MFE
would still be responsible for displaying most of the interactive UI,
but the per-component actions like "edit" would be triggered by buttons
on the server-rendered Unit display. When one of those buttons is
pressed, the server-rendered UI code in the iframe would use
postMessage to communicate to the frontend-app-authoring MFE, which
would then display the appropriate actions.

To make this work, we're making a new view and template that copies
a lot of existing code used to display the Unit in pre-MFE Studio, and
then modifying that to remove things like the header/footer so that it
can be invoked from an iframe.

This entire design is a compromise in order to do as much of the UI
development in frontend-app-authoring as possible while keeping
XBlock rendering performance tolerable. We hope that we can find
better solutions for this later.

Authored-by: Sagirov Eugeniy <evhenyj.sahyrov@raccoongang.com>
---
 .../contentstore/views/component.py           |  34 +-
 .../views/tests/test_container_page.py        |  58 ++
 cms/envs/common.py                            |   6 +
 cms/static/images/pencil-icon.svg             |   3 +
 cms/static/js/views/pages/container.js        | 168 +++--
 .../sass/course-unit-mfe-iframe-bundle.scss   | 651 ++++++++++++++++++
 .../elements/_course-unit-mfe-iframe.scss     |  65 ++
 .../partials/cms/theme/_variables-v1.scss     |   9 +
 cms/templates/container_chromeless.html       | 278 ++++++++
 cms/urls.py                                   |   2 +
 10 files changed, 1197 insertions(+), 77 deletions(-)
 create mode 100644 cms/static/images/pencil-icon.svg
 create mode 100644 cms/static/sass/course-unit-mfe-iframe-bundle.scss
 create mode 100644 cms/static/sass/elements/_course-unit-mfe-iframe.scss
 create mode 100644 cms/templates/container_chromeless.html

diff --git a/cms/djangoapps/contentstore/views/component.py b/cms/djangoapps/contentstore/views/component.py
index ba767df78d..8fbadad799 100644
--- a/cms/djangoapps/contentstore/views/component.py
+++ b/cms/djangoapps/contentstore/views/component.py
@@ -11,6 +11,7 @@ from django.core.exceptions import PermissionDenied
 from django.http import Http404, HttpResponseBadRequest
 from django.shortcuts import redirect
 from django.utils.translation import gettext as _
+from django.views.decorators.clickjacking import xframe_options_exempt
 from django.views.decorators.http import require_GET
 from opaque_keys import InvalidKeyError
 from opaque_keys.edx.keys import UsageKey
@@ -35,7 +36,8 @@ from xmodule.modulestore.exceptions import ItemNotFoundError  # lint-amnesty, py
 
 __all__ = [
     'container_handler',
-    'component_handler'
+    'component_handler',
+    'container_embed_handler',
 ]
 
 log = logging.getLogger(__name__)
@@ -141,6 +143,36 @@ def container_handler(request, usage_key_string):  # pylint: disable=too-many-st
         return HttpResponseBadRequest("Only supports HTML requests")
 
 
+@require_GET
+@login_required
+@xframe_options_exempt
+def container_embed_handler(request, usage_key_string):  # pylint: disable=too-many-statements
+    """
+    Returns an HttpResponse with HTML content for the container XBlock.
+    The returned HTML is a chromeless rendering of the XBlock.
+
+    GET
+        html: returns the HTML page for editing a container
+        json: not currently supported
+    """
+
+    # Avoiding a circular dependency
+    from ..utils import get_container_handler_context
+
+    try:
+        usage_key = UsageKey.from_string(usage_key_string)
+    except InvalidKeyError:  # Raise Http404 on invalid 'usage_key_string'
+        return HttpResponseBadRequest()
+    with modulestore().bulk_operations(usage_key.course_key):
+        try:
+            course, xblock, lms_link, preview_lms_link = _get_item_in_course(request, usage_key)
+        except ItemNotFoundError:
+            raise Http404  # lint-amnesty, pylint: disable=raise-missing-from
+
+        container_handler_context = get_container_handler_context(request, usage_key, course, xblock)
+        return render_to_response('container_chromeless.html', container_handler_context)
+
+
 def get_component_templates(courselike, library=False):  # lint-amnesty, pylint: disable=too-many-statements
     """
     Returns the applicable component templates that can be used by the specified course or library.
diff --git a/cms/djangoapps/contentstore/views/tests/test_container_page.py b/cms/djangoapps/contentstore/views/tests/test_container_page.py
index 1d5b529053..426477e234 100644
--- a/cms/djangoapps/contentstore/views/tests/test_container_page.py
+++ b/cms/djangoapps/contentstore/views/tests/test_container_page.py
@@ -242,3 +242,61 @@ class ContainerPageTestCase(StudioPageTestCase, LibraryTestCase):
             usage_key_string=str(self.vertical.location)
         )
         self.assertEqual(response.status_code, 200)
+
+
+class ContainerEmbedPageTestCase(ContainerPageTestCase):  # lint-amnesty, pylint: disable=test-inherits-tests
+    """
+    Unit tests for the container embed page.
+    """
+
+    def test_container_html(self):
+        assets_url = reverse(
+            'assets_handler', kwargs={'course_key_string': str(self.child_container.location.course_key)}
+        )
+        self._test_html_content(
+            self.child_container,
+            expected_section_tag=(
+                '<section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" '
+                'data-locator="{0}" data-course-key="{0.course_key}" data-course-assets="{1}">'.format(
+                    self.child_container.location, assets_url
+                )
+            ),
+        )
+
+    def test_container_on_container_html(self):
+        """
+        Create the scenario of an xblock with children (non-vertical) on the container page.
+        This should create a container page that is a child of another container page.
+        """
+        draft_container = self._create_block(self.child_container, "wrapper", "Wrapper")
+        self._create_block(draft_container, "html", "Child HTML")
+
+        def test_container_html(xblock):
+            assets_url = reverse(
+                'assets_handler', kwargs={'course_key_string': str(draft_container.location.course_key)}
+            )
+            self._test_html_content(
+                xblock,
+                expected_section_tag=(
+                    '<section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" '
+                    'data-locator="{0}" data-course-key="{0.course_key}" data-course-assets="{1}">'.format(
+                        draft_container.location, assets_url
+                    )
+                ),
+            )
+
+        # Test the draft version of the container
+        test_container_html(draft_container)
+
+        # Now publish the unit and validate again
+        self.store.publish(self.vertical.location, self.user.id)
+        draft_container = self.store.get_item(draft_container.location)
+        test_container_html(draft_container)
+
+    def _test_html_content(self, xblock, expected_section_tag):  # lint-amnesty, pylint: disable=arguments-differ
+        """
+        Get the HTML for a container page and verify the section tag is correct
+        and the breadcrumbs trail is correct.
+        """
+        html = self.get_page_html(xblock)
+        self.assertIn(expected_section_tag, html)
diff --git a/cms/envs/common.py b/cms/envs/common.py
index 7297adae83..3942c9d68b 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -1407,6 +1407,12 @@ PIPELINE['STYLESHEETS'] = {
         ],
         'output_filename': 'css/cms-style-xmodule-annotations.css',
     },
+    'course-unit-mfe-iframe-bundle': {
+        'source_filenames': [
+            'css/course-unit-mfe-iframe-bundle.css',
+        ],
+        'output_filename': 'css/course-unit-mfe-iframe-bundle.css',
+    },
 }
 
 base_vendor_js = [
diff --git a/cms/static/images/pencil-icon.svg b/cms/static/images/pencil-icon.svg
new file mode 100644
index 0000000000..1744c884dc
--- /dev/null
+++ b/cms/static/images/pencil-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false" aria-hidden="true">
+  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25ZM21.41 6.34l-3.75-3.75-2.53 2.54 3.75 3.75 2.53-2.54Z" fill="currentColor"></path>
+</svg>
diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
index 7e1f6de3b6..04a42bf442 100644
--- a/cms/static/js/views/pages/container.js
+++ b/cms/static/js/views/pages/container.js
@@ -207,7 +207,7 @@ function($, _, Backbone, gettext, BasePage,
 
         renderAddXBlockComponents: function() {
             var self = this;
-            if (self.options.canEdit) {
+            if (self.options.canEdit && !self.options.isIframeEmbed) {
                 this.$('.add-xblock-component').each(function(index, element) {
                     var component = new AddXBlockComponent({
                         el: element,
@@ -222,7 +222,7 @@ function($, _, Backbone, gettext, BasePage,
         },
 
         initializePasteButton() {
-            if (this.options.canEdit) {
+            if (this.options.canEdit && !self.options.isIframeEmbed) {
                 // We should have the user's clipboard status.
                 const data = this.options.clipboardData;
                 this.refreshPasteButton(data);
@@ -239,7 +239,7 @@ function($, _, Backbone, gettext, BasePage,
         refreshPasteButton(data) {
             // Do not perform any changes on paste button since they are not
             // rendered on Library or LibraryContent pages
-            if (!this.isLibraryPage && !this.isLibraryContentPage) {
+            if (!this.isLibraryPage && !this.isLibraryContentPage && !self.options.isIframeEmbed) {
                 // 'data' is the same data returned by the "get clipboard status" API endpoint
                 // i.e. /api/content-staging/v1/clipboard/
                 if (this.options.canEdit && data.content) {
@@ -273,6 +273,18 @@ function($, _, Backbone, gettext, BasePage,
         /** The user has clicked on the "Paste Component button" */
         pasteComponent(event) {
             event.preventDefault();
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'pasteComponent',
+                            payload: {}
+                        }, document.referrer
+                    );
+                }
+            } catch (e) {
+                console.error(e);
+            }
             // Get the ID of the container (usually a unit/vertical) that we're pasting into:
             const parentElement = this.findXBlockElement(event.target);
             const parentLocator = parentElement.data('locator');
@@ -365,6 +377,18 @@ function($, _, Backbone, gettext, BasePage,
 
         editXBlock: function(event, options) {
             event.preventDefault();
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'editXBlock',
+                            payload: {}
+                        }, document.referrer
+                    );
+                }
+            } catch (e) {
+                console.error(e);
+            }
 
             if (!options || options.view !== 'visibility_view') {
                 const primaryHeader = $(event.target).closest('.xblock-header-primary, .nav-actions');
@@ -432,66 +456,43 @@ function($, _, Backbone, gettext, BasePage,
             });
         },
 
-        duplicateXBlock: function(event) {
-            event.preventDefault();
-            this.duplicateComponent(this.findXBlockElement(event.target));
-        },
-
         openManageTags: function(event) {
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'openManageTags',
+                            payload: {}
+                        }, document.referrer
+                    );
+                }
+            } catch (e) {
+                console.error(e);
+            }
             const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url');
             const contentId = this.findXBlockElement(event.target).data('locator');
 
             TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
         },
 
-        showMoveXBlockModal: function(event) {
-            var xblockElement = this.findXBlockElement(event.target),
-                parentXBlockElement = xblockElement.parents('.studio-xblock-wrapper'),
-                modal = new MoveXBlockModal({
-                    sourceXBlockInfo: XBlockUtils.findXBlockInfo(xblockElement, this.model),
-                    sourceParentXBlockInfo: XBlockUtils.findXBlockInfo(parentXBlockElement, this.model),
-                    XBlockURLRoot: this.getURLRoot(),
-                    outlineURL: this.options.outlineURL
-                });
-
-            event.preventDefault();
-            modal.show();
-        },
-
-        deleteXBlock: function(event) {
-            event.preventDefault();
-            this.deleteComponent(this.findXBlockElement(event.target));
-        },
-
         createPlaceholderElement: function() {
             return $('<div/>', {class: 'studio-xblock-wrapper'});
         },
 
-        createComponent: function(template, target) {
-            // A placeholder element is created in the correct location for the new xblock
-            // and then onNewXBlock will replace it with a rendering of the xblock. Note that
-            // for xblocks that can't be replaced inline, the entire parent will be refreshed.
-            var parentElement = this.findXBlockElement(target),
-                parentLocator = parentElement.data('locator'),
-                buttonPanel = target.closest('.add-xblock-component'),
-                listPanel = buttonPanel.prev(),
-                scrollOffset = ViewUtils.getScrollOffset(buttonPanel),
-                $placeholderEl = $(this.createPlaceholderElement()),
-                requestData = _.extend(template, {
-                    parent_locator: parentLocator
-                }),
-                placeholderElement;
-            placeholderElement = $placeholderEl.appendTo(listPanel);
-            return $.postJSON(this.getURLRoot() + '/', requestData,
-                _.bind(this.onNewXBlock, this, placeholderElement, scrollOffset, false))
-                .fail(function() {
-                    // Remove the placeholder if the update failed
-                    placeholderElement.remove();
-                });
-        },
-
         copyXBlock: function(event) {
             event.preventDefault();
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'copyXBlock',
+                            payload: {}
+                        }, document.referrer
+                    );
+                }
+            } catch (e) {
+                console.error(e);
+            }
             const clipboardEndpoint = "/api/content-staging/v1/clipboard/";
             const element = this.findXBlockElement(event.target);
             const usageKeyToCopy = element.data('locator');
@@ -535,41 +536,44 @@ function($, _, Backbone, gettext, BasePage,
             });
         },
 
-        duplicateComponent: function(xblockElement) {
-            // A placeholder element is created in the correct location for the duplicate xblock
-            // and then onNewXBlock will replace it with a rendering of the xblock. Note that
-            // for xblocks that can't be replaced inline, the entire parent will be refreshed.
-            var self = this,
-                parentElement = self.findXBlockElement(xblockElement.parent()),
-                scrollOffset = ViewUtils.getScrollOffset(xblockElement),
-                $placeholderEl = $(self.createPlaceholderElement()),
-                placeholderElement;
-
-            placeholderElement = $placeholderEl.insertAfter(xblockElement);
-            XBlockUtils.duplicateXBlock(xblockElement, parentElement)
-                .done(function(data) {
-                    self.onNewXBlock(placeholderElement, scrollOffset, true, data);
-                })
-                .fail(function() {
-                    // Remove the placeholder if the update failed
-                    placeholderElement.remove();
-                });
-        },
-
         duplicateXBlock: function(event) {
             event.preventDefault();
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'duplicateXBlock',
+                            payload: {}
+                        }, document.referrer
+                    );
+                }
+            } catch (e) {
+                console.error(e);
+            }
             this.duplicateComponent(this.findXBlockElement(event.target));
         },
 
         showMoveXBlockModal: function(event) {
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'showMoveXBlockModal',
+                            payload: {}
+                        }, document.referrer
+                    );
+                }
+            } catch (e) {
+                console.error(e);
+            }
             var xblockElement = this.findXBlockElement(event.target),
                 parentXBlockElement = xblockElement.parents('.studio-xblock-wrapper'),
                 modal = new MoveXBlockModal({
-                sourceXBlockInfo: XBlockUtils.findXBlockInfo(xblockElement, this.model),
-                sourceParentXBlockInfo: XBlockUtils.findXBlockInfo(parentXBlockElement, this.model),
-                XBlockURLRoot: this.getURLRoot(),
-                outlineURL: this.options.outlineURL
-            });
+                    sourceXBlockInfo: XBlockUtils.findXBlockInfo(xblockElement, this.model),
+                    sourceParentXBlockInfo: XBlockUtils.findXBlockInfo(parentXBlockElement, this.model),
+                    XBlockURLRoot: this.getURLRoot(),
+                    outlineURL: this.options.outlineURL
+                });
 
             event.preventDefault();
             modal.show();
@@ -577,6 +581,18 @@ function($, _, Backbone, gettext, BasePage,
 
         deleteXBlock: function(event) {
             event.preventDefault();
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'deleteXBlock',
+                            payload: {}
+                        }, document.referrer
+                    );
+                }
+            } catch (e) {
+                console.error(e);
+            }
             this.deleteComponent(this.findXBlockElement(event.target));
         },
 
diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss
new file mode 100644
index 0000000000..95774ea740
--- /dev/null
+++ b/cms/static/sass/course-unit-mfe-iframe-bundle.scss
@@ -0,0 +1,651 @@
+@import 'cms/theme/variables-v1';
+@import 'elements/course-unit-mfe-iframe';
+
+.wrapper {
+  .wrapper-xblock {
+    background-color: $transparent;
+    border-radius: 6px;
+    border: none;
+
+    &:hover {
+      border-color: none;
+    }
+
+    .xblock-header-primary {
+      padding: ($baseline * 1.2) ($baseline * 1.2) ($baseline / 1.67);
+      border-bottom: none;
+
+      .header-details .xblock-display-name {
+        font-size: 22px;
+        line-height: 28px;
+        font-weight: 700;
+        color: $black;
+      }
+    }
+
+    &.level-element {
+      box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .15);
+      margin: 0 0 ($baseline * 1.4) 0;
+    }
+
+    &.level-element .xblock-header-primary {
+      background-color: $white;
+    }
+
+    &.level-element .xblock-render {
+      background: $white;
+      margin: 0;
+      padding: $baseline;
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+
+    .wrapper-xblock .header-actions .actions-list .action-item .action-button {
+      @extend %button-styles;
+
+      color: $black;
+
+      .fa-ellipsis-v {
+        font-size: $base-font-size;
+      }
+
+      &:hover {
+        background-color: $primary;
+        border-color: $transparent;
+      }
+
+      &:focus {
+        outline: 2px $transparent;
+        background-color: $transparent;
+        box-shadow: inset 0 0 0 2px $primary;
+        color: $primary;
+        border-color: $transparent;
+      }
+    }
+
+    .xblock-header-primary .header-actions .nav-dd .nav-sub {
+      border: 1px solid rgba(0, 0, 0, .15);
+      border-radius: 6px;
+      padding: ($baseline / 2) 0;
+      min-width: 288px;
+      right: 90px;
+
+      .nav-item {
+        border-bottom: none;
+        color: $dark;
+        font-size: $base-font-size;
+
+        a {
+          padding: ($baseline / 2) ($baseline / 1.25);
+        }
+
+        &:hover {
+          background-color: #f2f0ef;
+          color: $dark;
+        }
+
+        a:hover {
+          color: $dark;
+        }
+
+        a:focus {
+          outline: none;
+        }
+
+        &:active {
+          background-color: $primary;
+
+          a {
+            color: $white;
+          }
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &.wrapper-modal-window .modal-window .modal-actions a {
+    color: $text-color;
+    background-color: $transparent;
+    border-color: $transparent;
+    box-shadow: none;
+    font-weight: 500;
+    border: 1px solid $transparent;
+    padding: ($baseline / 2) ($baseline / 1.25);
+    font-size: $base-font-size;
+    line-height: 20px;
+    border-radius: $btn-border-radius;
+    text-align: center;
+    vertical-align: middle;
+    user-select: none;
+    background-image: none;
+    display: block;
+
+    &:hover {
+      background-color: $light-background-color;
+      border-color: $transparent;
+      color: $text-color;
+    }
+
+    &:focus {
+      background: $transparent;
+      outline: none;
+    }
+  }
+
+  .modal-window.modal-editor {
+    background-color: $white;
+    border-radius: 6px;
+
+    a {
+      color: #00688d;
+    }
+
+    select {
+      &:focus {
+        background-color: $white;
+        color: $text-color;
+        outline: 0;
+        box-shadow: 0 0 0 1px $primary;
+      }
+    }
+
+    input:not([type="radio"], [type="checkbox"], [type="submit"]) {
+      @extend %input-styles;
+
+      line-height: 20px;
+      height: 44px;
+
+      &:hover {
+        border: solid 1px #002121;
+      }
+
+      &:focus {
+        color: $text-color;
+        background-color: $white;
+        border-color: $primary;
+        outline: 0;
+        box-shadow: 0 0 0 1px $primary;
+      }
+    }
+
+    #student_training_settings_editor .openassessment_training_example .openassessment_training_example_body
+    .openassessment_training_example_essay_wrapper textarea {
+      @extend %input-styles;
+
+      box-shadow: none;
+    }
+
+    textarea {
+      @extend %input-styles;
+
+      box-shadow: none;
+
+      &#poll-question-editor,
+      &#poll-feedback-editor {
+        box-shadow: none;
+
+        &:focus {
+          color: $text-color;
+          background-color: $white;
+          border-color: $primary;
+          outline: 0;
+          box-shadow: 0 0 0 1px $primary;
+        }
+      }
+
+      &:hover {
+        border: solid 1px #002121;
+      }
+
+      &:focus {
+        color: $text-color;
+        background-color: $white;
+        border-color: $primary;
+        outline: 0;
+        box-shadow: 0 0 0 1px $primary;
+      }
+    }
+
+    .tip.setting-help {
+      color: $border-color;
+      font-size: 14px;
+      line-height: $base-font-size;
+    }
+
+    label,
+    .label.setting-label {
+      font-size: $base-font-size;
+      line-height: 28px;
+      color: $text-color;
+      font-weight: 400;
+    }
+
+    .title.modal-window-title {
+      color: $black;
+      font-weight: 700;
+      font-size: 22px;
+      line-height: 28px;
+    }
+
+    .xblock-actions {
+      background-color: $white;
+
+      .action-button {
+        background-color: $transparent;
+        border: 1px solid $transparent;
+        padding: ($baseline / 2.22) ($baseline / 1.25);
+        border-radius: $input-border-radius;
+        font-weight: 400;
+        color: #00688d;
+        font-size: $base-font-size;
+        line-height: 20px;
+        cursor: pointer;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      .openassessment_save_button,
+      .save-button,
+      .continue-button {
+        color: $white;
+        background-color: $primary;
+        border-color: $primary;
+        box-shadow: none;
+        font-weight: 500;
+        border: 1px solid $transparent;
+        padding: ($baseline / 2) ($baseline / 1.25);
+        font-size: $base-font-size;
+        line-height: 20px;
+        border-radius: $btn-border-radius;
+        text-align: center;
+        vertical-align: middle;
+        user-select: none;
+        background-image: none;
+        height: auto;
+        display: block;
+
+        &:hover {
+          background: darken($primary, 5%);
+          border-color: $transparent;
+          color: $white;
+        }
+
+        &:focus {
+          background: $primary;
+          outline: none;
+        }
+      }
+
+      .openassessment_cancel_button,
+      .cancel-button {
+        color: $text-color;
+        background-color: $transparent;
+        border-color: $transparent;
+        box-shadow: none;
+        font-weight: 500;
+        border: 1px solid $transparent;
+        padding: ($baseline / 2) ($baseline / 1.25);
+        font-size: $base-font-size;
+        line-height: 20px;
+        border-radius: $btn-border-radius;
+        text-align: center;
+        vertical-align: middle;
+        user-select: none;
+        background-image: none;
+        display: block;
+
+        &:hover {
+          background-color: $light-background-color;
+          border-color: $transparent;
+          color: $text-color;
+        }
+
+        &:focus {
+          background: $transparent;
+          outline: none;
+        }
+      }
+    }
+  }
+
+  .modal-lg.modal-window.confirm.openassessment_modal_window {
+    height: 635px;
+  }
+}
+
+.view-container .content-primary {
+  background-color: $transparent;
+  width: 100%;
+}
+
+.wrapper-content.wrapper {
+  padding: $baseline / 4;
+}
+
+.btn-default.action-edit.title-edit-button {
+  @extend %button-styles;
+
+  position: relative;
+  top: 7px;
+
+  .fa-pencil {
+    display: none;
+  }
+
+  &::before {
+    @extend %icon-position;
+
+    content: '';
+    position: absolute;
+    background-color: $black;
+    mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
+  }
+
+  &:hover {
+    background-color: $primary;
+    border-color: $transparent;
+
+    &::before {
+      background-color: $white;
+    }
+  }
+
+  &:focus {
+    outline: 2px $transparent;
+    background-color: $transparent;
+    box-shadow: inset 0 0 0 2px $primary;
+    border-color: $transparent;
+
+    &:hover {
+      color: $white;
+      border-color: $transparent;
+
+      &::before {
+        background-color: $primary;
+      }
+    }
+  }
+}
+
+.action-edit {
+  .action-button-text {
+    display: none;
+  }
+
+  .edit-button.action-button {
+    @extend %button-styles;
+
+    position: relative;
+
+    .fa-pencil {
+      display: none;
+    }
+
+    &::before {
+      @extend %icon-position;
+
+      content: '';
+      position: absolute;
+      background-color: $black;
+      mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
+    }
+
+    &:hover {
+      background-color: $primary;
+      border-color: $transparent;
+
+      &::before {
+        background-color: $white;
+      }
+    }
+
+    &:focus {
+      outline: 2px $transparent;
+      background-color: $transparent;
+      box-shadow: inset 0 0 0 2px $primary;
+      border-color: $transparent;
+
+      &:hover {
+        color: $white;
+        border-color: $transparent;
+
+        &::before {
+          background-color: $primary;
+        }
+      }
+    }
+  }
+}
+
+.nav-dd.ui-right .nav-sub {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item {
+  .editor-button,
+  .settings-button {
+    @extend %light-button;
+  }
+}
+
+[class*="view-"] .wrapper.wrapper-modal-window .modal-window .modal-actions .action-primary {
+  @extend %primary-button;
+}
+
+.wrapper-comp-settings {
+  .list-input.settings-list {
+    .metadata-list-enum .create-setting {
+      @extend %modal-actions-button;
+
+      background-color: $primary;
+      color: $white;
+      border: 1px solid $primary;
+      cursor: pointer;
+
+      &:hover {
+        background: darken($primary, 5%);
+        border-color: #2d494e;
+      }
+
+      &:focus {
+        background: $primary;
+        outline: none;
+      }
+    }
+  }
+
+  .list-input.settings-list {
+    .field.comp-setting-entry.is-set .setting-input {
+      color: $text-color;
+    }
+
+    select {
+      border: 1px solid $border-color;
+      border-radius: $input-border-radius;
+      color: $text-color;
+      height: 44px;
+
+      &:focus {
+        background-color: $white;
+        color: $text-color;
+        outline: 0;
+        box-shadow: 0 0 0 1px $primary;
+      }
+    }
+
+    .setting-label {
+      font-size: $base-font-size;
+      line-height: 28px;
+      color: $text-color;
+      font-weight: 400;
+    }
+
+    input[type="number"] {
+      width: 45%;
+    }
+
+    .action.setting-clear {
+      @extend %button-styles;
+
+      background-color: $transparent;
+      color: $primary;
+      border: none;
+
+      &:hover {
+        background-color: $primary;
+        color: $white;
+        border: none;
+      }
+
+      &:focus {
+        outline: 2px $transparent;
+        background-color: $transparent;
+        box-shadow: inset 0 0 0 2px $primary;
+        color: $primary;
+      }
+    }
+  }
+
+  .list-input.settings-list .metadata-list-enum .remove-setting .fa-times-circle {
+    color: $primary;
+  }
+}
+
+select {
+  border: 1px solid $border-color;
+  border-radius: $input-border-radius;
+  color: $text-color;
+  height: 44px;
+  padding: ($baseline / 2) ($baseline / 1.25);
+
+  &:focus {
+    background-color: $white;
+    color: $text-color;
+    outline: 0;
+    box-shadow: 0 0 0 1px $primary;
+  }
+}
+
+.xblock {
+  .xblock--drag-and-drop--editor .tab {
+    background-color: $white;
+    display: inline-block;
+  }
+
+  #openassessment-editor #oa_rubric_editor_wrapper {
+    .openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings label input,
+    .openassessment_criterion_option .openassessment_criterion_option_name_wrapper label,
+    .openassessment_criterion_option .openassessment_criterion_option_explanation_wrapper label,
+    .openassessment_criterion .openassessment_criterion_feedback_wrapper label,
+    #openassessment_rubric_feedback_wrapper label,
+    .openassessment_criterion_option .openassessment_criterion_option_point_wrapper label,
+    .openassessment_criterion_option .openassessment_criterion_option_name_wrapper label input,
+    .openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings .openassessment_criterion_prompt,
+    #openassessment_rubric_feedback_wrapper textarea,
+    .openassessment_criterion_option
+    .openassessment_criterion_option_explanation_wrapper label textarea,
+    input[type=number] {
+      font-size: $base-font-size;
+      background-color: $white;
+      background-image: none;
+    }
+  }
+
+  #openassessment-editor {
+    #openassessment_editor_header .editor_tabs .oa_editor_tab {
+      @extend %light-button;
+
+      padding: 0 10px;
+    }
+
+    #openassessment_editor_header,
+    .openassessment_tab_instructions {
+      background-color: $white;
+    }
+
+    #oa_schedule_editor_wrapper #dates_config_new_badge {
+      background-color: $primary;
+    }
+
+    .openassessment_description {
+      font-size: 14px;
+      line-height: $base-font-size;
+    }
+
+    #oa_rubric_editor_wrapper .openassessment_criterion
+    .openassessment_criterion_basic_editor .comp-setting-entry
+    .wrapper-comp-settings label {
+      font-size: $base-font-size;
+      line-height: 28px;
+      color: $text-color;
+      font-weight: 400;
+    }
+
+    #oa_rubric_editor_wrapper .openassessment_criterion_option
+    .openassessment_criterion_option_point_wrapper label input {
+      min-width: 70px;
+      font-size: 18px;
+      height: 44px;
+    }
+
+    .openassessment_assessment_module_settings_editor:hover {
+      border-color: $primary;
+
+      .drag-handle {
+        background-color: $primary;
+        border-color: $primary;
+      }
+    }
+
+    .setting-help,
+    .ti.wrapper-comp-settings .list-input.settings-list .setting-help {
+      color: $border-color;
+      font-size: 14px;
+      line-height: $base-font-size;
+    }
+  }
+
+  .xblock--drag-and-drop--editor .btn,
+  #openassessment-editor .openassessment_container_add_button,
+  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_add_option,
+  #student_training_settings_editor .openassessment_add_training_example {
+    @extend %primary-button;
+  }
+}
+
+.xblock-header-primary {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 83px;
+    left: 25px;
+    width: 95%;
+    height: 1px;
+    background-color: #eae6e5;
+  }
+}
+
+.ui-loading {
+  background-color: #f8f7f6;
+  box-shadow: none;
+
+  .spin,
+  .copy {
+    color: $primary;
+  }
+}
+
+.wrapper-comp-setting.metadata-list-enum .action.setting-clear.active {
+  margin-top: 0;
+}
diff --git a/cms/static/sass/elements/_course-unit-mfe-iframe.scss b/cms/static/sass/elements/_course-unit-mfe-iframe.scss
new file mode 100644
index 0000000000..dc75109942
--- /dev/null
+++ b/cms/static/sass/elements/_course-unit-mfe-iframe.scss
@@ -0,0 +1,65 @@
+%button-styles {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+}
+
+%input-styles {
+  font-size: $base-font-size;
+  color: $text-color !important;
+  background-color: $white;
+  border: 1px solid $border-color !important;
+  border-radius: $input-border-radius !important;
+  padding: 10px 16px !important;
+  background-image: none;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+%modal-actions-button {
+  font-size: $base-font-size;
+  line-height: 20px;
+  padding: 10px 16px;
+  border-radius: $btn-border-radius;
+}
+
+%primary-button {
+  @extend %modal-actions-button;
+
+  background-color: $primary;
+  color: $white;
+  border: 1px solid $primary;
+  cursor: pointer;
+  background-image: none;
+  display: block;
+
+  &:hover {
+    background: darken($primary, 5%);
+    border-color: #2d494e;
+    box-shadow: none;
+    color: $white;
+  }
+
+  &:focus {
+    background: $primary;
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+%light-button {
+  @extend %modal-actions-button;
+
+  color: $black;
+  background-color: $light-background-color;
+  border-color: $light-background-color;
+  box-shadow: none;
+  border: 1px solid $transparent;
+  font-weight: 500;
+}
+
+%icon-position {
+  top: 11px;
+  left: 11px;
+  width: 20px;
+  height: 20px;
+}
diff --git a/cms/static/sass/partials/cms/theme/_variables-v1.scss b/cms/static/sass/partials/cms/theme/_variables-v1.scss
index c2ff073b94..a008210b25 100644
--- a/cms/static/sass/partials/cms/theme/_variables-v1.scss
+++ b/cms/static/sass/partials/cms/theme/_variables-v1.scss
@@ -304,3 +304,12 @@ $state-danger-bg: #f2dede !default;
 $state-danger-border: darken($state-danger-bg, 5%) !default;
 
 $text-dark-black-blue: #2c3e50;
+
+$primary: #0a3055 !default;
+$btn-border-radius: 6px !default;
+$input-border-radius: 6px !default;
+$text-color: #454545 !default;
+$light-background-color: #e1dddb !default;
+$border-color: #707070 !default;
+$base-font-size: 18px !default;
+$dark: #212529;
diff --git a/cms/templates/container_chromeless.html b/cms/templates/container_chromeless.html
new file mode 100644
index 0000000000..2fe821e49d
--- /dev/null
+++ b/cms/templates/container_chromeless.html
@@ -0,0 +1,278 @@
+## coding=utf-8
+## mako
+##
+## Studio view template for rendering the whole Unit in an iframe with
+## XBlocks controls specifically for Authoring MFE. This template renders
+## a chromeless version of a unit container without headers, footers,
+## and a navigation bar.
+
+<%! main_css = "style-main-v1" %>
+
+<%! course_unit_mfe_iframe_css = "course-unit-mfe-iframe-bundle" %>
+
+<%namespace name='static' file='static_content.html'/>
+<%!
+from django.urls import reverse
+from django.utils.translation import gettext as _
+
+from cms.djangoapps.contentstore.config.waffle import CUSTOM_RELATIVE_DATES
+from cms.djangoapps.contentstore.helpers import xblock_type_display_name
+from lms.djangoapps.branding import api as branding_api
+from openedx.core.djangoapps.util.user_messages import PageLevelMessages
+from openedx.core.djangolib.js_utils import (
+    dump_js_escaped_json, js_escaped_string
+)
+from openedx.core.djangolib.markup import HTML, Text
+from openedx.core.release import RELEASE_LINE
+%>
+
+<%page expression_filter="h"/>
+<!doctype html>
+<!--[if lte IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
+<!--[if !IE]><<!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
+    <head dir="${static.dir_rtl()}">
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="openedx-release-line" content="${RELEASE_LINE}" />
+        <title>
+            ${xblock.display_name_with_default} ${xblock_type_display_name(xblock)} |
+            % if context_course:
+            <% ctx_loc = context_course.location %>
+            ${context_course.display_name_with_default} |
+            % elif context_library:
+            ${context_library.display_name_with_default} |
+            % endif
+            ${settings.STUDIO_NAME}
+        </title>
+
+        <%
+        jsi18n_path = "js/i18n/{language}/djangojs.js".format(language=LANGUAGE_CODE)
+        %>
+
+        % if getattr(settings, 'CAPTURE_CONSOLE_LOG', False):
+            <script type="text/javascript">
+                var oldOnError = window.onerror;
+                window.localStorage.setItem('console_log_capture', JSON.stringify([]));
+
+                window.onerror = function (message, url, lineno, colno, error) {
+                    if (oldOnError) {
+                        oldOnError.apply(this, arguments);
+                    }
+
+                    var messages = JSON.parse(window.localStorage.getItem('console_log_capture'));
+                    messages.push([message, url, lineno, colno, (error || {}).stack]);
+                    window.localStorage.setItem('console_log_capture', JSON.stringify(messages));
+                }
+            </script>
+        % endif
+
+        <script type="text/javascript" src="${static.url(jsi18n_path)}"></script>
+        % if settings.DEBUG:
+        ## Provides a fallback for gettext functions in development environment
+        <script type="text/javascript" src="${static.url('js/src/gettext_fallback.js')}"></script>
+        % endif
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <meta name="path_prefix" content="${EDX_ROOT_URL}">
+        <% favicon_url = branding_api.get_favicon_url() %>
+        <link rel="icon" type="image/x-icon" href="${favicon_url}"/>
+        <%static:css group='style-vendor'/>
+        <%static:css group='style-vendor-tinymce-content'/>
+        <%static:css group='style-vendor-tinymce-skin'/>
+
+        % if uses_bootstrap:
+        <link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
+        % else:
+        <%static:css group='${self.attr.main_css}'/>
+        % endif
+
+        <%static:css group='${self.attr.course_unit_mfe_iframe_css}'/>
+
+        <%include file="widgets/segment-io.html" />
+
+        % for template_name in templates:
+        <script type="text/template" id="${template_name}-tpl">
+            <%static:include path="js/${template_name}.underscore" />
+        </script>
+        % endfor
+        <script type="text/template" id="image-modal-tpl">
+            <%static:include path="common/templates/image-modal.underscore" />
+        </script>
+        <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
+        ## The following stylesheets are included for studio-frontend debugging.
+        ## Remove this as part of studio frontend deprecation.
+        ## https://github.com/openedx/studio-frontend/issues/381
+        % if not settings.STUDIO_FRONTEND_CONTAINER_URL:
+            <link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/common.min.css')}" />
+            <link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/editImageModal.min.css')}" />
+        % endif
+    </head>
+
+    <body class="${static.dir_rtl()} is-signedin course container view-container lang_${LANGUAGE_CODE}">
+
+        <a class="nav-skip" href="#main">${_("Skip to main content")}</a>
+
+        <%static:js group='base_vendor'/>
+
+        <%static:webpack entry="commons"/>
+
+        <script type="text/javascript">
+        window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
+        require.config({
+            baseUrl: window.baseUrl
+        });
+        </script>
+
+        <script type="text/javascript" src="${static.url("cms/js/require-config.js")}"></script>
+
+        <!-- view -->
+        <div class="wrapper wrapper-view" dir="${static.dir_rtl()}">
+        <%
+        banner_messages = list(PageLevelMessages.user_messages(request))
+        %>
+
+        % if banner_messages:
+            <div class="page-banner">
+            <div class="user-messages">
+                % for message in banner_messages:
+                <div class="alert ${message.css_class}" role="alert">
+                    <span class="icon icon-alert fa ${message.icon_class}" aria-hidden="true"></span>
+                    ${HTML(message.message_html)}
+                </div>
+                % endfor
+            </div>
+            </div>
+        % endif
+
+        <main id="main" aria-label="Content" tabindex="-1">
+            <div id="content">
+
+                <div class="wrapper-content wrapper">
+                    <div class="inner-wrapper">
+                        <section class="content-area">
+                            <article class="content-primary ${'content-primary-fullwidth' if is_fullwidth_content else ''}">
+                                <%
+                                    assets_url = reverse('assets_handler', kwargs={'course_key_string': str(xblock_locator.course_key)})
+                                %>
+                                <section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" data-locator="${xblock_locator}" data-course-key="${xblock_locator.course_key}" data-course-assets="${assets_url}">
+                                </section>
+                                <div class="ui-loading">
+                                    <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
+                                </div>
+                            </article>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </main>
+        </div>
+
+        <div id="page-prompt"></div>
+
+        % if context_course:
+        <%static:webpack entry="js/factories/context_course"/>
+        <script type="text/javascript">
+            window.course = new ContextCourse({
+            id: "${context_course.id | n, js_escaped_string}",
+            name: "${context_course.display_name_with_default | n, js_escaped_string}",
+            url_name: "${context_course.location.block_id | n, js_escaped_string}",
+            org: "${context_course.location.org | n, js_escaped_string}",
+            num: "${context_course.location.course | n, js_escaped_string}",
+            display_course_number: "${context_course.display_coursenumber | n, js_escaped_string}",
+            revision: "${context_course.location.branch | n, js_escaped_string}",
+            self_paced: ${ context_course.self_paced | n, dump_js_escaped_json },
+            is_custom_relative_dates_active: ${CUSTOM_RELATIVE_DATES.is_enabled(context_course.id) | n, dump_js_escaped_json},
+            start: ${context_course.start | n, dump_js_escaped_json},
+            discussions_settings: ${context_course.discussions_settings | n, dump_js_escaped_json}
+            });
+        </script>
+        % endif
+        <script type="text/javascript">
+        require(['js/factories/base'], function () {});
+        </script>
+
+        <%static:webpack entry="js/factories/container">
+            ContainerFactory(
+                ${component_templates | n, dump_js_escaped_json},
+                ${xblock_info | n, dump_js_escaped_json},
+                "${action | n, js_escaped_string}",
+                {
+                    isUnitPage: ${is_unit_page | n, dump_js_escaped_json},
+                    canEdit: true,
+                    outlineURL: "${outline_url | n, js_escaped_string}",
+                    clipboardData: ${user_clipboard | n, dump_js_escaped_json},
+                    isIframeEmbed: true,
+                }
+            );
+        </%static:webpack>
+    </body>
+
+    ## Initialize MutationObserver and ResizeObserver to update the iframe size.
+    ## These are used to provide resize events for the Authoring MFE.
+    <script type="text/javascript">
+    (function() {
+        // If this view is rendered in an iframe within the authoring microfrontend app
+        // it will report the height of its contents to the parent window when the
+        // document loads, window resizes, or DOM mutates.
+        if (window !== window.parent) {
+            var lastHeight = window.parent[0].offsetHeight;
+            var lastWidth = window.parent[0].offsetWidth;
+            var contentElement = document.getElementById('content');
+
+            function dispatchResizeMessage(event) {
+                // Note: event is actually an Array of MutationRecord objects when fired from the MutationObserver
+                var isLoadEvent = event.type === 'load';
+                var newHeight = contentElement.offsetHeight;
+                var newWidth = contentElement.offsetWidth;
+
+                // Monitor for messages and checks if the message contains an id. If
+                // there is an id, then the location of the selected focus element
+                // is sent through its offset attribute. The offset will allow the
+                // page to scroll to the location of the focus element so that it is
+                // at the top of the page. Unique ids and names are required for
+                // proper scrolling.
+                window.addEventListener('message', function (event) {
+                    if (event.data.hashName) {
+                        var targetId = event.data.hashName;
+                        var targetName = event.data.hashName.slice(1);
+                        // Checks if the target uses an id or name to focus and gets offset.
+                        var targetOffset = $(targetId).offset() || $(document.getElementsByName(targetName)[0]).offset();
+                        window.parent.postMessage({ 'offset': targetOffset.top }, document.referrer);
+                    }
+                })
+
+                window.parent.postMessage(
+                    {
+                        type: 'plugin.resize',
+                        payload: {
+                            width: newWidth,
+                            height: newHeight,
+                        }
+                    }, document.referrer
+                );
+
+                lastHeight = newHeight;
+                lastWidth = newWidth;
+
+                // Within the authoring microfrontend the iframe resizes to match the
+                // height of this document and it should never scroll. It does scroll
+                // ocassionally when javascript is used to focus elements on the page
+                // before the parent iframe has been resized to match the content
+                // height. This window.scrollTo is an attempt to keep the content at the
+                // top of the page.
+                window.scrollTo(0, 0);
+            }
+
+            // Create an observer instance linked to the callback function
+            const observer = new MutationObserver(dispatchResizeMessage);
+
+            // Start observing the target node for configured mutations
+            observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+
+            window.addEventListener('load', dispatchResizeMessage);
+
+            const resizeObserver = new ResizeObserver(dispatchResizeMessage);
+            resizeObserver.observe(document.body);
+        }
+    }());
+    </script>
+</html>
diff --git a/cms/urls.py b/cms/urls.py
index 1c5f191b27..4082ce446f 100644
--- a/cms/urls.py
+++ b/cms/urls.py
@@ -123,6 +123,8 @@ urlpatterns = oauth2_urlpatterns + [
             name='course_rerun_handler'),
     re_path(fr'^container/{settings.USAGE_KEY_PATTERN}$', contentstore_views.container_handler,
             name='container_handler'),
+    re_path(fr'^container_embed/{settings.USAGE_KEY_PATTERN}$', contentstore_views.container_embed_handler,
+            name='container_embed_handler'),
     re_path(fr'^orphan/{settings.COURSE_KEY_PATTERN}$', contentstore_views.orphan_handler,
             name='orphan_handler'),
     re_path(fr'^assets/{settings.COURSE_KEY_PATTERN}/{settings.ASSET_KEY_PATTERN}?$',