feat: [FC-0044] Unit page - render xblock component #964

ihor-romaniuk · 2024-04-25T13:45:00Z

Settings

EDX_PLATFORM_REPOSITORY: https://github.com/openedx/edx-platform.git
EDX_PLATFORM_VERSION: master

TUTOR_GROVE_WAFFLE_FLAGS:
  - name: contentstore.new_studio_mfe.use_new_unit_page
    everyone: true

TUTOR_GROVE_MFE_LMS_COMMON_SETTINGS:
  MFE_CONFIG:
    ENABLE_UNIT_PAGE: true

Description

Render xblock components on the Course Unit page.

Issue: openedx/platform-roadmap#321

Testing instructions

Run master devstack.
Start platform make dev.up.lms+cms+frontend-app-course-authoring and make checkout on this branch.
Enable the new Unit page by adding a waffle flag contentstore.new_studio_mfe.use_new_unit_page in the CMS admin panel.
Go to the Course Unit page from the Course Outline page.
Add a new xblock component.

openedx-webhooks · 2024-04-25T13:45:04Z

Thanks for the pull request, @ihor-romaniuk! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

supporting documentation
Open edX discussion forum threads
timeline information ("this must be merged by XX date", and why that is)
partner information ("this is a course on edx.org")
any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

e0d · 2024-04-29T19:43:36Z

@ihor-romaniuk Can you resolve the conflicts and push to facilitate reviewing?

codecov · 2024-04-30T16:06:14Z

Codecov Report

Attention: Patch coverage is 34.21053% with 200 lines in your changes are missing coverage. Please review.

Project coverage is 90.69%. Comparing base (a9a73ef) to head (20af604).

Files	Patch %	Lines
...k-content/iframe-wrapper/tools/iframe-connector.js	0.00%	82 Missing and 14 partials ⚠️
...nit/course-xblock/xblock-content/XBlockContent.jsx	8.88%	41 Missing ⚠️
...ck/xblock-content/iframe-wrapper/iframe-wrapper.js	0.00%	27 Missing and 3 partials ⚠️
src/course-unit/course-xblock/utils.js	0.00%	7 Missing ⚠️
...block/xblock-content/iframe-wrapper/tools/utils.js	36.36%	3 Missing and 4 partials ⚠️
src/course-unit/data/api.js	63.63%	4 Missing ⚠️
src/course-unit/data/slice.js	0.00%	4 Missing ⚠️
src/course-unit/data/thunk.js	80.00%	4 Missing ⚠️
src/course-unit/course-xblock/CourseXBlock.jsx	91.42%	3 Missing ⚠️
src/course-unit/CourseUnit.jsx	77.77%	1 Missing and 1 partial ⚠️
... and 1 more

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.
📢 Have feedback on the report? Share it here.

PKulkoRaccoonGang · 2024-04-30T16:18:47Z

By analogy with similar functionality related to iframes developed in the frontend-app-library-authoring, this code is not tested.

PKulkoRaccoonGang · 2024-04-30T16:42:01Z

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

open-craft-grove · 2024-04-30T17:09:38Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2024-04-30T17:53:08Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

brian-smith-tcril · 2024-04-30T18:59:09Z

Did a little quick testing on the sandbox. Most things look great! The randomized content block appears to be broken though.

Expanding the Randomized Content Block section shows nothing
Clicking the pencil icon to edit the randomized content block section does nothing

arbrandes

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-types to 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.)

arbrandes · 2024-05-01T14:06:36Z

src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js

+      <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>


No wonder it's slow to load each iframe!

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.

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).

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?

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Apr 25, 2024

ihor-romaniuk changed the title ~~Romaniuk/render xblock component~~ feat: [FC-0044] Unit page - render xblock component Apr 25, 2024

ihor-romaniuk marked this pull request as ready for review April 26, 2024 14:11

ihor-romaniuk requested a review from a team as a code owner April 26, 2024 14:11

ihor-romaniuk marked this pull request as draft April 26, 2024 14:11

khudym mentioned this pull request Apr 27, 2024

feat: [FC-0044] Unit page - manage tags xblocks #967

Draft

GlugovGrGlib mentioned this pull request Apr 30, 2024

feat: [Internal RG] Unit page - manage tags xblocks raccoongang/frontend-app-course-authoring#238

Draft

PKulkoRaccoonGang force-pushed the romaniuk/render-xblock-component branch from 3359a58 to 9fe40e0 Compare April 30, 2024 15:53

PKulkoRaccoonGang self-assigned this Apr 30, 2024

PKulkoRaccoonGang added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Apr 30, 2024

ihor-romaniuk marked this pull request as ready for review April 30, 2024 16:31

PKulkoRaccoonGang added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Apr 30, 2024

PKulkoRaccoonGang requested review from arbrandes and KristinAoki April 30, 2024 16:43

PKulkoRaccoonGang force-pushed the romaniuk/render-xblock-component branch from 9fe40e0 to 20af604 Compare April 30, 2024 17:04

arbrandes requested changes May 1, 2024

View reviewed changes

arbrandes mentioned this pull request May 15, 2024

feat: support rendering XBlocks in the Learning MFE [FC-0035] openedx/edx-platform#34161

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [FC-0044] Unit page - render xblock component #964

feat: [FC-0044] Unit page - render xblock component #964

ihor-romaniuk commented Apr 25, 2024 •

edited

openedx-webhooks commented Apr 25, 2024 •

edited

e0d commented Apr 29, 2024

codecov bot commented Apr 30, 2024 •

edited

PKulkoRaccoonGang commented Apr 30, 2024

PKulkoRaccoonGang commented Apr 30, 2024

open-craft-grove commented Apr 30, 2024

open-craft-grove commented Apr 30, 2024

brian-smith-tcril commented Apr 30, 2024

arbrandes left a comment

arbrandes May 1, 2024

bradenmacdonald May 1, 2024

ormsbee May 1, 2024

bradenmacdonald May 1, 2024

feat: [FC-0044] Unit page - render xblock component #964

Are you sure you want to change the base?

feat: [FC-0044] Unit page - render xblock component #964

Conversation

ihor-romaniuk commented Apr 25, 2024 • edited

Description

Testing instructions

openedx-webhooks commented Apr 25, 2024 • edited

e0d commented Apr 29, 2024

codecov bot commented Apr 30, 2024 • edited

Codecov Report

PKulkoRaccoonGang commented Apr 30, 2024

PKulkoRaccoonGang commented Apr 30, 2024

open-craft-grove commented Apr 30, 2024

open-craft-grove commented Apr 30, 2024

brian-smith-tcril commented Apr 30, 2024

arbrandes left a comment

Choose a reason for hiding this comment

arbrandes May 1, 2024

Choose a reason for hiding this comment

bradenmacdonald May 1, 2024

Choose a reason for hiding this comment

ormsbee May 1, 2024

Choose a reason for hiding this comment

bradenmacdonald May 1, 2024

Choose a reason for hiding this comment

ihor-romaniuk commented Apr 25, 2024 •

edited

openedx-webhooks commented Apr 25, 2024 •

edited

codecov bot commented Apr 30, 2024 •

edited