New MFE: Learner Dashboard

[jmakowski1123]

Product scope

• The new Learner Home has many of the same features of the old dashboard, with some extended functionality and performance enhancements.
• This release brings the learner home into our current MFE architecture, and will enable much faster experimentation on the learner homepage moving forward.
• The home page is now built with Paragon, allowing it to be easily styled with brand colors / components in both an edX and Open edX context.
• Course sorting / filtering (NEW)
  • An added behavior over the old course dashboard. Clicking the “Refine” button opens options to filter by course status or sort either by most recent enrollment (default) or title.
• Pagination (NEW)
  • All of a user’s courses and entitlements are fetched on page load. To make the page manageable, we paginate that list, showing 25 courses at a time. To view other courses, a user should page through their list of courses using the pagination controls at the bottom of the course list.
• Course Discovery and Recommended Courses are now enabled in a sidebar
• See a full list of changes and more details here

What features does this new MFE deprecate?

• The Learner Home project replaces the existing course dashboard (https://courses.edx.org/dashboard) with a new Learner Home page.

Community release information

Make sure this MFE follows all the community requirements.

• Is this feature enabled by default? Is it currently enabled?
• Is this feature internationalized?
• Is this feature theme-able?
• What's the production status as of the date of the code cut-off?

Code owner

Primary contact: Vanguards (Arbisoft);

Documentation

• Link to Product blog?
• Link to "How to enable"
• Link to any other relevant technical documentation

Links

• Related forum thread

Tasks

• fix: force LMS url to reload when changed frontend-app-learner-dashboard#136
• Create openedx-tutor-plugins repository public-engineering#194
• feat: Add a plugin for the Learner Dashboard MFE openedx-tutor-plugins#4
• Update frontend-platform to 5.5.1+ (See #220)
• Brand logo URL is hardcoded and bypasses URL overrides for custom branding frontend-app-learner-dashboard#176
• Replace edx.org brand with openedx brand in dependencies frontend-app-learner-dashboard#183
• Uncaught TypeError if undocumented environment variable is unset frontend-app-learner-dashboard#210
• Graduate the plugin to production status (i.e., inclusion in tutor-mfe) by Quince
• Authenticated user dropdown personal dashboard redirects to hardcoded edX reference frontend-app-learner-dashboard#235

PRs

• fix: get brand logo file path from env frontend-app-learner-dashboard#205
• chore: bump frontend-platform (#216) frontend-app-learner-dashboard#220
• feat: babel-plugin-react-intl to babel-plugin-formatjs migration frontend-app-learner-dashboard#209
• fix: replace hardcoded strings and properly define i18n messages frontend-app-learner-dashboard#219
• feat: allow LOGO_URL runtime configuration frontend-app-learner-dashboard#238
• fix: use getConfig not process.env frontend-app-learner-dashboard#232
• fix: MailToLink to account for no emails frontend-app-learner-dashboard#230
• refactor: hide switch dashboard option behind flag frontend-app-learner-dashboard#237
• [Quince backport] Sync with master frontend-app-learner-dashboard#243

[github-actions]

Thanks for your submission, @openedx/open-edx-project-managers will review shortly.

[Daniel-hershel]

Product scope and features included

What's included?

• The new Learner Home has many of the same features of the old dashboard, with some extended functionality and performance enhancements.
• This release brings the learner home into our current MFE architecture, and will enable much faster experimentation on the learner homepage moving forward.
• The home page is now built with Paragon, allowing it to be easily styled with brand colors / components in both an edX and Open edX context.
• Course sorting / filtering (NEW)
  • An added behavior over the old course dashboard. Clicking the “Refine” button opens options to filter by course status or sort either by most recent enrollment (default) or title.
• Pagination (NEW)
  • All of a user’s courses and entitlements are fetched on page load. To make the page manageable, we paginate that list, showing 25 courses at a time. To view other courses, a user should page through their list of courses using the pagination controls at the bottom of the course list.
• Course Discovery and Recommended Courses are now enabled in a sidebar
• See a full list of changes and more details here

What features does this new MFE deprecate?

• The Learner Home project replaces the existing course dashboard (https://courses.edx.org/dashboard) with a new Learner Home page.

Community release information

Product-ready details:
Is this feature enabled by default? Is it currently enabled?
Yes and Yes
Is this feature internationalized?
Yes
Is this feature theme-able?
Yes
What's the production status as of the date of the code cut-off?
In production on edx.org
Primary contact: Daniel Silber-Baker Aurora Team
Documentation details:
Link to Product blog: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3584589831/2U+New+Learner+Home+Page
Link to "How to enable":
https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3584589831/2U+New+Learner+Home+Page#Developer-FAQ

[ghassanmas]

Related PR so it can be included in tutor/open-release

• fix: force LMS url to reload when changed frontend-app-learner-dashboard#136

[michaelwheeler]

Since this is intended to deprecate the existing course dashboard, what mechanism will be made available to replace the DashboardRenderStarted filter (and its related exceptions)?

https://github.com/openedx/openedx-filters/blob/b02caa997e80c82a15bca9df182c480d89b612c8/openedx_filters/learning/filters.py#L425-L495

[arbrandes]

@michaelwheeler

what mechanism will be made available to replace the DashboardRenderStarted filter (and its related exceptions)?

Good question. As far as I know, there aren't examples of MFEs integrating into the hooks framework. This might be a good case study for it. Or, to make things simpler, a study in whatever people use DashboardRenderStarted for, and how such mechanisms could be implemented in the Dashboard MFE. Do you happen to have examples in mind?

[michaelwheeler]

At the University of Michigan we are about to deploy an extension that uses DashboardRenderStarted.RedirectToPage to redirect users to a custom policy acknowledgment form if they have not yet submitted an acknowledgement.

As for other examples, it looks like the filter was added in openedx/openedx-filters#22. Presumably it was added with some use cases in mind, so perhaps @mariajgrimaldi would have some insight?

[mariajgrimaldi]

Hi there folks.

Filters interacting with the frontend were a temporary solution for frontend extensibility in legacy applications. Now, I believe we should advocate for a replacement in MFEs, although we haven't worked in that direction yet. I hope we can do it soon since much movement lately surrounds MFEs' extensibility.

As for other examples of this kind of filter, we've used similar filters (with RedirectToPage exceptions) internally for redirecting to other pages for non-authorized users., eg. here we redirect users from /maintanance/force_course_publish to Studio Home to avoid publishing courses from there.

[NotoriousMKD]

Will (or could) the issue related to branding include the ability to hide items on the learner dashboard including: Related Programs, Recommendations for You, Upgrade, Grade Required to Pass the Course, and Social Media Buttons?
Ideally, for our on campus use at MIT, we would not show students any of that.

[arbrandes]

@NotoriousMKD, most of that will come about via the upcoming pluggability refactor. We're aiming for Redwood.