feat: preview library block changes in course unit [FC-0062]

[navinkarkera]

Description

Implements: #1464

Depends on:

• feat: [FC-0070] implement move xblock modal #1422
• feat: post message on preview library block changes edx-platform#35861

Supporting information

• Update workflow for library-sourced content (Authoring MFE - Unit Page) #1464
• feat: post message on preview library block changes edx-platform#35861
• Private-ref: FAL-3943

Testing instructions

• Checkout feat: post message on preview library block changes edx-platform#35861
• Enable new course unit mfe page using waffle: contentstore.new_studio_mfe.use_new_unit_page
• Copy any text, video or problem block from v2 library and paste into any course unit.
• Update the block in library and publish the library.
• Go back to course unit when the block was pasted and use the update button in the component header.
• Verify that the preview changes modal should be displayed in the MFE and not inside the iframe.
• Accept or ignore changes and verify the behaviour.

[openedx-webhooks]

Thanks for the pull request, @navinkarkera!

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.

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

[codecov]

Codecov Report

Attention: Patch coverage is 98.92473% with 1 line in your changes missing coverage. Please review.

Please upload report for BASE (master@bc8d59b). Learn more about missing BASE report.
Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
...rc/library-authoring/LibraryBlock/LibraryBlock.tsx	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##             master    #1506   +/-   ##
=========================================
  Coverage          ?   92.90%           
=========================================
  Files             ?     1065           
  Lines             ?    20958           
  Branches          ?     4528           
=========================================
  Hits              ?    19472           
  Misses            ?     1413           
  Partials          ?       73           

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

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[rpenido]

LGTM 👍
Thank you for your work, @navinkarkera! This is working great.
And thanks for the minor refactor while calling the mutations.

• I tested this using the instructions from the PR
• I read through the code
• I checked for accessibility issues
• Includes documentation

Note: It is not related to this PR, but inserting a component (using the add Library Content button) with a static image breaks the image, but pasting doesn't. Updating the XBlock to the last version also breaks the image. I think this was reported somewhere, but I'm not sure.

[rpenido]

Nit: If you change the component title, it will show the original one. How hard is rendering something like OldTitle -> New Title? I'm not sure if we have this information easily available.

[navinkarkera]

@rpenido Nice idea! Done. If the new title is different than the old one, we display it.

[bradenmacdonald]

FYI the test failure will be fixed if you rebase on master.

[ChrisChV]

Looks good. I will wait until #1422 is merged. Only one issue: On my local the modal looks like this:

[navinkarkera]

@ChrisChV That is weird. I tested this on both chrome and firefox based browsers, it looks fine. Can you inspect the gray part and investigate the css (probably the height of the container)?

[ChrisChV]

That is weird. I tested this on both chrome and firefox based browsers, it looks fine. Can you inspect the gray part and investigate the css (probably the height of the container)?

Yes, it is the height in the div that contains the iframe

https://www.loom.com/share/eefa9b90365a432c8f40355a76e22cd4

[rpenido]

I'm experiencing the same issue @navinkarkera. It happens when the modal doesn't fit the screen. You can simulate it, reducing the viewport height.

The isOverflowVisible={false} is not working, and the class is being applied, which is causing it.

[navinkarkera]

The isOverflowVisible={false} is not working, and the class is being applied, which is causing it.

@rpenido @ChrisChV It works, the problem is with modal dialog body. I fixed it by using vh instead of pixels and setting it based on whether the component is loaded inside iframe or not.

MFE course unit:

Legacy course unit:

[rpenido]

Thanks @navinkarkera! This helps a lot, but I think the underlying cause remains here.

[navinkarkera]

@rpenido Yep but changing that to overflow: hidden adds another scroll to the whole body which causes the tabs to scroll up as well. This is actually an issue in paragon itself, the demo has the same issue.

[navinkarkera]

@rpenido @ChrisChV #1422 was merged. We can now merge this if the modal looks fine.