Skip to content

Commit

Permalink
feat: new Studio view for rendering a Unit in an iframe [FC-0070]
Browse files Browse the repository at this point in the history 
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>
  • Loading branch information
@UvgenGen
UvgenGen authored Oct 18, 2024
1 parent 42febb6 commit e4a1e41
Show file tree
Hide file tree
Showing 10 changed files with 1,197 additions and 77 deletions.
34 changes: 33 additions & 1 deletion cms/djangoapps/contentstore/views/component.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
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
Expand All @@ -35,7 +36,8 @@

__all__ = [
'container_handler',
'component_handler'
'component_handler',
'container_embed_handler',
]

log = logging.getLogger(__name__)
Expand Down Expand Up @@ -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.
Expand Down
58 changes: 58 additions & 0 deletions cms/djangoapps/contentstore/views/tests/test_container_page.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
6 changes: 6 additions & 0 deletions cms/envs/common.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
3 changes: 3 additions & 0 deletions cms/static/images/pencil-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 92 additions & 76 deletions cms/static/js/views/pages/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
Expand All @@ -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) {
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -535,48 +536,63 @@ 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();
},

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));
},

Expand Down
Loading

0 comments on commit e4a1e41

Please sign in to comment.