edx-platform icon indicating copy to clipboard operation
edx-platform copied to clipboard

feat: xblock asides view for rendering in an iframe in MFE

Open Anas12091101 opened this issue 1 year ago • 11 comments

Description

This PR allows retrieval of all asides associated with a given xblock usage key and renders them into an HTTP response template page. This capability becomes particularly relevant for utilization within an iframe in the course authoring Micro-Frontend (MFE), which presently lacks support for asides configuration.

For this a django view asides_handler is created which

  • Retrieves the relevant xblock using the usage key provided in the URL.
  • Gathers all the asides having a studio view configured for that specific xblock.
  • Wraps the asides using the wrap_asides method and passes them as a context to the asides.html template.

The wrap_asides method generates an HTML wrapper for each aside, which can be rendered within an HTML template containing information necessary for loading the aside. Subsequently, BackboneJS loads the asides into the wrapper. The xblock itself is rendered in a similar manner.

Note: The approach used in this PR is inspired by the rendering of xblocks in the learning MFE.

Useful information to include:

  • The change in this PR will impact the course author using course-authoring MFE.
  • Screenshots: Screenshot 2024-01-05 at 3 57 27 PM Screenshot 2024-01-05 at 3 59 47 PM

Supporting information

Related Issue https://github.com/openedx/frontend-app-course-authoring/issues/545 MFE PR https://github.com/openedx/frontend-lib-content-components/pull/452

Testing instructions

Please provide detailed step-by-step instructions for testing this change.

  • Login to edx-platform.
  • In Studio, go to the edX Demo Course. Create a new unit which is a multiple choice problem.
  • Configure the rapid response aside for this problem
  • Go to the URL http://localhost:18010/asides/{xblock-usage-key-for-the-problem} and you will see the rapid response aside upon loading completion.

Anas12091101 avatar Jan 09 '24 13:01 Anas12091101

Thanks for the pull request, @Anas12091101!

What's next?

Please work through the following steps to get your changes ready for engineering review:

:radio_button: 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.

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

:radio_button: 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.

:radio_button: Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/wg-maintenance-edx-platform. 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:

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

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

openedx-webhooks avatar Jan 09 '24 13:01 openedx-webhooks

Hi @Anas12091101! Thanks for this contribution! Please let me know if you have any questions regarding submitting a CLA form.

mphilbrick211 avatar Jan 09 '24 16:01 mphilbrick211

@mphilbrick211 Anas should be covered by the MIT Entity agreement. I don't know if you have access, but I've added him to the list at https://docs.google.com/spreadsheets/d/1HEaYDtoBtN-vvloA5UC-4oAHTVGzWbJWYVzYrEwFT4Y/edit#gid=755274227&range=28:28

pdpinch avatar Jan 12 '24 16:01 pdpinch

Hi there @Anas12091101, can we list in the cover letter the PR against the master branch? Thanks!

mariajgrimaldi avatar Jan 22 '24 13:01 mariajgrimaldi

Hi @mariajgrimaldi, I had not created a master PR previously. I have now rebased this PR to be merged into master. Will create a separate PR for quince branch

Anas12091101 avatar Jan 23 '24 14:01 Anas12091101

Hi @Anas12091101! Just following up on this, and flagging that there's a failing check.

mphilbrick211 avatar Mar 20 '24 00:03 mphilbrick211

Hi @mphilbrick211 , all the checks are now successful.

Anas12091101 avatar Mar 21 '24 11:03 Anas12091101

Configure the rapid response aside for this problem

@Anas12091101, do you know if this can this PR be tested with the Thumbs xBlock, which is included in the xBlock SDK?

pdpinch avatar Mar 23 '24 18:03 pdpinch

@pdpinch, this PR can be tested on any XBlock Aside that has a studio_view. However, the Thumbs XBlock Aside doesn't have a studio_view_aside function, so this PR cannot be tested on it.

Anas12091101 avatar Mar 26 '24 09:03 Anas12091101

Hi @Anas12091101 @pdpinch - is this still in progress?

mphilbrick211 avatar Jul 30 '24 19:07 mphilbrick211

Yes, it's still in progress. I'm still trying to find (or create) appropriate documentation for this feature so that it won't be so obscure.

pdpinch avatar Sep 02 '24 14:09 pdpinch