feat: [FC-0070] add events and style for rendering Split xblock in chromeless template

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,38 @@ 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
+    """
+
+    from ..utils import get_container_handler_context
+
+    if 'text/html' in request.META.get('HTTP_ACCEPT', 'text/html'):
+
+        try:
+            usage_key = UsageKey.from_string(usage_key_string)
+        except InvalidKeyError:  # Raise Http404 on invalid 'usage_key_string'
+            raise Http404  # lint-amnesty, pylint: disable=raise-missing-from
+        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:
+                return HttpResponseBadRequest()
+
+            container_handler_context = get_container_handler_context(request, usage_key, course, xblock)
+            return render_to_response('container_chromeless.html', container_handler_context)
+    else:
+        return HttpResponseBadRequest("Only supports HTML requests")
+
+
 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.

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)

cms/envs/common.py

@@ -1418,6 +1418,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 = [

cms/static/js/views/components/add_xblock.js

@@ -41,10 +41,37 @@ function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, Htm
         },
 
         showComponentTemplates: function(event) {
-            var type;
+            var type, parentLocator, model;
             event.preventDefault();
             event.stopPropagation();
+
             type = $(event.currentTarget).data('type');
+            parentLocator = $(event.currentTarget).closest('.xblock[data-usage-id]').data('usage-id');
+            model = this.collection.models.find(function(item) { return item.type === type; }) || {};
+
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'showComponentTemplates',
+                            payload: {
+                                type: type,
+                                parentLocator: parentLocator,
+                                model: {
+                                    type: model.type,
+                                    display_name: model.display_name,
+                                    templates: model.templates,
+                                    support_legend: model.support_legend,
+                                },
+                            }
+                        }, document.referrer
+                    );
+                }
+                return true;
+            } catch (e) {
+                console.error(e);
+            }
+
             this.$('.new-component').slideUp(250);
             this.$('.new-component-' + type).slideDown(250);
             this.$('.new-component-' + type + ' div').focus();
@@ -67,6 +94,7 @@ function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, Htm
                 oldOffset = ViewUtils.getScrollOffset(this.$el);
             event.preventDefault();
             this.closeNewComponent(event);
+
             ViewUtils.runOperationShowingMessage(
                 gettext('Adding'),
                 _.bind(this.options.createComponent, this, saveData, $element)