This change makes it possible to use the latest LMS_BASE_API
if it was changed because of dynamic config API, which is the
default case of tutor.
This changes closes openedx/wg-build-test-release/issues/270
Fixes that are simlar to this
- gradebook openedx/frontend-app-gradebook/pull/290
- course authoring openedx/frontend-app-course-authoring/pull/389
Right now we log nothing to the logging service when a unit iframe fails to load. The ErrorPage that’s shown isn’t using the ErrorBoundary, so we had no indication that something went wrong. This solves the problem closer to the source where the error originates.
This is an experimental off-by-defualt feature for moving the translation files ouside the repos.
Run `OPENEDX_ATLAS_PULL=true make translations` to use atlas to pull translations instead of transifex.
Refs: FC-12 OEP-58
The .github/workflows/add-depr-ticket-to-depr-board.yml workflow is missing or needs an update to stay in
sync with the current standard for this workflow as defined in the
`.github` repo of the `openedx` GitHub org.
The .github/workflows/add-remove-label-on-comment.yml workflow is missing or needs an update to stay in
sync with the current standard for this workflow as defined in the
`.github` repo of the `openedx` GitHub org.
The .github/workflows/self-assign-issue.yml workflow is missing or needs an update to stay in
sync with the current standard for this workflow as defined in the
`.github` repo of the `openedx` GitHub org.
Fix the first section celebration modal showing logic.
On Nutmeg+ it's shown only after the page reload or after going directly
to the second section from the course home. Going through the course
with the Next/Previous buttons has no effect (which worked on Maple).
Notes:
- the weekly goal has the same showing logic, but I assume that is
correct behavior so no changes are added for it in this commit.
- showing a celebration modal for the first section completion when
going directly to the first unit of the second section seems to be a bug
(reproduces on Maple too)
* feat: added cron github action to auto update brwoserlist DB periodically
* refactor: used a shared script to update broswerslist DB, create PR and automerge it
* chore: ignore eslint issues during frontend-build v9 -> v12 upgrade
* chore: add comment to .eslintrc.js file
* chore: update frontend-build
* chore: update test and remove a few unit tests
Co-authored-by: Leangseu Kim <lkim@edx.org>
This fix does fixes the url links by getting them from the state
simliar to how tabs navigation gets them.
This would allow it work for PUBLIC_PATH is not '/', i.e. in
tutor.
This was reported in openedx/build-test-release-wg/issues/222
Currently expiring soon is displayed 28 days before expiration
and forever afterwards. Adds an actual expired state for after.
Also clarifies the expring soon message which assumed other course,
that was not necessarily true.
Also updates the take action lines when you do not have valid
onboarding to make sure they appear for everything not currently valid
or in process, and updates the submitted process lines to not appear
for expired statuses.
They've both been removed from the LMS now. It would be harmless
to keep support for them in place, but it's pointless because
any redirects to the LMS will just come right back to us.
AA-799
* fix: [MICROBA-1769] Cert status before course end
Right now, learners who are nonpassing are able to view information
about thier certificates early at the course end screen and progress
pages. This is because we show messaging around the nonpassing state in
some cases before a course ends and certificates are available. This can
also lead to cases where grades are not finalized and students who may
be passing see a scary nonpassing message instead.
This change makes it so during the course exit, a student who finishes a
course before the course is over will see the celebration screen
regardless of passing status. Once the course is over (or if
certificates are available immediately), and they are
still not passing, they will see the nonpassing messaging. The same
change was made for the certificate status alert in the progress tab.
* feat: add discussions tab
Adds code to load the discussions MFE in an iframe in the tab so the user isn't redirected to the LMS.
Adds code for the discussions tab, making it dynamically resize based on contents using a postMessage API.
* feat: update path based on user navigation inside discussions MFE
The discussions MFE will send path change events via the postMessage API so that the learning MFE path can be kept in sync. This will allow reloading a page without having the iframe revert to same path each time.
A previous commit (7f37575) dropped es-check, which dropped
fsevents, which caused our build system (which is still using
npm@6) to fail with an error like `Unsupported platform for
fsevents` when trying to install fsevents through a dependency
(e.g. when installing npm aliases).
I am reintroducing all the package-lock changes from that commit
to get back fsevents in a state where that error does not occur.
I think a longer-term fix would be to instead upgrade our build
system to node16 / npm6. But this is an easy fix for now to unblock
the builds.
Now that we are using node 16, peer dependencies are much more
strict about aligning between all of our dependencies.
This PR downgrades react from 17 to 16 (no changes) and upgrades
paragon and frontend-lib-special-exams to all be on the same
page about what peer dependency ranges are valid.
A partner was not happy with messaging for a course whose
students were in the "earned-not-available" state. This aims to make the
messaging more clear.
I had previously made a "fix" to strip all inaccessible sequences
from the learning sequence outline hierarachy, as a way to filter
out unreleased sequences. See commit d1f19a9.
But that was too big a hammer and stripped a lot of released-but-
inaccessible sequences too (e.g. prerequisites).
So now, we adopt a more nuanced approach and explicitly just filter
out sequences that are both inaccessible AND unreleased.
AA-1219
Remove redundant fields from courseware API. These are all found in courseHome:
- number
- org
- originalUserIsStaff
- isStaff
- verifiedMode
- isMasquerading (virtual field from isStaff and originalUserIsStaff)
Rather than recompute it ourselves. Now that the backend is fixed
to consider only visible grades for the course grade, we don't need
to try to work around its logic (which is more accurate/consistent
in general).
AA-1217
Adds an alert to the courseware if the section is an Entrance Exam. Also
adds a listener to reload the page upon receiving a message from the LMS
indicating the user has now passed the exam.
Commit also contains misc. clean up for i18n messages switching to variable names.
Courseware and courseHome both provide tabs to the mfe.
This PR unifies the calls so that tab descriptions are only fetched from courseHome metadata
Remove jest-chain dependencies to make test errors more usable.
Also, drop our specific testing-library/dom dependency. We can
get it transitively though testing-library/react, and they are
coupled closely enough that we don't want them out of lockstep
anyway.
Thus, this commit also updates testing-library/dom to 8.x,
because that's what testing-library/react 12.x needs.
A collection of edx-owned npm updates. These required an actual
code change of using our own svg rather than directly loading an
svg from paragon, because paragon has its own svgo config that
can potentially conflict with our version of svgo - as it does
when we update frontend-build.
And with the latest versions of frontend-build, we can now use
the latest versions of paragon.
Header and footer updates thrown in for free.
* fix: [AA-1206] resolve access APIs
As part of eliminating redundant fields course_access was removed from
the Courseware metadata API. There are some differences between the
two APIs - courseware returned an error if the course had flags
preventing it from being loaded in the MFE, and courseHome had a
second field, can_load_courseware, that returned a boolean.
This fix unifies the handling of the access fields to behave consistently.
This was causing some errors ever since we started using the ref
in an event handler - I'm not entirely sure why the ref stops
being valid, unless it's a lifecycle thing. But anyway, this
seems to stop the error in testing.
Transifex is sunsetting anything below v3 later this year. Let's
get ahead of our scripts unexpectedly failing.
- Switch 'reactifex' dev dep to our maintained fork at
'@edx/reactifex' (it has an older released version number,
but it's still maintained unlike the original)
- Update Makefile commands for new v3 transifex API
No change on our end, this is just to get us as up-to-date as
possible.
This is the latest version of paragon we probably want to use as
long as we still claim to support IE11 via browserlist. We start
getting warnings about grid-auto-rows not being supported in IE11
beginning in paragon 19.4.0 with its new SelectableBox component.
To update our browerlist to drop IE11, we'll need to update our
node version. Which is in progress elsewhere. But for this series
of commits, I've gotten as far as I can / want to with paragon.
Adapt to the big <Card> redesign.
Also, as part of 19.0.0, the shadow variables in paragon got
marked as !default, letting the theme override them. This would
normally be fine and good. But the edx.org theme has a dramatically
larger shadow set. And a lot of our cards and card-like components
were designed with a smaller shadow in mind. So I added a new
raised-card custom css class to keep as many cards looking the same.
Notably, I cannot fix the data tables on the Progress tab. So those
might have a larger shadow with this change, but that's unavoidable
and presumably the intent of the edx.org theme authors.
- Drop our custom breakpoints (identical to paragon's)
- Drop our custom useWindowSize (and adapt to paragon's version
not providing a size initially at component mount)
- Drop our dependency on react-responsive
- Drop our dependency on react-break
Before, for sections, it would link you to the chapter which would
cause a JS error since the sequence endpoint expects sequentials.
This updates to now link to the first subsection within a section when
you hit the section breadcrumb
- Assume that Learning Sequences is available (waffle has been
removed)
- Stop calling course blocks API, which provided mostly duplicated
information now.
- Refactor a bit to avoid needing to globally know which units
exist in sequences. That is now provided just-in-time for only
the current sequence.
- Add /first and /last URLs that you can use instead of unit IDs
in URL paths, in service of the above point.
AA-1040
AA-1153
Pact is a testing library. It is not used in to run the
Learning MFE application. Therefore, it belongs in the
devDependencies section of package.json, not the
dependencies section.
This is the first step toward clearing out the redundant metadata from the
coursewareMetadata and getting it from a common source - the courseHomeMetadata.
remove username from coursewareMetadata
Remove courseAccess from coursewareMetadata.
Fix all unit tests
Modify classes that use metadataModel to use courseHomeMetadata for common data.
metadataModel still exists as a mechanism to distinguish if a component is under
courseware or courseHome, and it will be renamed or removed in a later refactor.
The logic to show the modal is controlled by the backend.
Displays the modal only in courseware the first time the learner
hits their weekly learning goal. After viewing the goal, the
database row is updated to not show the modal again.
Also updates first section celebration to use the StandardModal
component as the Modal component has been deprecated.
* fix: [AA-922] remove deprecated goals feature
While the new Weekly Learning Goals were being rolled out, the previous goal setting feature still existed behind a waffle flag.
The Weekly Learning Goals now become the one and only learning goal feature. It is managed behind the course_experience.enable_course_goals flag
- Remove original Goals panel and related components
- Remove references to weeklyLearningGoalEnabled Waffle flag
Learning Sequences (LS) don't need to edit unit blocks at all.
It's not their data and the stitching code didn't have all the
safety guards that the course block normalizer does in api.js.
This fixes an issue with degenerate course layouts (like problems
as direct children of sequences) when LS is enabled. It was trying
to stitch units and sequences together but failing to account for
unitIds that aren't actual units.
Which is technically still supported by the platform, though not
possible in Studio. We could try to do something smarter here, but
that's not LS's job - it should just trust that the unit data is
correctly normalized already. That unit loading code will
eventually move to the sequence metadata anyway (ideally) and LS
won't touch units at all.
AA-1162
if the user is masquerading as a specific learner, then dismiss the modal and do not post back and save the Honor Code signature
Co-authored-by: Simon Chen <schen@edX-C02FW0GUML85.local>
Make sure to always include the sequence ID when changing the URL
from the jump nav dropdown. We got the correct place eventually
anyway, but this avoids some API requests that we know will fail.
AA-1111
fix: [AA-1087] defer goals widget for proctoring
- pause showing goals widget while proctor info panel awaits callback.
- Implement tests to check that goals show up when
proctoring does not
- small refactoring of LearningGoalButton to eliminate test warnings
* fix: [AA-1044] add missing h2 for screenreaders
- Add placeholder h2 tag with message indicating reserve for future use
- internationalize placeholder text
When normalizing learning sequences, skip inaccessible sequences
and also skip sections with only inaccessible sequences.
This both imitates the legacy course block behavior and also
avoids a failure when merging course block data with LS data
when they disagree about which sequences exist.
This reverts commit f93519f675.
The original fix may have been working after all and a bogus
test by me using a staff account made me think the discount was
not being offered. Reverting the emergency fix and going to test
the original fix again.
It doesn't seem to be working - instead never calling ecommerce and
always showing the normal non-discount version of the streak modal.
Going to investigate later, but this is just a quick shutoff for
now.
In an attempt to debug some odd LMS errors (which would happen if
you loaded an MFE page with spaces instead of plus signs), this
commit notices page requests with spaces in the course key and
switches it out for plus signs, logging the incident.
* feat: [AA-906] UI for WeeklyLearningGoals
Add component to OutlineTab for selecting Weekly Learning Goals
Move start button to before course outline, and put in card with Call to action.
Unit tests
Implement temporary a11y feedback
add react-responsive as a dependency
Everything except for the start/resume button move is behind a waffle flag: course_goals.number_of_days_goals
* [feat] MICROBA-1523 Add notices redirect to learning MFE
To support the notices plugin on platform, this adds a redirect to the
course home page. If a user lands on that page and has not acknowledged
a notice, the user will be redirected to notice instead of the course
home.
In order to finish off TNL-7107 I needed to meet the acceptance criteria: When learners or educators select a section dropdown item they are taken to the first subsection within that section that is not completed by default. If all subsections are completed they should be taken to the first(subsection) in that section.
This reimagining of Jumpnav does that by lazy loading in the menuItem's destinations and routing the user using React-Router.
In order to finish off TNL-7107 I needed to meet the acceptance criteria: When learners or educators select a section dropdown item they are taken to the first subsection within that section that is not completed by default. If all subsections are completed they should be taken to the first(subsection) in that section.
This reimagining of Jumpnav does that by lazy loading in the menuItem's destinations and routing the user using React-Router.
This is a test, before making a more proper fix in frontend-build.
But I'd like to confirm this fixes some issues we've seen with
newrelic metrics.
AA-1015
Enable faster movement through the course content for learners and course instructors familiar with their course structure using jump navigation selectors in dropdown menus that augment our existing breadcrumbs in the learner sequence experience. When learners/instructors click on sections or subsections these menus are revealed and can be selected to jump to this part of the course.
Implemented using paragon's Selectmenu component, and data from the learning_sequences API.
Note: as the L_S api does not yet have completion data, we are holding off on accepting the completion ACs.
Smoke testing and QA testing will be required, as this feature is prominent in the learner experience.
The feature is presently only rolled out on stage, but will FF to roll out to instructors on test soon.
Normally, these sequences are skipped. But if the user manually
goes to the section, they should be notified why they can't access
it. That can easily happen if they bookmarked the page or something.
AA-1000
Describing the removal of calls to Course Blocks API for courseware
rendering, how those responsibilities would be split, and the motivation
for doing so. TNL-7326
[MST-746](https://openedx.atlassian.net/browse/MST-746)
The ProctoringInfoPanel displays information in a learner's course outline about the state of the learner's onboarding. It displays a link to navigate the learner to the onboarding exam if it is available. If the onboarding exam is not yet released, it displays information about the release date. This code changes adds an "Onboarding Past Due" message to the link if the onboarding is past due, as determined by a call to the LMS onboarding endpoint.
- Remove Jira tag from StreakCelebrationCouponEnabled prop
- Remove "experiment" from streak discount vars
- Cleaned up warning in unit test
- Added mock function for closeStreakCelebration
- Set End Date to 2 weeks from current date
- Updated unit tests
- Fixed naming issues
- Added official coupon code
- Cast isStreakCelebrationOpen to boolean
Co-authored-by: cdeery <cdeery@edx.edu>
URL format: /goal-unsubscribe/<uuid-token>
This is designed to be used in the new course goals feature, where
emails will be sent to learners and those emails will include a
link to this landing page, as an unsubscribe link.
Also, update calls to the LMS course home API to not include the
/v1/ fragment anymore, as we're moving to an unversioned API.
AA-907
* chore(deps): update dependency @edx/frontend-build to v8
* fix: install the util package, webpack5 no longer polyfills it
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Michael Terry <mterry@edx.org>
* chore(deps): update dependency husky to v7
* fix: migrate config from husky4 to husky7
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Michael Terry <mterry@edx.org>
Right To Left (RTL) languages need to reverse the
direction of the icons in navigation.
This fix corrects the arrows in UnitNavigation.jsx,
which were missed in the previous checkin.
Fixes: AA-891
Co-authored-by: cdeery <cdeery@edx.edu>
These redirects are already in place for the courseware, and will
redirect to the outline page, or the dashboard, or wherever, based
on the type of access error (unenrolled, access expired, survey
needed, etc).
This commit stops the course home tabs from paying attention to the
401 error messages coming from the backend - course_access in the
metadata API handles that now.
This commit also changes our useModel hook to more gracefully handle
not being able to find the model - it is a valid case we want to
allow (still will cause problems if you actually try to use the data,
but will at least provide an object you can inspect).
For performance and long term simplification reasons, we want to take
the work currently done by the Course Blocks API and split it up between
the Learning Sequences API (course outline) and Sequence Metadata API
(details about the Units in a Sequence). This will also make it easier
to later support different kinds of Sequences, where we might not know
all the details about it at the time we load the course-wide outline
data.
This starts moving over the responsibility for the high level outline
and metadata to Learning Sequences. It requires that the waffle flag
"learning_sequences.use_for_outlines" be active in the LMS. If that flag
is not active, the Learning Sequences API call will return a 403 error,
and this code will fall back to the older behavior.
Some data could not be shifted over yet. Namely:
* Sequence legacy URL is not currently output by the Learning Sequences
API. This is simple to add, but I don't know if there's any point in
adding it now that the Courseware MFE is functional for timed exams.
* Unit metadata was not completely shifted over to the Sequence Metadata
API because doing so would cause blocking requests and would cause a
noticeable performance regression. This should not be moved over until
the Sequence Metadata API can be made more performant.
* Effort Estimation currently relies on content introspection of the
underlying content in a way that the Learning Sequences API does not
support.
This is the last of a handful of PRs in support of TNL-8330.
We are sticking with the sequence version, and abandoning the section
version. This commit also marks the strings for translation, as it
is a real feature now, not just an experiment.
AA-659
The courseware was properly reading the access errors and
redirecting the user as appropriate (like to the dashboard or
whatever).
This requires a backend change to push the error along.
In https://github.com/edx/edx-platform/pull/28233, the logic was updated
to only return a URL if the content was still accessible to the learner.
This handles the case of the URL being null
[MICROBA-678]
When a certificate is in a unexpected state (i.e. notpassing with a
passing grade) this alert will allow the user to attempt to resolve the
issue on their own. It will run the code that checks the certificates
status. It requires that the course is configured to allow users to
Request Certificates though.
* feat: Timer bar on non-sequence pages
* chore: Update frontend-lib-special-exams version.
Co-authored-by: Viktor Rusakov <vrusakov66@gmail.com>
Co-authored-by: Igor Degtiarov <igor.degtiarov@raccoongang.com>
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.
* [feat] Add ID verification Alert to course home
if a user has a verified seat, but is in the unverified certificate
status state, the certificateStatusAlert will now show a message letting
the learner know they need to verify in order to earn a certificate.
This does not remove the message about the verification deadline in the
right sidebar of the course home.
Removes sequences we shouldn't see by using the Learning Sequences API
(TNL-8377). Depends on https://github.com/edx/edx-platform/pull/27955
It works by adding a call to the Learning Sequences API and (if that
endpoint is enabled, i.e. returns 200 for this user+course), uses the
results of that endpoint to remove sequences from the Course Blocks API
call. Learning Sequences knows how to do things like bubble up the
content group settings of units to sequences for the case where all
units have the same restrictions and the user would see an empty
sequence.
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.
REV-2233: The upsell banner now duplicates the sidebar banner. Removing it in favor of the new implementation on course home, but keeping the masquerade message that shows instructors when a learner lost access to the course.
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.
REV-2233: The upsell banner now duplicates the sidebar banner. Removing it in favor of the new implementation on course home, but keeping the masquerade message that shows instructors when a learner lost access to the course.
This feature will allow users with downloadable PDF certificates to see
the certificate status alert and then access their certificate on the
Course Outline page. This should only show once a learner has earned a
certificate and that certificate is available.
No idea why this would happen honestly - it looks always defined
from the backend, and api.js doesn't transorm it. But we are seeing
JS errors related to it. So trying this as a first pass.
AA-848
statuses
[MICROBA-678]
These changes refactor the CertificateAvailableAlert and add new
features to it to support more status alerts for certificates. It
attempts to do so in an iterative manner so that new/updated alerts can
be included over time.
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.
Ignored errors are sent to New Relic as page actions instead of JS errors,
allowing those errors to still be tracked as occurring but without causing
unnecessary alerts.
Ignored errors are configured per-MFE, *not* globally.
Bump the frontend-platform version to 1.10.2.
Add IGNORED_ERROR_REGEX variable for use in development. The actual
production value will be read from the YAML in edx-internal.
TNL-7924
MST-700. Remove language that says learners with a verified onboarding can take exams. This created confusion for learners who did not realize they must also complete IDV before taking a proctored exam.
They've changed to proper new-style handlers, so the URL also
changed. This will let us get the fix for green checkmarks showing
up as audit users pass FBE units, even though those units aren't
actually complete.
AA-409
Currently, course staff can always view their courses
in the Legacy courseware experience.
With this change, course staff will *not* be able
to view their courses if the New (MFE) courseware
experience has been enabled for them.
This does not affect global staff, and it does not
affect courses that are still running in the Legacy
experience.
Adds a new parameter returned by the course metadata API
used by the courseware MFE to determine if the button to
show legacy experience should be displayed or not.
TNL-8203
Our current version on react-intl doesn't support hourCycle
anyway and after speaking to product, we feel comfortable with
letting it default based on locale.
We had a bug reported where learners were seeing a due date like
March 24, 24:59 instead of March 25, 00:59. This is a bug that only
shows up in Chrome. The hour12 flag overrides the hourCycle flag so
we are just going to swap the two. h23 means a 24 hour format ranging
from 0-23 (there also exists a h24 option which goes from 1-24).
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
for any additional details on the options.
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
Before edx-platform version 19ba691,
only `lms_web_url` was exposed from the course
blocks API. Now that the API also exposes
`legacy_web_url`, we can stop falling back
to `lms_web_url` when `legacy_web_url` is
absent.
TNL-7796
As part of making the new courseware experience the
default for staff, the LMS /jump_to/ links that are
exposed by the Course Blocks API via the `lms_web_url`
field will soon direct users to whichever experience
is active to them (instead of always directing to
the legacy experience & relying on the learner
redirect).
Because of this, the MFE can no longer rely on
`lms_web_url` to land a staff user to the legacy
experience. However, the aformentioned change
will also introduce a `legacy_web_url` field
to the API, which we *can* use for this purpose.
TNL-7796
Valid courseware URLs currently include:
* /course/:courseId
* /course/:courseId/:sequenceId
* /course/:courseId/:sequenceId/:unitId
In this commit we add support for:
* /course/:courseId/:sectionId
* /course/:courseId/:sectionId/:unitId
* /course/:courseId/:unitId
All URL forms still redirect to:
/course/:courseId/:sequenceId/:unitId
See ADR #8 for more context.
All changes:
* refactor: allow courseBlocks factory to build multiple sections
* refactor: make CoursewareContainer tests less brittle & stateful
* feat: handle courseware paths more liberally
* refactor: reorder, rename, & comment redirection functions
TNL-7796
x icon that was added to paragon as part of the streak celebration modal is redundant with the x added to only the first section celebration modal
AA-713
Show learners a celebratory modal if they visit the learning mfe for 3 days in a row. Call edx-platform API to determine if they should see the celebration.
AA-304
If an offer is active for the user, show the discounted price (and
a struck-out original price) on upgrade buttons in the course sock
and outline sidebar.
Also show the discount code and price in the course exit upgrade
screen.
* Add back classes to first purchase offer banner that are used in the REV-1512 optimizely test
* Add notification header with an X to hide the flyover box
This is admittedly the much abridged version, but...
Due to changes at Travis-CI that lead to prohibitively slow build/wait
times, we (edx) decided to switch CI/validation provider to Github
Actions [1].
While we had originally intended to keep the integration available,
following Travis-CI's drop in available open-source credits, it no
longer appears to be a viable option for the community.
As such, and given our already present vendor lock-in at Github,
we recommend using Github Actions for CI/validation in this repo.
However, for those not hosting in the Github ecosystem, you can
configure your testrunner to run `make validate.ci`, for the same
effect; the Github Action is just a wrapper for this call.
- [0] Fixes: TNL-7784
- [1] #276
* 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!
Note: I tried directly invoking `codecov`, but it "couldn't tell" that
it was running in a GA/CI container, so I've opted for using the GA
codecov integration, which does work as expected.
* Update MFE to use the new “brand-openedx” repository.
This will allow the MFE to be re-branded by overriding this default implementation. More detail here:
https://github.com/edx/brand-openedx
* Removing unused frontend-component-header module.
This app doesn’t use frontend-component-header. That it was a dependency is confusing and led me to believe I needed to wait for its rebrand to continue - not so. Removing the unused dependency.
* Adding quick comment describing the structure of gated_content
* Fixing course exit styling
* Changing LinkedIn icon
* fix: fix Instructor toolbar button styling
* Bumping footer, platform, and paragon versions.
* Using configured logo and favicon.
Co-authored-by: Carla Duarte <cduarte@edx.org>
Surprise, surprise.
Not sure how this wasn’t correct. The bug results in the content lock UI showing the name of the current section rather than the prerequisite when describing… the prerequisite.
Due to an unfortunate naming choice, we apparently had _not_ been
sending navigation events to the tracking logs' `/track` backend, but
just to the Segment.io tracking backend.
Note: There are still other portions of this repo _outside_ the learning
sequence (Course Tools, Celebration, etc.) that only send to Segment and
not the tracking logs, though maybe this is by design, those being "new"
events?
Remove some edX-specific branding / links (like support URLs) in
favor of values from configuration.
Images (sample certificates) are still branded for now. We can get
them later.
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.
Specifically, a "I visited this page" event, with information on
which variant was seen. And "I clicked this button" events, for
our various calls to action.
- Adds a non-passing cert learner course exit screen
- Moves all the logic about what course-exit mode we're in into
a utility method in the course-exit folder
- Moves all the logic about how the 'Next' button should read into
a utility method in the course-exit folder
If a sequence has its isTimeLimited flag set, then show a spinner instead of the sequence content. The CoursewareContainer, meanwhile, will be attempting to redirect to the legacy experience.
This prevents a situation where we temporarily show proctored/special exam content to users before their exam starts.
The course blocks API accepts a value of ‘special_exam_info’ in its requested_fields parameter. This value is necessary to include special exam sequences for non-staff users. Special exams include timed, proctored, and practice proctored exams.
The CourseExit page uses the TabContainer because it seems to be a better solution
than adding it into the paths for the CoursewareContainer, despite the CoursewareContainer
already doing the correct fetch. The reason for this is because within the
CoursewareContainer, it would still be necessary to check for the /course-exit path (due
to the CoursewareContainer trying to greedily match sequenceId (read: it will try and
look up 'course-exit' as a sequence)). That effectively defeats the purpose of using the
routing in the first place so instead, we place it in a TabContainer.
The InstructorToolbar didMount logic became necessary once we had a page (CourseExit) that does a redirect on a quick exit.
As a result, it unmouunts the InstructorToolbar (which will be remounted by the new component),
but the InstructorToolbar's MasqueradeWidget has an outgoing request. Since it is unmounted
during that time, it raises an error about a potential memory leak. By stopping the render
when the InstructorToolbar is unmounted, we avoid the memory leak.
* AA-196 course celebration cert
* AA-196: Course Celebration for passing Verified Learners
Co-authored-by: Dillon Dumesnil <ddumesnil@edx.org>
Note: This PR is being merged in somewhat incomplete as we decided to split off the work into a couple of other tickets. For example, the UI styling is not complete and I plan to also take another look at the routing. These code paths are not in use yet as the `courseExitPageIsActive` will always be False.
* Prepare some initial test refactoring
- Expand test data for course home metadata
- Don't test courseware metadata in course-home redux tests
This is Dillon's work.
* AA-265: Add more tests for the dates tab
Add an ADR to talk about how we want to test in this repo.
And refactor the fake dates tab data used for debugging to also be
used for tests.
- Changed it to use its own normalizeBlocks call (and stop sharing
with courseware)
- Add green checkmarks for complete blocks
- Added icons, descriptions, and due dates for subsections
- Updated look of subsections to match LMS a bit more
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.
* AA-305: Update Masquerade Widget UI
This will start showing the user being masqueraded as in the Toolbar
and will show any error messages next to the Toolbar as well.
* Further masquerade widget fixes
Co-authored-by: Dillon Dumesnil <ddumesnil@edx.org>
* Updating Dropdown and Button.
* Fixing broken tests and test warnings.
* Remove comment block.
* Using variant=“link” on the Tabs Dropdown.Toggle.
* Fixing some merge conflicts.
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.
to redirect to the current unit’s lmsWebUrl if the MFE is disabled
If we receive an error_code of 'microfrontend_disabled',
go to the equivalent unit in the LMS experience.
Fixes: TNL-7362
Co-authored-by: stvn <stvn@mit.edu>
* Wrap all alert payloads in useMemo to avoid infinite re-rendering
This manifested in production as a browser freeze for any
user who saw the 15%-off-to-upgrade message.
TNL-7400
* fixup! meant to say identity, not equality
We were assuming a prop named unitId existed in CoursewareContainer - it doesn’t. unitId is not in redux. What we do have, is the unitId in the route params - what we refer to as routeUnitId. If we use this instead of the non-existent unitId, then life is good.
I wrote a test (that breaks!) prior to implementing the fix. The fix satisfies the test. 🎉
We want to be able to know if both the original user is a Staff user
as well as if the user being masqueraded as is staff. This updates
to accept both of these fields
* AA-278: Add offer alert to outline
It was previously only used in the courseware. But to match the
LMS, we also want to show it on the outline tab.
* AA-279: Add course expired alert to outline
It was previously only used in the courseware. But to match the
LMS, we also want to show it on the outline tab.
* Bumping axios-mock-adapter version
Thought there was a feature in 1.18.2 that I needed - turns out the feature hasn’t been released yet. Still fine to bump the dependency, though.
* Hiding some warnings about console logging.
* Fixes bugs in CoursewareContainer
Fixes a few bugs in the courseware container:
- Position was not being saved because we weren’t reading “saveUnitPosition” correctly.
- We weren’t calling checkContentRedirect with the right arguments - it was using a non-existent unitId instead of the routeUnitId, meaning we would redirect to the active unit even if a unit was specified in the URL.
Adds tests in CoursewareContainer for various URL and data states.
Now explicitly tests:
- Exam redirects
- The resume block method when it has, and doesn’t have, a block to resume.
- The content redirect when a unit isn’t present on the URL (uses sequence.position)
- Loading a specific unit (not the first of a sequence!) by URL.
Updated some of the factories to be more flexible/allow multiple units.
Tracking analytics for onClick events in the Course Tool widget.
Extra: Fixed intl error in the Course Dates widget.
Co-authored-by: Carla Duarte <cduarte@edx.org>
* fix: Use reselect’s defaultMemoize instead of lodash.memoize
Lodash memoize doesn’t examine all parameters when deciding to memoize, apparently, meaning it doesn’t re-call the function if any parameter except the first changes.
More here: https://dev.to/nioufe/you-should-not-use-lodash-for-memoization-3441
* Fixing test setup. Improper use of sequenceMetadata factory!
Two problems:
One, we weren’t properly passing the courseId into our sequenceMetadata factories, so it was differing than the one defined in courseMetadata. This didn’t manifest until now because we weren’t using the one from sequenceMetadata until this memoization fix!
Two, I’d updated the options for sequenceMetadata to have a “unitBlocks” option, but didn’t update all the usages of the old “unitBlock” option. This meant it was manually creating its own unit instead of inheriting the one from courseBlocks, resulting in a different ID.
I find it much more legible this way.
Some thoughts… as part of refactoring it, I made some of the redux selectors more formal, and made use of reselect more thoroughly. this resulted in a reduction in re-renders from 16 to 12 on your average page load. It’s also a bit more verbose, accounting for some of the increased line count.
I hadn’t tried it before, but found the memoize method of comparing previous props/state to current props/state to be very, very nice. Much easier than manually comparing props, and much clearer to me than using react hooks’ dependency arrays.
The lack of dependency arrays feels really freeing in general to me. They’ve been such a source of hard-to-track-down bugs, and the hooks linter does not always suggest the right solution for what belongs in and out of the array.
Function names are nice. We had a ton of custom hooks in there so that we could put names to otherwise anonymous bits of functionality.
Also note: this component has a test suite. It passed without any changes. 🥳
We were inconsistently using “position” - a 1-indexed value - in JS arrays which are 0-indexed. We had an existing, normalized property called “activeUnitIndex” which we now use everywhere instead. The value is modified back to 1-indexed before being returned to the server.
* Adding testing-library dependencies, and bumping frontend-build to be compatible with them.
* Adding a function to initialize the redux store
We need to use it in a few places. Seems worth not-repeating, since they can easily get out of sync. In general, tests should only test the parts of the store they care about, as well.
* Adding function to initialize a mock application.
Ultimately I’d like to move this to frontend-platform as an alternative to ‘initialize’ for tests. ‘initialize’ is an async function which complicates matters.
* Using more explicit assertions for courseware reducer fields.
This removes the need for the snapshot file, and ensures our test is more resilient to unrelated changes in the store.
Also added a few more stages of assertions to some of the tests, showing that they have the right values over time.
* Adding a helper to build a simple course blocks response.
We can use this in the courseware data tests, and shortly in the tests for CoursewareContainer.
* Modifying sequenceMetadata factory to allow multiple units.
This will help us test sequence navigation’s behavior more fully by having multiple units in a sequence.
* A little linting and cleanup.
* Adding first round of tests for CoursewareContainer.
Tests loading, sequence navigation/unit rendering, and ‘denied’ states.
Subsequent tests will add tests for handlers.
* Do not redirect when the sequenceId is not valid
That is, if firstSequenceId is null or undefined. This prevents the url
becoming bogus but does cause the course contents display to become stuck
with the loading message.
* Detect invalid sequence when loading
If the course has no sections or the first section has no sub-sections,
then sequence will be null. Before the redirection fix, this would cause an
error, but after, the sequenceStatus never leaves the loading state. Thus,
if still loading and the sequence is null, return the no.content message.
* Check sequenceId instead of sequence
From David Joy:
During initial page load, I expect there's a period of time before the
course blocks API and the sequence metadata API come back where the
sequenceStatus is loading but the sequence is still false, meaning that
we'll see a flash of this 'no content' messaging for a moment before the
data comes in.
If we instead check whether sequenceId is null here, that may give us a
more accurate condition. The sequenceId in redux is only populated when we
begin to request a sequence (fetchSequence thunk). If we have no sequence
ID in the URL route, then fetchSequence never happens and the sequenceId in
redux stays null.
* Fix up some additional errors Piotr found
This fixes errors caused by deleting units or subsections.
* Move test for unit validity to SequenceContent
After further conversation, we decide that
we shouldn't just treat HTML blocks as units.
We've been making the assumption that Verticals
occupy the Unit-level, and we shouldn't break that
assumption for this specific case.
Reverts part of e04f588d1f.
However, the error handling changes remain.
In some cases (user schedule is close to or past the course end),
we don't actually have dates for a course, even if we would normally
have them.
When that happens, let's not show a banner saying we made a
schedule for the learner.
* Add test for fetchCourse
* Add tests for fetchDatesTab, fetchOutlineTab, fetchSequence and resetDeadlines
* Implement fetch tabs tests
* Add fail test case for fetchSequence
* Add success test for fetchSequence
* Add test for resetDeadlines
* Update test group name
* Add empty tests for courseware and bookmarks
* Fix wrong field in saveSequencePosition thunk
* Add tests for courseware data layer
* Temporary commit
* Split tests after rebase
* Revert "Fix wrong field in saveSequencePosition thunk"
This reverts commit 4394d363c58ad929f81e587ce4da2241528494b5.
* Fix test for position
* Move executeThunk into utils
* Add test for all reducers
* Add expect statements for logs
* Remove redundant snapshot tests and add some specific checks
* Polishing
* Remove redundant checks
* Fix bug in normalizer and update test
* Upgrade @edx/frontend-platform dependency
* Utilize MockAuthService instead of manual auth package mocking
* Update tests after breaking changes in master
* Remove redundant snapshot check
Fixes bug where courses with html-type XBlocks as children
of sequences would ignore those children instead of treating them
as units. This caused the app to later just give up and redirect
to the course home in the old experience.
Also, handle that scenario where we have sections/sequences
with children of unexpected block types more gracefully by
logging an error instead of crashing.
TNL-7305
* 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.
- Pulled Course Home specific components into `course-home`
- Created a courseHome reducer (and all necessary data files - api, thunks, slice)
- Removed Course Home logic from Courseware's data files (api, thunks, slice, etc.)
- Renamed Outline Tab URL to end in `/home` rather than `/outline` again (per Product)
Co-authored-by: Carla Duarte <cduarte@edx.org>
* BB-2569: Use faVideo instead of faFilm for video units; Set page title based on section, sequence, and course titles
* Add CourseLicense component with styling
* Reorder the pageTitleBreadCrumbs that are used for setting the page title
* Revert "Add CourseLicense component with styling"
This reverts commit 8d154998de.
* Fix package-lock.json so that only new changes for react-helmet are included
Including upcoming dates and a link to dates tab. Gives user ability to
look at any important upcoming dates for their course and to navigate
to upcoming assignments.
Co-authored-by: Daphne Li-Chen <daphneli-chen@MacBook-Pro.local>
The sequence.lmsWebUrl variable is loaded as part of the course blocks API. The status of that API’s request is stored in courseStatus.
The useEffect hook in useExamRedirect didn’t ensure that courseStatus was equal to “loaded”. This meant that if the sequence loaded first, it might attempt to redirect to sequence.lmsWebUrl even though that variable is still undefined.
When global.location.assign() is given `undefined` as a value, it tacks it onto the end of the URL and calls it a day. After that, we’ve got a badly formed URL.
- Updated the Outline Tab to fetch course blocks from the Outline API.
- Changed naming conventions to more accurately portray the tab naming scheme
(ex. Outline Tab, Dates Tab, etc.)
- Removed logic from `fetchCourses` that was specific to the Outline Tab
The useAlert hook was being given a new payload object every time it was called, defeating any memoization happening inside.
It was also re-calling it’s useEffect hook when alertId changed, which it was changing itself. That’s a no-no.
* Normalizing “courseInfo” back into “course”
Splitting it out denormalizes the data and introduces potential data inconsistencies.
* Name component JSX files with the name of the component.
* Normalizing some module exports/naming.
* Moving alerts into a sub-directory.
* DRYing up alert hook creation into reusable useAlert hook.
* Adding some comments about ‘courses’ hydration.
- Drop mock data, call real API instead
- Call course metadata API for general info, not the dates API
- Mark text as translatable
- Add badges and timeline dots, group same-day items
AA-116
Specifically, make sure that the header, footer, and tabs are all
shared code so that they look the same and don't need to be
redefined as we add more tab pages.
* Commits:
Remove explanatory paragraph
Add new Studio/insights links to InstructorToolbar
Add courseId to InstructorToolbar props
Create new config values for Insights/Studio URLs
Fix missing definition of unitId in InstructorToolbar.props
Set NODE_ENV in the test environment
Fix mismatched test BASE_URL
Cleanup PORT config
TNL-7191 - We didn’t fully protect against sequences with no units. The next/previous buttons now check whether there is a unit ID and construct a URL without if one doesn’t exist. When we load a sequence without units, we now show a message to the user so the page doesn’t look broken.
This should fix intermittent bugs in checking block completions. Prior we were checking the completion only for the first unit loaded in a given sequence no matter the current unit.
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.
* Adding an index.js file for user-messages.
Importing from the module, not its contents.
* Allowing customProps to be passed though AlertList to Alerts.
* UserMessagesProvider can create flash messages.
A flash message is one that will be displayed on the next reload of the page. UserMessagesProvider now provides a “addFlash” function. These messages are stored in localStorage and displayed the next time UserMessagesProvider is mounted, which is generally going to be on the next page refresh.
Once displayed, flash messages are cleared out of localStorage.
* Hooking up Enroll Now button and adding “success” alert.
Success alert is shown as a flash message on next page reload.
* Using ALERT_TYPES constants.
TNL-7171, TNL-7172, TNL-7173, TNL-7174: When a user is denied access to load courseware, redirect them to the appropriate location based upon the error code returned. If the error code is unknown they will be redirected to course home.
TNL-7170
lms_base_url becomes lmsBaseUrl in the app and is then used by the InstructorToolbar to link the user back to the LMS. If it isn’t present, the toolbar hides itself. This puts it back.
- “userHasAccess” becomes “canLoadCourseware”, and is loaded from “can_load_courseware”
- “isStaff” is now loaded from “is_staff” instead of “user_has_staff_access”
Fixes TNL-7175: Redirect to course home if a user is not unenrolled and the course is private.
- Require authentication to use the app while course blocks api requires it
- Gracefully handle course blocks api request failures allowing app to proceed to it redirection logic
Notable changes:
- selectors related to sequences are more resilient to missing models. In the case the course blocks api returns successfully but empty (in this case of enrolled but course not yet started).
- `fetchCourse` thunk handles failures for fetchCourseMeta and fetchCourseBlocks separately using `Promise.allSettled` instead of `Promise.all`
- `denied` is a new `courseStatus`
- Access denied redirect is done using a component at a new route `redirect/course-home/:courseId`
Now handles cases
- User is unauthenticated > redirect to login
- User is authenticated but not enrolled > redirects to lms course home
- When an enrolled user attempts to access courseware before the course start date they will load the sequence (but unable to load the vertical block). This behavior should be fixed in an update to edx-platform
See details in code, but this causes UserMessagesProvider to always use the most “recent” version of its messages and nextId state when its callbacks are called.
This is a separate component because we have no mechanism for passing context/state into these alerts right now, and I’m not sure it’s worth building. Easier to just use different codes for different situations.
TNL-7129
This adds a third clause to our useAccessDeniedRedirect hook, which makes sure the user doesn’t have staff access (instead of normal, enrolled access) prior to redirecting.
As an aside, this redirection approach - irrespective of this PR - is not great. The UI mostly renders prior to this redirect happening. It would be better of this hook returned something that would help prevent the UI from rendering while the redirect is in progress. As it stands, a redirected user will see a flash of the page content prior to being booted. Not wonderful.
* 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.
TNL-7072.
- Refactors some of the css container/content class naming
- Moved UnitNavigation out of the Sequence and into its own component.
- Fixes an issue with course tabs where multi-word titles would wrap text.
TNL-7072 mobile layout updates. Breadcrumbs truncate section and subsection titles with ellipsis. Tabs that would overflow are tucked under a "more" dropdown.
At the end, the “next” button at the bottom of the page is replaced with a friendly message.
This PR also alphabetizes some props for SequenceNavigation and Sequence, as I was adding two new ones - isFirst and isLast.
* refactor: Moving PageLoading up to the top
This way it can be used on both the courseware and outline pages.
* Adding index.js files to data directories, and PropTypes data shapes
- The course-blocks and course-meta data directories now have index files so their exports can be imported from that, rather than reaching into specific files in the directories.
- Also added “shapes” for use in React Components that use PropTypes for the course blocks data structure, and the course metadata data structure.
* Simplifying/refactoring CourseContainer rendering a bit.
* Adding course outline page.
This page is not complete.
- It contains the ‘outline’ itself with links to the Sequences in the course.
- It contains a very basic stab at displaying dates - they’re not even formatted.
- It shows logistration and enrollment alerts for anonymous and unenrolled users.
It does not include any other content in the right-hand sidebar. It also doesn’t include a welcome message, or perhaps any number of other features on the page. This is effectively an initial implementation for discovering how much data we’re missing from our APIs. It should not be used as-is by any means.
The two functions removed here are duplicated (and actually used from) course-blocks/api.js. Think it was just a refactoring oversight from a few weeks ago.
* build: bumping version of frontend-platform
We’re going to need to use the new getLoginRedirectUrl helper.
* Adding custom alerts for anonymous and unenrolled users.
- Anonymous users are prompted to sign in or register.
- Unenrolled users are prompted to enroll.
The alerts themselves are lazy-loaded as necessary, like the ContentLock component.
This PR also adds `customAlerts` to the AlertList, allowing an application to specify custom components to be shown as Alerts for a given alert code.
* refactor: Renaming enrollmentIsActive to isEnrolled
As per review feedback that the former wasn’t clear.
* If the user does not have access to the course, then redirect to the course outline.
In a subsequent PR, if this API call is made on the course outline page in the MFE, we’ll need to be able to prevent the redirect. But that view of the MFE doesn’t exist yet.
* Moving course outline redirect logic into CourseContainer.
This way, depending on the page calling fetchCourseMetadata, we can make an intelligent choice about whether we want to redirect, show a message, etc. By redirecting in the API call handler, then we took that choice away from ourselves.
To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
- Run ``make dev.up.lms``
- Visit http://localhost:2000/course/course-v1:edX+DemoX+Demo_Course to view the demo course. You can replace ``course-v1:edX+DemoX+Demo_Course`` with a different course key.
Local module development
^^^^^^^^^^^^^^^^^^^^^^^^
To develop locally on modules that are installed into this app, you'll need to create a ``module.config.js``
file (which is git-ignored) that defines where to find your local modules, for instance::
module.exports = {
/*
Modules you want to use from local source code. Adding a module here means that when this app
runs its build, it'll resolve the source from peer directories of this app.
moduleName: the name you use to import code from the module.
dir: The relative path to the module's source code.
dist: The sub-directory of the source code where it puts its build artifact. Often "dist", though you
may want to use "src" if the module installs React as a peer/dev dependency.
**See [0009-courseware-api-direction.md](0009-courseware-api-direction.md) for updates!**
## Courseware data loading
Today we have strictly hierarchical courses - a course contains sections, which contain sequences, which contain units, which contain components.
In creating the courseware pages of this app, we needed to choose how often we fetch data from the server. If we fetch it once and try to get the whole course, including all the data we need in its entire hierarchy, then the request will take 30+ seconds and be a horrible UX. If we try to fetch too granularly, we risk making hundreds of calls to the LMS, incuring both request overhead and common server-side processing that needs to occur for each of those requests.
Instead, we've chosen to load data via the following:
- The course blocks API (/api/courses/v2/blocks) for getting the overall structure of the course (limited data on the whole hierarchy)
- The course metadata API (/api/courseware/course) for detailed top-level data, such as dates, enrollment status, info for tabs across the top of the page, etc.
- The sequence metadata API (/api/courseware/sequence) for detailed information on a sequence, such as which unit to display, any banner messages, whether or not the sequence has a prerequisite, if it's an exam, etc.
- The xblock endpoint (http://localhost:18000/xblock/:block_id) which renders HTML for an xBlock by ID, used to render Unit contents. This HTML is loaded into the application via an iFrame.
These APIs aren't perfect for our usage, but they're getting the job done for now. They weren't built for our purposes and thus load more information than we strictly need, and aren't as performant as we'd like. Future milestones of the application may rely on new, more performant APIs (possibly BFFs)
## Unit iframing
We determined, as part of our project discovery, that in order to deliver value to users sooner, we would iframe in content of units. This allowed us to avoid rebuilding the UI for unit/component xblocks in the micro-frontend, which is a daunting task. It also allows existing custom xblocks to continue to work for now, as they wouldn't have to be re-written.
A future iteration of the project may go back and pull the unit rendering into the MFE.
## Strictly hierarchical courses
We've also made the assumption that courses are strictly hierarchical - a given section, sequence, or unit doesn't have multiple parents. This is important, as it allows us to navigate the tree in the client in a deterministic way. If we need to find out who the parent section of a sequence is, there's only one answer to that question.
## Determining which sequences and units to show
The courseware URL scheme:
`/course/:courseId(/:sequenceId(/:unitId))`
Sequence ID and unit ID are optional.
Today, if the URL only specifies the course ID, we need to pick a sequence to show. We do this by picking the first sequence of the course (as dictated by the course blocks API) and update the URL to match. _After_ the URL has been updated, the application will attempt to load that sequence.
Similarly, if the URL doesn't contain a unit ID, we use the `position` field of the sequence to determine which unit we want to display from that sequence. If the position isn't specified in the sequence, we choose the first unit of the sequence. After determining which unit to display, we update the URL to match. After the URL is updated, the application will attempt to load that unit via an iFrame.
_This URL scheme has been expanded upon in
[ADR #8: Liberal courseware path handling](./0008-liberal-courseware-path-handling.md)._
## "Container" components vs. display components
This application makes use of a few "container" components at the top level - CoursewareContainer and CourseHomeContainer.
The point of these containers is to introduce a layer of abstraction between the UI representation of the pages and the way their data was loaded, as described above.
We don't want our Course.jsx component to be intimately aware - for example - that it's data is loaded via two separate APIs that are then merged together. That's not useful information - it just needs to know where it's data is and if it's loaded. Furthermore, this layer of abstraction lets us normalize field names between the various APIs to let our MFE code be more consistent and readable. This normalization is done in the src/data/api.js layer.
## Navigation
Course navigation in a hierarchical course happens primarily via the "sequence navigation". This component lets users navigate to the next and previous unit in the course, and also select specific units within the sequence directly. The next and previous buttons (SequenceNavigation and UnitNavigation) delegate decision making up the tree to CoursewareContainer. This is an intentional separation of concerns which should allow different CoursewareContainer-like components to make different decisions about what it means to go to the "next" or "previous" sequence. This is in support of future course types such as "pathway" courses and adaptive learning sequences. There is no actual code written for these course types, but it felt like a good separation of concerns.
The course home page is not complete as of this writing.
It was added to the MFE as a proof of concept for the Engagement theme's Always Available squad, as they were intending to do some work in the legacy course home page in the LMS, and we wanted to understand whether it would be more easily done in this application.
It uses the same APIs as the courseware page, for the most part. This may not always be the case, but it is for now. Differing API shapes may be faster for both pages.
Because we have a variety of models in this app (course, section, sequence, unit), we use a set of generic 'model store' reducers in redux to manage this data. Once loaded from the APIs, the data is put into the model store by type and by ID, which allows us to quickly access it in the application. Furthermore, any sub-trees of model children (like "items" in the sequence metadata API) are flattened out and stored by ID in the model-store, and their arrays replaced by arrays of IDs. This is a recommended way to store data in redux as documented here:
Different modules of the application maintain individual/lists of IDs that reference data stored in the model store. These are akin to indices in a database, in that they allow you to quickly extract data from the model store without iteration or filtering.
A common pattern when loading data from an API endpoint is to use the model-store's redux actions (addModel, updateModel, etc.) to load the "models" themselves into the model store by ID, and then dispatch another action to save references elsewhere in the redux store to the data that was just added. When adding courses, sequences, etc., to model-store, we also save the courseId and sequenceId in the 'courseware' part of redux. This means the courseware React Components can extract the data from the model-store quickly by using the courseId as a key: `state.models.courses[state.courseware.courseId]`. For an array, it iterates once over the ID list in order to extract the models from model-store. This iteration is done when React components' re-render, and can be done less often through memoization as necessary.
Currently, the majority of the components in the component tree for both Courseware and CourseHome own their own loading state. This means that they're _aware_ of the loading status (loading, loaded, failed) of the resources they depend on, and are expected to adjust their own rendering based on that state.
The alternative is for a given component's parent to be responsible for this logic. Under normal circumstances, if the parents were responsible, it would probably result in simpler code in general. A component could just take for granted that if it's being rendered, all it's data must be ready.
*We think that that approach (giving the parents responsibility) isn't appropriate for this application.*
We expect - in the longer term - that different courses/course staff may switch out component implementations. Use a different form of SequenceNavigation, for instance. Because of this, we didn't want parent components to be too aware of the nature of their children. The children are more self-contained this way, though we sacrifice some simplicity for it.
If, for instance, the Sequence component renders a skeleton of the SequenceNavigation, the look of that skeleton is going to be based on an understanding of how the SequenceNavigation renders itself. If the SequenceNavigation implementation is switched out, that loading code in the Sequence may be wrong/misleading to the user. If we leave the loading logic in the parent, we then have to branch it for all the types of SequenceNavigations that may exist - this violates the Open/Closed principle by forcing us to update our application when we try to make a new extension/implementation of a sub-component (assuming we have a plugin/extension/component replacement framework in place).
By moving the loading logic into the components themselves, the idea is to allow a given component to render as much of itself as it reasonably can - this may mean just a spinner, or it may mean a "skeleton" UI while the resources are loading. The parent doesn't need to be aware of the details.
## Under what circumstances would we reverse this decision?
If we find, in time, that we aren't seeing that "switching out component implementations" is a thing that's happening, then we can probably simplify the application code by giving parents the responsibility of deciding when to render their children, rather than keeping that responsibility with the children themselves.
Because API functions and redux thunks are two parts of a larger process, we've informally settled on some naming conventions for them to help differentiate the type of code we're looking at.
## API Functions
This micro-frontend follows a pattern of naming API functions with a prefix for their HTTP verb.
Examples:
`getCourseBlocks` - The GET request we make to load course blocks data.
`postSequencePosition` - The POST request for saving sequence position.
## Redux Thunks
Meanwhile, we use a different set of verbs for redux thunks to differentiate them from the API functions. For instance, we use the `fetch` prefix for loading data (primarily via GET requests), and `save` for sending data back to the server (primarily via POST or PATCH requests)
Examples:
`fetchCourse` - The thunk for getting course data across several APIs.
`fetchSequence` - The thunk for the process of retrieving sequence data.
`saveSequencePosition` - Wraps the POST request for sending sequence position back to the server.
The verb prefixes for thunks aren't perfect - but they're a little more 'friendly' and semantically meaningful than the HTTP verbs used for APIs. So far we have `fetch`, `save`, `check`, `reset`, etc.
In order to allow for greater flexibility and separation of concerns, we're going to stop using the Course Blocks API for navigational data, and pull that data from the Learning Sequences Outlines API instead. The intention is to give us four distinct layers of courseware that can eventually be composed in different ways:
* Learning Context Metadata
* Learning Context Navigation
* Sequence Navigation
* Unit Rendering
Note that "Learning Context" is a generalization of "Course" that includes other things like Content Libraries, Learning Pathways, and potentially other logical groupings of content.
This is a refinement of [0002-courseware-page-decisions.md](0002-courseware-page-decisions.md). The fundamental layers remain the same, but this document tries to better clarify the boundaries and path forward for these layers. We're not making these layers completely swappable/pluggable now, but we should separate the data access in a way that allows for that in the future.
## Background
We currently make four primary requests to the LMS when rendering courseware instructional content:
4. Unit: `/xblock/{unitBlockUsageKey}` (rendered in an iframe)
There is a significant amount of overlap between the Course Blocks API and the others at the moment, since Course Blocks takes a static snapshot of the entire tree of course content at once. There are a few problems with the current arrangement:
* It's slow and complex. The Course Blocks API can be difficult to maintain and reason about, and trickier to optimize.
* Assuming that all course structures are the same makes it difficult to support other content types, like LabXchange Learning Pathways or adaptive content.
* The overlap between Course Blocks and the other APIs means that there can be conflicts about the state.
## Motivating Vision
We have seen a desire to extend or enhance the courseware experience in various ways:
Learning Context Navigation
* Allowing for shorter, human-readable URLs in courseware.
* Smaller courses that do not need the current navigational hierarchy.
* LabXchange pathways.
Sequence Navigation
* Adaptive content, where the full list of units is not known up front.
* More limited navigation, where content is pushed linearly, without the ability to jump ahead.
* Different layouts for content browsing.
Unit Rendering
* Use of QTI content (currently serviced by cc2olx conversion).
* Desire to experiment with a next-gen version of XBlock.
* Use of entirely LTI units.
The idea would be to insulate each layer from the layers above and below it. Sequence rendering shouldn't be affected by whether or not it's in a two level hierarchy (Course → Section → Sequence), or a flat one (Course → Sequence). Learning Context Navigation should be able to reference Sequences without caring if a Sequence is an adaptive one or not. Sequences should be able to have a common interface to call Unit iframes, whether those Units are rendering XBlocks or QTI content.
Note that supporting these types of course structures would require downstream changes in other systems as well (e.g. analytics).
## Next Step: Removing use of the Course Blocks API.
The next step in this process is to remove the call to the Course Blocks API, and split its responsibilities across just the existing Learning Sequences Outline and Sequence Metadata APIs. This will involve at least a couple of steps.
### Complete rollout of Learning Sequences Outline calls.
We're currently in a transitional state between these APIs where the Learning Sequences Outline calls are only rolled out on a small handful of courses.
### Shift Sequence and Unit metadata to only come from Sequence Metadata API.
We currently pull this information from both Course Blocks and the Sequence Metadata API. We can consolidate on just the Sequence Metadata API. There is also server side optimization that can be done with the Sequence Metadata API calls as part of this work.
defaultMessage="Course starts {timeRemaining} at {courseStartTime}."
description="Used when the time remaining is less than a day away."
values={{
courseStartTime:(
<FormattedTime
key="courseStartTime"
day="numeric"
month="short"
year="numeric"
timeZoneName="short"
value={startDate}
{...timezoneFormatArgs}
/>
),
timeRemaining,
}}
/>
</Alert>
);
}
return(
<Alertvariant="info"icon={Info}>
<strong>
<FormattedMessage
id="learning.outline.alert.end.long"
defaultMessage="Course starts {timeRemaining} on {courseStartDate}."
description="Used when the time remaining is more than a day away."
values={{
courseStartDate:(
<FormattedDate
key="courseStartDate"
day="numeric"
month="short"
year="numeric"
value={startDate}
{...timezoneFormatArgs}
/>
),
timeRemaining,
}}
/>
</strong>
<br/>
<FormattedMessage
id="learning.outline.alert.end.calendar"
defaultMessage="Don’t forget to add a calendar reminder!"
description="It's just a recommendation for learners to set a reminder for the course starting date and is shown when the course starting date is more than a day. "
defaultMessage="This learner does not yet have access to this course. The course starts on {date}."
description="It's a warning that is shown to course author when being masqueraded as learner, while the course hasn't started for the real learner yet."
defaultMessage:'You must be enrolled in the course to see course content.',
description:'Message shown to indicate that a user needs to enroll in a course prior to viewing the course content. Shown as part of an alert, along with a link to enroll.',
},
staffAlert:{
id:'learning.staff.enrollment.alert',
defaultMessage:'You are viewing this course as staff, and are not enrolled.',
description:'Message shown to indicate that a user is not enrolled, but is able to view a course anyway because they are staff. Shown as part of an alert, along with a link to enroll.',
},
enrollNowInline:{
id:'learning.enrollment.enrollNow.Inline',
defaultMessage:'Enroll now',
description:'A link prompting the user to click on it to enroll in the currently viewed course.'
+'This text is meant to be used at the beginning of a sentence (example: Enroll now to view course content.)',
},
enrollNowSentence:{
id:'learning.enrollment.enrollNow.Sentence',
defaultMessage:'Enroll now.',
description:'A link prompting the user to click on it to enroll in the currently viewed course.',
},
success:{
id:'learning.enrollment.success',
defaultMessage:"You've successfully enrolled in this course!",
description:'A message telling the user that their course enrollment was successful.',
defaultMessage:'To access course materials, you must score {entranceExamMinimumScorePct}% or higher on this exam. Your current score is {entranceExamCurrentScore}%.',
},
entranceExamTextPassed:{
id:'learn.sequence.entranceExamTextPassed',
defaultMessage:'Your score is {entranceExamCurrentScore}%. You have passed the entrance exam.',
// Time offset computation should move down into the HttpClient wrapper to maintain a global time correction reference
// Requires 'Access-Control-Expose-Headers: Date' on the server response per https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#access-control-expose-headers
lettimeOffsetMillis=0;
if(headerDate!==undefined){
constheaderTime=Date.parse(headerDate);
constroundTripMillis=requestTime-responseTime;
constlocalTime=responseTime-(roundTripMillis/2);// Roughly compensate for transit time
awaitwaitFor(()=>expect(screen.getByText('We’ve built a suggested schedule to help you stay on track. But don’t worry—it’s flexible so you can learn at your own pace.')).toBeInTheDocument());
awaitwaitFor(()=>expect(screen.getByText('You are auditing this course, which means that you are unable to participate in graded assignments. To complete graded assignments as part of this course, you can upgrade today.')).toBeInTheDocument());
awaitwaitFor(()=>expect(screen.getByText('It looks like you missed some important deadlines based on our suggested schedule.')).toBeInTheDocument());
expect(screen.getByText('To keep yourself on track, you can update this schedule and shift the past due assignments into the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates.')).toBeInTheDocument();
expect(screen.getByRole('button',{name:'Upgrade to shift due dates'})).toBeInTheDocument();
awaitwaitFor(()=>expect(screen.getByText('It looks like you missed some important deadlines based on our suggested schedule.')).toBeInTheDocument());
expect(screen.getByText('To keep yourself on track, you can update this schedule and shift the past due assignments into the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates.')).toBeInTheDocument();
expect(screen.getByRole('button',{name:'Shift due dates'})).toBeInTheDocument();
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
