From 1b09b12c7f507b8c8b234db207983df2cbaefea5 Mon Sep 17 00:00:00 2001
From: Sagirov Eugeniy <evhenyj.sahyrov@raccoongang.com>
Date: Thu, 3 Oct 2024 14:22:36 +0300
Subject: [PATCH] feat: [FC-0070] Create a new Studio view for rendering whole
 Unit in an iframe

---
 .../contentstore/views/component.py           |  32 +-
 .../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, 1195 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 ba767df78dc9..5b6dd30ab844 100644
--- a/cms/djangoapps/contentstore/views/component.py
+++ b/cms/djangoapps/contentstore/views/component.py
@@ -35,7 +35,8 @@
 
 __all__ = [
     'container_handler',
-    'component_handler'
+    'component_handler',
+    'container_embed_handler',
 ]
 
 log = logging.getLogger(__name__)
@@ -141,6 +142,35 @@ def container_handler(request, usage_key_string):  # pylint: disable=too-many-st
         return HttpResponseBadRequest("Only supports HTML requests")
 
 
+@require_GET
+@login_required
+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 1d5b52905357..426477e23408 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 @@ def test_container_page_with_valid_and_invalid_usage_key_string(self):
             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 7297adae8354..3942c9d68be2 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -1407,6 +1407,12 @@
         ],
         '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 000000000000..1744c884dccc
--- /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 7e1f6de3b652..04a42bf44210 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 000000000000..95774ea74058
--- /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 000000000000..dc7510994228
--- /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 c2ff073b94b1..a008210b25b2 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 000000000000..2fe821e49d5e
--- /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 1c5f191b2728..4082ce446f84 100644
--- a/cms/urls.py
+++ b/cms/urls.py
@@ -123,6 +123,8 @@
             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}?$',