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

[ihor-romaniuk]

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]

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 approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To 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:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If 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 PR

Your 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 @openedx/2u-tnl. Tag them in a comment and let them know that your changes are ready for review.

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:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

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:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[e0d]

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

[codecov]

Codecov Report

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

Project coverage is 90.69%. Comparing base (a9a73ef) to head (20af604).
Report is 81 commits behind head on master.

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]

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

[PKulkoRaccoonGang]

Screen.Recording.2024-04-30.at.19.40.34.mov

[open-craft-grove]

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

[open-craft-grove]

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

[brian-smith-tcril]

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]

No wonder it's slow to load each iframe!

[bradenmacdonald]

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.

[ormsbee]

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

[bradenmacdonald]

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?

[ormsbee]

Putting this here because I'm not sure where else to have this conversation.

Assuming that:

1. Individually rendering each block with its associated assets is too expensive without significant changes (even if we're just downloading the assets needed for each block, and not everything with every block).
2. We still want the iframe to guard against authored JS compromising other authors.

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.

[open-craft-grove]

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[mphilbrick211]

@ihor-romaniuk @arbrandes - hi all! is this still in progress?

[bradenmacdonald]

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

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.

I don't think that's feasible unfortunately.

[mphilbrick211]

[Inform] This PR will remain open as a draft for reference until the community decides the best way to tackle the problem

[open-craft-grove]

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