feat: [FC-0044] Unit page - render xblock component - #964
Conversation
|
Thanks for the pull request, @ihor-romaniuk! What's next?Please work through the following steps to get your changes ready for engineering review: 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. 🔘 Update the status of your PRYour PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate. 🔘 Let us know that your PR is ready for review:Who will review my changes?This repository is currently maintained by Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:
When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
openedx-webhooks
added
the
open-source-contribution
ihor-romaniuk
changed the title
|
@ihor-romaniuk Can you resolve the conflicts and push to facilitate reviewing? |
3359a58 to
9fe40e0
Compare
peterkulko
added
the
create-sandbox
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #964 +/- ##
==========================================
- Coverage 92.12% 90.69% -1.44%
==========================================
Files 685 692 +7
Lines 12133 12417 +284
Branches 2642 2705 +63
==========================================
+ Hits 11177 11261 +84
- Misses 920 1098 +178
- Partials 36 58 +22 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
By analogy with similar functionality related to iframes developed in the frontend-app-library-authoring, this code is not tested. |
peterkulko
added
create-sandbox
Screen.Recording.2024-04-30.at.19.40.34.mov |
fix: [AXIMST-27] Unit page - change iframe pararm for display xblock content (#151) feat: [AXIMST-52] display unit and xblock render errors (#191) * feat: [AXIMST-52] display unit and xblock render errors * fix: after discussion * fix: after review feat: Course unit - Rendering xblocks in iframes (#201) * feat: added xblock render engine * feat: connected iframe template * feat: CSS and JS transfering * feat: show video xblock * feat: added multiply xblocks * feat: rendering advanced components * fix: add solution for request from within the iframe * feat: iframe height * refactor: code refactoring * fix: fixed platform ajax prefix * refactor: global refactoring * refactor: show LTI xblock * refactor: removed old xblock-content * refactor: code refactoring * refactor: some refactoring * refactor: refactoring * refactor: code refactoring * refactor: refactoring after review --------- Co-authored-by: monteri <lansevermore> feat: [AXIMST-739] added xblock actions (#218) * feat: [AXIMST-739] added xblock actions * refactor: code refactoring * refactor: refactoring after review fix: after cherru-pick fix: after cherry-pick refactor: removed canEdit mock (#224) fix: [AXIMST-655] fixed position of the view-port after loading the unit page (#217) fix: [AXIMST-719] Course unit - Xblock problems (#213) * fix: [AXIMST-719] fixed xblock problems * fix: added asset and static replacer * feat: added style extractor * refactor: code refactoring * refactor: after review fix: [AXIMST-718] Course unit - Created logic for getting CSRF token (#226) * fix: created logic for getting csrf token * fix: usage of csrfTokenData * refactor: code refactoring --------- Co-authored-by: monteri <lansevermore> fix: [AXIMST-745] added studioBaseUrl for static paths (#228) refactor: [AXIMST-746] Unit page performance refactoring (#229) Co-authored-by: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local> fix: [AXIMST-785] fixed discard logic (#232) feat: [AXIMST-800] Course unit - Added Collapse and Expand all buttons for xblocks (#234) * feat: [AXIMST-800] added Collapse and Expand all buttons for xblocks * feat: added tests refactor: code refactoring
9fe40e0 to
20af604
Compare
|
Sandbox deployment successful 🚀 |
|
Sandbox deployment successful 🚀 |
|
Did a little quick testing on the sandbox. Most things look great! The randomized content block appears to be broken though.
|
arbrandes
left a comment
arbrandes
left a comment
There was a problem hiding this comment.
I have a couple of minor problems with this, and a really big one. Let's start with the small ones:
- Even though rendering mostly works in the sandbox, it doesn't seem to work in Tutor dev mode: we'd need to investigate why that is
- We're getting a bunch of ugly console errors (from
prop-typesto invalid DOM components): if we were to merge this, I'd ask all of them to be fixed first, whether they were introduced by this PR or not
And the big one: there is a major architectural challenge with relying on the backend to render XBlocks. One that frontend-app-library-authoring has always suffered from: it's buggy and slow. All it takes is one look at iframe-wrapper.js to understand why. We did our best, here and in Library Authoring, to replicate the environment that XBlock frontend code expects, but:
- We have to replicate the whole shebang (and it's a large one) independently for each rendered block. There's no way this will ever be performant enough for production use, and by collapsing them all by default we're just using bad engineering as an excuse for bad UX, which is the worst kind of UX crime
- The required shimming is so complicated that it's bound to fail for some XBlock types; we will be forever chasing down these not-quite-edge cases.
Which is all to say: we need to pivot. Even if we merge this and don't enable it by default, what value will there be in letting people try something that we know isn't going to work in the future anyway?
So, as far as the unit page is concerned: is there a way we can let the backend render all blocks in a unit, and we just display the result "chromelessly" in a single iframe per unit? What would happen with the so-called "new editors" when launched from within the iframe?
(As far as rethinking the architecture, we're simply going to have to gather our best heads and figure out a sane future for XBlocks in a split frontend/backend world. We already started, but we need to take it forward.)
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/src/jquery.immediateDescendents.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/xblock/core.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/xblock/runtime.v1.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/xblock/resource/drag-and-drop-v2/public/js/vendor/virtual-dom-1.3.0.min.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/xblock/resource/drag-and-drop-v2/public/js/drag_and_drop.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/xblock/resource/drag-and-drop-v2/public/js/translations/en/text.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/src/utility.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/src/logger.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/jquery-migrate.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/underscore.string.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/backbone.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/edx-ui-toolkit/js/utils/string-utils.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/edx-ui-toolkit/js/utils/html-utils.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/cms/js/require-config.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/js/factories/context_course.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/js/sock.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/js/factories/container.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/debug_toolbar/js/toolbar.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/url.min.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/URI.min.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/models/xblock_info.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/xblock.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/utils/xblock_utils.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/utils/view_utils.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/module.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/baseview.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback_notification.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback_prompt.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/handle_iframe_binding.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/templates.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/requirejs/text.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/xblock/resource/split_test/public/js/split_test_author_view.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/WordCloudBlockDisplay.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/xblock/resource/library_content/public/js/library_content_edit.js"></script> | ||
| <script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/HtmlBlockDisplay.js"></script> | ||
| <script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js"></script> | ||
| <script type="text/javascript" src="https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js"></script> |
There was a problem hiding this comment.
No wonder it's slow to load each iframe!
There was a problem hiding this comment.
Surely not all of these are required. e.g. Three of them are just for drag-and-drop-v2 and definitely not used by any other XBlocks.
There was a problem hiding this comment.
Right. The frontend would have to make a request to the backend to ask it which JS files are needed for a given XBlock (or XBlock type).
There was a problem hiding this comment.
I thought that when the backend renders the XBlock, it will include the "common" JS plus whatever JS that specific XBlock has requested (e.g. virtual-dom for drag and drop). This is still mostly being rendered by the backend right?
|
Putting this here because I'm not sure where else to have this conversation. Assuming that:
What if we render the entire Unit as one thing on the backend, iframe that in, but make it so that the UX pieces (e.g. the Edit button) post messages that the parent course authoring MFE listens for? Almost all the UIs spawn modals these days. There should be very little UX logic we'd have to encode into the Unit rendering. In fact, we might be able to eventually replace the "Preview" button functionality with something more inline in the Unit. Another fancier thing that I'm not sure about the feasibility of is having the Unit render, but have it leave blank divs and report the locations of those to the MFE so that the MFE can create appropriate overlays with title and edit UX. The goal in both cases would be to leave XBlock rendering more or less as-is, but provide just enough of a shim to allow all the UX complexity to be implemented on the MFE side. |
|
Sandbox deployment failed 💥 |
|
@ihor-romaniuk @arbrandes - hi all! is this still in progress? |
|
@ormsbee That's pretty much what we're already doing for the learner MFE right? It's possible to take that approach for now, though I think it's far from ideal. One example challenge is the tags: each XBlock shows how many tags it has, and if everything's in the MFE, that tag count gets updated instantly whenever you make any edits to the tags. But if we are rendering the whole unit on the backend, we have to refresh the whole unit view anytime the user makes changes to any tags. Not a big deal but it's slower and uglier (flash of reloading the whole thing) than it should be. But perhaps this is fine for the short term, and for long term we could plan for something like my proposal to simplify rendering of most XBlocks to the point where we can easily render them in the MFE independently.
I don't think that's feasible unfortunately. |
|
[Inform] This PR will remain open as a draft for reference until the community decides the best way to tackle the problem |
|
Sandbox deployment successful 🚀 |
github-project-automation
Bot
moved this from Waiting on Author
to Done
in Contributions
10 participants
Settings
Description
Render xblock components on the Course Unit page.
Issue: openedx/platform-roadmap#321
Testing instructions