feat: add experimental feature for direct XBlock rendering [FC-0035]

[Agrendalath]

Description

This PR ports the XBlock iframe wrapper, originally designed for the Library Authoring MFE. Instead of embedding the LMS view in an iframe, this approach queries XBlock v2 API to get the fragment's HTML and resources, then it assembles a tag with all necessary assets and then finally puts ready HTML markup in an iframe.

This is an experimental approach that will need lots of improvements to reach the feature parity with the old view. Some known bugs/missing features:

• The "Staff Info" and "Submission History" buttons are missing.
• Video transcriptions are missing.
• ORA2 does not work.
• The .inline-discussion-thread-container is not rendered in Discussion XBlocks. As they had been replaced by the Discussions sidebar, fixing this might not be necessary.
• XBlock handlers (e.g., submitting the solution in CAPA blocks) do not work inside the Library Content Block. Given that these blocks are meant to be replaced by the openedx-learning, fixing this might not be necessary.

Supporting information

Required backend changes: openedx/edx-platform#34161.

Testing instructions

1. Use the branch from feat: support rendering XBlocks in the Learning MFE [FC-0035] edx-platform#34161 for edx-platform.
2. Checkout the branch from this PR.
3. Set RENDER_XBLOCKS_EXPERIMENTAL=true in frontend-app-learning/.env.private.
4. (Optionally) Set RENDER_XBLOCKS_DEFAULT=false in frontend-app-learning/.env.private.
5. Go through a course.

Deadline

"None"

Other information

• https://github.com/aximcollaborative/funded-contributions/issues/15
• Private-ref: BB-7872

[openedx-webhooks]

Thanks for the pull request, @Agrendalath! 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.

[codecov]

Codecov Report

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

Project coverage is 88.38%. Comparing base (55e2332) to head (d424869).
Report is 37 commits behind head on master.

Files	Patch %	Lines
src/index.jsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1281      +/-   ##
==========================================
+ Coverage   88.33%   88.38%   +0.04%     
==========================================
  Files         291      292       +1     
  Lines        4929     4957      +28     
  Branches     1242     1249       +7     
==========================================
+ Hits         4354     4381      +27     
- Misses        561      562       +1     
  Partials       14       14              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[navinkarkera]

@Agrendalath This is really interesting. I followed your instructions and tested this locally. The new way seems to be a bit slower as compared to current implementation, if I am not wrong this should improve when xblocks do not use global dependencies.

---

I also noticed some difference in style and missing styles and icons like below:

---

Download handout button in videos is defaulting to current domain (MFE domain) instead of LMS, so it is not working.

This is probably a general issue where if you link any unit using the relative path (jump-id) for example: /jump_to_id/dacc88e550bd48db93899979bff1b086, it defaults to current domain and fails. The current implementation goes to LMS domain by default.

---

Mathjax fails to render after submit when you have a simple number as input, for example:

Raises Uncaught SyntaxError: expected expression, got '<' formula_equation_preview.js:1

---

We probably need to write some tests or ignore the file for now to make sure we don't cause problems for other PRs (coverage failure).

[Agrendalath]

@navinkarkera,

The new way seems to be a bit slower as compared to current implementation, if I am not wrong this should improve when xblocks do not use global dependencies.

Eventually - yes. Once we implement the support for learn_view, we will no longer need to load all dependencies. However, the student_view will be a bit slower since we need to pull the dependencies separately for each XBlock.

The problems you noted seem to be happening in the original version (the one in the frontend-app-library-authoring), so fixing them will be addressed in a follow-up project. We will also need to make some changes to the ReplaceURLService, which will also be addressed later.

[navinkarkera]

@Agrendalath Got it. Looks good to me.

👍

• I tested this: (played around with xblocks locally)
• I read through the code
• I checked for accessibility issues
• Includes documentation

[Agrendalath]

@brian-smith-tcril, would you be able to review this as the CC?

[arbrandes]

I think @ormsbee will want to take a look at the whole thing as part of FC-0035 - particularly the backend PR - first. I can come back here once the concept is approved.

[itsjeyd]

OSPR management note: As of today this PR is still blocked on openedx/edx-platform#34161 (ref).

[Agrendalath]

Closing for now, as mentioned in openedx/edx-platform#34161 (comment).

[openedx-webhooks]

@Agrendalath Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.