Skip to content

Comments

chore: complete the rewrite for instructor dashboard#1998

Draft
leangseu-edx wants to merge 2 commits intomasterfrom
lk/instructor-dashboard
Draft

chore: complete the rewrite for instructor dashboard#1998
leangseu-edx wants to merge 2 commits intomasterfrom
lk/instructor-dashboard

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