This PR fixes the anchor tag's position on the page when autoscrolling
is used. Previously, the scroll would move the element to the center of
the page. Now the scroll moves the element to the top of the page. The
only case where the element will not be at the top of the page is when
the element is too close to the bottom of the page and there is not
enough page remaining to force the element to the top.
This fixes a bug where if the learner needs an integrity signature, but
the unit is not graded, neither the honor code panel nor the unit
content would display.
This PR adds a URL hash check to useEffect. Previously the anchor tags
that use jump_to_id would remain at the top of the page. As a result,
users would have to manually scroll to the target location or just read
the full page. Now when the page has a URL hash, it will send the hash
to the listener in the iframe. Using the message listener, it receives
an object with offset in the event.data and the page will scroll to the
location provided by offset. This change will impact the Learner in the
New Experience view.
This PR adds a listener check to messages. Previously the anchor tags that were set to scroll on the page to another element would open the link outside of the iframe and redirect the parent page. As a result, users would have to have to click the back arrow to navigate back to the course and continue the unit. Now when the listener receives an object with offset in the event.data, the page will scroll to the location provided by offset. The offset is only received when a user clicks on an anchor tag in the unit iframe that focuses on another element on the page. This change will impact the Learner.
Jira issue: TNL-8312
Unit titles were being written to the page as <h2> because the old
courseware experience reserved <h1> for wrapping the header logo link.
We've since determined that this is not a best practice, and the new
courseware MFE in this repo no longer uses a <h1> for that purpose, but
the Unit title was never promoted from <h2> to <h1> until this commit.
Course teams have traditionally been permitted to use <h3>-<h6> in their
content. Making this change does mean that there will now be a gap with
some content, where we skip from <h1> to <h3>. For the short term, we
are NOT recommending course teams use <h2>, until we have a better
chance to evaluate whether that heading should remain reserved for
platform-level use.
This component blocks access to graded units when
the user is required to sign the integrity agreement for
the course. Once signed, it will not appear for the course
again.
Set the `allow` attribute of the unit iframe to allow
access to camera, MIDI, location, and encrpyted media.
Access to these features was implicitly allowed in older
browser versions. However, in the current versions of
at least Chromium and Firefox, iframed content must be
explicitly granted the ability to request media access.
This fixes a bug where content requiring microphone
access did not work in the Learning MFE.
TNL-7675
* Rebranding course license
- Fixing horizontal padding
- Setting color to gray 500
- Removing unnecessary a:hover color
- Removing unneeded CSS classes (sequence-footer, course-license, and license-text)
- Removing unnecessary spans
* Removing all usages of theme-color.
* Removing underline from “Help” button in header
* Use outline-primary for user menu button in header.
* Revert text-decoration-none on Help link
This is unnecessary now - it’s fixed at the brand level.
* Rebranding breadcrumbs to be primary-500.
* Set styling for Unit title to h3.
* Setting bookmark button color to primary-500
* Aligning current selection line to be inside dropdown, not outside.
* Adjusting sequence dropdown colors
Gray 700 for non-active units, primary 500 for active unit icon.
* Remove custom btn-outline-light config
We no longer use it in this MFE and the color palette in paragon/the brand has changed anyway.
* Let the stylesheet breathe!
Fixes TNL-7410
This causes LTI modals in courseware to take up the whole screen. It does this by creating a new “dialogClassName” value that we then use to override the default heights/widths of the Bootstrap modal.
We also remove the title of the iframe, which just takes up space and detracts from the LTI content.
The new version of Paragon includes a “dialogClassName” property on Modal which lets us set the modal width to ‘modal-lg’ or ‘modal-sm’ - we’re using the former here.
This is used by LTI blocks configured to launch in a modal window. Instead of opening a modal in our unit iframe, the component will send a message to the parent window (the courseware mfe) requesting it to open its own modal, containing a URL to launch the LTI tool.
* Moving model-store into “generic” sub-directory.
Also adding a README.md to explain what belongs in “generic”
* Moving user-messages into “generic” sub-directory.
* Moving PageLoading into “generic” sub-directory.
* Moving “tabs” module into “generic” sub-directory.
* Moving InstructorToolbar and MasqueradeWidget up to instructor-toolbar.
The masquerade widget is a sub-module of instructor-toolbar.
* Co-locating celebration APIs with celebration utils.
Also adding an ADR about thunk/API naming conventions and making some other areas of the code adhere to it.
* Moving courseware data (thunks, api) into the courseware module.
Note that cousre-home/data/api still uses normalizeBlocks - this should be fixed so it’s not reaching across. Maybe we pull that particular API up top.
This PR includes a few TODOs for things I saw, as well as a tiny bit of whitespace cleanup.
Fixes TNL-7187 - Adds a no-op useLayoutEffect hook to Unit.jsx to prevent the unit iframe from pausing React’s rendering lifecycle. Very strange bug - see comments in that file for more detail.
* Extensive refactor of application data management.
- “course-blocks” and “course-meta” are replaced with “courseware” module. This obscures the difference between the two from the application itself.
- a generic “model-store” module is used to store all course, section, sequence, and unit data in a normalized way, agnostic to the metadata vs. blocks APIs.
- SequenceContainer has been removed, and it’s work is just done in CourseContainer instead.
- UI components are - in general - more responsible for deciding their own behavior during data loading. If they want to show a spinner or nothing, it’s up to their discretion.
- The API layer is responsible for normalizing data into a form the app will want to use, prior to putting it into the model store.
* Organizing into some more sub-modules.
- Bookmarks becomes it’s own module.
- SequenceNavigation becomes another one.
* More modularization of data directories.
- Moving model-store up to the top.
- Moving fetchCourse and fetchSequence up to the top-level data directory, since they’re used by both courseware and outline.
- Moving getBlockCompletion and updateSequencePosition into the courseware/data directory, since they pertain to that page.
* Normalizing on using the word “title”
* Using history.replace instead of history.push
This fixes TNL-7125
* Allowing sub-components to use hooks and redux
This reduces the amount of data we need to pass around, and lets us move some complexity to more natural modules.
* Fixing bug where enrollment alert is shown for undefined isEnrolled
The enrollment alert would inadvertently be shown if a user navigated from the outline to the course. This was because it interpreted an undefined “isEnrolled” flag as false. Instead, we should wait for the isEnrolled flag to be explicitly true or false.
* Organizing modules.
- Renaming “outline” to “course-home”.
- Moving sequence and sequence-navigation modules under the course module.
* Some final application organization and ADR write-ups.
* Final refactoring
- Favoring passing data by ID and looking it up in the store with useModel.
- Moving headers into course-header directory.
* Updating ADRs. Splitting model-store information out into its own ADR.
