Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: complete the rewrite for instructor dashboard #1998

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

leangseu-edx
Copy link
Contributor

@leangseu-edx leangseu-edx commented Jul 27, 2023

TL;DR - Instructor dashboard rewrite with react/paragon

What work?

  • npm run start hot reload the change (still need to refresh the page manually)
  • npm run build with production build
  • all build are working for both lms and studio
  • dynamic loading react component
  • intl should also work

What not work?

What changed?

  • openassessment/xblock/openassessmentblock.py:: _render_react_page that we will use to render react page.
  • It takes 3 arguments page_name, props, on_mount_func
  • page_name the react component/page .jsx that should locate in openassessment/xblock/static/js/src/react/. All of the .jsx file that create here will be parse accordingly.
  • props are the property that will show up in the react component. We definitely need some clean up about how to lint props type later. Right now it is arbitrary.
  • on_mount_func this is require at the moment because I am trying to piggy back on the existing behavior. Once we reimplement everything, we won't need to use this anymore.

How it work?

  • When you invoke return self._render_react_page('oa_base', context_dict, on_mount_func='OpenAssessmentBlock')
  • The method will use openassessment/templates/openassessmentblock/react_template.html as the template.
  • And openassessment/xblock/static/js/src/react_base.js as default javascript file.
  • Then RenderReact will import page openassessment/xblock/static/js/src/react/oa_base.jsx dynamically and render it. (if you look openassessment/xblock/static/js/src/react/oa_base.jsx and openassessment/templates/openassessmentblock/oa_base.html, the file should be almost identical. This will make updating the existing pattern much faster)
  • RenderReact will parse the props correctly will onMount function to run in useEffect. We need this right now because OpenAssessmentBlock is quite complex to rewrite with limited time. But it should be possible in the future.

Reason

  • The reason I go with path openassessment/xblock/static/js/src/react/ because I want to make sure future implementation of react will be simple. No need to worry about intl provider or reactdom rendering.
  • I want to make sure we are not swaying too far from what we already have.

Future?

  • migrate all of the existing .html to .jsx
  • We should architecture the existing pattern a bit more. example: Component vs Page or just all the same. Do we need more entries point than just react_render
  • How can we depreciate or remove opinionated styling from lms and studio that propagate to xblock and overwrite paragon?
instructor-dashboard.mov

chore: add flag to stop override css from lms+studio and allow paragon to work
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant